@charset "utf-8";
/* CSS Document */

.banner-wrapper {
background: url("../images/banner/gnc-banner.jpg") no-repeat top left #896A5B;}
    
/*----------------------------------    */
.gnc-intro{text-align: center;}
.gnc-intro h3{font-weight:bold; margin-bottom: 15px;}

.bmht, .lmht, .ymht{position: relative; margin-top:180px; padding-bottom:80px;}
.bmht h2, .lmht h2, .ymht h2{color: var(--secondry-color);}

.other, .experience{position: relative;  padding-bottom:80px;}
.other{margin-top:100px;}
.experience{margin-top:60px;}

.video-exp{position: relative; width: 98%; margin:60px auto;}
.video-exp h2{text-align: center; margin-bottom: 50px;     z-index: 2;  position: relative;}

.bmht{background-color:#fd8e46;}
.lmht{background-color:#eeb740;}
.ymht{background-color:#a8c255;}
.other{background-color:#ef6c8e;}
.experience{background-color:#9a89e7;}

.bmht:before, .lmht:before, .ymht:before, .other:before, .experience:before {
    position: absolute;
    content: '';
    top: -25px;
    left: 0;
    height:85px;
    width: 100%;
    margin-bottom: -70px;
    animation: wave-animation2 140s infinite linear;
    z-index: 1;
    /*background-size: cover !important;*/
}

.bmht:before{background: url(../images/gnc/top-bg-b.svg) repeat-x;}
.lmht:before{background: url(../images/gnc/top-bg-l.svg) repeat-x;}
.ymht:before{background: url(../images/gnc/top-bg-y.svg) repeat-x;}
.other:before{background: url(../images/gnc/top-bg-y-o.svg) repeat-x;}
.experience:before{background: url(../images/gnc/top-bg-y-e.svg) repeat-x;}

/* .bmht .box .flower{filter: brightness(0) saturate(100%) invert(80%) sepia(35%) saturate(5694%) hue-rotate(329deg) brightness(103%) contrast(98%);} */
.lmht .box .flower{filter: brightness(0) saturate(100%) invert(67%) sepia(54%) saturate(539%) hue-rotate(360deg) brightness(105%) contrast(87%);}
.ymht .box .flower{filter: brightness(0) saturate(100%) invert(76%) sepia(70%) saturate(338%) hue-rotate(25deg) brightness(87%) contrast(87%);}


.bmht:after, .lmht:after, .ymht:after {
    position: absolute;
    content: '';
    bottom:0px;
    left: 0;
    background: url(../images/gnc/bottom-bg.svg) repeat-x;
    height:125px;
    width: 100%;
    margin-bottom: -70px;
    animation: wave-animation2 140s infinite linear;
    z-index: 1;
    /*background-size: cover !important;*/
}

.big-title{position: absolute; z-index: 2; top:0; left: 50%; font-size: 152px; line-height: 1px; margin-top: -58px;
    font-weight: bold;transform: translateX(-50%);}

.bmht .big-title{color:#fd8e46;}
.lmht .big-title{color:#eeb740;}
.ymht .big-title{color:#a8c255;}

/* -----------------------information--------------------------------- */
.information{width:100%; margin:5% auto 0; position: relative; z-index: 1;}
.information .matter {width:90%;}
.information span{ margin:-8px 0 5px; display: block; font-size: 16px;}
.information p{ margin-bottom:15px;}
.information .box{position: relative;}
.information .box .pin{margin:-30px auto 8px; display: block; width: 20px;}
.information .box .b-img img{ position: absolute; width: 89px; right:12px; bottom:8px; height: 110px;}
.information .detail li{list-style:disc; margin-left:20px; padding-right:16%;}
.information .detail strong{font-size:20px;}
.information .box .l-img img{ position: absolute;  right:12px; bottom:0px; width:150px; height:55px;}
.information .box .y-img img{ position: absolute;  right:12px; bottom:0px; width:81px; height: 98px;}

/* Brand logo slider */
.gnc-items {
    position: relative;
    overflow: hidden;
    height:auto;
  }

  .gnc-items:hover .gnc-items__wrapper,
  .gnc-items:hover .gnc-items__preWrapper {
    animation-play-state: paused;
  }

  .gnc-items__preWrapper {
    position: relative;
    width: 100%;
    height:300px;
    transform: translateX(0%);
    animation: scroll1 80s linear infinite;
    animation-delay: 1s;
    animation-direction: alternate;
    margin: 80px 0 60px;
    will-change: transform;
  }

  .gnc-items__wrapper {
    position: absolute;
    white-space: nowrap;
    transform: translateX(0%) translateZ(0);
    animation: scroll2 80s linear infinite;
    animation-delay: 1s;
    animation-direction: alternate;
    will-change: transform;
  }

  .gnc-items__wrapper > a{cursor:unset;}

  .gnc-items__wrapper > a,
  .gnc-items__wrapper > img {
    position: relative;
    display: inline-block;
    margin: 0 15px;
    vertical-align: middle;
     
  }

  .gnc-items__wrapper > a img {
    max-width: 529px;
    max-height:300px;
    border-radius: 15px;
    border:6px solid #fff;  
  }

  @keyframes scroll1 {
    0% {
      transform: translateX(-0%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  @keyframes scroll2 {
    0% {
      transform: translateX(0%) translateZ(0);
    }
    100% {
      transform: translateX(-100%) translateZ(0);
    }
  }


  /* ------------------learning------------------- */
  /*-------------------------- for col equal height---------	*/
	
.row.display-flex {
    display: flex;
    flex-wrap: wrap;
  }
  .row.display-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
  }

.learing{ margin:20px 0;}
.learing h2{text-align: center; margin-bottom: 30px;}
.box, .item-img{ padding: 6px; border-radius:25px;  border: 6px solid #fff;}

.learing .box{display: flex; align-items: center; justify-content: center; text-align: center; height: 100%;  margin-bottom: 30px;}
.box h5{font-size: 24px; font-weight: 500;}
.box .detail{padding:20px; border-radius: 15px;  background: #fff; height: 100%; width: 100%;}
.box img{width: 30px; margin-bottom:12px;}

/* --------------other activities--------------- */
.other h3, .other h2, .other p {color:#fff;}
.other:after, .experience:after {
  position: absolute;
  content: '';
  bottom:0px;
  left: 0;
  background: url(/Images/banner-bottom-bg-1.svg) repeat-x;
  height:85px;
  width: 100%;
  margin-bottom: -70px;
  animation: wave-animation2 140s infinite linear;
  z-index: 1;
  /*background-size: cover !important;*/
}
.other .item-img img{padding:3px; border-radius:15px; height:auto; width: 100%;}

.other a{color: #fff !important;}

/* ---------------video expe--------------- */

.video-exp .prev-slide-button, .video-exp .next-slide-button{
  top: 41%;
  transform: translateY(-41%);
}


/* ------------------Experiences---------------------- */
.experience h2, .other h2{z-index:3; position: relative;  text-align: center; margin: 20px auto;}
.experience h2{color: #fff;}

.exp-bg {
  display:flex;
  background-color:#fff;
  padding:30px;
  border-radius:30px;
  min-height:40px;
  margin:20px auto 50px;
  position:relative;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.exp-bg:before,
.exp-bg:after {
  content:"";
  background-color:#fff;
  border-radius:50%;
  display:block;
  position:absolute;
  z-index:-1;
}
.exp-bg:before {
  width:44px;
  height:44px;
  top:-12px;
  left:28px;
  box-shadow:-50px 30px 0 -12px #fff;
}
.exp-bg:after {
  bottom:-10px;
  right:26px;
  width:30px;
  height:30px;
  box-shadow:40px -34px 0 0 #fff,
             -28px -6px 0 -2px #fff,
             -24px 17px 0 -6px #fff,
             -5px 25px 0 -10px #fff;
  
}


.exp-item{  display: flex; justify-content: center; align-items: center;     flex-direction: column;}
.exp-img{border-radius: 50%; border:3px solid #dc8812; padding:4px; width: 94px; height: 94px;}

.exp-img img{border-radius: 50%;}
.exp-matter{padding:5px;}
.view img {display: inline-block;}

.o-activity .row{display: none;}
.o-activity .active{display: flex;}
.exp-slider{ width: 98%;}

.exp-item p{ 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; 

}

/* .experience .prev-slide-button, .experience .next-slide-button{top: 40%; transform: translateY(-40%);} */
.prev-slide-button, .next-slide-button{margin: 0 2px;}
/* ------------------------------ */

.modal {
  position: fixed;
  width: 100vw;
  /* height: 100vh; */
  bottom: calc(10px + (100vh - 100%));
  background: rgba(0,0,0,0.5);
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
  transition: all 140ms ease-in-out;
  pointer-events: none;
  opacity: 0;
}

.modal.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-content-two {
  width:90%;
  height: fit-content;
  padding:30px;
  border-radius:20px;
  border: 1px solid #cbd5e1;
  background-color: #ffffff;
  position: relative;
  opacity: 0;
  transform: translateY(24px);
  transition: all 300ms ease-in-out;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}

.modal-content-two h3,   .modal-content-two img
.modal-content-two p {
  opacity: 0;
  transform: translateY(20px);
  transition: all 300ms ease-out;
}

.modal-content-two h3 { text-align: center;
  transition-delay: 50ms;
}

.modal-content-two p {
  transition-delay: 100ms;
  margin-bottom: 20px;
}
.modal-content-two.open h3{color: var(--red); margin-bottom: 10px;}
.modal-content-two.open h3, .modal-content-two.open img
.modal-content-two.open p {
  opacity: 1;
  transform: translateY(0px);
}

.modal-content-two.open {
  transform: translateY(0px);
  opacity: 1;
}

/* --below code for close-- */
.close-button {
  position: absolute;
  right:10px;
  top:10px;
}

.close-button img{width:30px;}



/* ------------------------modal responsive----------------------------- */
@media screen and (min-width:1600px){  .modal-content-two {width: 50%;}}
@media only screen and (max-width: 1599px) and (min-width: 1200px){.modal-content-two {width:70%;}}


/* ------------------responsive---------------------- */
.swiper-wrapper, .swiper{height: auto;}
.video-thumbs { margin-bottom: 0;}
@media only screen and (min-width:1024px) {.categories .swiper-wrapper {justify-content: center;}}

@media screen and (max-width:1400px) {.banner-wrapper {background: url("../images/banner/gnc-banner-tab.jpg");}}

@media screen and (max-width:1024px){
  .big-title{font-size: 100px; margin-top: -46px;}

}
@media screen and (max-width:850px){.information span{margin-top: 0;}}
@media screen and (max-width:768px) {.bmht, .lmht, .ymht{margin-top: 135px;}
.other{margin-top:60px;}
.experience{margin-top:40px;}
.banner-wrapper {background: url("../images/banner/gnc-banner-mob.jpg") right;}
}



@media screen and (min-width: 576px) and (max-width: 767px) {
  .video-item .v-img {
      width: 100%;
      height: 250px;
  }
  .video-item  {height: 250px;}
}

@media screen and (max-width:767px){
  .gnc-items__preWrapper{height:204px;}
  .gnc-items__wrapper > a img{max-width:360px; height:204px;}}
  
  
/* ----------------------------------for ios------------------------------- */

@supports (-webkit-touch-callout: none) {
  /* iOS-specific CSS goes here */


@media only screen 
  and (device-width: 430px) 
  and (device-height: 932px) 
  and (-webkit-device-pixel-ratio: 3) {
    /* Styles for iPhone 13 Pro Max / 14 Plus / 15 Plus */
      
.bmht:before, .lmht:before, .ymht:before, .other:before, .experience:before, .other:after, .experience:after {height:90px !important; background-size: cover !important;}

.bmht:after, .lmht:after, .ymht:after{height:125px !important; background-size: cover !important;}     
  }



@media only screen 
  and (device-width: 414px) 
  and (device-height: 896px) 
  and (-webkit-device-pixel-ratio: 2) {
    /* Styles for iPhone XR / 11 */
      
.bmht:before, .lmht:before, .ymht:before, .other:before, .experience:before, .other:after, .experience:after {height:90px !important;  background-size: cover !important; }
.bmht:after, .lmht:after, .ymht:after{height:125px !important; background-size: cover !important;} 
      
  }



@media only screen 
  and (device-width: 390px) 
  and (device-height: 844px) 
  and (-webkit-device-pixel-ratio: 3) {
    /* Styles for iPhone 14 Pro / 15 Pro */
      
.bmht:before, .lmht:before, .ymht:before, .other:before, .experience:before, .other:after, .experience:after {height:90px !important;  background-size: cover !important;}
.bmht:after, .lmht:after, .ymht:after{height:125px !important; background-size: cover !important;} 
      
  }


@media only screen 
  and (device-width: 375px) 
  and (device-height: 667px) 
  and (-webkit-device-pixel-ratio: 2) {
    /* Styles for iPhone SE 2nd/3rd Gen */
      
.bmht:before, .lmht:before, .ymht:before, .other:before, .experience:before, .other:after, .experience:after {height:90px !important;  background-size: cover !important; }
.bmht:after, .lmht:after, .ymht:after{height:125px !important; background-size: cover !important;} 

}


}