body{
      background-color: #FFF0D6;
   }
   .video-text{
      height: 250px;
   }
   #mobileVideo{
      display: none;
   }
   .intro-to-qh-container{
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 85%;
      margin-left: 8%
   }
   .intro-to-qh-head{
      padding: 1%;
      font-size: 45px;
      font-weight: bolder;
      color: #833D45;
   }
   .intro-image{
      width: 100%;
      height: 450px;
      margin-bottom: 10%;
   }
   .intro-image img {
      width: 100%;
      height: 100%;
   }
   #sc-intro-img{
      display: block;
   }
   #mb-intro-img{
      display: none;
   }
   .intro-to-qh-content{
      font-size: 21px;
      color: black; 
   }
   #sc-research{
      display: block;
   }
   #mb-research{
      display: none;
   }
   #sc-benefits{
      display: block;
   }
   #mb-benefits{
      display: none;
   }
   .benefits-qh{
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 85%;
      margin-left: 8%;
      margin-bottom: 8%;
   }
   .benefits-qh-head{
      padding: 1%;
      font-size: 45px;
      font-weight: bolder;
      color: #5C6D43;
   }
   .benefits-qh-content div {
      padding: 3%;
   }
   .benefits{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
   }
   .benefits div{
      margin:1%;
      
   }
    .main-container{
      position: relative;
      width: 31%;
      border-style: solid;
      border-width: 4px;
      border-color: #5C6D43;
      border-radius: 10%;
   }
   .main-container img {
      width: 344px;
      height: 240px;
      border-radius: 10%;
   }
   .image{
      display: block;
      width: 100%;
      height: auto;
   }
   .overlay{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: black;
      opacity: 0.9;
      border-radius: 10%;
      overflow: hidden;
      width: 100%;
      height: 0;
      transition: .5s ease;
   }
   .main-container:hover .overlay{
      height: 100%;
   }

   h1{
      width: 100%;
      color:white;
   }
   h3{
      color: white;
   }
   .why-to-choose{
      display: flex;
      flex-wrap: wrap;
   }
   .why-to-choose div{
      margin: 1%;
   }
   .choose-points{
      width: 255px;
      height: 330px;
      background-color: #5D4235;
      color: white;
      border-radius: ;
      text-align: center;
      padding: 2%;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-style: solid;
      border-width: 10px;
      border-color: #5C6D43;
   }
   .choose-points h2{
      color: white;
      font-weight: bolder;
      height: 70px;
   }
         
   .choose-points img {
      border-radius: ;
      height: 200px;
   }
   .choose-points:hover {
      background-color: white;
      color: #5C6D43;
   }
   .choose-points:hover h2{
      color: #5C6D43;
      font-weight: bolder;
   }
   .result-container{
      display: flex;    
   }
   .result-content{
      width: 70%;
   }
   .magical-img{
      margin-bottom: 1%;
      display: flex;
   }
   .magical-img div {
      margin: 1%;
   }
   .blogs{
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 2%;
   }
   .blogs div{
      margin: 3.3%;
   }
   .blog-section{
      width: 480px;
      height: 600px;
      background-color: #5C6D43;
      justify-content: center;
      align-items: center;
      margin: ;
   }
   .blog-container{
      width: 450px;
      height: 560px;
      background-color: white;
   }
   .blog-image{
      width: 425px;
      height: 300px;
      padding: 1%;
   }
   .blog-image img {
      width: 100%;
      height: 100%;
   }
   .blog-content{
      font-size: 30px;
      font-weight: bolder;
      color: black;
   }
   .blog-date {
      text-align: right;
   }

   .blog-btn button{
         width: 170px; 
         height: 45px; 
         background-color: black; 
         color: white; 
         font-size: 20px; 
         font-weight: bold; 
         border-radius: 30px;
         margin-bottom: 5%;
      }
      #mb-formulation{
         display: none;
      }
      #sr-formulation{
         display: block;
      }
      .Unq-formulations p{
            font-size: 50px; 
            font-weight: bolder; 
            color: black;
         }
         /*.formulations{
            display: flex;
            height: 850px;
         }*/
         .formulations {
             margin-top: 2%;
             display: flex;
             height: 628px;
             margin-left: 25%;
         }
         .formulations div{
            /*margin: 4%;*/
            margin-top: ;
            text-align: center;
         }
         .unq-formula{
            background-color: /*#5D4235*/white;
            opacity: 0.6;
            margin-top: ;
            height: 520px;
            width: 400px !important;
            /*border-style: solid;
            border-width: 1px;
            border-color: black;*/
            margin-left: 2%;
         }
         .unq-formula-cont{
            font-size: 22px;
         }
         .unq-formula h4{
            font-size: 30px;
            font-weight: bolder;
            color: black;
         }
         .unq-formula p{
            font-size: 25px;
            font-weight: ;
            color: black!important;
         }
         /*.formulations-img{
            width: 250px;
            height: 150px;
         }
         .formulations-img img{
            width: 100%;
            height: 100%;
         }*/
         
         #mb-footer-form{
            display: none;
         }

         @media only screen and (min-width: 360px) and (max-width: 411px) {
      #screenVideo{
         display: none;
      }
      #mobileVideo{
         display: block;
      }
      .header_section {
          width: 100%;
          /*background-image: url(../images/dark-bg.jpeg);*/
          height: 100%;
          background-size: 100%;
          padding: 0px 0px 0px 0px;
      }
      video {
          position: absolute;
          top: 0;
          left: 0;
          width: 360px !important;
          height: 500px !important;
          z-index: -1; /* Ensure the video stays behind any other content */
          object-fit: cover; /* Ensure the video covers the entire area */
      }
      .video-text{
         height: 500px !important;
      }
      .banner_taital{
         font-size: 65px !important;
      }
      .banner_text{
         padding: 1%;
      }
      .logo_mobile {
         width: 60px !important;
         height: 60px !important;
         text-align: center;
         align-items: center;
         justify-content: center;
         text-align: center;
         padding-bottom: 20px;
      }
      .services_taital{
         font-size: 35px ;
      }
      .intro-image{
         margin-bottom: 40%;
      }
      #sc-intro-img{
         display: none;
      }
      #mb-intro-img{
         display: block;
      }
      .intro-to-qh-content{
         font-size: 14px;
      }
      #sc-research{
      display: none;
      }
      #mb-research{
         display: block;
      }
      .row{
         background-image: url('<?php echo get_template_directory_uri(); ?>/images/412.png');
      }
      .about_taital{
         text-align: center;
         justify-content: center;
         color: black;
         padding: 2%;
      }
      .about_text{
         font-size: 14px !important;
         text-align: center;
      }
      .readmore_bt{
         margin-bottom: 2%;
         margin-left: 25%;
      }
      .choose-points{
         width: 310px;
         height: 350px;
         background-color: #5D4235;
         color: white;
         border-radius: ;
         text-align: center;
         padding: 2%;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         border-style: solid;
         border-width: 10px;
         border-color: #5C6D43;
      }
      .choose-points img {
         border-radius: ;
         height: 250px;
      }
      .choose-btn{
         justify-content: center;
         align-items: center; 
         margin-left: 27% !important; 
         margin-bottom: 3%;
      }
      .choose-btn button{
         width: 170px; 
         height: 45px; 
         background-color: black; 
         color: white; 
         font-size: 20px; 
         font-weight: bold; 
         border-radius: 30px;
      }
      #mb-formulation{
         display: block;
      }
      #sr-formulation{
         display: none;
      }
      .blog_section{
         display: none;
      }
      .formulations{
         display: flex;
         flex-wrap: wrap;
         height: 1070px;
         background-image: url('<?php echo get_template_directory_uri(); ?>/images/wave2.jpg');
      }
      .formulations div{
         margin: 8%;
         text-align: center;
      }
      .unq-formula{
         background-color: #5D4235;
         opacity: 0.6;
         height: 450px;
         width: 700px;
         border-style: solid;
         border-width: 1px;
         border-color: white;
      }
      .unq-formula h4{
         font-size: 25px;
         font-weight: bolder;
         color: white;
      }
      .unq-formula p{
         font-size: 20px;
         font-weight: ;
         color: white;
      }
      .benefits-qh{
         justify-content: center;
         align-items: center;
         text-align: center;
         width: 85%;
         margin-left: 8%;
         margin-bottom: 8%;
      }
      .benefits{
         display: flex;
         flex-wrap: wrap;
         width: 100%;
      }
      .benefits div{
         margin:1%;
      }
       .main-container{
         position: relative;
         width: 100%;
         border-style: solid;
         border-width: 4px;
         border-color: #5C6D43;
         border-radius: 10%;
      }
      .main-container img {
         width: 344px;
         height: 240px;
         border-radius: 10%;
      }
      .image{
         display: block;
         width: 100%;
         height: auto;
      }
      .overlay{
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         background-color: black;
         opacity: 0.9;
         border-radius: 10%;
         overflow: hidden;
         width: 100%;
         height: 0;
         transition: .5s ease;
      }
      .main-container:hover .overlay{
         height: 100%;
      }
      #sc-benefits{
         display: none;
      }
      #mb-benefits{
         display: block;
      }
      .blog-section{
         width: 100%;
         height: 490px;
         background-color: #5C6D43;
         justify-content: center;
         align-items: center;
         margin: ;
      }
      .blog-container{
         width: 290px !important;
         height: 460px;
         background-color: white;
      }
      .blog-image{
         width: 270px;
         height: 220px;
         padding: 1%;
      }
      .blog-image img {
         width: 100%;
         height: 100%;
      }
      .blog-content{
         font-size: 22px;
         font-weight: bolder;
         color: black;
      }
      .blog-date {
         text-align: right;
      }

      .blog-btn button{
         width: 170px; 
         height: 45px; 
         background-color: black; 
         color: white; 
         font-size: 20px; 
         font-weight: bold; 
         border-radius: 30px;
         margin-bottom: 5%;
      }
      .input_btn_main {
          width: 70%;
          display: ;
          background-color: #ffffff;
          border-radius: 40px;
          padding: 8px 0px;
          margin: 0 auto;
      }
      .input_btn_main input[type=text] {
         margin-bottom: 2%;
      }
      #sc-footer-form{
         display: none;
      }
      #mb-footer-form{
         display: block;
      }
   }

  @media only screen and (min-width: 412px) and (max-width: 435px) {
   .input_btn_main {
       width: 70%;
       display: ;
       background-color: #ffffff;
       border-radius: 40px;
       padding: 8px 0px;
       margin: 0 auto;
   }
   .input_btn_main input[type=text] {
      margin-bottom: 2%;
   }
      #screenVideo{
         display: none;
      }
      #mobileVideo{
         display: block;
      }
      .header_section {
          width: 100%;
          
          height: 100%;
          background-size: 100%;
          padding: 0px 0px 0px 0px;
      }
      video {
          position: absolute;
          top: 0;
          left: 0;
          width: 360px !important;
          height: 500px !important;
          z-index: -1; 
          object-fit: cover; 
      }
      .video-text{
         height: 700px !important;
      }
      .banner_taital h1{
         font-size: 50px !important;
      }
      
      .logo_mobile {
          width: 60px !important;
          height: 60px !important;
          text-align: center;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding-bottom: 20px;
      }
      .services_taital{
         font-size: 35px ;
      }
      .intro-image{
         margin-bottom: 40%;
      }
      #sc-intro-img{
         display: none;
      }
      #mb-intro-img{
         display: block;
      }
      .intro-to-qh-content{
         font-size: 14px;
      }
      #sc-research{
      display: none;
      }
      #mb-research{
         display: block;
      }
      .row{
         background-image: url('<?php echo get_template_directory_uri(); ?>/images/412.png');
      }
      .about_taital{
         text-align: center;
         justify-content: center;
         color: black;
         padding: 2%;
      }
      .about_text{
         font-size: 14px !important;
         text-align: center;
      }
      .readmore_bt{
         margin-bottom: 2%;
         margin-left: 25%;
      }
      .choose-points{
         width: 310px;
         height: 350px;
         background-color: #5D4235;
         color: white;
         border-radius: ;
         text-align: center;
         padding: 2%;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         border-style: solid;
         border-width: 10px;
         border-color: #5C6D43;
      }
      .choose-points img {
         border-radius: ;
         height: 250px;
      }
      .choose-btn{
         justify-content: center;
         align-items: center; 
         margin-left: 27% !important; 
         margin-bottom: 3%;
      }
      .choose-btn button{
         width: 170px; 
         height: 45px; 
         background-color: black; 
         color: white; 
         font-size: 20px; 
         font-weight: bold; 
         border-radius: 30px;
      }
      
      #mb-formulation{
         display: block;
      }
      #sr-formulation{
         display: none;
      }
      .blog_section{
         display: none;
      }
      .formulations{
         display: flex;
         flex-wrap: wrap;
         height: 1070px;
         background-image: url('<?php echo get_template_directory_uri(); ?>/images/wave2.jpg');
      }
      .formulations div{
         margin: 8%;
         text-align: center;
      }
      .unq-formula{
         background-color: #5D4235;
         opacity: 0.6;
         height: 450px;
         width: 700px;
         border-style: solid;
         border-width: 1px;
         border-color: white;
      }
      .unq-formula h4{
         font-size: 25px;
         font-weight: bolder;
         color: white;
      }
      .unq-formula p{
         font-size: 20px;
         font-weight: ;
         color: white;
      }
      .benefits-qh{
         justify-content: center;
         align-items: center;
         text-align: center;
         width: 85%;
         margin-left: 8%;
         margin-bottom: 8%;
      }
      .benefits{
         display: flex;
         flex-wrap: wrap;
         width: 100%;
      }
      .benefits div{
         margin:1%;
      }
       .main-container{
         position: relative;
         width: 100%;
         border-style: solid;
         border-width: 4px;
         border-color: #5C6D43;
         border-radius: 10%;
      }
      .main-container img {
         width: 344px;
         height: 240px;
         border-radius: 10%;
      }
      .image{
         display: block;
         width: 100%;
         height: auto;
      }
      .overlay{
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         background-color: black;
         opacity: 0.9;
         border-radius: 10%;
         overflow: hidden;
         width: 100%;
         height: 0;
         transition: .5s ease;
      }
      .main-container:hover .overlay{
         height: 100%;
      }
      #sc-benefits{
         display: none;
      }
      #mb-benefits{
         display: block;
      }
      .blog-section{
         width: 450px;
         height: 520px;
         background-color: #5C6D43;
         justify-content: center;
         align-items: center;
         margin: ;
      }
      .blog-container{
         width: 340px;
         height: 490px;
         background-color: white;
      }
      .blog-image{
         width: 320px;
         height: 250px;
         padding: 1%;
      }
      .blog-image img {
         width: 100%;
         height: 100%;
      }
      .blog-content{
         font-size: 25px;
         font-weight: bolder;
         color: black;
      }
      .blog-date {
         text-align: right;
      }

      .blog-btn button{
            width: 170px; 
            height: 45px; 
            background-color: black; 
            color: white; 
            font-size: 20px; 
            font-weight: bold; 
            border-radius: 30px;
            margin-bottom: 5%;
         }
         #sc-footer-form{
         display: none;
      }
      #mb-footer-form{
         display: block;
      }
   }

    @media only screen and (min-width: 436px) and (max-width: 500px) {
      #screenVideo{
         display: none;
      }
      #mobileVideo{
         display: block;
      }
      .header_section {
          width: 100%;
          
          height: 100%;
          background-size: 100%;
          padding: 0px 0px 20px 0px;
      }
      video {
          position: absolute;
          top: 0;
          left: 0;
          width: 360px !important;
          height: 500px !important;
          z-index: -1; 
          object-fit: cover; 
      }
      .video-text{
         height: 650px;
      }
      .banner_taital{
         font-size: 65px !important;
      }
      .logo_mobile {
          width: 60px !important;
          height: 60px !important;
          text-align: center;
          align-items: center;
          justify-content: center;
          text-align: center;
          padding-bottom: 20px;
      }
      .services_taital{
         font-size: 35px ;
      }
      .intro-image{
         margin-bottom: 40%;
      }
      #sc-intro-img{
         display: none;
      }
      #mb-intro-img{
         display: block;
      }
      .intro-to-qh-content{
         font-size: 14px;
      }
      #sc-research{
      display: none;
      }
      #mb-research{
         display: block;
      }
      .row{
         background-image: url('<?php echo get_template_directory_uri(); ?>/images/412.png');
      }
      .about_taital{
         text-align: center;
         justify-content: center;
         color: black;
         padding: 2%;
      }
      .about_text{
         font-size: 14px !important;
         text-align: center;
      }
      .readmore_bt{
         margin-bottom: 2%;
         margin-left: 25%;
      }
      .choose-points{
         width: 310px;
         height: 350px;
         background-color: #5D4235;
         color: white;
         border-radius: ;
         text-align: center;
         padding: 2%;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         border-style: solid;
         border-width: 10px;
         border-color: #5C6D43;
      }
      .choose-points img {
         border-radius: ;
         height: 250px;
      }
      .choose-btn{
         justify-content: center;
         align-items: center; 
         margin-left: 27% !important; 
         margin-bottom: 3%;
      }
      .choose-btn button{
         width: 170px; 
         height: 45px; 
         background-color: black; 
         color: white; 
         font-size: 20px; 
         font-weight: bold; 
         border-radius: 30px;
      }
      
      #mb-formulation{
         display: block;
      }
      #sr-formulation{
         display: none;
      }
      .blog_section{
         display: none;
      }
      .formulations{
         display: flex;
         flex-wrap: wrap;
         height: 1070px;
         background-image: url('<?php echo get_template_directory_uri(); ?>/images/wave2.jpg');
      }
      .formulations div{
         margin: 8%;
         text-align: center;
      }
      .unq-formula{
         background-color: #5D4235;
         opacity: 0.6;
         height: 450px;
         width: 700px;
         border-style: solid;
         border-width: 1px;
         border-color: white;
      }
      .unq-formula h4{
         font-size: 25px;
         font-weight: bolder;
         color: white;
      }
      .unq-formula p{
         font-size: 20px;
         font-weight: ;
         color: white;
      }
      .benefits-qh{
         justify-content: center;
         align-items: center;
         text-align: center;
         width: 85%;
         margin-left: 8%;
         margin-bottom: 8%;
      }
      .benefits{
         display: flex;
         flex-wrap: wrap;
         width: 100%;
      }
      .benefits div{
         margin:1%;
      }
       .main-container{
         position: relative;
         width: 100%;
         border-style: solid;
         border-width: 4px;
         border-color: #5C6D43;
         border-radius: 10%;
      }
      .main-container img {
         width: 344px;
         height: 240px;
         border-radius: 10%;
      }
      .image{
         display: block;
         width: 100%;
         height: auto;
      }
      .overlay{
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         background-color: black;
         opacity: 0.9;
         border-radius: 10%;
         overflow: hidden;
         width: 100%;
         height: 0;
         transition: .5s ease;
      }
      .main-container:hover .overlay{
         height: 100%;
      }
      #sc-benefits{
         display: none;
      }
      #mb-benefits{
         display: block;
      }
      .blog-section{
         width: 450px;
         height: 520px;
         background-color: #5C6D43;
         justify-content: center;
         align-items: center;
         margin: ;
      }
      .blog-container{
         width: 350px;
         height: 490px;
         background-color: white;
      }
      .blog-image{
         width: 330px;
         height: 250px;
         padding: 1%;
      }
      .blog-image img {
         width: 100%;
         height: 100%;
      }
      .blog-content{
         font-size: 25px;
         font-weight: bolder;
         color: black;
      }
      .blog-date {
         text-align: right;
      }

      .blog-btn button{
            width: 170px; 
            height: 45px; 
            background-color: black; 
            color: white; 
            font-size: 20px; 
            font-weight: bold; 
            border-radius: 30px;
            margin-bottom: 5%;
         }
         #sc-footer-form{
         display: none;
      }
      #mb-footer-form{
         display: block;
      }
   }
   @media only screen and (min-width: 447px) and (max-width: 467px) {
.blog-section{
         width: 450px;
         height: 520px;
         background-color: #5C6D43;
         justify-content: center;
         align-items: center;
         margin: ;
      }
      .blog-container{
         width: 370px;
         height: 490px;
         background-color: white;
      }
      .blog-image{
         width: 350px;
         height: 250px;
         padding: 1%;
      }
      .blog-image img {
         width: 100%;
         height: 100%;
      }
      .blog-content{
         font-size: 25px;
         font-weight: bolder;
         color: black;
      }
      #mb-formulation{
         display: block;
      }
      #sr-formulation{
         display: none;
      }
      .blog-date {
         text-align: right;
      }

      .blog-btn button{
            width: 170px; 
            height: 45px; 
            background-color: black; 
            color: white; 
            font-size: 20px; 
            font-weight: bold; 
            border-radius: 30px;
            margin-bottom: 5%;
         }
         .choose-points{
            margin-left: 7% !important;
         }
      }

      @media only screen and (min-width: 468px) and (max-width: 488px) {
.blog-section{
         width: 450px;
         height: 520px;
         background-color: #5C6D43;
         justify-content: center;
         align-items: center;
         margin: ;
      }
      .blog-container{
         width: 390px;
         height: 490px;
         background-color: white;
      }
      .blog-image{
         width: 370px;
         height: 250px;
         padding: 1%;
      }
      .blog-image img {
         width: 100%;
         height: 100%;
      }
      .blog-content{
         font-size: 25px;
         font-weight: bolder;
         color: black;
      }
      #mb-formulation{
         display: block;
      }
      #sr-formulation{
         display: none;
      }
      .blog-date {
         text-align: right;
      }

      .blog-btn button{
            width: 170px; 
            height: 45px; 
            background-color: black; 
            color: white; 
            font-size: 20px; 
            font-weight: bold; 
            border-radius: 30px;
            margin-bottom: 5%;
         }
         .choose-points{
            margin-left: 9% !important;
         }
      }