* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

a,
a:hover,
a:focus,
a:visited,
a:active {
  text-decoration: none;
}

p,
ul,
li {
  padding: 0;
  margin: 0;
}

body {
  font-family: "Lato", sans-serif;
}



/* header */
header {
  position: unset;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
}


header .header-top {background-color: #ffd29a; padding: 3px 0px;}
header .header-top .top-info li, header .header-top .top-info li a {color: #022e22; font-size: 14px;}
header .header-top .top-info li:last-child a {display: inline-block; height: 35px; width: 35px; border-radius: 50px; line-height: 35px;
text-align: center; background-color: #022e22; color: #fff; border: 1px solid #022e22; transition: .5s;}

header .header-bottom{padding: 3px 0px;}
header .header-bottom .bottom-info li:first-child{display: none;}
header .header-bottom .bottom-info li img{width: 15%;}
header .header-bottom .bottom-info li .btn {display: inline-block; padding: 10px 18px; background-color: transparent; color: #022e22; border-radius: 3px;
transition: .5s; border: 1px solid #022e22; position: relative; transition: .5s; z-index: 1;}
header .header-bottom .bottom-info li .btn::before {position: absolute; content: ''; top: 0px; left: 0px; width: 0px; height: 100%; transition: .5s;
background-color: #022e22; z-index: -1;}
header .header-bottom .bottom-info li .btn:hover:before {width: 100%;}
header .header-bottom .bottom-info li .btn:hover {color: #ffffff;}

header .headermn{padding: 10px 0px; background-color: #022e22;}
header .headermn .navbar .navbar-brand {width: 9%; display: none;}
header .headermn .navbar .navbar-brand img {width: 100%;}
header .nav-link {color: #ffd29a; font-size: 13px; font-weight: 500; transition: .5s; position: relative; padding: 0px 0px !important;
text-transform: uppercase;}
header .nav-link::after {content: ''; background-color: #ffd29a; width: 0%; height: 2px; position: absolute; bottom: -5px; left: 0; transition: .5s;
}
header .nav-link:hover::after {width: 100%;}
header .nav-link:hover, header .nav-link:focus {color: #ffd29a;}
header .navbar-nav {gap: 45px;}
header .navbar-toggler {border: none; color: #022e22; font-size: 28px; border-radius: 0;}
header .offcanvas-title img {width: 34%;}
header .navbar-nav {position: relative; align-items: center;}

.sticky {
  left: 0;
  right: 0;
  z-index: 999;
  position: fixed !important;
  top: 0px;
  animation: slideDown .5s ease-out;
  background-color: #fff;
  box-shadow: 0 0 10px #00000021;
}

.sticky .headermn .navbar .navbar-brand {width: 9%;}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }

  to {
    transform: translateY(10);
  }
}

/* header .navbar .whatsapp li a {display: inline-block; padding: 10px 20px; background-color: transparent;  color: #e56215; border-radius: 3px;
transition: .5s; border: 1px solid #e56215; position: relative; transition: .5s; z-index: 1;}
header .navbar .whatsapp li a::before {position: absolute; content: ''; top: 0px; left: 0px; width: 0px; height: 100%; transition: .5s;
background-color: #e56215; z-index: -1;}
header .navbar .whatsapp li a:hover:before {width: 100%;}
header .navbar .whatsapp li a:hover {color: #ffffff;} */



/* slider */


#slider .owl-theme .owl-dots .owl-dot {display: none;}

/* banner-section */

#banner-section{padding: 50px 20px;}
#banner-section .row{row-gap: 25px;}
#banner-section .iner{position: relative;}
#banner-section .iner .content{position: absolute; top: 35px; left: 30px;}
#banner-section .iner .imgs{overflow: hidden;}
#banner-section .iner .imgs img{width: 100%; transition: .5s;}
#banner-section .iner .imgs:hover img{transform: scale(1.1);}
#banner-section .iner .content h6{color: #606060; font-size: 16px;}
#banner-section .iner .content h4 a{display: inline-block; padding: 0px; color: #606060; font-size: 16px; transition: .5s;}
#banner-section .iner .content h4:hover a{color: #022e22;}
#banner-section .iner .content h4 a i{color: #022e22; transition: .5s;}
#banner-section .iner .content h4 a:hover i{padding-left: 10px;}
#banner-section .iner .content h5{color: #022e22; font-size: 23px; font-weight: 600;}

/* new-arrivals */

#new-arrivals{padding: 50px 20px; background-image: url(../images/accessory_strip.webp); background-position: top; background-repeat: no-repeat;}
#new-arrivals .row{row-gap: 35px;}
#new-arrivals h2{text-align: center; font-size: 35px; margin-bottom: 70px; position: relative; font-weight: 600;}
#new-arrivals h2::before {position: absolute; content: ""; background-image: url(../images/heading-shape.png); width: 174px; height: 5px; bottom: -10px; left: 50%; -webkit-transform: translatex(-50%);
transform: translatex(-50%);}
#new-arrivals .iner .imgs{overflow: hidden;}
#new-arrivals .iner .imgs img{transition: .5s;}
#new-arrivals .iner .imgs:hover img{transform: scale(1.1);}
#new-arrivals .iner .content{margin-top: 20px; text-align: center;}
#new-arrivals .iner .content h4{text-align: center; font-size: 16px; color: #022e22; margin: auto; font-weight: 600; margin-bottom: 14px; width: 80%;}
#new-arrivals .iner .content a {display: inline-block; padding: 8px 10px; background-color: transparent; color: #022e22; border-radius: 3px;
transition: .5s; border: 1px solid #022e22; position: relative; transition: .5s; z-index: 1;}
#new-arrivals .iner .content a::before {position: absolute; content: ''; top: 0px; left: 0px; width: 0px; height: 100%; transition: .5s;
background-color: #022e22; z-index: -1;}
#new-arrivals .iner .content a i{font-size: 20px;}
#new-arrivals .iner .content a:hover:before {width: 100%;}
#new-arrivals .iner .content a:hover {color: #ffffff;}

/* testimonals */

#testimonals{padding: 50px 20px; background-image: url(../images/accessory_strip.webp); background-position: top; background-repeat: no-repeat;}
#testimonals h2{text-align: center; font-size: 35px; margin-bottom: 70px; position: relative; font-weight: 600;}
#testimonals h2::before {position: absolute; content: ""; background-image: url(../images/heading-shape.png); width: 174px; height: 5px; bottom: -10px; left: 50%; -webkit-transform: translatex(-50%);
transform: translatex(-50%);}
#testimonals .iner{border: 15px; background-color: #ffffff; box-shadow: 2px 0 20px rgba(0,0,0,.06); padding: 20px 30px; text-align: center;}
#testimonals .iner .imgs {border: 2px solid #e7e7e7; margin: auto; text-align: center; transition: .5s; line-height: 93px; padding: 2px; height: 100px; width: 100px; border-radius: 50%;}
#testimonals .iner .imgs img{width: 90px; border-radius: 50%;}
#testimonals .iner .imgs:hover{border-color: #022e22;}
#testimonals .iner .content h3{font-size: 20px; font-weight: 600; font-weight: 600; margin: 15px 0px 10px;}
#testimonals .iner .content ul{justify-content: center;}
#testimonals .iner .content ul li{color: #ffc107;}
#testimonals .iner .content p{color: #606060; margin: 10px 0px 25px;}
#testimonals .iner .content h6{color: #022e22; font-weight: 600;}
#testimonals .owl-carousel .owl-stage-outer{padding: 10px;}


/* gallery */

#gallery {
  background-color: #ffffff;
  padding: 60px 0 40px;
  overflow: hidden;
  background-image: url(../images/accessory_strip.webp); background-position: top; background-repeat: no-repeat;
}

#gallery .row{row-gap: 20px;}

#gallery h2 {
  font-size: 38px;
  color: #022e22;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

#gallery h2::before {position: absolute; content: ""; background-image: url(../images/heading-shape.png); width: 174px; height: 5px; bottom: -10px; left: 50%; -webkit-transform: translatex(-50%);
  transform: translatex(-50%);}

#gallery .img-wrapper {
  position: relative;
  margin-top: 15px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 8px #00000033;
}

#gallery .img-wrapper img {
  width: 100%;
}

#gallery .img-overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

#gallery .img-overlay i {
  color: #fff;
  font-size: 3em;
}

