@charset "UTF-8";
/*! 
 * Copyright 2023 Elnur Ahmadov / elnurahmadov.com
 */

/* MOBILE */
@media only screen and (min-width:320px) {
  .bg-dark i {
    color: var(--white);
    font-size: 24px;
}
  .breadcrumb-item {
    box-sizing: border-box;
    font-size: 13px;
}
  .list-group-horizontal>.list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
    padding-left: 0px;
    padding-right: 10px;
  }

 #kataloqlar .mb-5 {
  margin-bottom: 1.5rem!important;
}
  .kataloq h2 { 
    font-size: 15px;
    font-weight: 600;
  }  
 .kataloq .list-group-item{ 
  font-size: 13px;
} 
  .list-group-horizontal>.list-group-item+.list-group-item {
    border-left-width: 1px;
    padding: 0px 10px;
  }
  .filterbut {
    background-color: #e1e1e1;
    padding: 10px 7px;
    margin-top: -6px; 
   }
   .filterbut a {
    text-decoration: none; 
    background-color: var(--gold);
    padding: 5px 17px;
    color: var(--white); 
    margin-left: 5px;
}
  .filterbut a {font-size: 18px; }
  .filterbut i {font-size:18px;}
  .sticky-top2 {
    position: -webkit-sticky !important;
    position: sticky;
    top: 74px;
    z-index: 1020;
  }
  .pt-5 {
    padding-top: 1rem!important;
  }
  .back-to-top { 
    position: fixed;
    right: 10px;
    bottom: 20px;
  }
  .form-check-input:checked {
    background-color: var(--gold);
    border-color: var(--gold);
}
.form-check-input[type=checkbox] {
  border-radius: 0px;
}
.form-check { 
  width: 50%;
  float: left;
  margin-bottom: 10px;
}
  header {
    padding-left:16px;
    padding-right:16px;
  }
  .container {
    padding-right: 30px;
    padding-left: 30px; 
  }
  .inner-pad {  
    padding:94px 0%
  }
  .inner-pad2 {  
    padding:94px 0%
  }
  }
  
  /* TABLET */
  @media only screen and (min-width:768px) {
    .bg-dark i {
      color: var(--white);
      font-size: 30px;
  }
    .breadcrumb-item { 
      font-size: 15px;
  }
    .filterbut a {font-size: 24px; }
    .filterbut i {font-size:25px;}
    .list-group-horizontal>.list-group-item:first-child:not(:last-child) { 
      padding-right: 16px;
    }
    #kataloqlar .mb-5 {
      margin-bottom: 3rem!important;
    }

  .kataloq h2 { 
      font-size: 20px; 
    }
    
 .kataloq .list-group-item{ 
  font-size: 18px;
}

    .list-group-horizontal>.list-group-item+.list-group-item {
      border-left-width: 1px; 
      padding: 0px 16px;
    }
    .f
    .sticky-top2 { 
      top: 103px; 
    }
    .pt-5 {
      padding-top: 3rem!important;
  }
  .back-to-top {  
      right: 20px; 
    }
  header {
    padding-left:41px;
    padding-right:41px;
  }
    .inner-pad {  
      padding:127px 0%;
    }
    .inner-pad2 {  
      padding:0px 0%;
    }
    .filterbut { 
      margin-top: 19px; 
     }
  } 

   /* PC */
   @media only screen and (min-width:996px) {
    .breadcrumb-item {
      box-sizing: border-box;
      font-size: 18px;
  }
    .sticky-top2 { 
      top: 126px; 
    }
 
    header {
      padding-left:50px;
      padding-right:50px;
    } 
    .filterbut { 
      margin-top: -6px; 
     }
    } 

    .card-title {
      font-weight: 600; 
      margin-bottom: 20px;
  }
  .card-body { 
    padding: 25px; 
}
.card-text:last-child { 
  font-size: 16px;
}
.card, .card-img, .card-img-top  { 
  border-radius: 0px; 
  border:none;
  transition: all 0.2s ease-out;
}
.card:hover  { 
  opacity:0.8;
}
.card:hover p, .card:hover h5  { 
  color:var(--gray);
  transition: all 0.2s ease-out;
}
.card-footer {
  padding: 15px 25px;
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-top: none;
}
.btn-group { 
  margin-top: 25px;
}
.btn-group>:not(.btn-check:first-child)+.btn{ 
  position: relative;
  flex: 1 1 auto;
  background-color: var(--gold); 
  padding: 14px 25px;
  color: var(--white);
  font-size: 18px;
  width: 130px;
  margin-left: 42px;
}


.btn-group>:not(.btn-check:first-child)+.btn:hover{ 
  background-color: var(--gold) !important;  
  opacity:0.8;
}

