/* project name: Little School system 
    category: Education
    Design By: Saila Noshi
    Powered By: Virtuemax
    Project Date: 29/Nov/2024
    Completed: ....
*/





@font-face {
    font-family: effra;
    src: url("https://use.typekit.net/af/2dce9d/00000000000000003b9b489b/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/2dce9d/00000000000000003b9b489b/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff"),url("https://use.typekit.net/af/2dce9d/00000000000000003b9b489b/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    font-stretch: normal
}

@font-face {
    font-family: effra;
    src: url("https://use.typekit.net/af/23ddd7/00000000000000003b9b489e/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/23ddd7/00000000000000003b9b489e/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff"),url("https://use.typekit.net/af/23ddd7/00000000000000003b9b489e/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    font-stretch: normal
}

@font-face {
    font-family: effra;
    src: url("https://use.typekit.net/af/a61338/00000000000000003b9b4898/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff2"),url("https://use.typekit.net/af/a61338/00000000000000003b9b4898/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("woff"),url("https://use.typekit.net/af/a61338/00000000000000003b9b4898/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n3&v=3") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 300;
    font-stretch: normal
}

@font-face {
    font-family: effra;
    src: url("https://use.typekit.net/af/ecc7e6/00000000000000003b9b489c/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff2"),url("https://use.typekit.net/af/ecc7e6/00000000000000003b9b489c/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("woff"),url("https://use.typekit.net/af/ecc7e6/00000000000000003b9b489c/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n5&v=3") format("opentype");
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    font-stretch: normal
}

body {
  font-family: effra, sans-serif;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 300;
  color: #54565a;
}

/* Container */
  .container {
    width: 95%;
  }

  @media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1197px;
    }
    .footer-logo{
        width: 200px;
    }
}

/* Navigation */
.width-vw{
    width: 100vw !important;
}
.navbar-dark{
  background-color: #2c3b8f;
}
.line-h{
    line-height: 70px;
    width: 100%; /* Mobile fix: Changed from fixed 600px */
    max-width: 600px;
}
.nav-img img{
    width: 100%; /* Mobile fix: Changed from fixed 600px */
    max-width: 600px;
}



/* Slider Section */
.hero-slider {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

.carousel-item img {
    height: 100vh;
    object-fit: cover;
    filter: brightness(70%); 
}


/* Navbar */
.navbar {
      transition: all 0.4s ease;
      padding: 0.8rem 1rem;
      height: 75px;
      z-index: 1130;
    }

    /* Transparent initial state */
    .navbar.transparent {
      background-color: transparent !important;
      backdrop-filter: none;
    }

    /* Solid background after scroll */
    .navbar.scrolled {
      background-color: #2c3b8f;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
      height: 70px;
      backdrop-filter: blur(4px);
    }

    /* Center logo */
    .navbar-brand img {
      height: 35px;
      transition: all 0.3s ease;
    }

    /* Social icons and search */
    .nav-social a {
      color: white;
      margin-left: 12px;
      font-size: 1.2rem;
      transition: color 0.3s ease;
    }
    .nav-social a:hover {
      color: #ffc107;
    }

    /* Search overlay */
    #searchOverlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 0;
      background: rgba(0, 0, 0, 0.95);
      overflow: hidden;
      transition: height 0.5s ease;
      z-index: 2000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #searchOverlay.open {
      height: 100%;
    }
    #searchOverlay input {
      width: 70%;
      max-width: 600px;
      background: transparent;
      border: none;
      border-bottom: 2px solid white;
      color: white;
      font-size: 2rem;
      text-align: center;
      outline: none;
    }
    #searchOverlay .close-search {
      position: absolute;
      top: 20px;
      right: 40px;
      font-size: 2rem;
      color: white;
      cursor: pointer;
    }

    .navbar-toggler:focus {
      box-shadow: none !important;
    }

  /* Centered Offcanvas Menu v3 (Minimalist) */
  .custom-offcanvas {
    background-color: #1e3a71 !important;
  }

  .offcanvas-body {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .offcanvas .nav-link {
    font-family: 'effra', sans-serif;
    font-weight: 700;
    font-size: 2.5rem; /* Large but not massive */
    color: rgba(255,255,255,0.7) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 15px 0;
    transition: all 0.3s ease;
  }

  .offcanvas .nav-link:hover {
    color: #fff !important;
    transform: scale(1.05); /* Subtle scale */
  }

  /* Remove complex strokes and before/after pseudo elements from v2 */
  .offcanvas .nav-link::before { display: none; }
  .offcanvas .menu-left, .offcanvas .menu-right { display: contents; } /* Reset layout if needed, though HTML changes handle this */


.navbar-toggler {
    border: none;
    color: white;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 15px;
}

.navbar-brand svg {
    fill: white; 
    cursor: pointer;
    transition: transform 0.2s;
}

.navbar-brand svg:hover {
    transform: scale(1.2); 
}

/* Carousel Caption */
.carousel-caption {
  font-family: effra, sans-serif;
    position: absolute;
    top: 30%;
    text-align: center;
    color: white;
}

.slider-title {
    font-size: 72px;
    margin-bottom: 12px;
    letter-spacing: 2px;
    font-weight: 100;
}

.slider-title .highlight {
  font-family: effra, sans-serif;
    color: #43439b;
    font-weight: bold;
    font-size: 72px;
    font-weight: 900;
}

.slider-buttons a {
    width: 170px;
    padding: 8px 16px;
    border-radius: 50px;
    text-align: center;
}

.slider-subtitle {
  font-size: 30px;
  font-weight: 700;
}

.slider-buttons .btn-primary {
    background-color: #6fb3fc;
    color: white;
    border: none;
}

.slider-buttons .btn-secondary {
    background-color: #032c50;
    color: white;
    border: none;
}

.button, a.readmore
 {
    border: none;
    background: #f5f6f1;
    padding: 5px 50px 5px 20px;
    min-width: 218px;
    max-width: 100%;
    text-align: left;
    font-size: 1rem;
    background: #f5f6f1;
    color: #1e3a71;
    line-height: 34px;
    text-transform: inherit;
    cursor: pointer;
    display: inline-block;
    letter-spacing: .8px;
    font-weight: 300;
    border-radius: 32px;
    position: relative;
}

.button:hover, a.readmore:hover {
    background: #54565a !important;
    color: #fff !important;
}

.button:after, a.readmore:after {
    font-family: "Font Awesome 5 Free"; /* Ensure FontAwesome is loaded */
    font-weight: 900;
    content: "\f061"; /* Arrow right icon */
    width: 34px;
    height: 34px;
    background: #1e3a71; /* Circle background */
    color: white;       /* Arrow color */
    display: flex;      /* Center the icon */
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 5px;
    top: 0;             /* Reset to align properly */
    bottom: 0;          /* Reset to align properly */
    margin: auto;       /* Vertical centering */
    border-radius: 50%;
    font-size: 14px;
}

@media (min-width: 992px) {
    .button, a.readmore {
        min-width: 218px;
        width: auto;
    }
}

/* Latest News Section */
.latest-news {
    position: relative;
    background-color: #f9f9f9;
    overflow: hidden; /* Ensure no overflow */
}

.news-label {
    font-family: effra, sans-serif;
    background-color: #003366;
    color: white;
    padding: 16px 40px;
    font-size: 30px;
    font-family: effra;
    font-weight: bold;
    clip-path: polygon(0 0, 79% 0, 100% 50%, 79% 100%, 0 100%); /* Arrow shape */
}

.news-content {
    flex-grow: 1;
    overflow: hidden; 
    position: relative;
}

.news-ticker {
    display: inline-block;
    white-space: nowrap;
    animation: scrollNews 55s linear infinite;
}



.accordion-button:focus {
      box-shadow: none !important;
  }

.news-ticker span {
  font-family: effra, sans-serif;
    display: inline-block;
    padding: 0 50px; 
    font-size: 1.5rem;
    color: #003366;
    font-weight: bold;
}

.hover-img {
  position: relative;
  height:100%;
}
.hover-img img{
  position: relative;
   width: 100%;  /* Mobile fix: Changed from fixed 400px */
   height: auto; /* Mobile fix: Changed from fixed 470px to auto aspect ratio */
   object-fit: cover;
   aspect-ratio: 400 / 470; /* Optional: Maintain aspect ratio if supported */
}

.clr-blue{
    color: #1e3a71;
    font-family: effra, sans-serif;
    font-size: 47px;
    line-height: 1.26;
    font-weight: 300;
    margin-bottom: 20px;
}
.dynamic-info-grid .content_inner_section .section_title h2:after {
    background: #54565a;
    width: 47px;
    height: 2px;
    content: '';
    display: block;
    margin-top: 7px;
}

.details-btn a {
  font-size: 16px;
}

.section-details {
  margin-bottom: 37px;
  font-size: 20px;
}

strong {
  font-weight: 700;
}
.paragraph{
    margin-bottom: 45px;
    line-height: 27px;
}

.text-area {
  flex: 1;
  min-width: 280px;
  padding-right: 40px;
}

.text-area h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

.text-area p {
  color: #555;
  line-height: 1.6;
}

.carousel-area {
  flex: 1;
  min-width: 320px;
  position: relative;
}

.owl-carousel .item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border-radius: 0px !important;
}

