.hero-main-wrapper{ overflow:hidden; background-size: cover; background-repeat: no-repeat; background-position: center center; position: relative; }
.hero-main-section{ background-size: cover; background-repeat: no-repeat; background-position: center center; height: auto; position: relative; overflow:hidden; padding-top:128px; }
.hero-main-section .page-center{ padding-left:24px; padding-right:24px; }
.hero-main-content .hero-content-text{width:640px; position:relative; z-index:10; padding-bottom:100px; }
.hero-main-content .image-content-wrapper{ width:calc(100% - 640px); display:flex;align-items:flex-end; }
.hero-main-section.default-brand .hero-main-content h1{ color:#fff; }
.hero-main-section.default-brand .hero-main-content p{ color:#fff; }
.hero-main-content h1{font-size:60px;line-height:70px;margin-bottom:24px}
.hero-main-content p{color:#000;}

.hero-main-content .button-wrapper{position:absolute; bottom:0; z-index:999; }
.hero-main-content .button{padding:10px 28px;border-radius:6px;font-size:18px;font-weight:600;line-height:28px;letter-spacing:.20000000298023224px;background-color:#D6006D;border:0;margin:0 10px 15px 0;transition:all ease 1s;}
.hero-main-content .button.for-brand-btn{ background-color:#008996; }
.hero-main-content .button:after{content:'';transition:.3s;display:inline-block;}
.hero-main-content .button.active{color:#fff}
.hero-main-content .button.active:after{content:"\f0da";font-family:FontAwesome;vertical-align:middle;padding-left:12px;font-weight:400;line-height:1;}
.hero-main-section.for-brand .hero-main-content .button.for-3pl-btn,
.hero-main-section.for-3pl .hero-main-content .button.for-brand-btn{ background-color:#415364; }
.hero-main-content .button.active.for-brand{ background: linear-gradient(272.68deg, #006872 1.68%, #0195A3 97.77%); }
.hero-main-content .button.active.for-3pl{ background: linear-gradient(90deg, #D6006D 0%, #700039 100%); }
.hero-main-content .hero-content-text #description{ max-width:520px; }

.bg-main-image{ position:absolute;top:0;left:0;right:0;width:100%;height:100%;z-index:-1;}
.bg-main-image img { width: 100%; height: 100% !important; object-fit: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.bg-main-image.img-gray{ -webkit-filter: grayscale(100%); filter: grayscale(100%);  }

.for-brand-overlay, .for-3pls-overlay{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:2; opacity:0; }
.for-brand-overlay > span, .for-3pls-overlay > span{ height:100%; width:100%; display:inline-block; background-size: contain; background-position: top 84px right calc(50vw - 670px); background-repeat: no-repeat; opacity:0.5;  }

.for-brand-overlay:after{ content:""; position:absolute; width: 100%; height: 155%; top: 0; left: 0; opacity: 0.6;
  background: rgba(243, 254, 255, 1); z-index:-1;
}

.for-3pls-overlay:after{ content:""; position:absolute; width: 100%; height: 155%; top: 0; left: 0; opacity: 0.6;
  background: rgba(255, 245, 251, 1); z-index:-1;
}


.hero-main-section .hover-content{background-color:#fff;padding:5px 10px;position:absolute;bottom:0; right:0; opacity:0;transition:.3s;text-align:center;z-index:10;}

.hero-main-section .image-content img{margin:0 auto;height:auto}
.hero-main-section .woman_content .hover-content{right:15%}
.hero-main-section .man_content .hover-content{right:0}
.hero-main-section .hover-content p{margin:0;font-size:14px;color:#000 !important;}

.hero-main-content{width:100%;display:flex;align-items:flex-start;flex-wrap:wrap; }
.hero-main-inner{ position: relative; }
.swiper-wrapper-2 { z-index: 3; position: relative; }
.image-content{ z-index: 4; }
#hero-main-wrapper .swiper-wrapper-2{ padding-top:84px; }

/* Header CSS */
.header-with-white-bg.header .header-main{ background: rgba(255, 255, 255, 0.0); position:relative; }
.header-with-white-bg.header .header-main:after{ content:""; background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%; z-index:-1; }
@supports not (backdrop-filter: blur(20px)) {
  .header-with-white-bg.header .header-main:after{
    filter: blur(2px);
  }
}
body .header.header-main-wp{ position:fixed; top:0; left:0; right:0; width:100%; z-index:999; }

@media screen and (min-width:991px){
  .default-brand .hero-main-content *{ color:#fff !important; }  
}


@media screen and (max-width: 1400px) {
  .hero-main-content h1 { font-size: 50px; line-height: 60px; }
  .hero-main-section{ padding-top:80px; }
}/*-------- 1400 ends here ----------*/

@media screen and (max-width: 1250px) {
  .hero-main-content h1{ font-size:45px; line-height:1.15; max-width:550px; margin-bottom:15px; }
  .hero-main-section .hover-content p{ font-size:12px; }
  .hero-main-content .hero-content-text #description{ font-size:16px;line-height:1.5;}
  .hero-main-content .button{ font-size:16px; }
  .hero-main-content .hero-content-text{ width:500px; padding-bottom:100px; }
  .hero-main-content .image-content-wrapper{ width:calc(100% - 500px); }
  .hero-main-content{ align-items:center; }
}/*-------- 1250 ends here ----------*/

@media screen and (min-width: 991px) and (max-width: 1250px) { 
  .hero-main-content .hero-content-text p{ font-size:16px;line-height:1.5;}
}


@media screen and (max-width: 1026px) {
  .hero-main-content h1{ font-size:40px; line-height:1.15; max-width:550px; margin-bottom:15px; }
}

@media screen and (max-width: 991px) {
  .hero-main-content{width:100%; flex-direction: column; height:auto; }
  .hero-main-content .hero-content-text{ width:100%; padding-bottom: 80px; padding-top: 80px; }
  .hero-main-content .image-content-wrapper{ width:100%; display:none; }
  .hero-main-section .image-content{position:relative;left:0!important;transform:none!important;text-align:center}
  .default-brand .hero-main-content .hero-content-text{height:auto;padding-top:120px; padding-bottom: 80px;}
  .hero-main-section .hover-content{left:50%;transform:translate(-50%,0);bottom:0;min-width:300px}
  .hero-main-section.for-3pl .hover-content{left:45%;transform:translate(-45%,0)}
  .swiper-wrapper { flex-direction: column; }
  .swiper-slide-for-brand, .swiper-slide-for-3pl{ position:relative; display:block !important; background-size: cover; background-position: center center; background-repeat: no-repeat; }
  .swiper-slide-for-brand:after, .swiper-slide-for-3pl:after{ content:""; width:100%; height:100%; background-color:rgb(255 255 255 / 80%); position:absolute; top:0; left:0; right:0;bottom:0; z-index:1; }
  .default-brand .hero-main-content .button-wrapper{ display:none; }
  .swiper-slide-default-brand .default-brand{ position:relative;}
  .swiper-slide-default-brand .default-brand:after{ content:""; position:absolute; background: linear-gradient(89.99deg, #000000 -53.89%, rgba(0, 0, 0, 0) 100.36%); width: 100%; height: 100%; top: 0; left: 0; z-index:2; }
  .hero-main-section.for-brand .for-3pl-btn{ display:none; }
  .hero-main-section.for-3pl .for-brand-btn{ display:none; }
  #bg-main-image{ display:none; }
  .hero-main-content .button-wrapper{ position:static; }
}/*-------- 991 ends here ----------*/

@media screen and (max-width: 767px) {
  .hero-main-content h1{font-size:34px;line-height:1.20;}
  .hero-main-section .hover-content p{font-size:14px;line-height:17px}
  .hero-main-content p{font-size:16px}
  .hero-main-content .button-wrapper{ margin-top:20px; }
  .hero-main-content .hero-content-text{ width:100%; padding-bottom: 60px; padding-top: 60px; }
}/*-------- 767 ends here ----------*/