:root{
---orange:#fd8549;
---p-ordinary-text:#2f3c4c;
---p-secondary-text:#566476;
---white:#ffffff;
---star-color:#fcb900;
---cyan-blue:#0693e3;
}
/* ---------------------------------NAV menu---------------------------- */
.open i{
    font-size: 1.5rem;
    color: var(---orange);
    background-color: var(---p-secondary-text);
    padding: 6px;
    border-radius: 100%;
   
    
}
.menu-icon{
    display: none;
}
.open{
    display: none;
    cursor: pointer;
}
#mobile-nav{
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 90vh;
    z-index: 1000;
    background-color: #fd854981;
    backdrop-filter: blur(10px);
    padding: 5%;
    border-radius: 0 0 15% 0;
    transition: 0.5s;
    
}
#mobile-nav .mobile-logo{
    display: flex;
    justify-content: space-between;
    margin-bottom: 5%;
}
.mobile-logo img{
    width: 80px;
}
.mobile-logo .close{
    display: inline-block;
    cursor: pointer;
}
.mobile-logo .close i{
    font-size: 1.8rem;
    color: var(---orange);
    border-radius: 100%;
    
    opacity: 0.8;
}
.mobile-logo .close i:hover{
    transform: scale(1.1);
    opacity: 1;
    color: #2f3c4c;
   
}
#mobile-nav-link{
    text-align: center;
    width: 100%;
    height: auto;
}
#mobile-nav-link li a{
    cursor: pointer;
    color: var(---p-ordinary-text);
    margin: 5px;
    padding: 10px;
    font-size: 1.2rem;
    text-transform: capitalize;
    font-weight: 800;
}
#mobile-nav-link li a:hover{
    border: 1px solid #ffffff28;
    color: var(---p-secondary-text);
}
.nav-social-link{
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
}
.nav-social-link a{
    font-size: 1.6rem;
    color: #2f3c4c;
    display: inline-block;
    margin: 5px;
    padding: 3px;
    cursor: pointer;
    
}
.nav-social-link a:hover{
    color: var(---white);
    transform: scale(1.1);
}
@media(max-width:1400px){
    .container{
        padding: 2% 3%;
    }
}
@media(max-width:1280px){
   :root{
    ---font-64-h1:50px;
    ---font-48-h2:40px;
    ---font-32-h3:28px;
    ---font-24-h4:22px;
    ---font-20-h5:18px;
    ---font-18-p:16px;
    ---font-14-h6:13px;
    
    /* others*/
    ---font-14-a:13px;
    ---font-25-f:24px;
    ---font-40:35px;
   }
   h1{
    line-height: 70px;
}
h2{
    line-height: 50px;
}
h3{ 
    line-height: 40px;
}


#place-hero{
    height: 50vh;
   
 }
 
#vision-mission{
  
    height: 70vh;
}
header.programmeheader{
    height: 70vh;
}
}
@media(max-width:1080px){
    .hero-container{ 
        height: 120vh;
       grid-template-columns: 1fr;
    }
    .hero-card-btn{
   
       flex-direction: column;
       align-items: flex-start;
    }
    .hero-rating{
        margin-left: 10px;
        margin-bottom: 0;
       
    }
    .hero-card img{
        display: none;
    }
    .hero-card-mobile{
        display: block;
        position: absolute;
        right: 0;
    
    }
    .hero-card-mobile .img{
        width: 400px;
        padding: 15px;
        margin-top: 70%;
        border-radius: 50px 0 50px 0;
    }
    #aboutus, 
#quote,
#daycare,
#tuition,
#why-us,
#image-group,
#activities,
#parents,
#founder,
#vision-mission,
#learning, 
#process,
#requirement,
#contact-page,
#image-slider,
#iframe{
    margin: 1.5% 0;
  
}
.aboutus-container, 
.why-us-container, 
.daycare-container,
.about-us-hero-container,
.image-slider-container{
    grid-template-columns: 1fr;
}
.daycare-card{
    margin-top: 15%;
}
.daycare-card img{
    width: 50%;
}
header.aboutusheader{
  
    height: 260vh;
    
}
.irrc-container,
.process-container{
    grid-template-columns: repeat(2, 1fr);
}
   
}

@media(max-width:980px){
    #button, .nav-link{
        display: none;
    }
    .open{
        display: block;
        margin-top: 5%;
    }
    .menu-icon{
        display: block;
    }
    header{
        height: 120vh;
      
    }
    .daycare-card{
        height: 380px;
    }
    .tuition-container, .fonder-container{
        grid-template-columns: 1fr;
    }
    
    .parents-card{
        flex-direction: column;
        padding: 5% 0;

    }
    .parents-card img, 
    .parents-content{
        position: relative;
        width: 100%;
        top: 0;
        left: 0;
        max-width: 100%;
        padding: 3%;
    }
    .footer-container{
        grid-template-columns: repeat(2, 1fr);
        
    }
    header.aboutusheader{
  
        height: 220vh;
        
    }
    #vision-mission{
  
        height: 90vh;
       
    }
    .vision-mission-card{
        padding: 0;
    }

}