/* .owl-carousel .item:first-child {
  margin-right: 9px !important
} */

.owl-carousel .item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  display: block;
}

.owl-carousel .owl-item img {
    border-radius: 0px;
}

/* Custom nav */
.custom-nav {
  left: 0;
  width: 100%;
  display: flex;
  justify-content: end;
}

    @media (max-width: 991px) {
      .owl-nav button.owl-prev {
        left: -30px;
      }
      .owl-nav button.owl-next {
        right: -30px;
      }
      .owl-carousel .item img {
        height: 220px;
      }
    }

.about-section {
  margin-top: 32px !important;
  margin-bottom:32px;
}
/* Image Container */
.img-position {
    position: relative;
    overflow: hidden;
}

/* Image Styling */
.hover-img img {
    width: 100%;
    overflow: hidden;
    object-fit: cover;
}

/* Text Positioning */

.text-position .img-text {
  font-family: effra;
  font-size:32px;
  line-height: 1.14;
  text-transform: inherit;
  font-weight: 400;
  color:#ffffff;
  text-align: left;
  padding-left: 0;
  padding-right: 0;
}

.text-position {
  transform: none;
  bottom: 30px;
  z-index: 2;
  text-align: left;
  padding-left: 40px;
  padding-right: 40px;
  padding: 10px 20px;
  position: absolute;
  left: 0;
  width: 100%;
  transition: .3s;
}

.poiImage:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    height: 30%;
    background: -moz-linear-gradient(bottom,rgba(0,0,0,.7) 0,rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to top, rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, 0) 100%);
}

.poi {
    position: relative;
    display: block;
    transition: all .3s;
    overflow: hidden;
    background: #676767;
    color: #fff;
    font-family: effra, sans-serif;
    height: 500px;
  }

.poi {
  background: #1e3a71;
}

.poi .poiImage{
    opacity: 1;
    width: 100%;
    height: 100%;
}


.poi:hover .poiImageBG {
    opacity: .3;
}

.text-position .text-hover {
  max-height: 0;
  overflow: hidden;
  font-size: 18px;
  transition: .3s;
}

.poi:hover .text-position .img-text {
    margin-bottom: 25px;
}

.btn-arrow .bi-arrow-right-circle {
  margin-top: 30px;
  width: 30px;
}

.prev-btn .btn-previus {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50%;
    border: 1px solid #54565a !important;
    line-height: 58px !important;
    display: inline-block;
    position: relative;
    left: auto;
    top: auto;
    margin: 0 3px;
    background: url(../media/arrow-prev.png) center center no-repeat #fff !important;
}

.next-btn .btn-next {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50%;
    border: 1px solid #54565a !important;
    line-height: 58px !important;
    display: inline-block;
    position: relative;
    left: auto;
    top: auto;
    margin: 0 3px;
    background: url(../media/arrow-next.png) center center no-repeat #fff !important;
}

.prev-btn, .next-btn {
  border: none !important;
  margin-top: 20px;
  cursor: pointer;
  background-color: transparent;
}

.owl-dots {
  display: none;
}

.owl-dots .owl-dot.active span {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50%;
    border: 1px solid #54565a !important;
    line-height: 58px !important;
    display: inline-block;
    position: relative;
    left: auto;
    top: auto;
    margin: 0 3px;
    background: url(../media/arrow-prev.png) center center no-repeat #fff !important;
}

.owl-dots .owl-dot span {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50%;
    border: 1px solid #54565a !important;
    line-height: 58px !important;
    display: inline-block;
    position: relative;
    left: auto;
    top: auto;
    margin: 0 3px;
    background: url(../media/arrow-next.png) center center no-repeat #fff !important;
}

.owl-dots .owl-dot.active span {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50%;
    border: 1px solid #54565a !important;
    line-height: 58px !important;
    display: inline-block;
    position: relative;
    left: auto;
    top: auto;
    margin: 0 3px;
    background: url(../media/arrow-prev.png) center center no-repeat #fff !important;
}




.poi:hover .text-position .text-hover{
    max-height: 460px;  
}

/* Initial Text (Always Visible) */
.text-position h2 {
  font-family: effra, sans-serif;
    font-size: 1.5rem;
    line-height: 1.5;
    font-weight: bold;
    opacity: 1; 
    transition: opacity 0.3s ease; 
}

/* Hover Text (Hidden Initially) */
.text-hover .detail-text {
    font-size: 16px;
}

.hover-text
.btn-arrow{
    display: flex;
    justify-content: left;
    margin-bottom: 60px;
    margin-left: 60px;
    color: white;
}
.img-position:hover .hover-text {
    opacity: 1; 
    background: transparent;
}

/* Section Styling */
.visit-section {
    padding: 50px 20px;
  }
  
  /* Text Column Styling */

.text-column {
    position: relative;
    padding: 20px 30px; 
    background-color: #f8f8f0; 
    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
    z-index: 1;
  }
  
  
  /* Top Border for Text Column */
.text-column::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 10px; 
    background-color: #2c3b8f; 
    transform: skewX(-4deg); 
    transform-origin: top left; 
    z-index: -1; 
  }
  
  
  
  /* Bottom Border for Text Column */
  .text-column::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15px; 
    background-color: #a9dff5; 
    transform: skewY(-2deg); 
    transform-origin: bottom left; 
    z-index: -1; 
  }


/* School Difference */

.dynamic-school_facts {
    background: #f5f6f1;
    padding: 50px 0;
    text-align: center;
    margin: 0 0 20px;
}

.sectionTitle {
    margin-bottom: 10px;
    font-size: 2.2em;
    color: #1e3a71;
    font-family: effra, sans-serif;
    font-weight: 300;
}

