/* Slider css */
.banner-section .item {
    height: 100vh;
    position: relative;
  }
  .banner-section .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .banner-section .item .cover {
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent;
    display: flex;
    align-items: center;
  }
  .banner-section .item .cover .header-content {
    position: relative;
    padding: 0;
    /* overflow: hidden; */
    text-align: center;
  }
  .banner-section .item .cover .header-content h2 {
    /* font-weight: 300; */
    /* font-size: 35px; */
    /* color: #fff; */
  }
  .banner-section .item .cover .header-content h1 {
    font-size: 56px;
    font-weight: 600;
    margin: 5px 0 20px;
    word-spacing: 3px;
    color: #fff;
  }
  .banner-section .item .cover .header-content h4 {
    font-size: 24px;
    font-weight: 300;
    line-height: 36px;
    color: #fff;
  }
  .banner-section .owl-item.active p {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    animation-delay: 0.3s;
  }
  .banner-section .owl-item.active h2 {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    animation-delay: 0.3s;
  }
  .banner-section .owl-item.active a {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    animation-delay: 0.3s;
  }
  .banner-section .owl-nav .owl-prev {
    position: absolute;
    left: 0;
    top: 50%;
    FONT-WEIGHT: 500;
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    background: transparent !important;!i;!;
    transform: translate(40px, 25px);
    width: 40px;
    cursor: pointer;
    height: 60px;
    position: absolute;
    display: block;
    z-index: 1;
    border-radius: 0;
    padding: 0 !important;!i;!;
    margin: 0;
    font-size: 50px !important;!i;!;
    color: var(--white-color) !important;!i;!;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .banner-section .owl-nav .owl-prev span {
    font-size: 60px;
    color: #fff;
    line-height: 60px;
    display: inline-flex;
  }
  .banner-section .owl-nav .owl-prev:focus {
    outline: 0;
  }
  .banner-section .owl-nav .owl-prev:hover {
    background: transparent !important;
  }
  .banner-section .owl-nav .owl-next {
    position: absolute;
    left: 100%;
    top: 50%;
    opacity: 1;
    -webkit-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    background: transparent !important;
    width: 40px;
    cursor: pointer;
    height: 60px;
    position: absolute;
    display: flex;
    align-items: center;
    z-index: 1;
    justify-content: center;
    border-radius: 0;
    transform: translate(-80px, 25px);
    margin: 0;
    font-size: 50px !important;!i;!;
    color: var(--white-color) !important;!i;!;
  }
  .banner-section .owl-nav .owl-next span {
    font-size: 60px;
    color: #fff;
    line-height: 60px;
    display: inline-flex

  }
  .banner-section .owl-nav .owl-next:focus {
    outline: 0;
  }
  .banner-section .owl-nav .owl-next:hover {
    background: transparent !important;
  }
 .banner-section .owl-nav i{
   transition: transform .32scubic-bezier(.37,.78,.35,.94);
 }
.banner-section .owl-nav .owl-next:hover i{
  transform: translateX(2px);
}
.banner-section .owl-nav .owl-prev:hover i{
  transform: translateX(-2px);
}
  section.banner-section {
    padding: 0px;
    width: 100%;
    height: 100vh;
}
section.banner-section .container-fluid{
    padding: 0;
}
.banner-section .main-btn{
    font-size: 12px;
    font-weight: 400;
    line-height: 1em;
    letter-spacing: 0.08em;
    font-family: var(--secondary-font);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    text-transform: uppercase;
    margin: 0px;
    text-decoration: none;
    border-radius: 0px;
    outline: 0px;
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
    padding: 19px 66px 19px 66px;
    background: transparent;
    margin-top: 20px;
}
.banner-section .main-btn:hover{
  background: transparent;
}
.banner-section .main-btn span{
    display: inline-block;
    position: relative;
}
.banner-section .main-btn span::after{
    content: "";
    position: absolute;
    right: 0px;
    bottom: -1px;
    height: 1px;
    background-color: #fff;
    width: 0px;
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.banner-section .main-btn:hover span::after{
    width: 100%;
    left: 0px;
}
.banner-section p{
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: left;
    line-height: 27px;
    letter-spacing: 0px;
    font-weight: 400;
    font-size: 18px;
    backdrop-filter: none;
    filter: none;
    transform-origin: 50% 50%;
    opacity: 0;
    transform: translate(0px, 0px);
    text-align: center;
    text-shadow: 0 0 3px #000;
}
.banner-section h2{
    text-transform: uppercase;
    height: auto;
    width: auto;
    /* text-align: center; */
    color: rgb(255, 255, 255);
    text-decoration: none;
    white-space: nowrap;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    text-align: center;
    line-height: 1;
    letter-spacing: 0px;
    font-weight: 400;
    font-size: 60px;
    backdrop-filter: none;
    filter: none;
    transform-origin: 50% 50%;
    transform: translate(0px, 0px);
    text-shadow: 0 0 3px #000;
}

section.blog-sec {
    padding-left: 3%;
    padding-right: 3%;
}
section.blog-sec .head-sec h2{
  margin-bottom:0px;
}
section.blog-sec .head-sec{
  margin-bottom:30px;
}
section.blog-sec .blog-image img{
  width:100%;
  height:285px;
}
section.blog-sec .blog-content {
    padding-top: 18px;
}
section.blog-sec .blog-date{
  background: #000b1a;
    color: var(--white-color);
    font-size: 14px;
    line-height: 22px;
    padding: 0 10px;
    display: inline-block;
}
section.blog-sec .blog-category {
    font-size: 15px;
    color: var(--other-color);
    font-family: var(--secondary-font);
}
section.blog-sec .blog-head {
    display: flex;
    align-items: center;
    gap: 15px;
  margin-bottom:12px;
}
section.blog-sec h5 a{
  font-family:var(--secondary-font);
  color:var(--secondary-color);
}
section.blog-sec h5{
  font-size:18px;
}
section.blog-sec .owl-nav {
    position: absolute;
    top: -75px;
    right: 0;
    width: auto;
  display: flex;
    align-items: center;
    gap: 50px;
}
section.blog-sec #blog-slider{
  position:relative;
}
section.blog-sec .owl-nav i{
  font-size: 30px;
}
section.footer-upper-section {
    background: var(--black-color);
    padding: var(--p60) var(--p12);
}
section.footer-upper-section .footer-upper-info {
    display: flex;
    align-items: center;
    gap: 50px;
}
section.footer-upper-section .footer-upper-info span{
  font-size: 15px;
    color: var(--white-color);
    font-family: var(--secondary-font);
    text-transform: uppercase;
}
section.footer-upper-section .footer-upper-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer {
    border-top: 1px solid #565656;
    background: var(--black-color);
    padding-top: 90px;
}
footer .news-letter {
    max-width: 800px;
    margin: auto;
    text-align: center;
}
footer .news-letter h4{
  font-size: var(--f22);
    color: var(--white-color);
    margin-bottom: 12px;
    line-height: 31px;
}
footer .news-letter p{
  color: var(--white-color);
    margin-bottom: 42px;
}
footer .news-letter input{
  width: 100%;
    background: transparent;
    border: 0px solid;
    border-bottom: 1px solid #999;
    padding: 2px 4px;
    height: 31px;
  font-size:14px;
}
footer .news-letter input::placeholder{
color: var(--white-color);
}
footer .news-letter button{
position: absolute;
    width: 19px;
    height: 30px;
    background: transparent;
    border: 0px solid;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    right: 0;
  
}
footer .news-letter form{
 position:relative; 
}
footer .news-letter button i{
  transform:translateX(0);
  transition:transform .32s cubic-bezier(.37,.78,.35,.94);
}
footer .news-letter button:hover i{
  transform:translateX(2px);
}
footer .main-footer {
    padding-top: 75px;
    padding-bottom: 75px;
}
footer .main-footer .overviews h4{
  font-size:22px;
  line-height:31px;
  margin-bottom:22px;
}
footer .main-footer .overviews h4 a{
 color:var(--white-color); 
  font-family: var(--secondary-font);
}
footer p, footer a{
  color:var(--white-color);
}
footer .main-footer a{
  --qodef-underline-position-y: 1.15em;
    --qodef-underline-height: 1px;
    background-repeat: no-repeat;
    background-image: linear-gradient(90deg,#000 0,#000 100%);
    transition: background-size .5s cubic-bezier(.51,.5,.07,.99),color .2s ease-out;
    background-position: 100% var(--qodef-underline-position-y);
    background-size: 0 var(--qodef-underline-height);
    background-image: linear-gradient(90deg, #fff 0, #fff 100%);
}
footer .main-footer a:hover{
  background-size: 100% var(--qodef-underline-height);
    background-position: 0 var(--qodef-underline-position-y);
  color: var(--white-color);
}
footer .main-footer span{
  color:var(--white-color);
}
footer .main-footer h5{
  font-size: 18px;
  margin-bottom: 22px;
  color: var(--white-color);
  letter-spacing: .005em;
  line-height: 1.5em;
}
footer .quick-links a{
  font-size:15px;
}
footer .quick-links li{
  line-height:27px;
  margin-bottom:7px;
}
.footer-copyright {
    padding-top: 13px;
    padding-bottom: 13px;
}
.footer-copyright p{
  font-size:14px;
  font-family:var(--secondary-font);
  margin-bottom:0;
}
.footer-copyright a{
  font-size:14px;
}
.footer-copyright a:hover{
  color:#ccc;
}
.footer-copyright ul{
  display: flex;
    gap: 17px;
    justify-content: center;
  height:100%;
  align-items:center;
}
.copyright-right p{
 text-align:right; 
}
.copyright-right img{
 width:120px; 
}

section.members-sec {
    background: var(--lt-bg-color);
}
section.members-sec .members-info {
    max-width: 945px;
    text-align: center;
    margin: auto;
}
section.members-sec .members-info h3{
  line-height: 1.3333333333em;
    margin-bottom: 12px;
}
section.members-sec .members-btn {
    margin-top: 40px;
  display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
section.members-sec .members-btn .main-btn{
    font-size: 12px;
    font-weight: 400;
    line-height: 1em;
    letter-spacing: 0.08em;
    font-family: var(--secondary-font);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    text-transform: uppercase;
    margin: 0px;
    text-decoration: none;
    border-radius: 0px;
    outline: 0px;
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
    padding: 19px 66px 19px 66px;
}
section.members-sec .members-btn .main-btn span{
    display: inline-block;
    position: relative;
}
section.members-sec .members-btn .main-btn span::after{
    content: "";
    position: absolute;
    right: 0px;
    bottom: -1px;
    height: 1px;
    background-color: #fff;
    width: 0px;
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
section.members-sec .members-btn .main-btn:hover span::after{
    width: 100%;
    left: 0px;
}
section.categories-section {
    padding-left: 25px;
    padding-right: 25px;
}

section.categories-section .main-btn{
    font-size: 12px;
    font-weight: 400;
    line-height: 1em;
    letter-spacing: 0.08em;
    font-family: var(--secondary-font);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    text-transform: uppercase;
    margin: 0px;
    text-decoration: none;
    border-radius: 0px;
    outline: 0px;
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
    padding: 19px 66px 19px 66px;
  margin-top: 40px;
}
section.categories-section .main-btn span{
    display: inline-block;
    position: relative;
}
section.categories-section .main-btn span::after{
    content: "";
    position: absolute;
    right: 0px;
    bottom: -1px;
    height: 1px;
    background-color: #fff;
    width: 0px;
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
section.categories-section .main-btn:hover span::after{
    width: 100%;
    left: 0px;
}
section.categories-section .categories-left{
 width:30%; 
}
section.categories-section .categories-left p{
  line-height:25px;
  margin-bottom:0;
}
section.categories-section .categories-right{
 width:70%; 
}
section.categories-section .categories-img img{
  width:100%;
  height:403px;
  object-fit:cover;
  transform: scale(1.001);
    transition: transform .5s cubic-bezier(.34,.76,.47,.93);
}
section.categories-section .categories-img{
  width:100%;
  height:403px;
  overflow:hidden;
}
section.categories-section .categories-info a{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
section.categories-section .categories-info{
 position:relative; 
}
section.categories-section .categories-info:hover img{
  transform:scale(1.016);
}
section.categories-section .categories-info h4{
  font-size: 22px;
    text-align: center;
    margin-bottom: 0;
    margin-top: 13px;
}
section.cta-sec {
    position: relative;
    padding: 0;
    height: 680px;
    background: url(../images/cta.jpg);
    background-attachment: fixed;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
section.cta-sec .container-fluid {
    padding: 0;
}
section.cta-sec a{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
section.cta-sec h2{
   font-size: 70px;
    line-height: 70px;
    text-transform: uppercase;
    margin: 10px 0 18px;
  color:var(--white-color);
   text-shadow:0 0 2px #0000007d;
}
section.cta-sec p{
  color:var(--white-color);
  font-size: 18px;
    line-height: 28px;
  max-width: 684px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  text-shadow:0 0 2px #0000007d;
}
section.brands {
    padding: 60px 0;
    border-top: 1px solid #CCCCCC;
}
section.brands .brands-img{
  transform: translateY(0);
    transition: transform .4s cubic-bezier(.35,.79,.42,.94);
}
section.brands .brands-img:hover{
  transform: translateY(-3px);
}

section.new-handpicked {
    padding-left: 38px;
    padding-right: 38px;
}
section.new-handpicked .head-sec {
    max-width: 52%;
  margin-bottom: 30px;
}
section.new-handpicked .handpicked-img {
    border: 1px solid #e1e1e1;
    position: relative;
}
section.new-handpicked .handpicked-img img{
  width:100%;
  height:487px;
  object-fit:cover;
}
section.new-handpicked .main-btn{
    font-size: 12px;
    font-weight: 400;
    line-height: 1em;
    letter-spacing: 0.08em;
    font-family: var(--secondary-font);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-transform: uppercase;
    margin: 0px;
    text-decoration: none;
    border-radius: 0px;
    outline: 0px;
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
    padding: 19px 66px 19px 66px;
    margin-top: 0;
    border: 0px solid !important;
}
section.new-handpicked .main-btn span{
    display: inline-block;
    position: relative;
}
section.new-handpicked .main-btn span::after{
    content: "";
    position: absolute;
    right: 0px;
    bottom: -1px;
    height: 1px;
    background-color: #fff;
    width: 0px;
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
section.new-handpicked .main-btn:hover span::after{
    width: 100%;
    left: 0px;
}
section.new-handpicked .handpicked-btn {
    padding: 8px;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
  transition: opacity .37s ease-out;
  will-change: transform;
    backface-visibility: hidden;
  opacity:0;
}
section.new-handpicked .handpicked-info:hover .handpicked-btn{
  opacity:1;
  transform: translate3d(0, 0, 0);
}
section.new-handpicked .handpicked-content {
    margin-top: 23px;
}
section.new-handpicked .product-brand {
    margin-bottom: 0;
    line-height: 25px;
}
section.new-handpicked .product-brand a{
  color: #608068;
    font-size: 15px;
    font-family: var(--secondary-font);
}
section.new-handpicked .handpicked-content h5{
  font-size: 18px;
    margin-bottom: 6px;
    line-height: 27px;
}
section.new-handpicked .handpicked-content h5 a{
  color:var(--heading-color);
  font-family:var(--secondary-font);
}
section.new-handpicked .handpicked-content span{
  color:var(--heading-color);
}
section.new-handpicked .handpicked-content del {
    margin-left: 10px;
    color: #999;
}
section.new-handpicked .price-new {
    display: flex;
    align-items: center;
}
section.men-brands, section.men-brands .container-fluid{
    padding: 0px;
}
section.men-brands .row{
 justify-content:space-between; 
}
section.men-brands .col-6{
  padding: 0px;
  position:relative;
  width:49.5%;
}
section.men-brands img{
 width: 100%;
 height: 600px;
 object-fit: cover;
 transform: scale(1.001);
 transition: transform .5s cubic-bezier(.34,.76,.47,.93);
}
section.men-brands .mens-img, section.men-brands .womens-img{
  width: 100%;
 height: 600px;
  overflow:hidden;
}
section.men-brands .mens-info:hover img, section.men-brands .womens-info:hover img{
  transform: scale(1.05);
}
section.men-brands .mens-content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 85px;
    text-align: center;
}
section.men-brands .womens-content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 85px;
    text-align: center;
}
section.men-brands h2{
  font-family: "Cinzel", serif;
    font-size: 55px;
    line-height: 60px;
    color: var(--white-color);
    text-shadow: 0 0 3px #000000b0;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin-bottom: 27px;
}
section.men-brands .main-btn{
    font-size: 12px;
    font-weight: 400;
    line-height: 1em;
    letter-spacing: 0.08em;
    font-family: var(--secondary-font);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    text-transform: uppercase;
    margin: 0px;
    text-decoration: none;
    border-radius: 0px;
    outline: 0px;
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
    padding: 19px 66px 19px 66px;
    margin-top: 0;
    border: 0px solid !important;
    background: var(--white-color);
    color: var(--heading-color);
}
section.men-brands .main-btn span{
    display: inline-block;
    position: relative;
}
section.men-brands .main-btn span::after{
    content: "";
    position: absolute;
    right: 0px;
    bottom: -1px;
    height: 1px;
    background-color: var(--heading-color);
    width: 0px;
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
section.men-brands .main-btn:hover span::after{
    width: 100%;
    left: 0px;
}

section.product-section .handpicked-img {
    border: 1px solid #e1e1e1;
    position: relative;
}
section.product-section .handpicked-img img{
  width:100%;
  height:487px;
  object-fit:cover;
}
section.product-section .main-btn{
    font-size: 12px;
    font-weight: 400;
    line-height: 1em;
    letter-spacing: 0.08em;
    font-family: var(--secondary-font);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-transform: uppercase;
    margin: 0px;
    text-decoration: none;
    border-radius: 0px;
    outline: 0px;
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
    padding: 19px 19px 19px 19px;
    margin-top: 0;
    border: 0px solid !important;
}
section.product-section .main-btn span{
    display: inline-block;
    position: relative;
}
section.product-section .main-btn span::after{
    content: "";
    position: absolute;
    right: 0px;
    bottom: -1px;
    height: 1px;
    background-color: #fff;
    width: 0px;
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
section.product-section .main-btn:hover span::after{
    width: 100%;
    left: 0px;
}
section.product-section .handpicked-btn {
    padding: 8px;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
  transition: opacity .37s ease-out;
  will-change: transform;
    backface-visibility: hidden;
  opacity:0;
  display: flex;
  align-items: center;
  gap: 5px;
}
section.product-section .handpicked-info:hover .handpicked-btn{
  opacity:1;
  transform: translate3d(0, 0, 0);
  
}
section.product-section .handpicked-content {
    margin-top: 23px;
}
section.product-section .product-brand {
    margin-bottom: 0;
    line-height: 25px;
}
section.product-section .product-brand a{
  color: #608068;
    font-size: 15px;
    font-family: var(--secondary-font);
}
section.product-section .handpicked-content h5{
  font-size: 18px;
    margin-bottom: 6px;
    line-height: 27px;
}
section.product-section .handpicked-content h5 a{
  color:var(--heading-color);
  font-family:var(--secondary-font);
}
section.product-section .handpicked-content span{
  color:var(--heading-color);
}
section.product-section .handpicked-content del {
    margin-left: 10px;
    color: #999;
}
section.product-section .price-new {
    display: flex;
    align-items: center;
}
section.product-section {
    padding-left: 38px;
    padding-right: 38px;
}
section.product-section h5{
  text-align:center;
  margin-bottom:40px;
  max-width: 800px;
  margin: auto;
  font-size: 18px;
  margin-bottom: 40px;
  line-height: 26px;
}
section.product-section .col-3{
  padding:0;
  width:24.5%;
}
section.product-section .row{
  gap:55px 0;
  justify-content:space-between;
}
section.category-section {
    padding-left: 26px;
    padding-right: 26px;
    /* padding-bottom: 0; */
}
section.category-section img{
  width:100%;
  height:400px;
  object-fit:cover;
}
section.category-section .category-info {
    width: 100%;
    height: 400px;
    overflow: hidden;
  position:relative;
}
section.category-section .category-overlay {
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    pointer-events: none;
    -webkit-transition: opacity ease .3s;
    -ms-transition: opacity ease .3s;
    transition: opacity ease .3s;
    opacity: 0;
    background-color: rgba(235, 233, 230, 0.6);
}
section.category-section .category-info:hover .category-overlay{
  opacity: 1;
}
section.category-section .category-overlay:before {
    content: ' ';
    position: absolute;
    z-index: 1;
    top: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    -webkit-transition: -webkit-transform .8s;
    transition: transform .8s;
    -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 135deg) translate3d(0, 100%, 0);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 135deg) translate3d(0, 100%, 0);
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
section.category-section .category-info:hover .category-overlay:before{
  -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 135deg) translate3d(0, -130%, 0);
    transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 135deg) translate3d(0, -130%, 0);
}
section.category-section .category-content {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
section.category-section .category-content .cat-detail {
    background: var(--white-color);
    padding: 14px;
}
section.category-section .main-btn{
    font-size: 16px;
    font-weight: 400;
    line-height: 1em;
    letter-spacing: 0.08em;
    font-family: var(--secondary-font);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    text-transform: uppercase;
    margin: 0px;
    text-decoration: none;
    border-radius: 0px;
    outline: 0px;
    transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;
    padding: 19px 66px 19px 66px;
    margin-top: 0;
    border: 0px solid !important;
    background: var(--black-color);
    color: var(--white-color);
}
section.category-section .main-btn span{
    display: inline-block;
    position: relative;
}
section.category-section .main-btn span::after{
    content: "";
    position: absolute;
    right: 0px;
    bottom: -1px;
    height: 1px;
    background-color: var(--white-color);
    width: 0px;
    transition: width 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
section.category-section .main-btn:hover span::after{
    width: 100%;
    left: 0px;
}