@import url('https://fonts.googleapis.com/css2?family=Anek+Devanagari:wght@100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap');
   
*{ padding: 0; margin: 0; box-sizing: border-box; }
body { font-family: 'Anek Devanagari', sans-serif; font-size: 16px; color: #000; line-height: 1.6; background-color: #fff; }
img { display: block; max-width: 100%; height: auto; }
a { outline: none; text-decoration: none; color: #000; text-decoration: none; transition: all 0.3s ease-in-out; }
a:hover { color: #39b54a; }
ul,ol { padding: 0; margin: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.7; font-family: 'Anek Devanagari', sans-serif; font-size: 28px;}
h2 {padding-bottom: 15px;}
::placeholder {color: #fff; opacity: 1;  }    
::-ms-input-placeholder { color: #fff; }
img{width: 100%;}
p{font-family: 'Anek Devanagari', sans-serif; line-height: 28px;}
.wrapper { width: 100%; position: relative; overflow: hidden; }
.mob { display: none; }

/* global */
.containerCenter { padding-right: calc((100% - 1320px)/ 2); padding-left: calc((100% - 1320px)/ 2); }
main { padding-top: 0!important; }

.wrapper { position: relative; overflow: hidden; width: 100%; }

/* header */
.fixedHeader{border-bottom: 1px solid #eaeaea;position: fixed; width: 100%; z-index:3;}
.headerSection { padding: 0 50px; position: absolute; left: 0; top: 0; z-index: 99; width: 100%; display: flex; align-items: center; justify-content: space-between; min-height: 60px; background-color:#fff }
.headerSection .logo { display: block; height:53px; background-image: none;width: 163px; }
.headerSection .ordernow { color: #fff; background-color:#53a64b; position: relative; text-transform: capitalize; font-size: 14px; font-weight: 500; background-image: none;  border-radius: 20px;  padding:12px 25px 8px }
.headerSection .menu { display: flex; flex-wrap: wrap; }
.headerSection .menu li { margin: 0 15px; }
.headerSection .menu li a { color: #000; font-size: 16px; text-decoration: none; }
.headerSection .menu li a:hover { color: #53a64b; }
.headerSection .toggle { margin-right: 20px; position: relative; z-index: 9; display: none; align-items: center; width: 26px; height: 32px; background-image: none; }
.headerSection .toggle span { position: relative; display: block; width:22px; height: 3px; text-indent: -9999px; border-radius: 2px; background: #000; transition: .2s; }
.headerSection .toggle span:before, .headerSection .toggle span:after { position: absolute; left: 0; display: block; width: 100%; height:2px; border-radius: 2px; background-color: #000; transition-duration: .2s,.2s; content: ""; }
.headerSection .toggle span:before { top: -9px; }
.headerSection .toggle span:after { bottom: -9px; }
.headerSection .toggle.is-active span { background: none; }
.headerSection .toggle.is-active span:before { top: 0; transform: rotate(135deg); }
.headerSection .toggle.is-active span:after { bottom: 0; transform: rotate(-135deg); }
.headerSection .mobileMenu { padding: 40px 40px; position: absolute; left: 0; top: 0; z-index: 5; transition: all 0.3s ease-in-out; opacity: 0; visibility: hidden; width: 100%; height: 100svh; min-height: 100svh; background-image: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(237,221,209,1) 100%); }
.headerSection .mobileMenu.is-active { opacity: 1; visibility: visible; }
.headerSection .ramMandir { position: absolute; left: 0; bottom: 0; width: 40%; }
.headerSection .ramMandir img { width: 100%; height: auto; }
.headerSection .mobileMenu ul { list-style: none; width: 100%; height: calc(100svh - 80px); overflow-y: auto; }
.headerSection .mobileMenu li { padding: 10px 0; width: 100%; border-bottom: 1px solid #bdbdba; background: url(https://www.jagranimages.com/images/ayodhya/arrow.svg) right 17px no-repeat; background-size: 20px;  }
.headerSection .mobileMenu li a { font-size: 20px; font-weight: 700; color: #333; }
.headerSection .mobileMenu li a:hover { color: #53a64b; }
.headerSection .mobileMenu li:last-child { border-bottom: 0; }
.headerSection .closeButton { position: absolute; right: 20px; top: 15px; display: inline-flex; align-items: center; font-size: 12px; }
.headerSection .closeButton svg { margin-left: 5px; width: 10px; height: 10px; }


/* hero */
.heroSection { margin-top: 30px; width: 100%;  position: relative; overflow: hidden; /*min-height:710px;*/ position: relative;}
.heroSection.containerCenter {padding-right: calc((100% - 1060px) / 2); padding-left: calc((100% - 1060px) / 2);}
.heroSection .buttons { position: absolute; left: 50%; bottom: 50px; z-index: 2; transform: translateX(-50%); }
.heroSection .bg { width: 100%; height: auto; }
/* .heroSection .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } */
/* .heroSection .bg:before { position: absolute; left: 0; bottom: 0; display: block; content: ''; width: 100%; height: 68px; background: url(../images/bannerimage.png) center top no-repeat; background-size: 100%; z-index: 3;} */
.heroSection .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.heroInner{position: absolute; z-index: 2; width: 100%; top:100px;} 
.heroInner .content{display: flex; justify-content: space-between; }
.pyImage{ display: flex; justify-content: flex-end;}
.pyImage span{width: auto; padding-right: 0px;}
.pyImage p{font-size: 18px; font-weight: 500; padding-top: 20px;font-family:'Poppins', sans-serif;}
.pyImage p span{width: 100%; display: block;}
.pyImage span img{text-align: right; width: 52%;}
.pyImage.yogi img{position: relative; left: 182px;bottom:38%;}
.pyImage.modi img{position: relative; right: -25px;/*top:-9%;*/ bottom: 0;}
.kumbhlogo{position: absolute; top: 10%; left: 35%; z-index: 2; overflow: hidden; perspective: 1000px;}

.kumbhlogo img {display: block; width: 80%;  transform-origin: left; animation: wave 5s infinite;}
.mahakumbhContainer, .shortVideo{width: 100%; display: flex; justify-content: space-between; align-items: center; padding-top: 20px; padding-bottom: 20px;}
.mkLeft, .mkRight{width: 50%;}
.mkLeft{padding-left: 10%;}
.mkLeft img{max-width: 460px; width: 100%;}
.mkRight h1 {line-height: 1.7; margin-bottom: 10px;}
.mkRight h1 span{color: #df3f1d; display: block;}

.heroSection img{ width: 100%;}
.heroSection .contentSec{ padding-bottom: 0px;}
.leftflower{position: absolute; bottom: 264px; left: 0;width: 170px; z-index: 1;}
.rgtflower{position: absolute; bottom: 292px;right: 0; width: 110px; z-index: 1;}
.leftflower img, .rgtflower img{ width: auto;}
.imagecontent { max-width: 90%; margin: auto; padding: 20px; display: flex; justify-content: right; flex-wrap: wrap;}
.highlight {color:#fef206; font-weight: bold;}
.texthigh{display: block;}
.quote {text-align: center; font-size: 65px;line-height: 88px;text-shadow: 3px 3px 4px #000000; color: #fff; position: relative; font-family:"Teko", serif;font-weight: bold;}
.imagecontent .quote :before{position: absolute; top: 0; left:-55px; background:url(../images/quote.svg); background-color: #0000; width: 50px; height:50px; content:''; background-repeat: no-repeat;}
.imagecontent .quote :after{position: absolute; bottom: -9px; right:222px; background:url(../images/quote.svg); background-color: #0000; width: 50px; height:50px; content:''; background-repeat: no-repeat;}
/* .quote img{ width: 50px; height: 50px;} */

/*  */
.content2{position: absolute; bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
.content2 .pyImage2{width: 49%; display: flex; justify-content: center;}
.content2 .pyImage2 img{ height: auto;}
.content2 .pyImage2.menstand img{ width:78%;}
.content2 .pyImage2.bottleoil img{width:35%; object-fit: contain; object-position: bottom center;}

.orderbtnnew{display: flex;justify-content: right;align-items: center;position: relative;/*bottom: 50%; right: 50%;     transform: translate(85px, 33px);*/}
.order-button {display: inline-block;padding:10px 30px 8px; font-size:18px;font-weight: bold;color: #000;
    background-color: #fef206;border-radius:50px; text-decoration: none;transition: background-color 0.3s; }
  .order-button:hover { background-color: #fbc02d; color: #000;}
  
/* content sec */
.bgfull{ background:url(../images/bg-full.jpg) ; background-repeat: repeat;}

.contentSec {padding-top:60px; padding-bottom: 50px; position: relative; width: 100%;}
.contentSec .content { margin-inline: auto; line-height: 2; max-width: 800px; text-align: center; width: 100%; }
.contentSec h1 { text-align: center; color: #000; font-size:42px; }
.contentSec p { text-align: center; font-weight: 500; font-size: 21px;line-height: 40px; }


/* video Section */
.videonews{position:relative; padding-bottom: 50px; display: flex; justify-content: center; align-items: center;
        flex-wrap: wrap;}
.videonews .leftleaf{ position: absolute; left: 0; bottom: 0;width:390px;}
.videonews .rightleaf{ position: absolute; right: 0; top: -215px;width:390px;}
.bigVideo { margin-bottom: 40px; width: 100%; position: relative; }
.bigVideo a { position: relative; display: block; }
.bigVideo img {width: 600px;height: 600px; border-radius: 50%; margin: 0 auto; -webkit-border-radius:50%; }

/* .bigVideo .videoIcon { position: absolute; left:44%; top:44%;  background-color: rgba(0, 0, 0, 0.1); z-index: 1; } */
.bigVideo .videoIcon { position: absolute; left:50%; top:50%;  z-index: 1;transform: translate(-50%, -50%); } 
.bigVideo .videoIcon img { width:150px; height:150px; display: block; fill: #da251d;background-color: rgba(0, 0, 0, 0.1); }
.video-play-button {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
 
    border-radius: 50%;
    padding: 18px;
  }
  
  .video-play-button:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width:80px;
    height:80px;
    background: #fff;
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
  }
  
  .video-play-button:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width:80px;
    height:80px;
    background: #a1a0ad;
    border-radius: 50%;
    transition: all 200ms;
  }
  
  .video-play-button:hover:after {
    background-color: darken(#fa183d, 10%);
  }
  

  
  .video-play-button span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 20px solid #fff;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
  }
  
  @keyframes pulse-border {
    0% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
      opacity: 1;
    }
    100% {
      transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
      opacity: 0;
    }
  }
  

  
  

  

  

.text-container {position: absolute; bottom: -70px;left: -144px; color: rgb(0, 0, 0); font-size: 58px;font-weight: bold;
    padding: 20px;line-height: 75px;}
.outline {/*-webkit-text-stroke: 1px white;*/ text-shadow: 2px 1px 0px #ffffff; display: block;color: black;}
.bottomtext { padding-top: 30px;}
.textline {font-size: 16px; flex:2; min-width: 150px;}
.underline {border-bottom: 2px solid black; width: 100px;display: inline-block;}
.hindi-text {font-size: 22px; font-weight: normal; text-align: center;}
.boldtext {font-weight: bold;}

/* whychoose hair oil section */
.whySelect{width: 100%; max-width: 1200px; margin: 0 auto 80px;  padding-top: 50px; }
.whySelect h2{text-align: center; font-size: 42px; line-height: 52px; margin-bottom: 50px;}
.whySelect .block{display: flex;}
.listVarity{width: 33%;}
.listVarity ul{width: 100%;}
.listVarity li{display: flex; width: 100%; margin-bottom:35px; align-items: center;}
.listVarity li p{font-size: 18px; font-weight: 700; width: 155px; padding-top: 10px;}
.listVarity li span{ background-color:#53a64b; width:85px; height: 85px; border-radius: 100%; display:flex; align-items: center;justify-content: center;}
.listVarity li span img{ width:40px;height: auto;}
.listVarity li.left{padding-left: 55px;}
.listVarity li p.left{padding-left: 30px;}
.hairoilBot{width:50%;}
.hairoilBot img{max-width: 310px; width: 100%; margin:-40px auto;}


.shortvideoSection { width: 100%; padding:50px 0px; display: flex; justify-content: space-between; position: relative;}
.shortvideoSection h2{font-size: 42px; font-weight: 700; color: #000; line-height: 52px; margin-bottom: 20px;}
.shortHead{width: 35%; position: relative; margin-right: 15px;  padding: 40px 60px 100px 100px;  color: #fff;}
.shortvideoSection .cardWebstory img { display: block; max-width: 100%; height: auto;}
.shortvideoSection .cardWebstory {width: 100%;height: 100%;display: block;position: relative;}
/* .shortvideoSection .cardWebstory:before {position: absolute;left: 0;top: 0;width: 100%;height: 100%;content: ''; opacity: 0.7; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 41%, rgba(0, 0, 0, 0) 43%, rgba(0, 0, 0, 10) 70%);} */
.shortvideoSection .cardWebstory .caption {padding: 15px 25px 30px; font-size: 20px; line-height: 32px; position: absolute; left: 0; bottom: 0; width: 100%; color: #fff;font-weight: 500;transition: all 0.3s ease-in-out;}
.shortvideoSection .button {display: flex;align-items: center;gap: 15px;width: 160px;position: relative;top: 90px;}
.shortvideoSection .button.web{display: block;}
.shortvideoSection .button.mob{display: none;}
.shortvideoSection .slideBtn {top: -80px;margin: 0;cursor: pointer;width: 60px;height: 60px;display: flex;align-items: center;justify-content: center;border-radius: 50%;overflow: hidden;transition: all 0.3s ease-in-out;border: 1px solid #c7c7c7;background-color: #f1f0ee;}
.shortvideoSection .slideBtn:hover {border: 1px solid #000;background-color: #000;}
.shortvideoSection .swiper-button-next:after svg, .shortvideoSection .swiper-button-prev:after svg{color: #fff;}
.shortvideoSection .slideBtn svg {width: 0;height: 14px;transition: all 0.3s ease-in-out;height: auto;object-fit: unset;transform-origin: unset;fill: #000;}
.shortvideoSection .swiper-slide{border-radius: 20px; overflow: hidden;}
.shortvideoSection .swiper-button-next:after, .shortvideoSection .swiper-button-prev:after{font-size: 30px; color: #000; position: relative; top: 2px;}
.shortvideoSection .swiper-button-next:after{left: 4px;}
.shortvideoSection .swiper-button-next:hover:after, 
.shortvideoSection .swiper-button-prev:hover:after { color: #fff; }

.howtouseSec{display: flex; flex-wrap: wrap; width: 100%; position: relative; margin-bottom: 90px;}
.howtouseSec .head{width: 100%;}
.howtouseSec .head h2{width: 100%; text-align: center; font-size: 42px; line-height: 52px;}
.howtouseSec .head p{display: block; padding: 0px 0 50px; font-size: 20px; text-align: center;}
.howtouseSec .swiper-wrapper .swiper-slide{display: flex; /*align-items: center;*/ position: relative;}
.howtouseSec .swiper-wrapper .swiper-slide.one::before {content: ""; position: absolute; top: 50%;  left: 100%;  width: 100%; height: 8px; background: #53a64b; z-index: 1; width: 23px;}
.howtouseSec .swiper-wrapper .swiper-slide.one::after {content: ""; position: absolute; top: 50%;  right: 100%;  width: 100%;  height: 8px;  background: #53a64b; z-index: 1; width: 23px;}
.howtouseSec .swiper-wrapper .swiper-slide.two::before {content: ""; position: absolute; top: 50%; right: 100%; height: 8px; background: #9c6748; z-index: 1; width: 23px;}
.howtouseSec .swiper-wrapper .swiper-slide.two::after {content: "";  position: absolute; top: 50%; left: 100%; height: 8px; background: #9c6748;; z-index: 1; width: 23px;}
.howtouseSec .swiper-wrapper .swiper-slide.three::before {content: ""; position: absolute; top: 50%; right: 100%; height: 8px; background: #c2a850; z-index: 1; width: 23px;}
.howtouseSec .swiper-wrapper .swiper-slide.three::after { content: ""; position: absolute; top: 50%; left: 100%; height: 8px; background: #c2a850;  z-index: 1;  width:23px;}

.howtouseSec .scrolSlider{position: relative; width: 100%; overflow: hidden;}
.howtouseSec h3{padding-bottom: 15px; font-size: 40px; font-weight: 600; color: #fff;}


.slider-item{border-radius:20px; padding: 60px 40px 0; position: relative; width:100%;}
.howtouseSec .swiper-wrapper .swiper-slide .slider-item:after{ content: ""; position: absolute; top: 42%; left: 106%; height: 40px;  background: #f1f0eb;  z-index: 5; border: 8px solid #9c6748;  width: 40px; border-radius: 100%;}


.slider-item p{color: #fff; font-size: 22px; line-height: 38px; padding-bottom: 60px;}
.green{background: #53a64b;}
.darkbrown{background: #9c6748;}
.lightbrown{background: #c2a850;}
.slider-item.w440{width: 500px; min-height: 545px;} 
.slider-item.w545  {width: 600px; height: 370px;}

/* faq */
.faqSection { width: 100%; position: relative;padding-bottom: 100px; }
.faqSection .block { padding: 30px; width: 100%; position: relative; }
.block .cartImage{position: absolute; top:205px;right: 135px; z-index: 1;transform: rotate(-10deg);
    transition: transform 0.3sease-in-out;}
.block .cartImage img{width:280px; border-radius: 10px;}
.faqSection .top { margin-bottom: 30px; width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
.faqSection .top h2 { font-size:42px; }
.faqSection .topImg { margin-top: -116px; width: 380px; }
.faqSection .accordion { width: 100%; }
.faqSection .accordionItem { margin-bottom: 20px; width: 100%; border-bottom: 1px solid #000; padding-bottom: 20px; }
.faqSection .accordionItem:last-child { margin-bottom: 0; }
.faqSection .accordionTitle { padding-right: 30px; cursor: pointer; font-size: 28px; font-weight:800; color: #524f50; position: relative; transition: all 0.3s ease-in-out; }
.faqSection .accordionTitle:after { content: "+"; position: absolute; top: 50%; transform: translateY(-50%); right: 10px; transition: all 0.3s ease; font-size: 24px; }
.faqSection .accordionTitle.active:after { content: "-"; color: #000; }
.faqSection .accordionTab { display: none; padding: 15px 0; line-height: 42px; font-size:20px; width: 45%; font-weight: 400; }
.faqSection .accordionTitle.active{color: #53a64b;}
.otheringeri{padding:30px 0px 20px;}
.otheringeri h3, .howtouse h3{font-size: 28px; font-weight: 800; color: #524f50;}
.otheringeri p{font-size: 20px; line-height: 42px;}
.howtouse li{margin-left: 29px; list-style: disc; line-height:38px; font-size: 20px;}
.usecontai {max-width: 600px; margin: auto; position: relative; z-index: 1;background:#e1e8dc;padding:55px 0;margin-top: 95px;}
.usecontai:before { position: absolute; left: -3000px; top: 0; content: ''; width: calc(100vw + 3000px); height: 100%; z-index: -1; background:#e1e8dc; }
.usecontai p{text-align: center; font-weight: 600;}
.usecontai h2 { font-size: 42px; font-weight: 800; line-height: 52px;color: #000; text-align: center; padding-bottom: 0px;}
.usage {display: flex; flex-wrap: wrap; justify-content:center; margin: 20px 0; gap: 22px;}
.usage-box {display: flex; width: 45%; background: #f9f9f9; padding:15px 23px; border-radius: 8px;text-align: center; border: 1px dashed #5caa54; justify-content: space-between;align-items: center;}
.useicon {width: 40px;}
.weekly{ width: calc(100% - 60px); text-align: left;}
.weekly p {text-align: left; font-weight: normal;}
.highlighttxt {color:#5caa54;font-weight: bold;}

/* testimonial section */
.headingtesti{ text-align: center;}
.headingtesti h2{font-size: 42px;}
.carttesti{ padding-bottom: 50px;}
.reviews-container {display: flex; gap: 20px; width: 100%; flex-wrap: wrap; justify-content: center;}
.review-card {background: white; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  height: 178px;}
.user {display: flex;align-items: center; margin-bottom: 10px;}
.avatar {width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center;
    align-items: center; font-weight: bold; color: white; margin-right: 10px;}
.username {font-weight: bold;}
.stars {color: #FFA500;font-size: 22px;}
.see-more {margin-top: 20px;background:#53a64b; color:#fff; padding: 10px 20px;border: none; border-radius: 20px;
    cursor: pointer;}
/* Different colors for user icons */
.bg-red { background-color: #cd7575; }
.bg-blue { background-color: #75cdcc; }
.bg-sky { background-color: #a1bae8; }
.bg-pink { background-color: #dab3f0; }
.bg-yellow { background-color: #cdaf75; }
.bg-green { background-color: #a1e8a3; }
.btn{display: flex; justify-content: center;}
.carttesti .pagination{display:flex; justify-content: center; align-items: center;padding: 14px 0px 10px;}
.carttesti .pagination span { width: 15px; height: 15px; background-color: #53a64b; text-align: center; }

/* Popup Start */
.popup {position: fixed;top: 0;left: 0;width: 100%; height: 100%; background:rgb(0 0 0 / 95%);display: flex; justify-content: center; align-items: center; z-index: 1000;}
.popup.hidden {display: none;}
.popup-content {background: #fff; padding: 11px 11px 2px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    max-width: 90%; text-align: center; position: relative;}
.close {position: absolute;top: -15px; right: -18px; font-size: 22px; color: #ffffff; cursor: pointer; background-color: #000; border-radius: 100%; display: flex;align-items: center;justify-content: center; width: 36px; height: 36px;padding: 3px 0px 0px 0px;}
.popup-content iframe {max-width: 560px; height: auto; aspect-ratio: 16 / 9; border: none;}
#popup button{ color: #fff; background: rgb(77, 172, 142, 1); background: linear-gradient(0deg, rgba(77, 172, 142, 1) 0%, rgba(28, 240, 174, 1) 100%); border-radius: 6px; padding: 6px 20px; text-transform: uppercase; border: 0; margin: 25px 0; text-align: left; cursor: pointer;}
::-webkit-scrollbar {width: 5px; height: 0;}
::-webkit-scrollbar-thumb { background: #b7b7b7; border-radius: 10px;}
::-webkit-scrollbar-track {background: #f9f9f9;}

/* Popup End */

/* footer section */
.footer{background-color: #222222; text-align: right; padding: 25px 0 15px;}
.footer .wrapper {display: flex; justify-content:center; align-items: center;}
.corigthline{border-top: 1px solid #666666; padding: 10px 0px 0px; margin-top: 12px;}
.cpwrite{ width: 100%; text-align:center;  color: #666666;;}
.contactper span{ display: block; color: #fff; text-align: left;}
.contactper span a{ color: #fff;margin-left: 0;}
.contactper span.namecon{font-weight: 600; font-size: 35px;}
.footer .social-media{padding-left: 20px; display: flex; align-items: center;}
.footer .title {color: #fff;text-transform: capitalize;font-size: 15px;}
.footer .socialIcon {display: flex;flex-wrap: wrap; list-style: none;}
.footer .socialIcon li {margin-left: 10px;}
.footer .socialIcon li a {color: #fff; display: flex; align-items: center; justify-content: center; width: 40px;    height: 40px; border-radius: 50%; background-image: none;border: 1px solid #fff;}
.footer .socialIcon li a svg{ width: 18px; height: 18px;fill: #fff;}
.disclaimer{ width: 100%;}
.disclaimer b{ color: #fff;}
.disclaimer p{font-size:11px; color: #fff; text-align: center; line-height:15px;}

.disclaimer .full-text { display: none;}
.toggle-btn {color: white; cursor: pointer; display: inline-block; margin-top: 5px; background-color: #45a049; padding: 5px 10px 3px; border-radius: 10px;}


/* dial contact section */
.dialcon{font-size: 18px; position: fixed;right: 0; bottom:0; transform: translateY(-50%) rotate(180deg);
font-weight: 700; z-index: 9;writing-mode: vertical-rl; color: #fff; opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out;}
.dialcon.show { opacity: 1; visibility: visible;}

.contact-btn {display: flex; align-items: center; background-color: #4caf50; color: #fff; padding:26px 3px 3px 3px;border-radius: 50px; font-size: 16px;font-weight: bold;border: none;cursor: pointer; text-decoration: none; transition: 0.3s;}
.contact-btn:hover {background-color: #45a049;color:#fff;}
.contact-btn .icon, .call-now .icon {width: 40px;height: 40px; background-color: #d7ffd7;border-radius: 50%;display: flex;
    justify-content: center; align-items: center;margin-top: 8px;}
.contact-btn svg, .call-now svg {width: 17px;height: 17px; fill: #000;writing-mode: vertical-rl;transform: rotate(180deg);}
.call-now{display: flex; align-items: center; padding: 10px 18px 8px; margin-top: 15px; line-height: 18px;}
.call-now .icon{width: 30px;height: 30px; margin-top: -5px; margin-left: 10px;}
.call-now svg{transform:inherit; width: 14px;height: 14px;}

@media screen and (max-width: 1424px){
    .pyImage.yogi img{bottom: 30%;}
}
@media screen and (max-width: 1320px)  {
    .containerCenter { padding-left: 20px; padding-right: 20px; }
    .orderbtnnew{position:static; justify-content: center;}
 }

 @media screen and (max-width: 1230px){
    .pyImage.yogi img{bottom: 18%;}
}

@media screen and (max-width: 991px)  {
    h2 { font-size: 35px; }
 
    /* .headerSection .logo  { width: 120px; height: 20px; } */
    .headerSection .menu li { margin: 0 7px; }
    .headerSection .menu li a { font-size: 14px; }
    .headerSection .ordernow { font-size: 12px;padding: 10px 20px 7px; }
    .heroSection .title { width: 55%; }
    .heroSection .mandir { width: 50%; }
    .heroSection .ramNaam { width: 210px; }
    .heroSection .adHeading { font-size: 16px; }
    .heroSection .adRight { width: 150px; }
    .pyImage.yogi img{left: 0; /*bottom: 64px;*/ bottom: 0;}
    .contentSec h1 {font-size: 28px; line-height: 40px;}
    .quote{font-size: 34px;line-height:46px;}
    .imagecontent{justify-content: center;}
    .faqSection .block { padding: 20px; } 
    .faqSection .topImg { margin-top: -87px; width: 300px; }
    .faqSection .top h2 { font-size: 50px; }
    .faqSection .accordionTab{width: 100%;}
    .block .cartImage, .videonews .rightleaf, .videonews .leftleaf, .leftflower, .rgtflower{display:none;}
    .faqSection .top{display: block;}
    .bigVideo img{height: 300px; width: 300px;}
    .bigVideo .videoIcon{transform: translate(-50%, -50%);}
    .bigVideo .videoIcon img{width: 80px; height: 80px;}
    .text-container{padding: 10px;line-height: 38px;font-size: 34px;position: static;text-align: center;}
    .bottomtext{margin-left:0px; padding-top:0px; display: block; text-align: center;}
    .hindi-text{font-size: 18px;}
    .reviews-container{justify-content: center;}
    .review-card{height: 100%;}
    .content2 .pyImage2.menstand img{ width:100%;}
    .content2 .pyImage2.bottleoil img{width: 70%;}
    /* .orderbtnnew{position:static; justify-content: center;transform: inherit;} */
    .imagecontent .quote :before{height: 20px; width:20px; left: -22px;}
    .imagecontent .quote :after{bottom: 0; right:52px; height: 20px; width: 20px;}

}


@media screen and (min-width: 767px)  {
    .headerSection .mobileMenu { display: none; }
 }
 @media screen and (max-width: 767px)  {
    h1 { font-size: 40px; }
    h2 { font-size: 30px; }
    body { font-size: 16px; }
    .hidden { overflow: hidden; }
    .tp-modal-close.hidden { overflow: hidden; }

    .desktop { display: none; }
    .mob { display: block; }

    .headerSection { justify-content: unset; }
    /* .headerSection .logo { width: 120px; height: 20px; } */
    .headerSection .ordernow { margin-left: auto; font-size: 12px; }
    .headerSection .menu { display: none; }
    .headerSection .toggle { display: flex; margin-right: 10px;}



    .pyImage{padding-top: 0%; width: 100%;}
    .pyImage img{height: 90px; width: 100%;}
    .pyImage span{padding-right: 15px; width: 100%; padding-top:100px; display: flex; justify-content: center;}
    .pyImage span img{max-width: 250px; width: 100%; height: auto;}
    .pyImage.modi img{bottom:0;}
    .pyImage.yogi img{left: 0; /*bottom:55px;*/ bottom: 0;}
    /* .heroSection { min-height:580px; } */
    .heroSection { margin-top: 54px; }
    .heroSection .buttons { padding: 0 20px; display: flex; gap: 20px; left: unset; transform: unset; bottom: 20px; right: 0; width: 100%; justify-content: center; }
    .heroSection .buttons a { margin: 0; white-space: nowrap; }
    .heroSection .bg:before  {  height: 70px; background-size: cover;}
    .kumbhlogo {   left: 0;  width: 94%;    top: unset;    bottom: 215px;   display: flex;  justify-content: center;}
    .kumbhlogo img{max-width: 195px; width: 90%;}
    .mahakumbhContainer{flex-wrap: wrap; justify-content: center;}
    .mkLeft, .mkRight{width:100%;  padding: 0 10%; text-align: center;}
    .mkRight h1{line-height: 1.6;}
    .mkLeft{margin-bottom: 30px; display: flex; justify-content:center;}
    .mkLeft img{width: 240px;}
    .contentSec p{font-size: 18px;line-height:35px;}
    .contactper span a{display: block;}
    .contactper span.namecon{font-size:24px; text-align: center; margin-bottom: 10px;line-height: 32px;}
    .footer .social-media{padding-left: 0px; padding-top: 15px;}
    .cpwrite{ font-size: 12px;}
    .bigVideo { margin-bottom: 30px; }
    .faqSection{padding-bottom: 70px;}
    .faqSection .topImg { margin-top: -53px; width: 150px; }
    .faqSection .accordionTitle:after { right: 0; top: -2px; transform: translateY(0); }
    .faqSection .accordionTitle { padding-right: 20px; font-size:24px; }
    .otheringeri h3, .howtouse h3{font-size: 24px;}
    .content2 .pyImage2.menstand img{ width:100%;}
    .content2 .pyImage2.bottleoil img{width:82%;}

    .whySelect .block{flex-wrap: wrap;}    
    .listVarity, .hairoilBot {width: 100%;}    
    .listVarity li{justify-content: center;margin-bottom: 8px;}    
    .hairoilBot{order: 1;}    
    .listVarity{order: 2;}    
    .listVarity.order3{order: 3;}    
    .listVarity li.left{padding:0;}  
    .listVarity li span{width:46px; height:46px; margin-right:30px;}
    .listVarity li span img{width: 25px; height: 25px;}
    .hairoilBot img{width: 262px; margin: 0 auto;}
    .listVarity li p br{ display: none;}
    .listVarity li p{width: 55%; order: 2;}
    .listVarity li p.left{padding-left: 0px;}
    .shortvideoSection {flex-wrap: wrap; padding-left: 20px; padding-right: 20px;}
    .shortvideoSection h2{width: 100%; text-align: center; font-size: 36px; margin-bottom: 0;}    
    .shortHead{width: 100%; padding: 0px 0px 20px 0px; display: flex; flex-wrap: wrap;}  
    .shortvideoSection .button{top: 0; gap: 0; width: 100%;}
    .shortvideoSection .button.web{display: none;}
    .shortvideoSection .button.mob{display: block; position: absolute; top: 55%;}
    .shortvideoSection .swiper-wrapper{position: relative;}
    .slider-item{padding:15px 14px 6px;}
    .howtouseSec h3{font-size: 20px; padding-bottom: 0;}
    .slider-item p{font-size: 16px; line-height: 26px;padding-bottom: 20px;}

    .howtouseSec .swiper-wrapper .swiper-slide .slider-item:after,
    .howtouseSec .swiper-wrapper .swiper-slide.one::before ,
    .howtouseSec .swiper-wrapper .swiper-slide.one::after,
    .howtouseSec .swiper-wrapper .swiper-slide.two::before ,
    .howtouseSec .swiper-wrapper .swiper-slide.two::after ,
    .howtouseSec .swiper-wrapper .swiper-slide.three::before,
    .howtouseSec .swiper-wrapper .swiper-slide.three::after {content: inherit;}
    .howtouseSec .head h2{font-size: 29px;line-height: 42px;}
    .close{top: 4px;right: 3px; width: 30px;height: 30px; font-size: 20px;}
    .popup-content iframe {width: 100%;}
    .whySelect h2, .faqSection .top h2, .howtouseSec .head h2, .shortvideoSection h2, h2, .headingtesti h2, .usecontai h2{font-size: 28px;line-height: 42px; text-align:center;}
    .whySelect h2{margin-bottom: 0px;}
    .howtouseSec{margin-bottom:62px;}
    .videonews{padding-bottom: 15px;}
    .shortvideoSection{ padding-top: 15px;}
    .headerSection .logo{height: 40px;}
    .video-play-button:after, .video-play-button:before{width:80px; height:80px;}
    .contact-btn{padding:13px 3px 3px 3px;font-size:12px;}
    .disclaimer p{padding: 0 22px 0 0;}
    .usage{gap: 15px;}
    .usage-box{width: 100%;}
    .order-button{font-size: 16px;}
    .call-now{padding: 10px 16px 8px;}  
}

@media screen and (max-width: 479px)  {

    /* .bigVideo { height: 200px; } */
    /* .bigVideo a { height: 100%; } */
    .bigVideo img { height: 100%; object-fit: cover; object-position: center center; }
    .quote{font-size:27px; line-height:38px;}
    .imagecontent .quote :before{top: -17px;left: -23px;}
  
   
    /* .pyImage.yogi img{bottom: 13px;}
    .pyImage.modi img{top: -15px;}
    .pyImage span{padding-top:112px;} */
}

@media screen and (max-width: 435px)  {
    .leftflower img{width: 40%;}
    .leftflower{bottom:430px; display: block;}
    .rgtflower{bottom:435px;width: 50px; display: block;}
    .headerSection .ordernow{font-size: 11px;}

}