.dynamic-school_facts .d-school-fact .icon i {
    font-size: 60px;
    color: #1e3a71; /* Primary Blue */
    opacity: 1; /* Make icons visible clearly */
    margin-bottom: 10px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.dynamic-school_facts .d-school-fact:hover .icon i {
    transform: scale(1.1);
    color: #ffc107; /* Gold on hover */
}

.dynamic-school_facts .d-school-fact .percentage_text {
    font-size: 64px;
    color: #1e3a71;
    line-height: 75px;
    font-family: effra, sans-serif;
    margin-bottom: 14px;
    margin-top: 9px;
    margin-left: -57px;
    letter-spacing: -4px;
    font-weight: 300;
}

.dynamic-school_facts .d-school-fact .plus_sign:after {
    position: absolute;
    content: '%';
    display: inline-block;
    font-size: 64px;
    font-weight: 400;
    margin-left: 5px;
}

.dynamic-school_facts .d-school-fact .below_text {
    font-size: 14px;
    margin-bottom: 0px;
    color: #54565a;
    line-height: 19px;
    font-weight: 400;
    font-family: effra, sans-serif;
}

/* Page Content */

.dynamic-info-grid {
    padding: 40px 0 55px;
    margin: 0;
    margin-top: 80px;
}

.dynamic-info-grid .row {
    margin: 0;
}

.dynamic-info-grid .large_grid.style1.content {
    margin-top: -45px;
    padding: 0;
    background: #f5f6f1;
    overflow: hidden;
    position: relative;
    margin-bottom: -50px;
}

.dynamic-info-grid .large_grid.style1.content:before {
    height: 151px;
    width: 132%;
    position: absolute;
    top: -130px;
    left: 7%;
    content: '';
    transform: rotate(7deg);
    background: #fff;
    z-index: 99;
    display: block;
    border: 3px solid #1e3a71;
}

.dynamic-info-grid .large_grid.style1.content .content_inner_section {
    padding: 190px 5% 58px 13%;
    text-align: left;
    max-width: 1000px;
}

.dynamic-info-grid .large_grid.style1.content:after {
    height: 134px;
    width: 200%;
    position: absolute;
    bottom: -37px;
    left: -10%;
    content: '';
    background: #fff;
    z-index: 99;
    transform: rotate(-4deg);
    border: 16px solid #95d3e8;
}

.dynamic-info-grid .large_grid.style1.content .content_inner_section {
    padding: 90px 5% 58px 13%;
    text-align: left;
    max-width: 1000px;
}

.dynamic-info-grid .content_inner_section .title h2 {
    font-size: 55px;
    line-height: 1.33;
    margin-bottom: 20px;
    font-weight: 300;
}
.grid5 .content_inner_section {
    height: 280px;
}
.dynamic-info-grid .content_inner_section .title h2:after {
    background: #54565a;
    width: 47px;
    height: 2px;
    content: '';
    display: block;
    margin-top: 7px;
}

.dynamic-info-grid .content_inner_section .title h2 span, .dynamic-info-grid .content_inner_section .title h2 strong {
    font-weight: 700;
    display: block;
}

.dynamic-info-grid .large_grid.style1.content .content_inner_section .details {
    margin-bottom: 40px;
    font-size:1.25rem;
}
.content_inner_button.button {
    background: #fff;
    z-index: 99;
}
.section_title h2:after {
    background: #54565a;
    width: 47px;
    height: 2px;
    content: '';
    display: block;
    margin-top: 7px;
}
.section_title h2:after {
    background: #54565a;
    width: 47px;
    height: 2px;
    content: '';
    display: block;
    margin-top: 7px;
}
a {
    text-decoration: none;
}
.poiImage .poiImageBG {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: .3s;
    opacity: 1;
}
.poiImage .poiImageBG img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dynamic-info-grid .small_grid.style1.image .poiImage:before {
    content: '';
    display: block;
    width: 100%;
    padding-top: 78.8%;
}
.dynamic-info-grid .small_grid.style1.image .poi {
    margin-bottom: 40px;
}
.poiImage .poiText {
    transform: none;
    bottom: 30px;
    z-index: 2;
    text-align: left;
    padding-left: 40px;
    padding-right: 40px;
    padding: 10px 20px;
    position: absolute;
}
.poi .poiTitle {
    font-size: 35px;
    line-height: 1.14;
    text-transform: inherit;
    font-weight: 400;
    text-align: left;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    padding: 10px 15px;
}
.poi:hover {
    color: #fff;
    text-decoration: none;
}
.poi:hover .poiImage .poiText {
    bottom: 57px;
    transform: none;
    text-align: left;
}
.poiImage .poiText {
    padding: 10px 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    bottom: 15%;
    transform: translateY(50%);
    width: 100%;
    transition: .3s;
}
.poi:hover .poiTitle {
    font-size: 30px;
    margin-bottom: 25px;
}
.poiImage .poiImageBG:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 1;
    height: 35%;
    background: -moz-linear-gradient(bottom,rgba(0,0,0,.7) 0,rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to top, rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, 0) 100%);
}
.dynamic-info-grid .grid4.small_grid.style1.image {
    padding: 0 30px 0 0;
}
.dynamic-info-grid .large_grid.style2.content {
    padding: 65px 40px 70px;
    background: #1e3a71;
    color: #fff;
    position: relative;
}
@media only screen and (min-width: 992px) and (max-width: 1400px) {
    .dynamic-info-grid .large_grid.style2.content:before {
        bottom: -64px;
        transform: skewy(6deg);
    }
}
@media only screen and (min-width: 992px) {
    .dynamic-info-grid .small_grid.style1.image .poiImage {
        height: 385px;
    }
}
@media only screen and (min-width: 992px) {
    .dynamic-info-grid .large_grid.style1.image .poiImage {
        height: 385px;
    }
}
.dynamic-info-grid .large_grid.style1.image:before {
    height: 56px;
    width: 100%;
    position: absolute;
    top: -16px;
    left: 0;
    content: '';
    border-top: 16px solid #95d3e8;
    transform: skewy(-3.6deg);
    background: #fff;
    z-index: 99;
    display: block;
}
@media only screen and (min-width: 992px) and (max-width: 1400px) {
    .dynamic-info-grid .large_grid.style1.image:before {
        top: -31px;
    }
}
.dynamic-info-grid .large_grid.style2.content:before {
    height: 114px;
    width: 100%;
    position: absolute;
    bottom: -65px;
    left:0px;
    content: '';
    transform: skewy(6deg);
    background: #fff;
    z-index: 99;
    display: block;
}
.dynamic-info-grid .large_grid.style1.image {
    position: relative;
    padding: 0px !important;
    z-index: 100;
}
.dynamic-info-grid .content_inner_section .details {
    margin-bottom: 30px;
    font-size: 1.25rem;
}
.dynamic-info-grid .small_grid.style1.image {
    position: relative;
    z-index: 100;
}
.dynamic-info-grid .small_grid.style1.image {
    padding: 0 0 0 30px;
}
.grid4 .poi {
  height: 320px;
}
.dynamic-info-grid .large_grid.style2.content .content_inner_section .title-method h2 {
    color: #fff;
    font-family: effra;
    font-size: 35px;
    line-height: 50px;
    letter-spacing: 0px;
    font-weight: 400;
    margin-bottom: 20px;
}
.dynamic-info-grid .large_grid.style2.content .content_inner_section .button {
    float: right;
}

/* News And Events */
.destination_schools_title {
    text-align: center;
    margin-bottom: 90px;
}
.destination_schools_title .top_title {
    color: #54565a;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 4px;
}
.section_title h2 {
    font-size: 55px;
    line-height: 1.26;
    margin-bottom: 20px;
    font-weight: 300;
}
.event-heading {
  font-size: 55px;
  color: #1e3a71;
  font-family: effra, sans-serif;
  line-height: 1.33;
  margin-bottom: 20px;
  font-weight: 300;
  width: 100%;
  max-width: 25rem;
  margin: auto;
}
.entry-title, h1, h2, h3 {
    color: #1e3a71;
    font-family: effra, sans-serif;
}
.event-heading h2:after {
    background: #54565a;
    width: 47px;
    height: 2px;
    content: '';
    display: block;
    margin-top: 7px;
}
/* News And Event Section Sidely */
.event-portion .col-md-3,.event-portion .col-sm-3{
  padding:0px;
  margin:0px;
}
.owl-nav {
  position: absolute;
  right: 30px;
  bottom: 20px;
}

.owl-nav button {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    border: 1px solid #54565a !important;
    line-height: 58px !important;
    background-color: transparent !important;
    display: inline-block;
    position: relative;
    left: auto;
    top: auto;
    margin: 0 3px;
}

.owl-prev{
    background: url(../media/arrow-prev.png) center center no-repeat #fff !important;
}
.owl-next{
    background: url(../media/arrow-next.png) center center no-repeat #fff !important;
}
.news_section .news-details-box .news_content {
    margin-bottom: 50px;
}
.event-carousel {
  margin-top: 16px;
}
.event-portion .poiImage {
  height: 330px;
}
.event-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
}
.event-carousel{
 background:#f4f5f1;
}
.news_section .newsitem {
    background: #f4f5f1;
    padding: 100px 70px;
}
.poiEventMain {
    background: #000000;
}
.poiEventMain {
    position: relative;
    display: block;
    transition: all .3s;
    overflow: hidden;
    color: #fff;
    font-family: effra, sans-serif;
}
.poiEventMain:hover {
    color: #fff;
    text-decoration: none;
}
.poiEventMain:hover .poiImage .poiImageBG
 {
    opacity: .25;
}
.poiEventMain:hover .poiTitle {
    font-size: 35px;
    margin-bottom: 25px;
}
.poiEventMain:hover .poiImage .poiText {
    bottom: 57px;
    transform: none;
    text-align: left;
}
.poiEventMain{
    font-size: 35px;
    line-height: 1.14;
    text-transform: inherit;
    font-weight: 400;
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    position: relative;
}
.newsItemImage {
  padding: 0px;
  margin: 0px;
}
.news_section .newsItemImage img {
    height: 550px;
    width: 100%;
    object-fit: cover;
}
.news_section .news-details-box h2 {
    font-size: 35px !important;
    line-height: 1;
    font-weight: 300;
    color: #1e3a71;
    margin-bottom: 25px;
}
.news_section .news-details-box h2 a {
    color: #1e3a71;
    font-weight:400;
    display: inline-block;
    text-decoration: none;
}
.event-portion .row{
  width:100%;
}
.owl-item{
 margin-right:0px;
 overflow:hidden;
}
.news_section .news-details-box .button.news_button {
    background: #fff;
}
.row.top-events {
  width:100% !important;
}
.date {
    font-family: effra, sans-serif;
    font-size: 0.9rem;
    color: #999;
    margin-bottom: 15px;
}
/* Content Wrapper */

.dynamic-school_facts .sectionTitle {
    margin-bottom: 50px;
    font-weight: 300;
}
  .content-wrapper {
    text-align: left;
    position: relative; 
    z-index: 2;
  }
  
  /* Heading */
  .content-wrapper h2 {
    font-size: 2.5rem;
    color: #2c3b8f; 
    font-weight: 400;
  }
  
  .content-wrapper h2 span {
    font-weight: bold;
  }



  .footer-logo {
    width: 250px;
  }
  
  /* Divider */
  .divider {
    width: 50px;
    height: 2px;
    background-color: #2c3b8f; 
    border: none;
    margin: 20px 0;
  }
  
  /* Paragraph */
  .content-wrapper p {
    font-size: 1rem;
    color: #666; 
    line-height: 1.6;
    margin-bottom: 30px;
    letter-spacing: 1px;
  }
  
  /* Button */
  .cta-button {
    display: inline-block;
    background-color: #2c3b8f; 
    color: #fff; 
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
  }
  
  .cta-button span {
    margin-left: 10px;
  }
  
  .cta-button:hover {
    background-color: #1e2b6f; 
  }
  
  /* Image Styling */
  .image-wrapper img {
    position: relative;
    width: 100%;
    height: 400px;
    border-radius: 10px;
    filter: brightness(50%); 
    transition: filter 0.3s ease; 
  }
