@charset "utf-8";

/* #Page Styles
================================================== */
body { font-family: 'area-normal'; -webkit-font-smoothing: antialiased;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;font-size: 62.5%;}

.container { max-width: 1464px; width: 100%; position: relative;}

@media(max-width:1500px){
	.container { max-width: 1300px; }
}
@media(max-width:1400px){
	.container { max-width: 1200px; }
}
@media(max-width:1100px){
	.container { max-width: 980px; }
}
@media(max-width:992px){
	.container { max-width: 94%; }
}
@media(max-width:767px){
	.container { max-width: 92%; }
}


/* START : Loader css -----------------------------------------------*/

/* ENDS : Loader css -----------------------------------------------*/

/* Font-size ------------*/

h1{ font-size: 60px; line-height: 1.2; font-weight: 400; margin: 0;}
h2{ font-size: 16px; line-height: 1.2; font-weight: 800; margin-bottom: 68px; text-transform: uppercase; position: relative; display: flex; align-items: center;}
h2:after{content: ''; width: 68px; height: 1px; background: #000; display: block; margin-left: 20px;}
h3{ font-size: 36px; font-weight: 400; line-height: 1.3; margin-bottom: 30px;}
h5{ font-size: 18px; font-weight: 400;}
h6{ font-size: 18px; font-weight: 100;}
p { font-size: 19px; line-height: 1.7; font-weight: 400; margin-bottom: 30px;}

section{padding: 100px 0; overflow: hidden}

ul{padding-left: 0;}
ul li{list-style: none;}
a:hover{text-decoration: none;}
.g-0{--bs-gutter-y: 0; --bs-gutter-x: 0; }


.fulHght{display: flex; height: 100vh;  padding:0;align-items: center;}

.mob-show{display: none;}
.mob-hide{display: block;}


.btn-text{font-size: 16px; font-weight: 800; color: #000; text-decoration: none; position: relative; display: inline-block;}
.btn-text:after{content: ''; position: absolute; bottom: 0px; left: 0; width: 100%; height: 1px; background: #DFDFDF;}


/* START : Header css -----------------------------------------------*/

.headerWrp{position: fixed;  top: 0px; width: 100%; z-index: 999;padding: 0; background: #fff;}
.header {padding:20px 0; display: flex; align-items: center; justify-content: space-between;}


.header .navbar-brand{margin-right:0;}
.header .navbar-brand .logoDiv{background: url("../images/logo-stirrup-black.svg") 0 0 no-repeat; background-size: contain; width: 120px; height: 35px; display: inline-block; vertical-align: middle; transition:.5s; }

.header .navbar{ background: #818181; border-radius: 60px; font-size: 16px; padding: 15px 50px;  font-weight: 400; color: #000;position: relative;}
.header .navbar .sm{margin: 0;}
.header .navbar .nav-link{color: #fff; padding: 5px 30px;}
.header .navbar .nav-link .sub-arrow{display: none;}

.header .navbar .mobile_menu li{overflow: hidden;}

.header .navbar .mobile_menu li a{color: #000; transition:.5s; text-decoration: none;}
/*.header .navbar .mobile_menu li a:before{content: attr(data-hover); position: absolute; left: 0; top: 100%; color: #EF4C23; padding: 5px 15px;}*/
/*.header .navbar .mobile_menu li a.active{color: #EF4C23; transition:.5s;}*/

.header .navbar .mobile_menu li:hover a,
.header .navbar .mobile_menu li a.active {/*transform: translateY(-100%);*/}
/*.header .navbar .mobile_menu li a.mPS2id-clicked{transform: translateY(-100%);}*/

.header.headerWhite .navbar .mobile_menu li a{color: #fff; transition:.5s;}
.header.headerWhite .navbar .mobile_menu li a.active{color: #09173c;}
/*.header.headerWhite .navbar .mobile_menu li a.active{color: #EF4C23; transition:.5s;}*/
.header.headerWhite .navbar-brand .logoDiv{background: url("../images/logo-stirrup-white.svg") 0 0 no-repeat; background-size: contain; transition:.5s; }
.header.headerWhite:before{xopacity: 0; background: rgba(0,0,0,0.30); transition:.5s;}

@media (min-width:992px){
	.header .dropdown-menu{ left: 50% !important; margin-left: auto !important; padding: 0; transform: translateX(-50%) !important; top: 57px !important; padding:0 15px 10px 15px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; font-size: 11px !important;}
	.header .dropdown-menu:before{content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);width: 0;height: 0;border-style: solid;border-width: 0 10px 8px 10px;border-color: transparent transparent #fff transparent;}
	.header .dropdown-menu .dropdown-menu{left: 108% !important; top: 45px !important; margin-left: auto !important; transform: none!important; font-size: 0.98em !important;}
	.header .dropdown-menu .dropdown-menu:before{content: none;}

	.dropdown-item { position: relative;padding-right: 80px !important; padding: .4rem 1.5rem;border-bottom: 1px solid #fff;transition: all ease .6s;}
	.dropdown-item:hover{ border-bottom: 1px solid #a0cbff; background: #fff; transition: all ease .6s;}
	.dropdown-item:before{content: "\e900";font-family: 'icomoon' !important; color: #307FE2; position: absolute; right: 20px; top: 5px; transition: all ease .4s;}
	.dropdown-item:hover:before{ right: 10px; transition: all ease .4s;}
	.dropdown-item.has-submenu:before{content: "\e901";font-family: 'icomoon' !important; color: #307FE2; position: absolute; right: 20px; top: 5px;}
	.dropdown-item.has-submenu:hover{background: #fff !important;}
	.dropdown-item:hover.has-submenu:before{right: 10px;}

	.dropdown-item .sub-arrow{display: none;}
  
}

.custom-toggler .navbar-toggler-icon{display: none;}
.custom-toggler .navbar-toggler .navbtn-wrap{position: relative; display: block; width:30px; height: 25px; }
.custom-toggler .navbar-toggler .navbtn-wrap span{position: absolute; display: block; width: 30px; height: 3px; border-radius: 9px; background:#fff; transform-origin: center center; transition: .25s ease-in-out;}
.custom-toggler .navbar-toggler.collapsed .navbtn-wrap .bar1{ top: 2px; transform: rotate(0deg)}
.custom-toggler .navbar-toggler.collapsed .navbtn-wrap .bar2{ top: 11px; opacity: 1;}
.custom-toggler .navbar-toggler.collapsed .navbtn-wrap .bar3{top: 20px;  transform: rotate(0deg)}
.custom-toggler .navbar-toggler .navbtn-wrap .bar2{opacity: 0; transition: .25s ease-in-out;}
.custom-toggler .navbar-toggler .navbtn-wrap .bar1{ top: 11px; transform: rotate(45deg); transition: .25s ease-in-out;}
.custom-toggler .navbar-toggler .navbtn-wrap .bar3{ top: 11px; transform: rotate(-45deg); transition: .25s ease-in-out;}

@media (max-width:1024px){
	.mob-show{display: block;}
	.mob-hide{display: none;}
	
	/*h2{ font-size: 36px; }
	h3{ font-size: 24px;}
	h4{ font-size: 16px;}
	h6{font-size: 15px;}
	p{font-size: 18px; }*/
	
	/*.header .navbar{background: #0A0A5F; padding: 20px 15px}
	.header .navbar .navbar-collapse{border-top: 1px solid #323232; padding-top: 20px; padding-bottom: 20px; margin-top: 20px}
	.navbar-brand img{height: 28px;}
	.logo-tataSM img{height: 24px;}
	.logo-tataSM { margin-left: auto;}*/
	.custom-toggler .navbar-toggler{margin-right: -15px;}
	
	.header .dropdown-menu{background: #ffffff24;}
	.dropdown-item{color: #fff;}
}
@media (max-width:992px){
	.header .navbar{height: 80px;}
}

/*START: FOOTER css -------------*/
.footerWrp{padding: 80px 0 0 0;}
.footerWrp .logoftr{margin-bottom: 40px;}
.footerWrp p{ margin: 0; font-size: 16px; font-weight: 100;}
.footerWrp p strong{font-weight: 600; margin-bottom: 10px; display: inline-block;}
.footerWrp a{color: #fff; text-decoration: none; transition:all .5s ease-out;}
.footerWrp a:hover{color: #24c4f4;  transition:all .5s ease-out;}
.footerWrp .ftr-social{display: flex; margin-top: 20px; margin-left: -6px;}
.footerWrp .ftr-social li{margin:0 20px 0 0;}
.footerWrp .ftr-social li a{ width: 24px; height: 24px; display: block;}
.footerWrp .ftr-social li a.fb{background: url("../images/social-fb-w.svg") center no-repeat; background-size: contain;}
.footerWrp .ftr-social li a.in{background: url("../images/social-in-w.svg") center no-repeat; background-size: contain;}
.footerWrp .ftr-social li a.tw{background: url("../images/social-tw-w.svg") center no-repeat; background-size: contain;}
.footerWrp .ftr-social li a.yt{background: url("../images/social-yt-w.svg") center no-repeat; background-size: contain;}
.footerWrp .ftr-social li a:hover.fb{background: url("../images/social-fb-b.svg") center no-repeat; background-size: contain;}
.footerWrp .ftr-social li a:hover.in{background: url("../images/social-in-b.svg") center no-repeat; background-size: contain;}
.footerWrp .ftr-social li a:hover.tw{background: url("../images/social-tw-b.svg") center no-repeat; background-size: contain;}
.footerWrp .ftr-social li a:hover.yt{background: url("../images/social-yt-b.svg") center no-repeat; background-size: contain;}
.footerWrp .ftr-bottom{border-top: 1px solid #8595bb; padding: 20px 0; margin-top: 60px;}
/*ENDS: FOOTER css -------------*/

.bg-blue{background: #08173C; color: #fff;}
.bg-blue h2{color: #fff;}
.bg-blue h2:after{background: #fff;}
.bg-blue .btn-text{color: #fff; }
.bg-blue .btn-text:after{background: #DFDFDF;}

@keyframes bgScale {
  0% {transform:scale(1);}
  100% {transform:scale(1.08);}
}

.introWrp{padding: 200px 0 0 0;}
.introWrp .introBan{margin-top: 60px;border-radius: 20px; overflow: hidden;}
.introWrp .introBan img{width: 100%;  animation: bgScale 12s alternate infinite linear;}


.aboutWrp{ }
.aboutWrp .calloutWrp{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.aboutWrp .calloutWrp .callout{width: 45%; border-bottom: 1px solid #B1B1B1; padding: 40px 0;}
.aboutWrp .calloutWrp .callout:last-child{border: none;}
.aboutWrp .calloutWrp .callout h5{font-size: 64px; padding:0 0 10px 0; font-weight: 400;}
.aboutWrp .calloutWrp .callout p{margin: 0;}
.aboutWrp .callout.big { margin: 80px 0 0 0;}
.aboutWrp .callout.big h5{font-size: 280px; padding:0; font-weight: 100; margin: 0; line-height:1;}
.aboutWrp .callout.big p{margin: 0; font-size: 22px;}


.rndWrp{ padding:120px 0; background: url("../images/bg-rnd.jpg") bottom center no-repeat; background-size: cover;}
.rndWrp .imgDiv{border-radius: 30px; position: relative; overflow: hidden;}
.rndWrp .imgDiv img{width: 100%;  animation: bgScale 12s alternate infinite linear;}


.regultryWrp{background: #F9FAF7; padding: 120px 0; width: 100%; display: inline-block;}
.regultryWrp .marquee .js-marquee{display: inline-flex;}
.regultryWrp .marquee .js-marquee li{margin: 0 20px; border-radius: 10px; overflow: hidden;}
.regultryWrp .marquee .js-marquee li img{width: 100%;}


.prodListWrp .prodPnl{border-bottom: 1px solid #C6C6C6; padding: 20px 0; position: relative;display: flex;justify-content: space-between; align-items: flex-end; flex-direction: row-reverse}
.prodListWrp .prodPnl h3{margin: 20px 0;}
.prodListWrp .prodPnl:before{content: ''; width: 120px; height: 120px; display: inline-block; border-radius: 50%; }
.prodListWrp .prodPnl.prod1:before{background: url("../images/icon-vegan.svg") center no-repeat; background-size: contain;}
.prodListWrp .prodPnl.prod2:before{background: url("../images/icon-glutathin.svg") center no-repeat; background-size: contain;}
.prodListWrp .prodPnl.prod3:before{background: url("../images/icon-hyaluronic.svg") center no-repeat; background-size: contain;}

.susWrp {background: url("../images/bg-sus.jpg") bottom center no-repeat; background-size: cover;}
.susWrp .imgDiv{margin-left: 60px; border-radius: 30px; overflow: hidden; }
.susWrp .imgDiv img{width: 100%;  animation: bgScale 12s alternate infinite linear;}


.getinWrp{background: #4060AC; padding:60px 0; color: #fff;}
.getinWrp h4{font-size: 64px; margin: 0; padding: 0; font-weight: 400;line-height: 1;}
.getinWrp .btn-text{color: #fff; }
.getinWrp .btn-text:after{background: #DFDFDF;}


.cmoWrp .nav-tabs{flex-direction: column; justify-content: space-between; height: 100%;}
.cmoWrp .nav-tabs li{flex: 25% 0; }
.cmoWrp .nav-tabs .nav-link{display: block; border:1px solid rgba(255, 255, 255, .2); border-radius: 0; width: 100%; height: 100%; padding: 0 80px; text-align:left; font-size: 20px; font-weight: 400; color: #fff; background: #08173C; position: relative; transition:all .5s ease-out;}
.cmoWrp .nav-tabs .nav-link.active{background: #24C4F4; transition:all .5s ease-out;}
.cmoWrp .nav-tabs .nav-link.active:hover{background: #24C4F4; transition:all .5s ease-out; cursor: default}
.cmoWrp .nav-tabs .nav-link:hover{background: #4060ac; transition:all .5s ease-out;}
.cmoWrp .nav-tabs .nav-link:before{content: ''; background: url("../images/icon-arrow-right.svg") center no-repeat; background-size: contain; width: 26px; height: 26px; position: absolute; right: 60px;transform: rotate(-45deg)}
.cmoWrp .nav-tabs .nav-link.active:before{ transform: rotate(0deg)}


.accordion-item{border: none;}
.accordion-body{padding: 0; border: none; display: flex; flex-direction: column; height: 100%;}
.cmoWrp .copyDiv{padding:40px  60px; display: inline-flex; align-items: center; min-height: 340px; background: #e9e9e9;}
.cmoWrp .copyDiv p{padding:0px; margin: 0;}
.cmoWrp .imgDiv{position: relative; overflow: hidden;}
.cmoWrp .imgDiv img{width: 100%; height: 100%; object-fit: cover;}

.modal-xl{max-width: 1400px;}
.modal-content{border-radius: 20px;}
.modal .btn-close{position: absolute; top: 15px; right: 15px; z-index: 999;}
.modal .modal-body{padding:0 60px;}
.modal .imgDiv{border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; position: relative; overflow: hidden; margin-bottom: 40px;}
.modal .imgDiv img{width: 100%;}
.modal .modal-body h3{font-size: 28px; font-weight: 600;}

.galSlider img{width: 100%;}
.galSlider img{width: 100%;}
.galSlider .swiper-slide{opacity: 0.4 !important;  z-index: -1 !important; border-radius: 20px; overflow: hidden; transition: all 0.6s ease-in-out !important;}
.galSlider .swiper-slide.swiper-slide-active{opacity: 1 !important; z-index: 2 !important; transition: all 0.6s ease-in-out !important; }
.galSlider .swiper-slide.swiper-slide-prev,
.galSlider .swiper-slide.swiper-slide-next{ background: #fff; opacity: 1 !important; z-index: 1 !important; transition: all 0.6s ease-in-out !important;}
.galSlider .swiper-slide.swiper-slide-active img{opacity: 1 !important;transition: all 0.6s ease-in-out !important;}
.galSlider .swiper-slide.swiper-slide-prev img,
.galSlider .swiper-slide.swiper-slide-next img{opacity: 0.3 !important;transition: all 0.6s ease-in-out !important;}


.caption{position: absolute; bottom: 0; text-align: center; width: 100%; line-height: 1.1; margin: 0; padding: 10px; background: rgba(0,0,0,.3); color: #fff; font-size: 18px;}





@media(max-width:1700px){
  h1{font-size: 52px}
  .getinWrp h4{font-size: 54px;}

}
@media(max-width:1600px){
  .introWrp{padding: 150px 0 0 0;}
  .aboutWrp .callout.big h5{font-size: 260px;}
  .aboutWrp .calloutWrp .callout h5{padding: 0; margin: 0;}
}

@media(max-width:1500px){
}


@media(max-width:1400px){
  h3{font-size: 32px;}
}
@media(max-width:1370px){
  h1{font-size: 48px;}
  h2{font-size: 14px; margin-bottom: 40px;}
  h3{font-size: 28px;}
  p{font-size: 17px; line-height: 1.5; margin-bottom: 20px;}
  .btn-text{font-size: 14px;}
  .header{padding: 10px 0;}
  .header .navbar-brand img{height: 70px;}
  .header .navbar{padding: 10px 40px;font-size: 15px;}
  .mobile_menu li a{padding:7px 15px 3px 15px;}
  .introWrp{padding: 120px 0 0 0;}
  .introWrp .introBan{margin-top: 40px;}
  section{padding: 80px 0;}
  .aboutWrp .calloutWrp .callout{padding: 30px 0;}
  .aboutWrp .calloutWrp .callout h5{font-size: 48px;}
  .aboutWrp .calloutWrp .callout p{font-size: 16px;}
  .aboutWrp .callout.big h5{font-size:200px;}
  .rndWrp{padding:  80px 0;}
  .cmoWrp .copyDiv{min-height: 277px;}
  .prodListWrp .prodPnl:after{width: 90px; height: 90px;}
  .getinWrp {padding: 40px 0;}
  .getinWrp h4{font-size: 42px;}
  .footerWrp p{font-size: 14px;}
}

@media(max-width:1100px){
  .mobile_menu li a{padding: 7px 10px 3px 10px;}
}
@media(max-width:992px){
    #sm_menu_ham.headerWhite span{background: #fff;}
  #sm_menu_ham{top: 28px;right: 28px;}
  #sm_menu_ham span{background: #000; height: 3px;}
  #sm_menu_ham.open span{background: #fff;}
  #sm_menu_ham span:nth-child(1){opacity: 0;}
  #sm_menu_ham span:nth-child(4){opacity: 0;}
  #sm_menu_ham span:nth-child(2){opacity: 1; top: 5px;}
  #sm_menu_ham.open span:nth-child(2){top: 10px;}
  #sm_menu_ham span:nth-child(3){opacity: 1; top: 15px}
  #sm_menu_ham.open span:nth-child(3){opacity: 1; top: 10px}
  .sm_menu_outer{top: 0; padding-top: 80px; background:#2B2625; }
  .sm_menu_outer .mobile_menu li{border-bottom: 0.5px solid #575757;}
  .sm_menu_outer .mobile_menu li a:after{content: none;}  
  /*-----*/
  h1{font-size: 42px; margin-bottom: 20px;  }
  .header .navbar{background: none;}
  
  .aboutWrp .callout.big{margin-bottom: 30px;}
  .aboutWrp .callout.big h5{font-size: 160px;}
  .rndWrp .imgDiv{margin-bottom: 30px;}
  
  h2.accordion-header:after{content: none;}
  .tab-content>.tab-pane { display: block; opacity: 1; }
    
  .accordion-button{background: #08173C; color: #fff; font-size: 20px; padding: 30px; font-weight: 400; border:1px solid rgba(255, 255, 255, .2);}
  .accordion-button:not(.collapsed){background: #24C4F4; color: #fff;}
  .accordion-button::after{content: ''; background: url("../images/icon-arrow-right.svg") center no-repeat; background-size: contain; width: 22px; height: 22px; position: absolute; right: 30px;transform: rotate(-0deg)}
  .accordion-button:not(.collapsed)::after{content: ''; background: url("../images/icon-arrow-right.svg") center no-repeat; background-size: contain; width: 22px; height: 22px; position: absolute; right: 30px;transform: rotate(90deg)}
  .accordion-button:focus{box-shadow: none; border: 1px solid rgba(255, 255, 255, .2);}
  
  .accordion-body{display: block;}
  .cmoWrp .copyDiv{padding: 40px 30px; min-height: inherit;}
  
  .susWrp .imgDiv{margin-left: 0; margin-top: 30px;}

}

@media(max-width:767px){
  .header .navbar-brand img{height: 52px;}
  h1{font-size: 38px;}
  h2{margin-bottom: 30px;}
  h3{font-size: 28px; line-height: 1.3;}
  .aboutWrp .calloutWrp .callout h5{font-size: 32px;}
  .aboutWrp .callout.big h5{font-size: 110px;}
  .aboutWrp .callout.big p{font-size: 18px;}
  .aboutWrp .pt-5{padding-top: 0 !important}
  .accordion-button{padding: 20px; font-size: 18px;}
  .accordion-button::after, .accordion-button:not(.collapsed)::after{width: 18px; height: 18px; right: 10px;}
  .cmoWrp .copyDiv{padding: 30px 20px;}
  .prodListWrp .prodPnl:before{width: 62px; height: 62px;}
  .prodListWrp .prodPnl{display: block;}
  .getinWrp h4{font-size: 30px;}
}