#overlay {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#overlay img {
  margin: 0;
  width: 80%;
  height: auto;
  -o-object-fit: contain;
  object-fit: contain;
  padding: 5%;
}

@media screen and (min-width: 768px) {
  #overlay img {
    width: 60%;
  }
}

#nextButton i {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
}

#nextButton:hover {
  opacity: 1;
}

#prevButton i {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
}

#overlay img {
  width: 45%;
}

#prevButton:hover {
  opacity: 0.7;
}

#exitButton i {
  color: #fff;
  font-size: 2em;
  transition: opacity 0.8s;
  position: absolute;
  top: 15px;
  right: 15px;
}

#exitButton:hover {
  opacity: 0.7;
}

/* contact-info */

#contact-info {padding: 60px 0px; overflow: hidden; background-color: #f8f8f8;}
#contact-info .forem{row-gap: 10px;}
#contact-info h3{margin-bottom: 50px; position: relative;}
#contact-info h3::after{content: ""; position: absolute; width: 80px; height: 2px; bottom: -5px; left: 0; background: #022e22; z-index: 1;}
#contact-info h4{margin-bottom: 50px; position: relative;}
#contact-info h4::after{content: ""; position: absolute; width: 120px; height: 2px; bottom: -5px; left: 0; background: #022e22; z-index: 1;}
#contact-info .icon-info{background-color: #ffffff; border: 1px solid #ced4da; gap: 25px; padding: 20px 25px; margin-bottom: 20px;}
#contact-info .icon-info li i{height: 40px; width: 40px; background-color: #022e22; display: inline-block; text-align: center; line-height: 40px; color: #fff;}
#contact-info .icon-info li h5{color: #222;}
#contact-info .icon-info li span, #contact-info .icon-info li span a{color: #4a5568;}
#contact-info .contact-inr{background-color: #ffffff; padding: 30px;}
#contact-info .contact-inr .forem .icon-input{position: relative;}
#contact-info .contact-inr .forem .form-control{background-color: transparent; border: 1px solid #ced4da; padding: 10px 40px; box-shadow: none; border-radius: 0px; font-size: 15px;}
#contact-info .contact-inr .forem span{position: absolute; top: 9px; left: 23px; color: #022e22;}
#contact-info .contact-inr .forem .btn{padding: 10px 30px; background-color: #022e22; color: #fff; border-radius: 0px; margin-top: 20px;}
#contact-info .map{background-color: #fff; padding: 15px; border: 1px solid #ced4da;}

