body {
      font-family: Arial, sans-serif;
      background-color: #f7f7f7;
      margin: 0;
      padding: 0;
      height: 100%;
    }
    
    .question-7 {
    position: relative;
    padding: 0 24px;
}

.question-7:after {
    content: '*demo of Eucerin Hydroprotect / Oil control dry touch spf medical suncare range';
    width: 70%;
    margin: 0 auto;
    font-size: 22px;
}
    

    .header-custom {
      /* background-color: #800020; */
      text-align: center;
      color: white;
      padding: 30px 0;
      position: relative;
      z-index: 9;
    }


    .logo-text {
      font-size: 18px;
      font-weight: bold;
      margin-top: 10px;
      color: #131111;
    }



    .features {
      margin-top: 30px;
      color:black;
    }

    .features .feature {
      text-align: center;
      width: 100%;
      padding: 10px;
    }

    .features i {
      font-size: 30px;
      color: #800020;
    }

    .features p {
      font-size: 14px;
    }

    .start-btn {
      display: block;
      margin: 30px auto;
      padding: 15px 30px;
      background-color: #800020;
      color: white;
      font-size: 18px;
      font-weight: bold;
      border-radius: 25px;
      text-align: center;
      text-decoration: none;
      width: 200px;
    }

    .start-btn:hover {
      background-color: #660016;
    }

    .footer-custom {
      background-color: #800020;
      text-align: center;
      color: white;
      padding: 20px 0;
    }

    .footer-custom p {
      font-weight: bold;
      font-size: 16px;
    }

    /* Media Query for Responsiveness */
    @media (min-width: 768px) {
      .features .feature {
        width: 22%;
      }
    }

    @media (max-width: 768px) {
      .logo-text {
        font-size: 14px;
      }

      .header-paragraph h2 {
        font-size: 20px;
      }

      .start-btn {
        width: 160px;
        padding: 12px 25px;
      }
    }
   


    /*  custom css */

    .bg-cont{
      background: url(../image/siteImg/NewProject.png);
      position: relative;
      max-width: 1920px;
      min-height: 100vh;
      
    }
/* Add semi-transparent overlay for the background image */
.bg-cont::after {
  content: '';
  
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 0; /* Place it below the content */
}

    .bg-cont::before{
    content: '';
    background: url(../image/siteImg/Thiamidol.png);
    position: absolute;
    bottom: 10px;
    left: -20px;
    width: 30%;
    height: 30%;
    background-size: contain;
     }


    .navbar{
     background-color: #a82241; 
     height: 40px;
     position: relative;
    }

    .nav-inner{
     background-color: #a7052c; 
     height: 50px;
     position: absolute;
     top: 0px;
     left: 0px;
    }

    
    .logo-img {
      width: 180px;
      margin-top: 20px;
    }

    .header-paragraph {
      border: none;
      /* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; */
      box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
      padding: 10px;
      /* margin: 20px 0; */
      display: inline-block;
      border-radius: 8px;
         background-color: #e2cfd3;
    }

    .header-paragraph h2 {
      font-family: 'Arial', sans-serif;
      font-size: 34px;
      font-weight: 700;
      color: #293742;
      margin: 0;
    }

.banner-item{
  display:  flex;
  gap: 10px;
}

.banner-item img{
 width: 90%;
    /* height: 95%; */
  object-fit: contain;
}

#inpt-box{
  margin-top: 20px;
    width: 480px;
    height: 40px;
    border-radius: 20px;
    border: 1px solid #800020;
    padding: 10px 10px;

}