.temizle { 
  position: relative;
  flex: 1 1 auto;
  background-color: var(--dark);
  padding: 14px 25px;
  color: var(--white);
  font-size: 18px;
  width: 130px;
}
.temizle:hover {  
  background-color: var(--dark);
  opacity:0.8;
}

.btn-group>.btn:not(:last-child):not(.dropdown-toggle) { 
  position: relative;
  flex: 1 1 auto;
  background-color: var(--dark);
  padding: 14px 25px;
  color: var(--white);
  font-size: 18px;
  width: 130px;
}

.btn-group>.btn:hover { 
  background-color: var(--dark); !important;
  opacity:0.8;
}
 

body{background-color: var(--light); font-family:"poppins", sans-serif; color:var(--gray); font-size:18px}


:root {
  --gold: #AD9271;
  --gray: #474747;
  --dark: #202020; 
  --white: #ffffff;
  --light: #e1e1e1;
  
}

.bg-light {
  background-color:var(--light)!important; 
}

.page404 span{
  font-size:200px;line-height: 20px;
}
.page404 a {
  background-color: var(--gold);
  padding:14px 25px;
  color:var(--white);
}
.page404 a:hover {
  background-color: var(--dark);
  padding:14px 25px;
  color:var(--white);
}
 
.btn-black {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  width: 100%;
  background: var(--dark);
  border: 0;
  padding: 20px 50px;
  color: var(--white);
  transition: 0.4s;
  border-radius: 0;
  text-align:center;
}

.btn-black:hover { 
  background: var(--gold); 
  color: var(--white);
  transition: 0.4s; 
}

a {
  color: var(--gray);
  text-decoration: none;
  transition: all 0.2s ease-out;
}
a:hover {
  color:var(--gold);
  text-decoration: none;
  transition: all 0.2s ease-out;
}

.basliqlar { v
  padding-bottom:30px;
}
.basliqlar2 {
  padding-bottom:10px;
}
.breadcrumb a, #kataloqlar a { 
  text-decoration: none;
}

.breadcrumb {
  --bs-breadcrumb-margin-bottom: 0rem;
}


.list-group {  
  border-radius: 0px; 
  padding-top: 7px;
  --bs-list-group-border-color: var(--gray);
  --bs-list-group-item-padding-y: 0rem;
}

/*Kataloq Overlay*/

@media only screen and (min-width:320px) {
  .overlay-content {
    display: flex;
    position: absolute;
    padding: 6px 13px;
    overflow: hidden;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    z-index: 1;
    transition: all 0.2s ease-out;
  }
  }  


  @media only screen and (min-width:768px) {
    .overlay-content { 
      padding: 1rem; 
    }
    }  

.overlay-content:hover { 
  padding: 1rem 1rem 0.5rem 1rem; 
  transition: all 0.2s ease-out;
}
.bg-img {
  width: 100%;
  height: 100%;
}
.overlay, .overlay-gradient {
  position: relative;
}
.overlay.overlay-hover:before, .overlay-gradient.overlay-hover:before {
  transition: opacity .2s ease;
}

.overlay-gradient:before {
  background-image: linear-gradient(transparent, var(--tor-overlay-color));
}
.overlay:before, .overlay-gradient:before {
  --tor-overlay-color: #000;
  --tor-overlay-opacity: 0.6;
  --tor-overlay-hover: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  opacity: calc(var(--tor-overlay-opacity) + var(--tor-overlay-hover)); 
  transition: inherit;
  z-index: 1;
}
.overlay.overlay-hover:hover:before, .overlay-gradient.overlay-hover:hover:before {
  --tor-overlay-hover: 0.2;
}

.overlay.overlay-hover:before, .overlay-gradient.overlay-hover:before {
  transition: opacity .2s ease;
}
/*Kataloq Overlay End*/


.list-group-horizontal>.list-group-item:first-child:not(:last-child) {
  border-bottom-left-radius: var(--bs-list-group-border-radius);
  border-top-right-radius: 0;
  padding-left: 0px; 
}
  
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { 
  font-weight: 300; 
}
.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-width: 0px;
}
#brendler img {
  border:1px solid #fff;
  max-width:90%;
  padding: 20px;
  margin-bottom: 40px;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  transition: 0.4s;
}
#brendler img:hover {
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  transition: 0.4s;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #474747;
  background-color: transparent;
  background-clip: padding-box;
  border: 0px solid #ced4da;
  -webkit-appearance: none;
  border-bottom: 1px solid #474747;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0px;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.mr-2 {
  margin-right:20px;
}
 .btn {
  --bs-btn-padding-x: 0px;
  --bs-btn-padding-y: 0px;
  --bs-btn-font-size: 30px;
  --bs-btn-border-radius: 0px;
  --bs-btn-border-width: 0px; 
  color: var(--gray);
  background-color: transparent;
}
 .btn:hover {
  color: var(--gold);
  background-color: transparent !important;
}