.pstn-text{
    position: absolute;
    top: 70%;
    left: 12%;
    color: white;
    
  }

  .image-wrapper:hover{
    margin-top: 50px;
  }

  .pstn-text h3{
    font-family: effra, sans-serif;
    letter-spacing: 3.5px;
    font-size: 3rem;
  }


  .all-img img{
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 15px;
  }



  /* Section Styling */
.curriculum-section {
  overflow-x: hidden;
  }
  
  /* Image Box Styling */
  .image-box {
    position: relative;
    overflow: hidden; 
    border-radius: 10px; 
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); 
  }
  
  /* Image Styling */
  .image-box img {
    width: 100%; 
    height: auto; 
    object-fit: cover; 
    border-radius: 10px; 
  }
  
  /* Overlay Text Styling */
 
  .overlay-text{
    font-family: effra, sans-serif;
    position: absolute;
    bottom: 20px; 
    left: 65%; 
    font-size: 1.4rem; 
    font-weight: bold; 
    color: #ffffff;
    padding: 8px 15px;
    border-radius: 5px; 
  }
 
  /* Section Styling */
.remembrance-section {
    background-color: #f8f8f0; 
    padding: 50px 20px;
  }
  
  /* Image Box */
  .image-box img {
    width: 100%;
    height: auto;
    object-fit: cover; 
    border-radius: 5px; 
  }
  
  /* Text Box */
  .text-box {
    padding: 20px;
  }
  
  .section-title {
    font-family: effra, sans-serif;
    font-size: 2rem;
    color: #2c3b8f;
    font-weight: bold;
  }
  
  .date {
    font-family: effra, sans-serif;
    font-size: 0.9rem;
    color: #999; 
    margin-bottom: 15px;
  }
  
  .description {
    font-family: effra, sans-serif;
    font-size: 1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 20px;
    letter-spacing: 1.5px;
  }
  
  .btn-read-article {
    font-family: effra, sans-serif;
    display: inline-block;
    background-color: #2c3b8f;
    color: #fff;
    font-size: 1rem;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
  }
  
  .btn-read-article .arrow {
    margin-left: 10px;
  }
  
  .btn-read-article:hover {
    background-color: #1e2b6f; 
  }
  
  /* Navigation Arrows */
  .navigation-arrows {
    margin-right: 90px;
    margin-top: 30px;
  }
  .image-box-1{
    position: relative;
  display: inline-block;
  overflow: hidden;
  clip-path: polygon(0 10%, 100% 0%, 100% 100%, 0 100%);
  }

  .image-box-2{
    position: relative;
  display: inline-block;
  overflow: hidden;
  }

  .img-shadow{
    filter: brightness(70%);
  }
  
  .image-colomn{
    width: 100%;
    max-width: 500px;
  }
  
  .arrow-btn {
    cursor: pointer;
    
  }
  .arrow-btn  svg{
    display: flex;
    align-items: center;
  }
  .arrow-btn:hover {
    background-color: #2c3b8f;
    color: #fff; 
  }
  .arrow-btn:hover {
    background-color: #0f1b5c; 
    color: #fff; 
  }

  /* Section Styling */
  .our-objective {
    background-color: #ffffff;
    padding: 100px 20px; 
  }

  
  /* "Our Core" (Our Aim) v13 - Kinetic Simple (Refined) */
  :root {
      /* Minimalist Palette */
      --c-1: #00d2ff; /* Cyan */
      --c-2: #ffbd00; /* Gold */
      --c-3: #9d00ff; /* Purple (School Brand) */
  }

  /* === THE STAGE (150px Fixed) === */
  .kinetic-section {
      width: 100%;
      height: 150px; /* Kept fixed height */
      position: relative;
      background: #050505; /* Refinement: Dark BG for visibility */
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0; /* Full width flow */
      border-bottom: 1px solid rgba(255,255,255,0.05); /* Subtle separator */
  }

  /* === THE ITEM SLIDE === */
  .kinetic-item {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none; /* Click through inactive */
  }

  .conversation-wrapper {
    position: relative;
  }

  /* === ANIMATION PARTS === */
  
  /* 1. THE ICON (Left Side) */
  .icon-part {
      font-size: 3.5rem;
      margin-right: 30px;
      opacity: 0;
      transform: translateX(-150px) skewX(20deg); /* Start far left */
      filter: blur(20px); /* Motion Blur start */
      transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* 2. THE TEXT (Right Side) */
  .text-part {
      display: flex;
      flex-direction: column;
      justify-content: center;
      opacity: 0;
      transform: translateX(150px); /* Start far right */
      filter: blur(20px);
      transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s; /* Slight delay */
  }

  /* === ACTIVE STATE (Fly In) === */
  .kinetic-item.active .icon-part {
      opacity: 1;
      transform: translateX(0) skewX(0deg);
      filter: blur(0);
  }

  .kinetic-item.active .text-part {
      opacity: 1;
      transform: translateX(0);
      filter: blur(0);
  }

  /* === EXIT STATE (Fly Out) === */
  /* We define a specific class for leaving to make it smooth */
  .kinetic-item.exit .icon-part {
      transform: translateY(-50px);
      opacity: 0;
      transition: all 0.4s ease-in;
  }
  .kinetic-item.exit .text-part {
      transform: translateY(50px);
      opacity: 0;
      transition: all 0.4s ease-in;
  }

  /* === TYPOGRAPHY === */
  .k-title {
      font-size: 2.2rem;
      font-weight: 900;
      text-transform: uppercase;
      line-height: 0.9;
      margin: 0;
      letter-spacing: -1px;
      color: white; /* Clean White */
      font-family: 'Poppins', sans-serif;
  }

  .k-desc {
      font-size: 1rem;
      font-weight: 300;
      color: #ccc;
      margin-top: 5px;
      letter-spacing: 1px;
      font-family: 'Poppins', sans-serif;
  }

  /* === COLOR ACCENTS (Applied to Icon Only) === */
  .item-mentality .icon-part { color: var(--c-1); }
  .item-intellect .icon-part { color: var(--c-2); }
  .item-academic .icon-part  { color: var(--c-3); }

  /* RESPONSIVE */
  @media (max-width: 768px) {
      .kinetic-item { flex-direction: column; text-align: center; }
      .icon-part { margin-right: 0; margin-bottom: 10px; font-size: 2.5rem; }
      .k-title { font-size: 1.5rem; }
      .k-desc { font-size: 0.8rem; }
      .dynamic-info-grid .small_grid.style1.image .poi {
          margin-bottom: 0px !important;
      }
      .owl-nav button.owl-prev {
        left: 0px;
      }
      .owl-nav button.owl-next {
        right: 0px;
      }
  }


  /* Previous v12 styles removed */
  
  /* Section Styling */
.map-section {
    position: relative;
    background-color: #f8f8f0; 
  }
  
  /* Top Border Styling */
  .top-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px; 
    background-color: #2c3b8f; 
  }
  
  /* Map Container Styling */
  .map-container{
    width: 100%;
    height: 450px; 
    overflow: hidden;
  }

  
  /* Footer Styling */

/* Footer v7 - Stable High-Concept */
footer {
    background: #0b1c33; /* Deep Midnight Navy */
    color: #fff;
    padding: 60px 0 40px; /* Standard Padding, No Negative Margins */
    font-size: 14px;
    position: relative;
    border-top: none; 
    overflow: hidden;
    margin-top: 0; /* Reset margin */
}

/* Watermark - Maintained */
footer::after {
    content: '\f19d'; /* FontAwesome Grad Cap */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    bottom: -50px;
    right: -50px;
    font-size: 400px;
    color: white;
    opacity: 0.03;
    transform: rotate(-15deg);
    pointer-events: none;
    z-index: 0;
}

