/* Phone */
@media(max-width: 700px){
	:root{
	  --div-padding-mobile: 2rem; /*2.4rem*/
    --div-padding: 2rem;
    --margin-top: 5.7rem;
	}

  /*body{
    background: red !important;
  }*/

  .desktop{
    display: none;
  }

  .phone{
    display: block !important;
  }

  .div-padding{
		padding-left: var(--div-padding-mobile) !important;
		padding-right: var(--div-padding-mobile) !important;
  }

  .div-spacing{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .div-mb{
    margin-bottom: 5rem;
  }

  .main{
    min-height: 60vh !important;
  }

  
  /* Navbar */
  .vnav{
/*    height: 4.4357rem !important;*/
    padding: 0 !important;
    padding: 2.94rem var(--div-padding-mobile) 1.94rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .phone-header-logo{
    height: 4.5rem;
  }

  /*.nav__icon{
    width: 2.5rem;
    height: 2.5rem;
  }*/

  /* Menu modal */
  .bg-green .vnav{
      height: 5.625rem;
      padding: 2.94rem var(--div-padding-mobile) 1.94rem !important;
      /*border-bottom: 1px solid red;*/
  }

  .bg-green .modal-body{
      padding: 1.67rem var(--div-padding-mobile) 2rem !important;
  }
    
  .menu-header {
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 3.6875rem !important;
      margin-bottom: 0.5rem;
      padding: 0;
      padding: 1rem 0.5rem !important;
      /* border-radius: 0.5rem; */
      border-bottom: 1px solid grey;
      /* background: var(--accent-color); */
      font-size: 1rem;
      font-weight: 400;
      line-height: normal;
      color: var(--white);
  }

  .normal-link a{
      font-size: 1rem;
      font-weight: 400;
      line-height: normal;
      color: var(--white);
  }

  .menu-body {
      display: none;
      padding-top: 1rem;
      /* background: #f4f4f4; */
  }

  .menu-body ul{
      list-style: none;
  }

  .menu-body ul li{
      margin-bottom: 1rem;
  }

  .menu-body ul li a{
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.5rem;	
      color: var(--white);
  }

  /* Footer */
  .grid-container-footer-div{
    display: block;
  }

  .footer-logo-div{
    padding-bottom: 2rem;
    border-bottom: 0.0625px solid #fff;
  }

  /* Social Icons */
  /* .social-icons {
    display: flex;
    justify-content: center;
  } */

  .grid-container-links-detail-div{
    display: block;
  }

  .link-details{
    padding: 2rem 0;
    border-bottom: 0.0625px solid #fff;
  }

  .no-boder-bm{
    padding: 2rem 0 0;
    border-bottom: 0;
  }

  .privacy{
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
  }

  .copyright-div a{
	  margin-left: 0;
  }

  .privacy-link{
	  margin-right: 1.5rem !important;
  }

  /* COUNT DOWN */
  .countdown-banner {
    font-size: 1rem;
  }

  .timer {
    margin-top: 0.7rem;
  }

  /* Hero Styles */
  .hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }

  .hero-content p {
    font-size: 1.15rem;
  }

  .hero-content .mbtn{
    margin-bottom: 1.5rem;
  }

  /* ACCREDITION & PARTNERS */
  .grid-container-accredition-partners-div{
    display: block !important;
  }
  
  .accredition-div:first-of-type {
    margin-bottom: 2rem; /* only the last accreditation div */
  }

  .accredition-div h3{
    text-align: center;
  }

  .accredition-logos, .partner-logos{
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* flex-start makes them to start from the left */
    align-items: center;
    gap: 10px;
  }

  /* HOME ABOUT */
  .grid-container-home-about-div{
    display: block;
  }

  .home-about-img img{
    height: 14.84375rem;
  }

  .home-about-details h3{
    line-height: 2.5rem;
    margin-bottom: 1rem;
  }

  /* TESTIMONIALS */
  .testimonial {
    flex: 1 0 100%; /* 1 per row */
  }

  .controls button {
    font-size: 1.3rem;  /* 14px */
  }

  /* PROGRAMS */
  .grid-container-home-programs-div{
    display: block;
  }

  .program{
    margin-bottom: 1rem;
  }

  /* APPLICATION BANNER */  
  .application-banner-div{
    display: block;
    padding: 0;
  }
  .app-banner-details{
    padding: 3rem var(--div-padding-mobile);
  }

  .app-banner-image::before {
    background: none;
  }

  /* FAQ */
  .grid-container-home-faq-div{
    display: block;
  }

  .faq-category .big-header{
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 2rem;
  }

  .question-header {
    min-height: 3.6875rem;
    cursor: pointer;
    padding: 14px;
    font-weight: 600;
    font-size: 1rem;
    font-weight: 400;
    box-sizing: border-box;
  }

  .faq-cat-ul{
    display: none;
  }

  .faq-dropdown{
    display:block;
    height: 3rem;
    width: 100% !important;
    margin-bottom: 1.7rem;
  }

  .faq-dropdown {
    appearance: none;           /* remove browser default */
    -webkit-appearance: none;
    -moz-appearance: none;

    background-color: var(--red);  /* red background */
    color: var(--white);                /* white text */
    border: none;
    border-radius: 6px;
    padding: 10px 40px 10px 12px;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    position: relative;
  }

  /* Add custom arrow */
  .faq-dropdown {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white'><path d='M2 5l6 6 6-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 1rem;
  }

  /* Style the dropdown options */
  .faq-dropdown option {
    background-color: #b91c1c; /* same red as the select */
    color: #fff;              /* white text */
  }

  /* Style the hover/focus of an option (when highlighted) */
  .faq-dropdown option:checked,
  .faq-dropdown option:hover {
    background-color: #a31313; /* darker red when active/hovered */
    color: #fff;
  }

  /* ABOUT US */
  .inclusive-div{
    margin-bottom: 1rem;
  }

  .section {
    grid-template-columns: 1fr;
    /* text-align: center; */
  }
  
  .section:nth-child(even) {
    direction: ltr;
  }

  .long-header{
    font-size: 1.4rem !important;
    font-weight: 600;
    line-height: 2rem;
  }

  /* LEADERSHIP PAGE */
  .administration {
    padding: 2rem 0 1rem;

  }
  .admin-grid {
    display: block;
  }
  .admin-card{
  margin-bottom: 2rem;}
  .hide-card{
    display: none;
  }

  
  .event-detail-banner {
    padding: 2.5rem 0;
  }

  .event-detail-banner h1 {
    text-align: center;
    margin-top: 1rem;
  }

  .event-info-card {
    margin-top: 1.5rem;
  }

  /* EVENT DETAILS */
  /* Banner Section */
  .event-detail-banner{
    height: auto; /* 30rem */
    padding: 0;
  }

  .event-detail-banner .col-lg-7{
    padding: 0;
  }

  .event-detail-banner .col-lg-5{
    padding-bottom: 2rem;
  }

  .event-detail-banner img{
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .event-detail-banner h1 {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: left;
  }
  .event-body-grid {
    grid-template-columns: 1fr; /* stack vertically */
  }

  .event-info-card-div {
    order: -1; /* move info card to the top */
    padding: 0 !important;
    margin-bottom: 1rem;
  }

  .event-details {
    order: 0;
  }

  /* PROGRAMS */
  .programmes-section {
    background: #f8fafc;
    padding: 3rem 0 4rem;
  }
  .fee-item {
    border-right: none;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 1.5rem;
  }

  .fee-item:last-child {
    border-bottom: none;
  }

  /* APPLICATION PAGE */
  .event-body-grid{
    grid-template-columns: 1fr;
  }
  
  .form-row{ grid-template-columns: 1fr; }
  .submit-row{ justify-content:stretch; }
  .submit-row .btn-accent{ width:100%; }
  .event-body-grid{ gap: 1.5rem; }
  .form-terms{ font-size: 0.98rem ;}

  /* CONTACT US PAGE */
  .contact-div{
    padding: 0 !important;
    margin-bottom: 2.5rem;
    border: 0.00001px solid var(--primary-color);
  }

  .contact-section {
    display: block;
  }
  
  .contact-text{
    padding: 0 var(--div-padding) 2.3rem;
  }

.contact-text h6{
  margin: 4rem 0 2.3rem;
  color: var(--accent-color);
}

.contact-text h3{
	line-height: 2.5rem;
}


.contact-image {
  width: 100%;
  height: 49.6vh;
  overflow: hidden;
}

.blog-card{
  width: 100%;
}



}

/* Medium devices (tablets, small laptops) */
@media (max-width: 900px) {
	:root{
	  --div-padding: 2rem; /*2.4rem*/
    --div-padding2: 2rem;
    --margin-top: 5.7rem;
	}

  /*body{
    background: red !important;
  }*/

  .desktop{
    display: none;
  }

  .phone{
    display: block !important;
  }

  .div-padding{
		padding-left: var(--div-padding);
		padding-right: var(--div-padding);
  }

  .div-mb{
    margin-bottom: 5rem;
  }

  .main{
    min-height: 60vh !important;
  }

  
  /* Navbar */
  .vnav{
/*    height: 4.4357rem !important;*/
    padding: 0 !important;
    padding: 2.94rem var(--div-padding) 1.94rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .phone-header-logo{
    height: 4.5rem;
  }


    /* Menu modal */
    .bg-green .vnav{
        height: 5.625rem;
        padding: 2.94rem var(--div-padding) 1.94rem !important;
        /*border-bottom: 1px solid red;*/
    }

    .bg-green .modal-body{
        padding: 1.67rem var(--div-padding) 2rem !important;
    }
    
    .menu-header {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 3.6875rem !important;
        margin-bottom: 0.5rem;
        padding: 0;
        padding: 1rem 0.5rem !important;
        /* border-radius: 0.5rem; */
        border-bottom: 1px solid grey;
        /* background: var(--accent-color); */
        font-size: 1rem;
        font-weight: 400;
        line-height: normal;
        color: var(--white);
    }

    .normal-link a{
        font-size: 1rem;
        font-weight: 400;
        line-height: normal;
        color: var(--white);
    }

    .menu-body {
        display: none;
        padding-top: 1rem;
        /* background: #f4f4f4; */
    }

    .menu-body ul{
        list-style: none;
    }

    .menu-body ul li{
        margin-bottom: 1rem;
    }

    .menu-body ul li a{
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5rem;	
        color: var(--white);
    }

  /* Hero Styles */
  .hero {
    height: 70vh;
  }
  
  /* HOME ABOUT */
  .home-about-img img{
    height: 27.84375rem;
    object-fit: cover;
  }

  .home-about-details{
    padding-top: 0.5rem;
  }

  .home-about-details h3{
    line-height: 2rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
  }

  .home-about-details .last-p{
    margin-top: 0.5rem;
  }

  /* TESTIMONIALS */
  .testimonial {
    flex: 1 0 50%; /* 2 per row by default */
  }

  /* PROGRAMS */
  .program-details{
    padding: 1rem 0.8rem 2rem;
  }

  /* APPLICATION BANNER */
  .application-banner-div .app-banner-image {
    height: 50.9vh;
  }

  /* EVENT DETAILS */
  /* Banner Section */
  .event-detail-banner{
    height: auto; /* 30rem */
    padding: 0;
  }

  .event-detail-banner .col-lg-7{
    padding: 0;
  }

  .event-detail-banner .col-lg-5{
    padding-bottom: 2rem;
  }

  .event-detail-banner img{
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .event-body-grid {
    grid-template-columns: 1fr; /* stack vertically */
  }

  .event-info-card-div {
    order: -1; /* move info card to the top */
    padding: 0 !important;
    margin-bottom: 1rem;
  }

  .event-details {
    order: 0;
  }

  /* LEADERSHIP PAGE */
  .admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    gap: 2rem;
  }

/* PROGRAMS */
.fees-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 2.5rem;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  padding: 2rem 0;
}





  
}


 /* Smaller screens, laptops */
@media screen and (min-width:  1024px) and (max-width:  1200px){

  .desktop{
    display: none;
  }

  .phone{
    display: block !important;
  }

  .div-padding{
		padding-left: var(--div-padding);
		padding-right: var(--div-padding);
  }

  .div-mb{
    margin-bottom: 5rem;
  }

  .main{
    min-height: 60vh !important;
  }

  
  /* Navbar */
  .vnav{
/*    height: 4.4357rem !important;*/
    padding: 0 !important;
    padding: 2.94rem var(--div-padding) 1.94rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .phone-header-logo{
    height: 4.5rem;
  }


    /* Menu modal */
    .bg-green .vnav{
        height: 5.625rem;
        padding: 2.94rem var(--div-padding) 1.94rem !important;
        /*border-bottom: 1px solid red;*/
    }

    .bg-green .modal-body{
        padding: 1.67rem var(--div-padding) 2rem !important;
    }
    
    .menu-header {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 3.6875rem !important;
        margin-bottom: 0.5rem;
        padding: 0;
        padding: 1rem 0.5rem !important;
        /* border-radius: 0.5rem; */
        border-bottom: 1px solid grey;
        /* background: var(--accent-color); */
        font-size: 1rem;
        font-weight: 400;
        line-height: normal;
        color: var(--white);
    }

    .normal-link a{
        font-size: 1rem;
        font-weight: 400;
        line-height: normal;
        color: var(--white);
    }

    .menu-body {
        display: none;
        padding-top: 1rem;
        /* background: #f4f4f4; */
    }

    .menu-body ul{
        list-style: none;
    }

    .menu-body ul li{
        margin-bottom: 1rem;
    }

    .menu-body ul li a{
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5rem;	
        color: var(--white);
    }





}


/* Smaller laptops (notebook) */
@media screen and (min-width:  1201px) and (max-width:  1340px){
  /*body{
    background: red !important;
  }*/

  :root{
    --div-padding: 4.5rem;
    --special-tools-h2: 4rem;
  }

}



/* Larger screens, laptops */
@media screen and (min-width:  1601px) and (max-width:  1700px){
  body{
    background: yellow !important;
  }

  /*:root{
    --div-padding: 17.5rem;
    --special-tools-h2: 16.7rem;
  }*/

  /*:root{
    --div-padding: 10.5rem;
    --special-tools-h2: 9.7rem;
  }*/





}

/* Extra large Screens, TV (70%) */
@media screen and (min-width:  1901px){
  /*body{
    background: pink !important;
  }*/

  :root{
    --margin-top: 6.5rem;
/*    --div-padding: 15%;*/
  }

nav{
  height: 6.625rem;
}

.nav-logo{
  height: 6rem;
}

.main-nav .dropdown button{
  font-size: 1.4rem;
}

.main-nav .dropdown .dropdown-menu li a{
  display: block !important;
  font-size: 1.4rem;
}

}