/* footer */

footer .footertop {
  background-color: #022e22;
  padding: 70px 0px 50px;
}

footer .row {
  row-gap: 25px;
}

footer .footertop h3{font-size: 25px; margin-bottom: 15px; color: #ffd29a;}

footer .footertop .about img {
  width: 145px;
}

footer .footertop .about p {
  color: #fff;
  font-size: 14px;
  width:77%;
  margin-top: 20px;
}

footer .footertop ul {
  list-style: none;
}

footer .footertop ul li {
  color: #fff;
  font-size: 14px;
  margin-top: 10px;
}

footer .footertop ul li a {
  color: #fff;
  font-size: 14px;
  transition: .5s;
  display: inline-block;
  border-bottom: 1px solid transparent;
}

footer .footertop ul li a:hover {
  color: #ffd29a;
}

footer .footertop .addres li {
  margin-bottom: 20px;
}

footer .footertop .addres li i {
  color: #ffd29a;
  font-size: 22px;
}

/* quickcontact */

.quickcontact {
  width: 45px;
  position: fixed;
  top: 77%;
  right: 15px;
  z-index: 102;
}



/* modal */

.modal form.row {
  row-gap: 20px;
}

.modal .btn-theme {
  border-radius: 0px;
  background: #ffd29a;
  color: #fff;
}

.modal .btn-theme:hover {
  background-color: #000;
  color: white;
}

.modal .form-control {
  border-radius: 0px;
  border: none;
  box-shadow: none;
  background-color: #f1f1f1;
}

.modal .form-control:focus {
  border-color: #000;
}

.modal .submit {
  background-color: #ffd29a;
  color: #fff;
  font-weight: 500px;
  padding: 10px;
  border: 0;
  transition: .5;
}

.modal .submit:hover {
  background-color: #000;
}

/* about */

#product-bg{background-image: url(../images/product-bg.jpg); background-position: center center; background-size: cover; background-repeat: no-repeat; padding: 100px 0px; position: relative; z-index: 1; margin-bottom: 30px;}
#product-bg::before{position: absolute; content: ''; left: 0; right: 0; top: 0; bottom: 0; background-color: #00000079; z-index: -1;}
#product-bg h2{text-align: center; color: #fff;}
#product-bg p, #product-bg p a{text-align: center; color: #fff;}