/* The "Integrated" Newsletter Bar (Solved Layout Issue) */
.footer-floating-bar {
    background: #fff;
    width: 100%; /* Full Width in Container */
    max-width: 100%; /* Reset */
    margin: 0 0 50px 0; /* No negative margins. Just standard spacing */
    border-radius: 10px;
    padding: 30px 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Softer shadow */
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.floating-text h3 {
    color: #0b1c33;
    font-weight: 800;
    margin-bottom: 5px;
    font-family: effra, sans-serif;
    font-size: 1.8rem;
}
.floating-text p {
    color: #666;
    margin: 0;
    font-size: 1rem;
}

/* Modern Input inside Floating Bar */
.floating-input-group {
    flex-grow: 1;
    max-width: 450px;
    position: relative;
    display: flex;
}
.floating-input-group input {
    width: 100%;
    padding: 15px 25px;
    border-radius: 50px;
    border: 2px solid #eee;
    background: #f9f9f9;
    outline: none;
    transition: all 0.3s;
    color: #333;
}
.floating-input-group input:focus {
    border-color: #0b1c33;
    background: #fff;
}
.floating-input-group button {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    background: #ffc107;
    color: #0b1c33;
    border: none;
    border-radius: 50px;
    padding: 0 30px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s;
}
.floating-input-group button:hover {
    transform: scale(1.05);
}

/* Main Footer Content */
.footer-content-grid {
    position: relative;
    z-index: 2;
    padding-top: 20px;
}

/* Typography & Links */
footer h5 {
    color: #ffc107;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
    font-size: 0.9rem;
    opacity: 0.9;
}

footer ul li { margin-bottom: 12px; }
footer ul li a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: all 0.3s;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}
footer ul li a::before {
    content: '';
    width: 0;
    height: 1px;
    background: #ffc107;
    margin-right: 0;
    transition: all 0.3s;
}
footer ul li a:hover {
    color: #fff;
    padding-left: 10px;
}
footer ul li a:hover::before {
    width: 10px;
    margin-right: 10px;
}

/* Contact Items */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    color: rgba(255,255,255,0.7);
    font-weight: 300;
}
.footer-contact-item i {
    color: #ffc107;
    font-size: 1.1rem;
    margin-right: 15px;
    margin-top: 3px;
}

/* Socials - Outlined Minimalist */
.social-links-minimal {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}
.social-links-minimal a {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.3s;
}
.social-links-minimal a:hover {
    border-color: #ffc107;
    color: #ffc107;
    transform: rotate(360deg);
}

/* Bottom Copy */
.footerLower {
    margin-top: 80px;
    border-top: 1px solid rgba(255,255,255,0.08); /* Extremely subtle line */
    padding-top: 30px;
    color: rgba(255,255,255,0.3);
    font-size: 0.85rem;
}
.footerLower a { color: rgba(255,255,255,0.4); }
.footerLower a:hover { color: #fff; }

@media (max-width: 768px) {
    .footer-floating-bar {
        width: 90%;
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }
    .floating-input-group { width: 100%; }
}

/* Logo in Footer */
.footer-logo {
    width: 200px;
}
.footer-desc {
    margin-bottom: 30px;
    line-height: 1.8;
}


/* Animation */
@keyframes scrollNews {
    0% {
        transform: translateX(100vw); /* Start from viewport edge, not element width (fixes delay) */
    }
    100% {
        transform: translateX(-100%);
    }
}

.news-ticker:hover {
    animation-play-state: paused; /* Allow user to read */
    cursor: default;
}

/* Responsive */

@media (max-width: 992px) {
    

/* Header */

.news-label {
  font-size: 1.4rem
}
.news-ticker span {
    padding: 0 40px;
    font-size: 1.25rem;
}
.dynamic-info-grid .large_grid.style1.content {
    margin-bottom: 0px;
}
.dynamic-info-grid .large_grid.style1.content .content_inner_section {
    padding: 90px 5% 169px 13%;
}
.dynamic-info-grid .small_grid.style1.image {
    padding: 0px;
}

/* Footer */
.footer-logo {
    width: 150px;
}

}

@media (max-width: 768px) {
    

/* Header */

.navbar-nav.line-h {
  line-height: 45px;
  width: 100%;
}

.section_title h2 {
    font-size: 45px;
}
.dynamic-info-grid .content_inner_section .title h2 {
    font-size: 45px;
}
.event-heading {
    font-size: 45px;
    width:100%;
}

.news-label {
  font-size: 16px;
}

.news-ticker span {
    padding: 0 40px;
    font-size: 16px;
}
.dynamic-info-grid .large_grid.style1.content {
    margin-bottom: 0px;
}
.dynamic-info-grid .small_grid.style1.image {
    padding: 0px;
}

.dynamic-school_facts .d-school-fact .percentage_text {
    font-size: 50px;
    margin-top: 0px;
    margin-bottom: 7px;
    line-height: 60px;
}

.dynamic-school_facts .d-school-fact .plus_sign:after {
    font-size: 50px;
}
.dynamic-school_facts .d-school-fact .icon img {
    height: 45px;
}
.d-school-fact:nth-child(1) {
  margin-bottom: 25px;
}
.d-school-fact:nth-child(2) {
  margin-bottom: 25px;
}



}

/* =========================================
   MOVED FROM INDEX.HTML (INLINE STYLES)
   ========================================= */

:root {
    /* PSYCHOLOGY COLOR PALETTE */
    /* Deep Navy = Trust, Wisdom, Stability */
    --bg-deep: #020b1c; 
    /* Luxury Gold = Prestige, High Value (The "Halo") */
    --accent-gold: #c5a059; 
    --accent-glow: rgba(197, 160, 89, 0.3);
    --text-white: #ffffff;
    --text-muted: #8d9bb3;
}

/* === MAIN FOOTER CONTAINER === */
.artistic-footer {
    position: relative;
    background-color: var(--bg-deep);
    color: var(--text-white);
    padding: 120px 0 50px;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', sans-serif;
    /* The Angled "Power Cut" */
    /* clip-path: polygon(0 60px, 100% 0, 100% 100%, 0% 100%); */
    margin-top: 100px;
}

/* === AMBIENT "BREATHING" BACKGROUND === */
/* Slower animation creates a calming (Trust) effect */
.art-blob {
    position: absolute;
    filter: blur(80px); /* Softer blur for comfort */
    z-index: 0;
    opacity: 0.25;
    animation: calmBreath 12s infinite alternate ease-in-out;
}

.blob-1 {
    top: -20%; left: -10%;
    width: 600px; height: 600px;
    background: #1a4f9c; /* Calming Blue */
    border-radius: 40% 60% 70% 30%;
}

.blob-2 {
    bottom: -20%; right: -10%;
    width: 700px; height: 700px;
    background: #4a148c; /* Creative Purple */
    border-radius: 60% 40% 30% 70%;
    animation-delay: -5s;
}

@keyframes calmBreath {
    0% { transform: scale(1) translate(0, 0); opacity: 0.2; }
    100% { transform: scale(1.1) translate(30px, 20px); opacity: 0.35; }
}

.footer-content {
    position: relative;
    z-index: 2;
}

/* === THE FOCUS TRAP (Tunnel Vision) === */
/* When user interacts with input, dim everything else */
.conversation-wrapper {
    margin-bottom: 90px;
    position: relative;
    display: flex;
    justify-content: start;
    flex-direction: column;
    transition: opacity 0.3s;
}

.footer-content:focus-within .row.g-5 {
    opacity: 0.3; /* Dim the links below when typing */
    filter: blur(2px);
    transition: all 0.5s ease;
}

.footer-content:focus-within .conversation-wrapper {
    opacity: 1;
    transform: scale(1.02); /* Subtle zoom on task */
}

.convo-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--accent-gold);
    margin-bottom: 15px;
    display: block;
    letter-spacing: 1px;
}

.mega-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.mega-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    font-size: 3.5rem; /* Massive, readable */
    color: white;
    padding: 15px 0;
    padding-left: 0; /* Strict Left Alignment */
    text-align: left; /* Strict Left Alignment */
    font-family: 'Outfit', sans-serif;
    outline: none;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mega-input::placeholder {
    color: rgba(255,255,255,0.1);
    font-family: 'Outfit', sans-serif;
}

/* Satisfaction Feedback: Glow on Focus */
.mega-input:focus {
    border-bottom-color: var(--accent-gold);
    box-shadow: 0 20px 40px -10px rgba(197, 160, 89, 0.1); /* Subtle floor glow */
}

.mega-submit {
    position: absolute;
    right: 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.2);
    color: var(--accent-gold);
    width: 90px;
    height: 90px;
    border-radius: 50%;
    font-size: 1.8rem;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy physics */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Magnetic Pull Effect */
.mega-submit:hover {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: var(--bg-deep);
    transform: scale(1.15) rotate(-45deg); /* Playful rotation */
    box-shadow: 0 0 30px var(--accent-glow);
}

/* === NAVIGATION TYPOGRAPHY === */
.footer-nav-col h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4); /* De-emphasize headers to let content shine */
    margin-bottom: 30px;
    font-weight: 700;
}

.art-link {
    display: block;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 1.1rem;
    margin-bottom: 18px;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 0;
}

/* Active Listening: Link glows and moves */
.art-link:hover {
    color: var(--text-white);
    padding-left: 15px; /* Slide indicating "Progress" */
    text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

/* The "Golden Marker" on hover */
.art-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: var(--accent-gold);
    transition: width 0.3s ease;
}

