:root{
    --primary-color: #0F274E;
    --secondary-color: #DF5C25;
    /* --primary-color: #ff0000;
    --secondary-color: #02ec02; */
}

#header-ul li{
    background-color: var(--primary-color);
}

#header-ul li:hover{
    background-color: var(--secondary-color);
}

@media only screen and (max-width: 1200px) {
    #header-ul li{
        background-color: white !important;
    }

    #header-ul li:hover{
        background-color: white;
    }


    #header-link{
        color: var(--primary-color) !important;
        width: 100%;
        background-color: white !important;
    }

    #header-link:hover{
       color: var(--secondary-color) !important;
    }


    
    #header-button{
        background-color: var(--primary-color) !important;
    }
    
    #header-button:hover{
        color: white  !important;
        background-color: var(--secondary-color) !important;
    
    }
    
    #header-button::after{
        background-color: var(--secondary-color)  !important;
    }
}


#header-link-bg{
    width: 100%;
    background-color: var(--primary-color) !important;
}

#header-link{
    color: white;
    background-color: var(--primary-color);
}

#header-link-dropdown{
    border: none;
    background-color: var(--primary-color);
}

#header-link:hover{
    background-color: var(--secondary-color);
}

#header-link::after{
    color: var(--secondary-color);
    background-color: var(--secondary-color) !important;
}

#header-button{
    background-color: var(--secondary-color);
}

#header-button:hover{
    color: var(--secondary-color);

}

#header-button::after{
    background-color: white
}

/* ANCHOR Principle Message */

#index-director-img-parent{
    border-radius: 25px;
}

#index-director-img{
    border-top-left-radius: 25px;
    border-bottom-right-radius: 25px;
}

#index-director-title{
    display: flex;
    flex-direction: row;
    color: var(--secondary-color);
}

#index-director-title-2{
    width: 65%;
    padding:4px;
    color: white;
    background-color: var(--primary-color);
}

#index-director-quote-block{
    display: flex;
     flex-direction: row; 
     align-items: center; 
     justify-content: space-between; 
     text-align: center;
     padding:3rem 1rem 3rem 1rem;
}

#index-director-quote{
     width: auto;
    height: 3rem;
}
#index-director-quote-text{
    font-size: larger;
    font-style: italic;
}

/* ANCHOR Index Notice */
#notice-section{
    background: var(--primary-color);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

#index-notice-header{
    font-family: "Roboto", sans-serif;
    font-size: 3.75rem;
    font-weight: 900;
    color: var(--secondary-color);
    /* -webkit-text-stroke: 1px white; */
}

@media only screen and (max-width: 768px) {
    #index-notice-header{
        font-size: 2rem;
    }
}

#index-notice-timecity li{
   
    color: var(--secondary-color);
}

#index-notice-timecity li span{
   
    background-color: var(--secondary-color);
}

#index-notice-title{

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
}

#index-notice-title:hover{
    color: var(--secondary-color);
}

/* ANCHOR  Index Event */
#index-event-header{
    font-family: "Roboto", sans-serif;
    font-size: 3.75rem;
    font-weight: 900;
    color: var(--secondary-color);
}

@media only screen and (max-width: 768px) {
    #index-event-header{
        font-size: 2rem;
    }
}

#index-event-grid{
    box-shadow: none;
    height: 25rem;
}

#index-event-img{
    width: 100%;
    height: 15rem;
    object-fit: contain;
}

#index-event-timecity li{
   
    color: var(--secondary-color);
}

#index-event-timecity li span{
   
    background-color: var(--secondary-color);
}

#index-event-city{
    width: 100%;
    height: 15rem;
    object-fit: contain;
}

#index-event-title{

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
}

#index-event-title:hover{
    color: var(--secondary-color);
}

/* ANCHOR  Index Facility */

#index-facility-title{
    font-family: "Roboto", sans-serif;
    font-size: 3.75rem;
    font-weight: 900;
    color: var(--secondary-color);
}

/* Upto tablet view */
@media only screen and (max-width: 768px){
	#index-facility-title{    
        font-size: 2rem;
    }
}



#index-facility-button{
    background-color: var(--secondary-color);
    font-size: larger;
    border-radius: 25px;
}

#index-facility-button:hover{
    background-color: var(--primary-color);
}

#index-facility-button::after{
    background-color: var(--primary-color);
}

/* ANCHOR Index Testimonial */

#index-testimonial-h5{
    color: var(--primary-color) !important;
}

#index-testimonial-h2{
    color: var(--secondary-color);
}

#index-testimonial-grid-parent{
    display:flex; 
    flex-direction: column;
    gap: 1.5rem;
}

#index-testimonial-grid{
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 1rem; 
    border-radius: 0.5rem; 
    background-color: white; 
    padding: 1.5rem; 
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease; 
    cursor: pointer;
    margin: 1rem;  
    height: 15rem; 
}

#index-testimonial-grid:hover {
    transform: scale(1.02);
}

#index-testimonial-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  
  #index-testimonial-student {
    font-weight: 600;
    margin: 0;
  }
  
  #index-testimonial-class {
    color: #6c757d;
    font-size: 0.875rem;
    margin: 0;
  }
  
  #index-testimonial-text {
    color: #6c757d;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  

  /* ANCHOR footer newsletter */

  #footer-top{
    background-color: var(--primary-color) !important;
  }

  #footer-bottom{
    background-color: var(--primary-color) !important;
  }

  #footer-newsletter-block{
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: center;
    margin: 1rem 0 1rem 0; gap: 1rem;
  }


  #footer-newsletter-title h4{
    width: 100%;
    margin: 0;
  }

  #footer-newsletter-form{
    display: flex;
    width: 60%;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  #footer-newsletter-form-email{
    width: 80%;
  }

  #footer-newsletter-button{
        background-color: var(--secondary-color);
        font-size: larger;
        border-radius: 25px;
    }

    #footer-newsletter-button:hover{
        background-color: var(--primary-color);
    }

    #footer-newsletter-button::after{
        background-color: var(--primary-color);
    }

    #footer-logo-block{
        display: flex;
        flex-direction: row;
    }

    #footer-notice-date{display:flex;justify-content: left;}



  @media only screen and (max-width: 768px) {
    #footer-newsletter-block {
        display: flex;
        flex-direction: column;
    }

    #footer-newsletter-title {
        width: 100%;
        text-align: center;
    }

    #footer-newsletter-form{
        width: 100%;
    }

    #footer-newsletter-button{
        font-size: small;
    }
    #footer-logo-block{
        display: flex;
        flex-direction: column;
    }

    #footer-logo-block p{
        text-align: center;
    }

    #footer-bottom-content {
        display: flex;
        flex-direction: column;
    }
    
}

.datetimecorrect{
    font-size: 14px;
}