.navbar-nav { 
  text-align: left;
}
.navbar-nav .btn {
  --bs-btn-padding-x: 36px;
  --bs-btn-padding-y: 20px;
  --bs-btn-font-size: 18px;
  --bs-btn-border-radius: 0px;
  --bs-btn-border-width: 0px;
  background-color: #202020;
  color: #ffffff;
}
.btn:hover {
  background-color: #AD9271;
}


.info-item i {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  color: #AD9271;
  text-align: center;
  font-size: 26px;
  width: 20px;
  margin-right: 20px;
}

.info-item p {
  margin-top: 0;
  margin-bottom: 1.6rem;
}

.php-email-form button {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  width: 100%;
  background: #AD9271;
  border: 0;
  margin-top: 30px;
  padding: 20px 50px;
  color: #fff;
  transition: 0.4s;
  border-radius: 0;
}

.php-email-form button:hover { 
  background: #202020; 
  color: #fff;
  transition: 0.4s; 
}
:focus { outline: none !important; }

.php-email-form input:focus,
.php-email-form textarea:focus {
  background-color: #d7d7d7; 
  outline: none !important;
}

.php-email-form .form-control { 
  padding: 20px 0px;
}
 

.offcanvas ul.diller {
  list-style-type: none;
  display: inline;
  margin: 0px 0px 0px 34px;
  padding: 0px;
}

.offcanvas ul.diller li   {  
  display: inline;
  margin-right:15px ;
}

.offcanvas .diller a  { 
  text-decoration: none;  
}

.offcanvas .diller a:hover  { 
 padding:0px;
}

.mexfilik{ 
  padding-left:50px;
  margin-bottom: 35px;;
}
#copyright { 
  padding-left:50px;
  margin-bottom: 35px;
  text-align: left;
}
.mexfilik a  { 
  text-decoration: none;
}
.offcanvas .mexfilik a:hover { 
  padding-left: 6px;
}
.mexfilik i  { 
  font-size: 15px;
}
.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm, .offcanvas-xl, .offcanvas-xxl { 
    --bs-offcanvas-bg: #ECECEC;
    --bs-offcanvas-border-width: 0px; 
}

.offcanvas a  { 
    --bs-offcanvas-bg: #ECECEC;
    --bs-offcanvas-border-width: 0px; 
    transition: all 0.2s ease-out;
}
.offcanvas a:hover  { 
 text-decoration: none;
 padding-left: 60px;
}
.offcanvas  .nav-link {
    font-size: 20px !important; 
    border-bottom:1px solid #cacaca;
    padding:16px 0px 16px 50px;
}

.offcanvas  .nav-link:hover, .offcanvas .navbar-nav > .active > a { 
    background-color: #202020 !important;
    color:#fff;
}
.offcanvas-body { 
    padding: 0px; 
}

.offcanvas .modeller .nav-link {
  font-size: 20px !important;
  padding: 22px 14px;
  margin: 40px 50px;
  background-color: #C8C8C8;
  text-align: center; 
  line-height: 20px;
}

.badge {
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-font-size: 14px;  
  --bs-badge-color: #fff;
  --bs-badge-border-radius: 0px; 
  font-weight: 500;
  line-height: 1; 
}
 
ul.socialIcons {
  padding-left: 50px;
  text-align: left;
}

.socialIcons li {
  background-color: yellow;
  list-style: none;
  display: inline-block;
  margin: 4px;
  border-radius: 2em; 
}

.socialIcons li a {
  display: block;
  padding: 12px 10px 10px 10px;
  min-width: 47px;
  max-width: 44px;
  height: 47px;
  transition: 0.5s;
  border-radius: 100px;
  text-decoration: none;
  background-color: var(--white); 
  color: var(--gray);
  text-align: center;
}

 
.socialIcons li i { 
  font-size: 20px;
}

.socialIcons li a:hover {
  padding: 12px 10px 10px 10px;
  background-color: var(--gold); 
  color: var(--white);
}

 
.socialIcons span {
    margin-top: 2px;
    float: right;
}





/* Bottom Panel */
@media only screen and (min-width:320px) {
  #volet {
    width: 85%;
    height: 290px;
    padding: 10px 25px;
    margin:0px 7%;
    background: var(--dark);
    color: #fff;
    z-index: 999;
    position: absolute;
    bottom: -244px;
    transition: all .5s ease-out;
  }
  #volet a.ouvrir,
  #volet a.fermer {
    font-size: 14px;
    position: absolute;   
    color: #fff;
    text-decoration: none;
    transform: rotate(360deg); 
    font-size:20px; 
    width: 87%;
    float: left;
  }
  }


  @media only screen and (min-width:768px) {
    #volet {
      width: 86%; 
      height: 278px;
      padding: 10px 25px;
      margin:0px 7%; 
      bottom: -234px; 
    }
    #volet a.ouvrir,
    #volet a.fermer { 
      width: 92%;
    }
    }


    @media only screen and (min-width:996px) { 
        #volet {
          width: 92%; 
          height: 359px;
          margin:0px 4%; 
          bottom: -310px; 
        }
        #volet a.ouvrir,
        #volet a.fermer {
          width: 97%;
     }
    } 