.art-link:hover::before {
    width: 10px;
}

/* === BRAND AUTHORITY === */
.brand-logo {
    font-family: 'Outfit', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -1px;
    background: linear-gradient(to right, #fff, #aaa);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.social-row {
    display: flex;
    gap: 15px;
    margin-top: 35px;
}

.social-dot {
    width: 45px; height: 45px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03); /* Glass button */
    border-radius: 50%;
    display: flex;
    align-items: center; justify-content: center;
    color: white;
    text-decoration: none;
    transition: 0.4s;
}

.social-dot:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
    background: transparent;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}

/* === VERTICAL WATERMARK (Subconscious Branding) === */
.vertical-text-box {
    position: absolute;
    left: 30px;
    top: 73%;
    transform: translateY(-50%);
    display: none; 
    border-left: 1px solid rgba(255,255,255,0.1); /* Subtle guide line */
    padding-left: 15px;
    height: 150px;
    display: flex;
    align-items: center;
}

.vertical-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 6px;
    color: var(--accent-gold);
    opacity: 0.6;
}

@media (min-width: 1200px) {
    .vertical-text-box { display: flex; }
    .container { padding-left: 60px; } 
}


@media (max-width: 768px) {
    .mega-input { font-size: 1.5rem; padding-right: 60px; } /* Prevent overlap with button */
    .mega-submit { width: 50px; height: 50px; font-size: 1rem; }
    .artistic-footer { clip-path: polygon(0 40px, 100% 0, 100% 100%, 0% 100%); padding-top: 60px; }
    .vertical-text-box { display: none; }
    .convo-label { font-size: 1.2rem; }

    .dynamic-info-grid .large_grid.style1.image:before {
        display: none;
    }
    .dynamic-info-grid .small_grid.style1.image .poi {
        margin-bottom: 0px !important;
    }     
    .dynamic-info-grid .grid4.small_grid.style1.image {
      padding: 0 0px 0 0;
  } 
           
}

/* Narrow Mobile Fix */
@media (max-width: 400px) {
    .mega-input { font-size: 1.1rem; } /* even smaller for iphone SE */
    .mega-submit { width: 40px; height: 40px; font-size: 0.9rem; }
    .brand-logo { font-size: 2rem; }
    
}

/* === KINETIC FOOTER THEME === */
:root {
    --c-1: #00d2ff; 
    --c-2: #ffbd00; 
    --c-3: #9d00ff;
}

