body{
    height:100%;
    width:100%;
}
.hero-container{
    
    top:0%;
    left:0%;
    right:0%;
    width: 100%;
    height:auto;
   
}
.hero-image{
    position: relative;
    top:0%;
    right:0%;
    left:0%;
    width: 100%;
    height: 90%;
    

}
@keyframes changeColor {
    from { background: transparent; }
    to { background: #22A426; }
}
header {
  position: fixed;
  left:0%;
  right:0%;
  top: 0%;
  height:12%;
  width: 100%;
  padding: 0.625rem;
  color: white;
  animation: changeColor linear both;
  animation-timeline: scroll(y);
  animation-range: 0 300px; /* 300px scroll hone tak color change hoga */
  z-index: 100;
}
.logo{
    position: absolute;
    top:12%;
    height: auto;
    width:6%;
    left:6%;
    border-radius: 8px;

}
.name1{
    position: absolute;
    top:25%;
    left:13%;
    color:white;
    font-family: "merienda one";
    font-size: 1.25rem;
    
}
.name1 p{
    top:2.9%;
    left:14%;
    margin-top: 0px;
    font-size: 0.875rem;
}

.nav-bar{
    position: absolute;
    display: flex;
    width:34.66%;
    height: 2.59vh;
    font-size:1.5rem;
    font-family: Roboto;
    color: white;
    font-weight: bold;
    top:12%;
    left: 42.66%;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    letter-spacing: 5%;
    list-style: none;
    
}
.nav-bar a{
    color:white;
    text-decoration: none;
}
/* Hide checkbox */
    .dropdown input {
      display: none;
    }

    /* Menu button */
    .menu-btn {
      background-color:#22A426;
      color: white;
      padding: 1% 2%;
      cursor: pointer;
      border-radius: 5px;
      display: none;
      margin-right: 5%;
      margin-top: 2%;
    }

    /* Dropdown content */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 180px;
      box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
      border-radius: 5px;
      margin-top: 5px;
     
    }

    .dropdown-content a {
      color: black;
      padding: 10px 14px;
      text-decoration: none;
      display: block;
    }
 .dropdown-content a:hover {
      background-color: #ddd;
    }

    /* When checkbox checked → show dropdown */
    .dropdown input:checked ~ .dropdown-content {
      display: block;
    }
.hero-title{
    position: absolute;
    top:50%;
    left:7.58%;
    font-weight: bold;
    font-size:3rem;
    color: white;
    font-family:'Josefin Sans', sans-serif;
    line-height: 3rem;
    
}
.hero-button{
    position: absolute;
    background-color: #22A426;
    height:8%;
    width: 12%;
    border-radius: 20px;
    border: none;
    top:60%;
    left: 12%;
    font-family: 'Roboto Mono', monospace;
    font-size: 1.25rem;
    font-weight: bold;

}
.hero-button a{
    color:white;
    text-decoration: none;
}
.hero-button:hover{
    background-color: #084E0A;
    color: white;
    transition: 500ms;
}
form{
    background-color: #EFF5FB;
    height:50%;
    width:30%;
    margin-left: 10%;
    margin-right: 10%;
    padding:3%;
    font-size:1rem;
    font-family: "Roboto slab",serif;
    margin-top:5%;
    margin-bottom: 5%;
    box-shadow: 0px 0px 42px 8px rgba(0,0,0, 0.25);
   
}
input{
    height:7%;
    width: 100%;
    margin-top:3%;
    margin-bottom:4%;
    border:none;
    padding:2% 1%;
}
.dropdown{
    height:10%;
    width: 100%;
    border:none;
    margin-top: 3%;
    font-family: "Roboto slab",serif;
    margin-bottom:4%;
    padding:2% 1%;
}
.dropdown option{
    border:none;
    font-family: "Roboto slab",serif;
}
textarea{
    border:none;
    margin-top:3%;
    width:100%;
}
.submit-button{
    background-color: #22A426;
    border:none;
    height:10%;
    width:40%;
    margin-top:10%;
    margin-left:30%;
    font-size: 1.2rem;
    font-family: Roboto;
    padding:4% 5%;
}
.submit-button:hover{
    background-color: #084E0A;
    color: white;
}
.image-container{
    height:80%;
    width:80%;
    margin-left: 55%;
    margin-top:-43%;
   
   
       
}
.contact-image{
    width:35%;
     box-shadow: 10px 10px 20px 2px rgba(0,0,0, 0.25);
     border-radius: 10px;
     margin-right: 10%;
   
   
   
    
   
   
}
.contact-section2{
    background-color: #EFF5FB;
    height: 100%;
    width:100%;
    margin-top: 15%;
    padding-bottom: 1%;
}
.contactpage-text{
    color:#22A426;
    font-size: 2.5rem;
    font-family: Roboto;
    font-weight: bolder;
    margin-left:10%;
   
    letter-spacing: 5%;
   
    padding-top: 5%;
}
.phone-icon{
    display:flex;
    height:15vh;
    width:15vh;
    border-radius: 100%;
    background-color: white;
    margin-top: 5%;
    margin-left: 10%;
   
    box-shadow:0px 0px 10px 5px  rgba(0, 0, 0, 0.2);
    margin-bottom: 10%;
}
.phone-icon p{
    margin-left: 50%;
    font-size: 1rem;
    font-family: "Roboto slab",serif;
    margin-top: 30%;
}
.email-icon{
    display:flex;
    height:15vh;
    width:15vh;
    border-radius: 100%;
    background-color: white;
    margin-top: -17%;
    margin-left: 33%;
   
    box-shadow:0px 0px 10px 5px  rgba(0, 0, 0, 0.2);
    margin-bottom: 10%;
}
.email-icon p{
    margin-left:35%;
    font-size: 1rem;
    font-family: "Roboto slab",serif;
    margin-top: 28%;
}
.location-icon{
    display:flex;
    height:15vh;
    width:15vh;
    border-radius: 100%;
    background-color: white;
    margin-top: -17%;
    margin-left: 67%;
   
    box-shadow:0px 0px 10px 5px  rgba(0, 0, 0, 0.2);
    margin-bottom: 10%;
}
.address-container{
   
    height:100%;
    width: 200%;
    margin-left:30%;
    margin-top:0%;
    font-size: 1rem;
    font-family: "Roboto slab",serif;
    margin-right: 10%;
}
footer {
    margin-top:15%;
    background: #052229;
    color: white;
    padding: 5% 8%;
    display: flex;
    height: auto;
    width:auto;
    box-shadow: inset 0 0 200px 10px rgba(0,0,0,0.5);
}
.footer-container {
   display: flex;
}
.footer-section h3 {
    margin-bottom: 10%;
    margin-left: 10%;
    font-size:1.5rem;
    letter-spacing: 2%;
    font-weight: bold;
    font-family: Roboto;
    width: auto;
}
.footer-section p, 
.footer-section a {
    margin-left: 10%;
    font-size: 1rem;
    color: #ddd;
    text-decoration: none;
    line-height: 1.8rem;
    display: block;
    font-family: 'Roboto Mono', monospace;
}
.footer-icons{
    display:flex;
    height: 10%;
    margin-top: 8%;
}