#volet a.ouvrir { 
  z-index: 1;
  opacity: 1;
  
}
#volet a.fermer {  
  z-index: -1;
  opacity: 0;
}


#volet:target a.ouvrir { 
  z-index: -1;
  opacity: 0;
  transition: all .5s ease-out;
}
#volet:target a.fermer { 
  z-index: 1;
  opacity: 1;
  transition: all .5s ease-out;
}
#volet:target {
  bottom: 0px;
}
#volet h3 {
  font-size: 16px;
}
#volet .overlay-content { 
  padding: 0px 9px; 
}
/* End Bottom Panel */

 

/* Overlay Search */

@media only screen and (min-width:320px) {
  #FullSearch .overlay-content {
    position: relative;
    top: 40%;
    width: 100%; 
    margin: 20px;  
    text-align: center;  
    display: block;
  }
 }

 @media only screen and (min-width:768px) {
  #FullSearch .overlay-content { 
    top: 46%;
    width: 50%;
    margin-top: 30px;
    margin: auto;
  }
 }

#FullSearch .overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(71,71,71);
  background-color: rgba(71,71,71, 0.9);
}



#FullSearch .overlay .closebtn {
  z-index: 99999;
  position: absolute;
  top: 8px;
  right: 30px;
  font-size: 40px;
  cursor: pointer;
  color: white;
}
#FullSearch .overlay .closebtn:hover {
  color: #ccc;
}

#FullSearch .overlay input[type=text] {
  padding: 15px;
  font-size: 20px;
  border: none;
  float: left;
  width: 80%;
  background: transparent;
  border-bottom: 1px solid var(--white);
  color: var(--white);
}
.overlay input[type=text]:hover {
  color: var(--white);
}

#FullSearch .overlay button {
  float: left;
  width: 9%;
  padding: 12px;
  font-size: 24px;
  border: none;
  color: #fff;
  cursor: pointer;
  border-bottom: 1px solid var(--white);
  background-color: transparent;
}

#FullSearch .overlay button:hover {
  color: var(--gold);
}
 
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus { 
  -webkit-text-fill-color:var(--white);
  -webkit-box-shadow: 0 0 0px 1000px #transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* End Overlay Search */



/* Bottom Panel */
:root {
  --swiper-theme-color: var(--gold);
} 
.swiper-pagination-bullet { 
  background: var(--swiper-pagination-bullet-inactive-color,#fff); 
}
.swiper-pagination {
  position: inherit; 
  margin-top: 11px;
  font-size: 15px;
  color:var(--gray);
}
@media (max-width: 760px) {
  .swiper-button-next {
    right: 20px;
    transform: rotate(90deg);
  }

  .swiper-button-prev {
    left: 20px;
    transform: rotate(90deg);
  }
}
@media (max-width: 760px)  {
.swiper-button-next,
.swiper-button-prev  {  
    display: none;
}}
/* End Bottom Panel */


.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.white-gold {
  color:var(--white);
}
.white-gold:hover {
  color:var(--gold);
}

 
.bg-light svg {
  fill:black; 
  }
  .bg-dark svg {
  fill:var(--white); 
  }
  .bg-dark i {
    color:var(--white);
    }
  .bg-dark  {
 background:transparent !important;
}

.bg-dark .offcanvas i {
  color:var(--dark); 
  }
  .socialIcons li a:hover i{
    color:var(--white) !important; 
    }

.icon-control {
  margin-top: 5px;
  float: right;
  font-size: 80%;
}

.swiper-horizontal>.swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  height: auto; 
  text-align: center;
  background-color:transparent;
}

.btn-light {
  background-color: #fff;
  border-color: #e4e4e4;
}

.list-menu {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.list-menu a {
  color: #343a40;
}

.card-product-grid .info-wrap {
  overflow: hidden;
  padding: 18px 20px;
}

[class*='card-product'] a.title {
  color: #212529;
  display: block;
}

.card-product-grid:hover .btn-overlay {
  opacity: 1;
}
.card-product-grid .btn-overlay {
  -webkit-transition: .5s;
  transition: .5s;
  opacity: 0;
  left: 0;
  bottom: 0;
  color: #fff;
  width: 100%;
  padding: 5px 0;
  text-align: center;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
}
.img-wrap {
  overflow: hidden;
  position: relative;
}