.kinetic-section-footer {
  width: 100%;
  height: 150px;
  position: relative;
  /* Transparent to blend with Deep Navy Footer */
  background: transparent; 
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.kinetic-item {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.icon-part {
  font-size: 3.5rem;
  margin-right: 30px;
  opacity: 0;
  transform: translateX(-150px) skewX(20deg);
  filter: blur(20px);
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--accent-gold); /* Gold Icons for Prestige */
}

.text-part {
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateX(150px);
  filter: blur(20px);
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

/* Updated Text Colors */
.k-title {
  font-size: 2.2rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  margin: 0;
  letter-spacing: -1px;
  color: var(--text-white); /* White Title */
  font-family: 'Outfit', sans-serif; /* Modern Display */
}

.k-desc {
  font-size: 1rem;
  font-weight: 300;
  color: var(--text-muted); /* Muted Blue-Grey */
  margin-top: 5px;
  letter-spacing: 1px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Active State */
.kinetic-item.active .icon-part { opacity: 1; transform: translateX(0) skewX(0deg); filter: blur(0); }
.kinetic-item.active .text-part { opacity: 1; transform: translateX(0); filter: blur(0); }

/* Exit State */
.kinetic-item.exit .icon-part { transform: translateY(-50px); opacity: 0; transition: all 0.4s ease-in; }
.kinetic-item.exit .text-part { transform: translateY(50px); opacity: 0; transition: all 0.4s ease-in; }

@media (max-width: 768px) {
    .kinetic-item { flex-direction: column; text-align: center; }
    .icon-part { margin-right: 0; margin-bottom: 10px; font-size: 2.5rem; }
    .k-title { font-size: 1.5rem; }
    .k-desc { font-size: 0.8rem; }
}


/* === SLIDER MODERNIZATION (Psychological Design) === */

.carousel-item {
    height: 100vh;
    min-height: 600px;
}

.carousel-item img {
    height: 100vh;
    object-fit: cover;
    filter: brightness(0.65); /* Increased contrast for text legibility */
}

.carousel-caption {
    top: 62%;
    transform: translateY(-50%);
    bottom: auto;
    text-shadow: 0 4px 15px rgba(0,0,0,0.6);
    width: 100%;
    left: 0;
    right: 0;
    padding: 0 15%;
}

.slider-title {
    font-family: 'effra', sans-serif;
    font-weight: 300;
    font-size: 5rem;
    text-transform: capitalize;
    letter-spacing: -2px;
    margin-bottom: 20px;
    line-height: 1;
    color: white;
}

.slider-title .highlight {
    color: var(--accent-gold);
    font-weight: 800;
    position: relative;
    display: inline-block;
    text-shadow: 0 0 30px rgba(197, 160, 89, 0.4);
}

/* Subtle glow for the highlight */
.slider-title .highlight::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 30%;
    bottom: 5px;
    left: 0;
    background: var(--accent-gold);
    opacity: 0.2;
    z-index: -1;
    filter: blur(15px);
}

.slider-subtitle {
    font-family: 'effra', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: rgba(255,255,255,0.95);
    letter-spacing: 1px;
    margin-top: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    margin-bottom: 20px;
}




@media (max-width: 991px) {
    .slider-title { font-size: 3.5rem; letter-spacing: -1px; }
    .slider-subtitle { font-size: 1.2rem; }
    .carousel-caption { padding: 0 5%; }
}

@media (max-width: 768px) {
    .slider-title { font-size: 2.5rem; }
    .slider-subtitle { font-size: 1rem; }
    .carousel-item .btn.button { padding: 15px 30px; font-size: 0.9rem; }
}

/* Narrow Mobile (324px) Fixes */
@media (max-width: 480px) {
    .slider-title { font-size: 2rem; margin-bottom: 10px; }
    .slider-subtitle { font-size: 0.9rem; line-height: 1.4; margin-bottom: 20px; }
    .carousel-item .btn.button { padding: 12px 25px; font-size: 0.8rem; }
}


/* === EXACT REPLICA MENU (Reference Implementation) === */
.custom-offcanvas {
    background-color: #1e3a71 !important; /* Authentic Solid Navy */
    width: 100% !important; /* Fullscreen */
    height: 100vh !important;
    border: none;
    padding: 0;
    z-index: 99999 !important; /* Force on top of sticky navbars */
    position: fixed; /* Ensure it stays grounded */
    top: 0; left: 0;
    display: flex !important; /* Fix overlap issue */
    flex-direction: column !important; /* Ensure vertical block stacking */
}

/* Header Row (Close Button, Top Nav) */
.offcanvas-header {
    padding: 22px 30px; /* Align with main navbar */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,0.05); /* Subtle separator */
}

.close-btn-area {
    display: flex;
    align-items: center;
    gap: 10px; /* Separation between Line and Text */
    cursor: pointer;
    color: white;
    font-family: 'effra', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
    letter-spacing: 0px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.close-btn-area:hover {
    color: var(--accent-gold);
}

/* The "Minus" Line */
.close-line {
    width: 25px;      /* Long horizontal line */
    height: 2px;      /* Thin thickness */
    background: white;
    transition: all 0.3s ease;
}

.close-btn-area:hover .close-line {
    background: var(--accent-gold);
}

.top-nav-group {
    display: flex;
    align-items: center;
}

.top-nav-pills {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap; /* Ensure they wrap if screen is narrow */
}

.nav-pill-btn {
    background: #f8f9fa; /* Solid White/Grey as per reference */
    color: #1e3a71;
    padding: 5px 15px; /* Slightly larger pills */
    border-radius: 50px;
    font-family: 'effra', sans-serif;
    font-size: 1.2rem;
    font-weight: 300;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent; /* Prevent jump on hover */
}

.nav-pill-btn:hover {
    background: var(--accent-gold);
    color: white;
    transform: translateY(-2px);
}

.top-icon-row {
    display: flex;
    gap: 15px; /* Match Main Header Gap */
    margin-left: 20px;
    align-items: center;
}

/* Mimic Main Header Button Styles for Consistency */
.top-icon-row .btn.text-white {
    padding: 6px 12px;
    transition: all 0.3s ease;
    border: none;
    background: transparent;
}

.top-icon-row .btn.text-white:hover {
    color: var(--accent-gold) !important;
    transform: translateY(-2px);
}

/* Main Menu Grid */
.menu-grid {
    display: flex;
    flex-grow: 1; /* Fill remaining height naturally */
    overflow-y: auto; /* Allow scrolling */
    min-width: 1200px;
    margin: auto;
}

/* Left Column: Navigation */
.menu-col-left {
    width: 40%;
    padding: 30px 50px; /* Reduced padding */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Right Column: Image Card (Restored) */
.menu-col-right {
    width: 60%;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.curriculum-card {
    position: relative;
    width: 100%;
    max-width: 400px; /* Reduced Size */
    height: 500px;    /* Reduced Size */
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}

.curriculum-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-label {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: white;
    font-family: 'effra', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    z-index: 2;
}

.card-overlay {
    position: absolute;
    top:0; left:0; width:100%; height:100%;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
}

/* List Items */
.menu-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0; /* Further reduced from 15px */
    border-bottom: 1px solid rgba(255,255,255,0.15);
    text-decoration: none;
    transition: all 0.3s;
}

.menu-list-item:first-child {
    border-top: 0px
}

.menu-text {
    font-family: 'effra', sans-serif;
    font-size: 1.5rem; /* Reduced from 1.8rem */
    font-weight: 300; /* Light weight for elegance */
    color: white;
    letter-spacing: 0.5px;
}

.menu-arrow-circle {
    width: 30px; /* Reduced symbol size */
    height: 30px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e3a71;
    font-size: 0.9rem;
    transition: 0.3s;
}

.menu-list-item:hover .menu-arrow-circle {
    background: var(--accent-gold);
    color: white;
    transform: rotate(-45deg);
}

@media (max-width: 991px) {
    .menu-grid { flex-direction: column; overflow-y: auto; min-width: 100%; overflow-x: hidden; }
    .menu-col-left { width: 100%; padding: 30px 20px; order: 1; }
    .menu-col-right { width: 100%; padding: 0; order: 2; height: 250px; display: flex !important; }
    .curriculum-card { 
        height: 100%; 
        width: 100%; 
        max-width: 100%; /* Ensure it fits any screen */
        border-radius: 0; 
        box-shadow: none;
    }
    .news-label span {
        font-size: 0 !important; /* Hide original PHP text cleanly */
    }
    .news-label span:before {
        content: "\f0a1"; /* FontAwesome Bullhorn */
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 20px !important; /* Scale up icon */
        color: white;
    }
    .news-label {
        padding: 10px 20px 10px 15px !important;
        clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%) !important;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .offcanvas-header { 
        flex-direction: row; 
        padding: 15px 20px; /* Tighter padding for mobile */
        flex-wrap: wrap;
    }
    .close-btn-area { width: auto; justify-content: flex-start; flex: 1; }
    .top-nav-group { 
        justify-content: space-between; 
        display: flex; 
        align-items: center;
        padding-top: 15px;
    }
    .top-nav-pills { display: none; } 
    .top-icon-row { margin-left: 0; width: 100%; justify-content: space-evenly; } /* Distribute icons evenly on mobile */
}

/* Tablet Modal Layout Fixes (Between Mobile and Desktop) */
@media (min-width: 577px) and (max-width: 991px) {
    /* Enforce Horizontal layout and protect text from Close Button */
    .modal-body > .d-flex.align-items-center.mb-4 {
        padding-right: 50px; 
        align-items: center !important; 
        flex-direction: row !important; /* STRICTLY Horizontal on Tablet */
        text-align: left !important;
    }
    
    .modal-body > .d-flex.align-items-center.mb-4 h3.clr-blue,
    .modal-body > .d-flex.align-items-center.mb-4 h5.modal-title {
        font-size: 1.8rem;
        margin-bottom: 0 !important;
        margin-top: 0 !important;
        line-height: 1.3;
        background: transparent !important; /* No gray badge background on Tablet */
        padding: 0 !important;
    }
    
     .modal-body > .d-flex.align-items-center.mb-4 .icon-circle {
        min-width: 60px;
        height: 60px;
        margin-right: 20px !important;
        margin-bottom: 0 !important; /* No negative margin overlap on Tablet */
    }
}

@media (max-width: 576px) {
    /* Global Typography Scaling for Mobile */
    h1, .display-3 { font-size: 2.2rem !important; line-height: 1.2 !important; }
    h2, .display-5, .event-heading { font-size: 1.8rem !important; line-height: 1.3 !important; }
    h3, .section-title h2 { font-size: 1.5rem !important; }
    p, body, .content-body, .details, .detail-text { font-size: 1rem !important; line-height: 1.6 !important; }
    .section-details { font-size: 1rem !important; line-height: 1.6 !important; }

    /* School Facts Overlapping Fixes (A School Of Vision) */
    .dynamic-school_facts .d-school-fact .percentage_text {
        font-size: 45px !important;
        line-height: 45px !important;
        margin-left: 0 !important; /* Remove negative -57px margin breaking mobile */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dynamic-school_facts .d-school-fact .plus_sign:after {
        position: relative !important; /* Stop absolute overlapping */
        font-size: 35px !important;
        margin-left: 2px !important;
    }
    .dynamic-school_facts .d-school-fact .icon i {
        font-size: 45px !important; /* Scale down giant icons */
    }

    .menu-text { font-size: 1.4rem; }
    .menu-list-item { padding: 12px 0; }
    .menu-arrow-circle { width: 28px; height: 28px; font-size: 0.8rem; }
    .card-label { font-size: 1.4rem; bottom: 20px; left: 20px; }
    
    /* Navbar adjustments (Hide "MENU" text on mobile) */
    .navbar-toggler { 
        padding: 6px 10px;
        font-size: 0 !important; /* Hide the raw 'MENU' text */
    }

    .navbar-brand {
        margin-right: 0px !important;
    }


    #searchBtn {
        margin-left: 0px !important;
    }
    .navbar-toggler .navbar-toggler-icon {
        width: 30px;  /* Use px instead of em so it ignores font-size: 0 */
        height: 30px;
        margin-right: 0 !important; /* Remove the gap since text is gone */
    }
    
    .navbar-brand img { width: 90px !important; } /* Smaller logo */
    

    /* General Section Padding */
    .section-details { font-size: 0.95rem; }
    
    /* Global fixes for Modal Popups (fixing squished text on mobile) */
    .modal-dialog { margin: 15px; }
    .modal-content { border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;}
    .modal-body { padding: 30px 20px !important; }
    .modal-body p, .modal-body ul li { font-size: 0.95rem !important; line-height: 1.7 !important; color: #555 !important; }
    
    /* Grid Padding Fixes */
    .dynamic-info-grid .large_grid.style2.content { padding: 40px 20px 40px !important; margin-bottom: 30px; }
    .dynamic-info-grid .small_grid.style1.image { padding: 0 0 0 0px; margin-top: 15px; }
    .dynamic-info-grid .grid4.small_grid.style1.image { padding: 0; margin-top: 15px; }
    .dynamic-info-grid .large_grid.style1.content { padding: 40px 20px 40px; margin-bottom: 0px !important; }
    
    /* "Future Readiness" Card Fix (Grid 5) */
    .grid5 .content_inner_section { height: auto !important; padding: 0 !important; }
    .dynamic-info-grid .large_grid.style2.content .content_inner_section .button { float: none; display: inline-block; margin-top: 20px; }
    .dynamic-info-grid .large_grid.style2.content:before { display: none !important; } /* Hide breaking pseudo-element */
    .dynamic-info-grid .large_grid.style2.content .content_inner_section .title-method h2 { font-size: 35px !important; line-height: 1.3 !important; }

    /* "Come and visit us" Card Mobile Fix */
    .dynamic-info-grid .large_grid.style1.content .content_inner_section {
        padding: 40px 20px !important; /* Remove giant 13% desktop left padding */
        text-align: center; /* Center for better mobile layout */
    }
    .dynamic-info-grid .large_grid.style1.content:after {
        display: none !important; /* Hide the overlapping slanted blue bar on mobile */
    }
    .dynamic-info-grid .large_grid.style1.content .content_inner_section .title h2:after {
        margin: 15px auto 20px !important; /* Center the dash */
    }
    
    /* News Ticker Mobile Fixes */
    .latest-news { padding: 5px 0; }
    
    /* Convert "Announcements" text to pure CSS Icon */
    .news-label { 
        padding: 10px 20px 10px 15px !important; 
        clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%) !important; /* Tighter arrow base for icon */
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    
    .news-ticker span { 
        font-size: 1.1rem !important; /* Scale text down */
        padding: 22px 15px !important; /* Reduce gap */
    }
}

/* Ultra Small Mobile Fix (iPhone SE, Fold) */
@media (max-width: 380px) {
    h1, .display-3 { font-size: 1.8rem !important; }
    h2, .display-5 { font-size: 1.5rem !important; }
    .offcanvas-header { padding: 10px 15px; }
    .menu-col-left { padding: 20px 15px; }
    .menu-text { font-size: 1.2rem; }
    .close-btn-area { font-size: 0.8rem; }
    .close-line { width: 25px; }
}

/* Sidebar Navigation Styling */
.sidebar-box {
    background: #f8f9fa;
    border-radius: 4px;
}


.sidebar-links a {
    display: block;
    padding: 12px 9px !important;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    color: #54565a;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
    border-left: 4px solid transparent; 
}

.sidebar-links a:hover {
    background-color: #fff;
    color: var(--br-color, #2c3b8f);
    padding-left: 25px; /* Slide effect */
    border-left-color: #ddd;
}

.sidebar-links a.active {
    background-color: #fff;
    color: #2c3b8f;
    font-weight: 700;
    border-left-color: var(--accent-gold, #c5a47e);
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

.sidebar-links a:last-child {
    border-bottom: none;
}


/* Sidebar Carousel Styling */
.sidebar-carousel .owl-dots {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.sidebar-carousel .owl-dots .owl-dot span {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.sidebar-carousel .owl-dots .owl-dot.active span {
    background: var(--accent-gold, #c5a47e);
    width: 20px;
}


/* Refined Sidebar Active State for Better Contrast */
.sidebar-links a.active {
    background-color: #fff;
    color: #2c3b8f;
    font-weight: 700;
    border-left: 4px solid var(--accent-gold, #c5a47e);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* Increased shadow for lift */
    position: relative;
    z-index: 1;
}

.sidebar-links a {
    color: #666; /* Slightly softer default color */
}

/* Ensure sliding effect is smooth */
.sidebar-links a:hover {
    padding-left: 28px;
}


/* High Contrast Active State for Sidebar */
.sidebar-links a.active {
    background-color: #2c3b8f !important; /* Brand Blue */
    color: #ffffff !important;
    font-weight: 700;
    border-left: 4px solid var(--accent-gold, #c5a47e);
    box-shadow: 0 4px 15px rgba(44, 59, 143, 0.3); /* Blue shadow */
}

/* Hover state for non-active items */
.sidebar-links a:not(.active):hover {
    background-color: #f0f2f5;
    color: #2c3b8f;
    padding-left: 25px;
}


/* Corrected Sidebar Active State based on Screenshot */
.sidebar-links a.active {
    background-color: #e9ecef !important; /* Light Grey */
    color: #2c3b8f !important; /* Dark Blue Text */
    font-weight: 600;
    border-left: none; /* No gold border shown in screenshot, or maybe faint */
    box-shadow: none !important; /* Flat look */
}

/* Re-add border to active if needed, or keeping plain */
/* Screenshot showed plain light background */


/* Hero Bottom Strip Styling */
.about-hero {
    border-bottom: none; /* Reset if any */
    position: relative;
}

.about-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 12px; /* Strip height */
    background: linear-gradient(to right, 
        #2c3b8f 0%, 
        #2c3b8f 50%, 
        #82c8e6 50%, 
        #82c8e6 100%
    );
    z-index: 10;
}

/* Adjust overlay to not cover the strip */




/* Custom Grid Layout for Curriculum Page (Screenshot Match) */
.curriculum-card {
  background-color: #555555; /* Default Grey from screenshot */
  transition: all 0.3s ease;
  min-height: 300px;
  cursor: pointer;
  position: relative;
}

.curriculum-card:hover {
  background-color: var(--bg-deep); /* Hover to Theme Blue */
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

.plus-icon-box {
  width: 50px;
  height: 50px;
  border: 2px solid rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  transition: all 0.3s ease;
}

.curriculum-card:hover .plus-icon-box {
  background-color: #fff;
}

.curriculum-card:hover .plus-icon-box i {
  color: var(--bg-deep);
}

.plus-icon-box i {
  color: #fff;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

/* Modal Styling */
.modal-content {
  box-shadow: 0 15px 50px rgba(0,0,0,0.3);
}

.modal-header .btn-close {
  background-color: #f8f9fa;
  border-radius: 50%;
  padding: 0.8rem;
  opacity: 1;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  margin: -1rem -1rem 0 0;
}

.custom-list {
  list-style: none;
  padding-left: 0;
}

.custom-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.8rem;
  margin-top: 5px;
}

.custom-list li::before {
  content: "•";
  color: var(--accent-gold);
  font-size: 1.5em;
  position: absolute;
  left: 0;
  top: -0.2rem;
}


/* News Page Styling from Screenshot */
.news-card {
    border: none;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05); /* Soft large shadow */
    transition: transform 0.3s ease;
    height: 100%;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.news-card-img-top {
    height: 240px;
    width: 100%;
    overflow: hidden;
}

.news-card-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.news-card:hover .news-card-img {
    transform: scale(1.08);
}

.news-body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.news-title {
    font-family: 'effra', sans-serif;
    color: #1d2c4e; /* Dark Blue */
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.8rem;
}

.news-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.news-title a:hover {
    color: var(--accent-gold);
}

.news-date {
    font-size: 0.85rem;
    color: #888;
    margin-bottom: 1rem;
    font-weight: 500;
}

.news-excerpt {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    flex-grow: 1;
}

/* Pill Button Style */
.btn-news {
    background-color: #f3f5f9; /* Light grey base */
    color: #333;
    border-radius: 50px;
    padding: 0.5rem 0.5rem 0.5rem 1.5rem; /* Less padding right for icon */
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    width: 100%;
    max-width: 220px; /* Limit width */
    border: 1px solid transparent;
}

.btn-news .text {
    margin-right: 10px;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.btn-news .icon-circle {
    width: 36px;
    height: 36px;
    background-color: #1d2c4e; /* Dark Blue */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Hover State - Dynamic Blue Button */
.news-card:hover .btn-news, 
.btn-news:hover {
    background-color: #2c3b8f; /* Primary Blue */
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(44, 59, 143, 0.25);
}

.news-card:hover .btn-news .text,
.btn-news:hover .text {
    color: #ffffff;
}

.news-card:hover .btn-news .icon-circle,
.btn-news:hover .icon-circle {
    background-color: #ffffff;
    color: #2c3b8f;
    transform: rotate(-45deg);
}

/* Pagination - Keep as is but ensure spacing */
.pagination {
    margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .news-card-img-top {
        height: 200px;
    }
    .news-body {
        padding: 1.5rem;
    }
}
.pagination .page-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--bg-deep);
    border: none;
    background-color: #f8f9fa;
    margin: 0 5px;
    border-radius: 50% !important;
    transition: all 0.3s ease;
}

.pagination .page-link:hover {
    background-color: #e9ecef;
    color: var(--bg-deep);
}

.pagination .page-item.active .page-link {
    background-color: var(--bg-deep);
    color: var(--accent-gold);
    box-shadow: 0 4px 10px rgba(44, 59, 143, 0.3);
}

.pagination .page-item.disabled .page-link {
    color: #ccc;
    background-color: transparent;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .news-card-img {
        height: 200px;
    }
    
    .news-card {
        margin-bottom: 20px; /* Explicit margin for mobile stack */
    }
    
}
/* === KINETIC INLINE WRAPPER (Footer Fix) === */
.kinetic-inline-wrapper {
    position: relative;
    width: 100%;
    /* Reduced height to minimize overlap potential */
    height: 100px; 
    overflow: hidden;
    display: flex;
    align-items: center; 
    justify-content: flex-start; /* Align to Left */
    padding-left: 0;
    /* No padding-bottom needed if margin-bottom handles spacing */
}

/* Ensure items are properly layered */
.kinetic-inline-wrapper .kinetic-item {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Align to Left */
    top: 0; left: 0;
}

/* Fix Carousel Controls Z-Index */
.carousel-control-next, .carousel-control-prev {
    z-index: 20; /* Ensure it stays above captions (z-index 10) */
}


/* Slider Indicators */
.carousel-indicators {
    bottom: 30px;
    z-index: 10;
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid transparent;
    background-color: rgba(255, 255, 255, 0.5) !important;
    margin: 0 5px;
    transition: all 0.3s ease;
    padding: 0;
}

.carousel-indicators button.active {
    background-color: var(--accent-gold) !important;
    transform: scale(1.2);
    width: 30px;
    border-radius: 10px;
}

/* Footer Kinetic Animation Mobile Fixes */
@media (max-width: 768px) {
    
    .kinetic-inline-wrapper {
        display: none !important;
    }
    .conversation-wrapper {
        margin-bottom: 30px !important;
    }
    .kinetic-inline-wrapper .kinetic-item {
        justify-content: center !important; /* Center content vertically when flex-direction is column */
    }
    .mega-input-group {
        margin-top: 100px;
    }
}

/* Load More Button Customization */
.btn-load-more {
    font-family: 'effra', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 12px 30px;
    border-radius: 50px;
    border: 2px solid #2c3b8f;
    background: #2c3b8f;
    color: #fff !important;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(44, 59, 143, 0.2);
}

.btn-load-more:hover {
    background: transparent;
    color: #2c3b8f !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(44, 59, 143, 0.3);
}

.btn-load-more:active {
    transform: translateY(0);
}