.footer-icons a {
    justify-content: space-between;
    
    margin-right: 15%;
    font-size: 1.50rem;
}
.footer-icons .fa-instagram { color: #E1306C; }
.footer-icons .fa-facebook { color: #1877F2; }
.footer-icons .fa-whatsapp { color: #25D366; }
.footer-icons .fa-google { color: #DB4437; }
.map iframe {
    border: 0;
    width: 130%;
    height: 90%;
    border-radius: 10px;
}

/* mobile  */

@media only screen and (min-width:360px) and (max-width: 768px){
    header {
    height: 12%;
  }
  .logo {
    width:7vh;
    margin:2%;
    margin-top: 5%;
  }
  .name1 {
     font-size: 0.8rem;
     margin-left:6%;
     margin-top: 3%;
  }
  .name1 p{
    font-size: 0.5rem;
  }
  .nav-bar {
    display: none;
    margin:0;
  }
  /* Show menu icon */
  .menu-btn {
    display: block;
    position: absolute;
    right: 10%;
    transform: translateY(-50%);
    z-index: 10001;
    margin-top:5%;
  }

  /* dropdown positioning so that the menu shows below the icon, aligned right */
  .dropdown-content {
    position: fixed; /* ✅ ensures no scroll inside header */
    top: 25px; /* just below mobile header */
    right: 5%;
    width: 40%;
    z-index: 10000;  /* ensure left side positioning doesnt override right */
  }
  .hero-title {
    font-size: 0.8rem;
    top:20%;
    left: 15%;
  }
  .hero-button {
    height:4%;
    width: 18%;
    top:30%;
    font-size: 0.5rem;
    left:15%;
  }
  form{
    height:40%;
    width:70%;
    font-size:0.8rem;
    margin-top:15%;
    overflow-y: hidden;
    padding:5%;
   
}
input{
    width: 90%;
    padding:2% 1%;
}
.dropdown{
    width: 90%;
}
.dropdown option{
    font-size: 0.6rem;
}
textarea{
   width:90%;
}
.submit-button{
    font-size: 1rem;
    padding:2% 3%;
}
.image-container{
    display: none;
}
.contactpage-text{
    font-size: 1.2rem;
}
.phone-icon, .email-icon, .location-icon {
    width: 10vh;
    height: 10vh;
    margin-left: 10%;
    margin-top: 5%;
  }
  .phone-icon img,
  .email-icon img,
  .location-icon img{
    height: 5vh !important;
    width: 5vh !important;
    margin-left: 20% !important;
  }
  
  .phone-icon p ,.email-icon p{
    font-size: 0.8rem;
    margin-left: 50%;
  }
  .address-container {
    width: 40vh;
    margin-left: 11%;
    font-size: 0.8rem;
  }
  .footer-container {
    width:90%;
  flex-direction: column;
  margin-left: 5%;
  margin-right: 5%;

}
.footer-section h3 {
    margin-bottom: 10%;
    font-size:1rem;

}
.work-day-div h3{
    font-size:1rem;
    margin-top: 40% !important;

}
.work-day-div p{
    font-size: 0.7rem;
}
.footer-section i{
  margin-left: 0%;
  margin-right: 2%;
}
.footer-section p, 
.footer-section a {
    width:100%;
    font-size: 0.7rem;
    line-height: 1.5rem;
    padding-left: 5%;
}
.footer-icons{
    height: 20%;
}
.footer-icons a {
    
    margin-right: 4%;
    font-size: 1rem;
}
.map iframe {
    border: 0;
    width: 100%;
    height: 70%;
    border-radius: 10px;
}


}