/*------------------------------------------------------------------
Table of content
-------------------
1. Start Header Area
2. slider area start
3. features area css start
4. hot deals area css start
5. product
6. categories area
7. testimonial
8. blog
9. shop grid view
10. shop list view
11. product details
12. checkout
13. cart
14. wishlist
15. my account
16. compare
17. login register
18. about us
19. contact us
20. banner
21. modal
22. sidebar
23. footer
-------------------------------------------------------------------*/
/*------ Typography Style Start ------*/
/* body {
    color: #555555;
    line-height: 1.7;
    font-size: 14px;
    font-weight: 400;
    font-family: "Lato", sans-serif;
  } */
  
  a {
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    text-decoration: none;
  }
  a:hover, a:focus {
    outline: none;
    text-decoration: none;
  }
  
  /*p {*/
  /*  margin-bottom: 8px;*/
  /*}*/
  /*p:last-child {*/
  /*  margin-bottom: 0;*/
  /*}*/
  

  /*.h1, .h2, .h3, .h4, .h5, .h6 {*/
  /*  margin: 0;*/
  /*  line-height: 1.5;*/
  /*}*/
  
  /*h1, .h1 {*/
  /*  font-size: 36px;*/
  /*}*/
  
  /*h2, .h2 {*/
  /*  font-size: 30px;*/
  /*}*/
  
  /*h3, .h3 {*/
  /*  font-size: 24px;*/
  /*}*/
  
  /*h4, .h4 {*/
  /*  font-size: 20px;*/
  /*}*/
  
  /*h5, .h5 {*/
  /*  font-size: 18px;*/
  /*}*/
  
  /*h6, .h6 {*/
  /*  font-size: 16px;*/
  /*}*/
  
  ul {
    margin: 0;
    padding: 0;
  }
  /*ul li {*/
  /*  list-style: none;*/
  /*}*/
  
  strong,
  b {
    font-weight: 700;
  }
  
  figure {
    margin: 0;
  }
  
  img {
    max-width: 100%;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
  }
  
  .bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .btn,
  button {
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    background-color: transparent;
  }
  .btn:active, .btn:focus,
  button:active,
  button:focus {
    outline: none;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  

  
  /* ----tab problem fix css ----*/

  /* ----scroll to top css start ----*/
  .scroll-top {
    bottom: 50px;
    cursor: pointer;
    height: 50px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 50px;
    z-index: 9999;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    border-radius: 50%;
    background-color: #c29958;
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
  }
  @media only screen and (max-width: 767.98px) {
    .scroll-top {
      display: none;
    }
  }
  .scroll-top i {
    line-height: 50px;
    color: #fff;
    font-size: 25px;
  }
  .scroll-top.not-visible {
    bottom: -50px;
    visibility: hidden;
    opacity: 0;
  }
  .scroll-top:hover {
    background-color: #222222;
  }
  
  /* ----scroll to top css end ----*/

 
  /*------- short classes start -------*/

  
  /*------- short classes end -------*/
  /*----------- header top area start -----------*/
 

  .logo {
    width: 250px;
    /* height: 100px; */
}
.header-top-settings ul li img {
    width: 20px;
    height: 20px;
}

  .header-top {
    padding: 10px 0;
    /* border-bottom: 1px solid #efefef; */
  }
  
  .header-top-settings ul li {
    color: #555555;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    margin-left: 40px;
    position: relative;
    margin-left: 20px;
    padding-left: 20px;
  }
  .header-top-settings ul li:before {
    top: 50%;
    left: 0;
    width: 1px;
    height: 15px;
    content: "";
    position: absolute;
    background-color: #efefef;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .header-top-settings ul li:first-child {
    padding-left: 0;
    margin-left: 0;
  }
  .header-top-settings ul li:first-child:before {
    display: none;
  }
  .header-top-settings ul li .dropdown-list {
    top: 100%;
    right: 0;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
            transform: translateY(30px);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    padding: 15px 15px 20px;
    width: 150px;
    z-index: 9;
    text-align: left;
    background-color: #fff;
    pointer-events: none;
    border: 1px solid #efefef;
  }
  .header-top-settings ul li .dropdown-list li {
    margin-left: 0;
    padding: 0;
  }
  .header-top-settings ul li .dropdown-list li a {
    color: #555555;
    font-size: 13px;
    display: block;
    padding: 5px 0 3px;
    text-transform: capitalize;
  }
  .header-top-settings ul li .dropdown-list li a:hover {
    color: #c29958;
  }
  .header-top-settings ul li .dropdown-list li a img {
    vertical-align: inherit;
  }
  .header-top-settings ul li .dropdown-list li:before {
    display: none;
  }
  .header-top-settings ul li:hover .dropdown-list {
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
  
  .welcome-message p {
    color: #555555;
    font-size: 14px;
    line-height: 1;
  }
  
  /*----------- header top area end -----------*/
  /*---------- header mini cart start ----------*/
  .header-configure-area {
    padding-right: 10px;
  }
  .header-configure-area ul li {
    display: inline-block;
    margin-left: 25px;
    line-height: 1;
  }
  @media only screen and (min-width: 1200px) and (max-width: 1499px) {
    .header-configure-area ul li {
      margin-left: 14px;
    }
  }
  .header-configure-area ul li a {
    font-size: 26px;
    line-height: 1;
    color: #222222;
    position: relative;
  }
  .header-configure-area ul li a .notification {
    top: -8px;
    right: -6px;
    position: absolute;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    font-size: 10px;
    color: #fff;
    border-radius: 50%;
    background-color: #c29958;
  }
  .header-configure-area ul li a:hover {
    color: #c29958;
  }
  .header-configure-area ul li:first-child {
    margin-left: 0;
  }
  .header-configure-area ul li.user-hover {
    position: relative;
  }
  .header-configure-area ul li.user-hover .dropdown-list {
    position: absolute;
    top: 100%;
    right: 0;
    width: 150px;
    padding: 20px;
    background-color: #fff;
    z-index: 11;
    -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
            transform: translateY(30px);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    opacity: 0;
    visibility: hidden;
    border: 1px solid #efefef;
  }
  .header-configure-area ul li.user-hover .dropdown-list li {
    display: block;
    margin-left: 0;
  }
  .header-configure-area ul li.user-hover .dropdown-list li a {
    color: #555555;
    font-size: 13px;
    line-height: 1;
    display: block;
    padding: 8px 0;
    text-transform: capitalize;
  }
  .header-configure-area ul li.user-hover .dropdown-list li a:hover {
    color: #c29958;
  }
  .header-configure-area ul li.user-hover:hover .dropdown-list {
    opacity: 1;
    visibility: visible;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
  
  /*----------- header mini cart area end -----------*/
  /*------- header search area start -------*/
  .header-search-container {
    position: relative;
  }
  .header-search-box {
    position: relative;
  }
  .header-search-box:hover .header-search-btn {
    color: #c29958;
  }
  .header-search-btn {
    font-size: 25px;
    line-height: 1;
    left: 10px;
    top: 50%;
    width: 30px;
    position: absolute;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .header-search-field {
    border: none;
    background-color: #f7f7f7;
    border-radius: 30px;
    padding: 10px 20px 10px 50px;
    width: 100%;
  }
  
  .search-trigger {
    font-size: 26px;
    color: #222222;
  }
  
  .search-box-open {
    top: 100%;
    right: 0;
    width: 300px;
    position: absolute;
    z-index: 5;
    display: block !important;
  }
  .search-box-open .header-search-field {
    height: 44px;
    border: 1px solid #ddd;
  }
  
  /*------- header search area end -------*/
  /*-------- header social link start --------*/
  .header-social-link a {
    color: #777777;
    font-size: 17px;
    display: inline-block;
    line-height: 1;
    margin-right: 20px;
  }
  .header-social-link a:last-child {
    margin-right: 0;
  }
  .header-social-link a:hover {
    color: #c29958;
  }
  
  /*-------- header social link end --------*/
  /*---------- main menu style start ---------*/
  .main-menu ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            /* justify-content: end; */
            /* padding-left: 50px; */
  }
  nav.desktop-menu {
    padding-left: 50px;
}
  .main-menu ul li {
    position: relative;
  }
  .main-menu ul li a {
    color: #222222;
    font-size: 17px;
    line-height: 24px;
    padding-right: 49px;
    font-weight: 600;
    display: block;
    text-transform: capitalize;
    font-family: 'Poppins', sans-serif;
}
  .main-menu ul li a i {
    font-size: 14px;
    padding: 0 3px;
  }
  .main-menu ul li:first-child a {
    padding-left: 0;
  }
  .main-menu ul li:hover > a, .main-menu ul li.active > a {
    color: #bd3c98;
  }
  .main-menu ul li ul.dropdown {
    top: calc(100% - 1px);
    left: 0;
    /* margin-top: 5px; */
    width: 250px;
    position: absolute;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
    pointer-events: none;
    -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
            transform: translateY(20px);
    border: 1px solid #efefef;
  }
  .main-menu ul li ul.dropdown li {
    margin-right: 0;
    border-right: none;
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
  }
  .main-menu ul li ul.dropdown li a {
    color: #555555;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 20px;
    text-transform: capitalize;
    position: relative;
    border-bottom: 1px dashed #efefef;
    z-index: 1;
  }
  .main-menu ul li ul.dropdown li a:before {
    width: 10px;
    height: 1px;
    left: 20px;
    top: 50%;
    content: " ";
    position: absolute;
    background-color: #c29958;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    z-index: -1;
  }
  .main-menu ul li ul.dropdown li a i {
    float: right;
    padding-top: 5px;
  }
  .main-menu ul li ul.dropdown li:hover > a {
    color: #c29958;
    background-color: #fff;
    padding-left: 35px;
  }
  .main-menu ul li ul.dropdown li:hover > a:before {
    opacity: 1;
    visibility: visible;
  }
  .main-menu ul li ul.dropdown li:hover > ul.dropdown {
    top: 0;
    opacity: 1;
    visibility: visible;
  }
  .main-menu ul li ul.dropdown li ul.dropdown {
    top: 100%;
    left: 100%;
    position: absolute;
    width: 250px;
    opacity: 0;
    visibility: hidden;
  }
  .main-menu ul li ul.dropdown li:last-child a {
    border-bottom: none;
  }
  .main-menu ul li ul.megamenu {
    width: 100%;
    max-width: 1110px;
    padding: 30px;
    left: 50%;
    -webkit-transform: translate(-50%, 20px);
        -ms-transform: translate(-50%, 20px);
            transform: translate(-50%, 20px);
  }
  @media only screen and (min-width: 992px) and (max-width: 1199px) {
    .main-menu ul li ul.megamenu {
      max-width: 100%;
    }
  }
  .main-menu ul li ul.megamenu li {
    -webkit-flex-basis: 25%;
        -ms-flex-preferred-size: 25%;
            flex-basis: 25%;
  }
  .main-menu ul li ul.megamenu li.mega-title {
    color: #222222;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
  }
  .main-menu ul li ul.megamenu li.mega-title span {
    position: relative;
    margin-bottom: 15px;
    display: inline-block;
  }
  .main-menu ul li ul.megamenu li.mega-title span:before, .main-menu ul li ul.megamenu li.mega-title span:after {
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 2px;
    content: " ";
    position: absolute;
    background-color: #ebebeb;
  }
  .main-menu ul li ul.megamenu li.mega-title span:after {
    width: 50%;
    background-color: #c29958;
  }
  .main-menu ul li ul.megamenu li a {
    padding: 6px 0;
    border-bottom: none;
  }
  .main-menu ul li ul.megamenu li a:before {
    left: 0;
  }
  .main-menu ul li ul.megamenu li ul li {
    -webkit-flex-basis: 100%;
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
  }
  .main-menu ul li ul.megamenu li:hover > a {
    color: #c29958;
    padding-left: 15px;
  }
  .main-menu ul li ul.megamenu li.megamenu-banners {
    -webkit-flex-basis: 50%;
        -ms-flex-preferred-size: 50%;
            flex-basis: 50%;
    margin-top: 25px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    padding-right: 10px;
  }
  .main-menu ul li ul.megamenu li.megamenu-banners img {
    width: 100%;
  }
  .main-menu ul li ul.megamenu li.megamenu-banners a:before {
    display: none;
  }
  .main-menu ul li ul.megamenu li.megamenu-banners:last-child {
    padding-right: 0;
    padding-left: 10px;
  }
  .main-menu ul li ul.megamenu li.megamenu-banners:hover {
    opacity: 0.6;
  }
  .main-menu ul li ul.megamenu li.megamenu-banners:hover a {
    padding-left: 0 !important;
  }
  .main-menu ul li:hover ul.dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: visible;
    -webkit-transform: translate(0);
        -ms-transform: translate(0);
            transform: translate(0);
  }
  .main-menu ul li:hover ul.megamenu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
  .main-menu ul.header-style-4 > li a {
    padding: 25px 15px;
  }
  .main-menu ul.header-style-4 > li:first-child > a {
    padding-left: 0;
  }
  
  /*---------- main menu style end ---------*/
  /*------ sticky menu style start ------*/
  .header-transparent {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    position: absolute;
    z-index: 1;
  }
  
  .sticky.is-sticky {
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 9;
    background-color: #fff;
    -webkit-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2);
    -webkit-animation: 900ms cubic-bezier(0.2, 1, 0.22, 1) 0s normal none 1 running fadeInDown;
            animation: 900ms cubic-bezier(0.2, 1, 0.22, 1) 0s normal none 1 running fadeInDown;
  }
  @media only screen and (min-width: 1600px) {
    .sticky.is-sticky {
      padding: 0 85px;
    }
  }
  .sticky.is-sticky .main-menu li a {
    padding: 20px 15px;
  }
  .sticky.is-sticky .main-menu li:first-child a {
    padding-left: 0;
  }
  .sticky.is-sticky .main-menu li .dropdown li a {
    padding: 10px 20px;
  }
  .sticky.is-sticky .main-menu li .dropdown li:hover > a {
    padding-left: 35px;
  }
  .sticky.is-sticky .main-menu li .megamenu li a {
    padding: 6px 0;
  }
  .sticky.is-sticky .main-menu li .megamenu li:hover > a {
    padding-left: 15px;
  }
  
  /*------ sticky menu style end ------*/
  /*------- Buttons Style here -------*/
  .btn {
    font-size: 14px;
    color: #222222;
    line-height: 1;
  }
  .btn-text {
    font-size: 16px;
    position: relative;
    pointer-events: visible;
    text-transform: capitalize;
  }
  .btn-text:before {
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    position: absolute;
    background-color: #222222;
  }
  .btn-text:hover {
    color: #c29958;
  }
  .btn-text:hover:before {
    background-color: #c29958;
  }
  .btn-cart {
    padding: 12px 25px;
    background-color: #fff;
    border-radius: 30px;
    text-transform: capitalize;
    -webkit-box-shadow: 0 2px 1px 0.5px rgba(0, 0, 0, 0.05);
            box-shadow: 0 2px 1px 0.5px rgba(0, 0, 0, 0.05);
  }
  .btn-cart:hover {
    color: #fff;
    background-color: #c29958;
  }
  .btn-cart2 {
    height: 40px;
    color: #fff;
    line-height: 40px;
    border-radius: 50px;
    padding: 0 25px;
    background-color: #c29958;
  }
  .btn-cart2:hover {
    color: #fff;
    background-color: #222222;
  }
  .btn-sqr {
    color: #fff;
    font-size: 15px;
    border-radius: 0;
    background-color: #c29958;
    padding: 12px 25px;
  }
  .btn-sqr:hover {
    color: #fff;
    background-color: #222222;
  }
  
  /*----- mobile menu start -----*/
  .mobile-header {
    padding: 10px 0;
  }
  
  .mobile-header-top {
    border-bottom: 1px solid #efefef;
  }
  .mobile-header-top .header-top-settings {
    float: none;
  }
  
  .mobile-logo {
    max-width: 140px;
    width: 100%;
  }
  
  .mobile-main-header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .mobile-main-header .mobile-menu-toggler {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .mobile-main-header .mobile-menu-toggler .mini-cart-wrap {
    line-height: 1;
  }
  .mobile-main-header .mobile-menu-toggler .mini-cart-wrap a {
    font-size: 25px;
    line-height: 1;
    color: #222222;
    position: relative;
  }
  .mobile-main-header .mobile-menu-toggler .mini-cart-wrap a:hover {
    color: #c29958;
  }
  .mobile-main-header .mobile-menu-toggler .mini-cart-wrap .notification {
    font-size: 13px;
    color: #fff;
    width: 16px;
    height: 16px;
    line-height: 16px;
    border-radius: 50%;
    text-align: center;
    font-weight: 600;
    right: -4px;
    top: -4px;
    position: absolute;
    background-color: #c29958;
  }
  .mobile-main-header .mobile-menu-toggler .mobile-menu-btn {
    margin-left: 25px;
  }
  .mobile-main-header .mobile-menu-toggler .mobile-menu-btn span {
    width: 25px;
    height: 2px;
    display: block;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    background-color: #222222;
    -webkit-transform-origin: left;
        -ms-transform-origin: left;
            transform-origin: left;
  }
  .mobile-main-header .mobile-menu-toggler .mobile-menu-btn span:nth-child(2), .mobile-main-header .mobile-menu-toggler .mobile-menu-btn span:nth-child(3) {
    margin-top: 5px;
  }
  .mobile-main-header .mobile-menu-toggler .mobile-menu-btn:hover span {
    background-color: #c29958;
  }
  .mobile-main-header .mobile-menu-toggler .mobile-menu-btn:hover span:nth-child(1), .mobile-main-header .mobile-menu-toggler .mobile-menu-btn:hover span:nth-child(3) {
    width: 20px;
  }
  
  .mobile-navigation {
    overflow: hidden;
    max-height: 100%;
  }
  .mobile-navigation nav {
    height: 100%;
  }
  
  .mobile-menu {
    margin-top: 30px;
    height: 100%;
    overflow: auto;
    padding-right: 30px;
    margin-right: -30px;
  }
  @media only screen and (max-width: 479.98px) {
    .mobile-menu {
      margin-top: 15px;
    }
  }
  .mobile-menu li > a {
    font-size: 15px;
    color: #222222;
    text-transform: capitalize;
    line-height: 18px;
    position: relative;
    display: inline-block;
    padding: 10px 0;
  }
  .mobile-menu li > a:hover {
    color: #c29958;
  }
  .mobile-menu li ul li {
    border: none;
  }
  .mobile-menu li ul li a {
    font-size: 14px;
    text-transform: capitalize;
    padding: 10px 0 8px;
  }
  .mobile-menu li.menu-item-has-children {
    display: block;
    position: relative;
  }
  .mobile-menu li.menu-item-has-children .dropdown {
    padding-left: 15px;
  }
  .mobile-menu li.menu-item-has-children .menu-expand {
    line-height: 50;
    top: -5px;
    left: 95%;
    width: 30px;
    position: absolute;
    height: 50px;
    text-align: center;
    cursor: pointer;
  }
  .mobile-menu li.menu-item-has-children .menu-expand i {
    display: block;
    position: relative;
    width: 10px;
    margin-top: 25px;
    border-bottom: 1px solid #222222;
    -webkit-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    transition: all 250ms ease-out;
  }
  .mobile-menu li.menu-item-has-children .menu-expand i:before {
    top: 0;
    width: 100%;
    content: "";
    display: block;
    position: absolute;
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
    border-bottom: 1px solid #222222;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
  }
  .mobile-menu li.menu-item-has-children.active > .menu-expand i:before {
    -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
            transform: rotate(0);
  }
  
  /*----- mobile menu end -----*/
  /*------ offcanvas widget area start ------*/
  .offcanvas-widget-area {
    margin-top: auto;
    padding-bottom: 30px;
  }
  @media only screen and (max-width: 479.98px) {
    .offcanvas-widget-area {
      padding-bottom: 0;
    }
  }
  
  .off-canvas-contact-widget li {
    color: #555555;
    font-size: 15px;
    margin-bottom: 5px;
    display: flex;
    align-items: baseline;
  }
  .off-canvas-contact-widget li i {
    width: 20px;
  }
  .off-canvas-contact-widget li a {
    color: #555555;
  }
  .off-canvas-contact-widget li a:hover {
    color: #c29958;
  }
  
  .off-canvas-social-widget {
    margin-top: 20px;
  }
  .off-canvas-social-widget a {
    color: #555555;
    font-size: 18px;
    display: inline-block;
    margin-right: 15px;
  }
  .off-canvas-social-widget a:hover {
    color: #c29958;
  }
  
  /*------ offcanvas widget area end ------*/
  .off-canvas-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    z-index: 9999;
  }
  .off-canvas-wrapper.open {
    opacity: 1;
    visibility: visible;
  }
  .off-canvas-wrapper.open .off-canvas-inner-content {
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
  .off-canvas-wrapper .off-canvas-overlay {
    background-color: rgba(0, 0, 0, 0.4);
    content: "";
    cursor: url("../img/icon/cancel.png"), auto;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
  }
  .off-canvas-wrapper .off-canvas-inner-content {
    background-color: #fff;
    width: 300px;
    padding: 20px;
    height: 100%;
    position: relative;
    -webkit-transform: translateX(calc(-100% - 50px));
        -ms-transform: translateX(calc(-100% - 50px));
            transform: translateX(calc(-100% - 50px));
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
  }
  @media only screen and (max-width: 479.98px) {
    .off-canvas-wrapper .off-canvas-inner-content {
      width: 260px;
      padding: 15px;
    }
  }
  .off-canvas-wrapper .btn-close-off-canvas {
    top: 0;
    left: 100%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    color: #fff;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    background-color: #c29958;
    display:none;
  }
  .off-canvas-wrapper .btn-close-off-canvas i {
    font-size: 40px;
    -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
            transform: rotate(0);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    display: block;
    line-height: 40px;
  }
  .off-canvas-wrapper .btn-close-off-canvas:hover i {
    -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  .off-canvas-wrapper .off-canvas-inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-left: auto;
    height: 100%;
  }
  
  .search-box-offcanvas form {
    position: relative;
  }
  .search-box-offcanvas form input {
    color: #666;
    font-size: 13px;
    width: 100%;
    height: 40px;
    border: none;
    padding: 0 40px 0 10px;
    background-color: #f2f2f2;
  }
  .search-box-offcanvas form .search-btn {
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    line-height: 42px;
    font-size: 20px;
    color: #222222;
    position: absolute;
  }
  .search-box-offcanvas form .search-btn:hover {
    color: #c29958;
  }
  
  /*------- mobile top bar settings start -------*/
  .mobile-settings {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #efefef;
  }
  .mobile-settings li {
    margin-bottom: 5px;
  }
  .mobile-settings .nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .mobile-settings .nav .mobile-top-dropdown .dropdown-toggle {
    font-size: 14px;
    color: #555555;
    cursor: pointer;
  }
  .mobile-settings .nav .mobile-top-dropdown .dropdown-toggle i {
    font-size: 12px;
    padding-left: 5px;
    vertical-align: middle;
  }
  .mobile-settings .nav .mobile-top-dropdown .dropdown-toggle:hover {
    color: #c29958;
  }
  .mobile-settings .nav .mobile-top-dropdown .dropdown-toggle:after {
    display: none;
  }
  .mobile-settings .nav .mobile-top-dropdown .dropdown-menu {
    padding: 0;
    border-color: #efefef;
    -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
            transform: translateY(30px);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
  }
  .mobile-settings .nav .mobile-top-dropdown .dropdown-menu.show {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
  .mobile-settings .nav .mobile-top-dropdown .dropdown-menu .dropdown-item {
    font-size: 13px;
    color: #555555;
    padding: 6px 15px;
  }
  
  /*------- mobile top bar settings end -------*/