:root {

    --black: #000;
    --white: #fff;

    --primary  : #0084cb;
    --secondary: #fceec4;
    --tertiary : #f5821f;
    --fourthclr: #0077c0;

    --brand-blue: #0B84C6;
    --brand-blue-dark: #0A4D78;
    --soft-blue: #EAF5FC;
    --accent-red: #D94A3A;
    --cream-bg: #FFF6D6;
    --text-dark: #1F2933;
    --text-muted: #5F6C7B;
    --royalblue: #1f4774;
}


/*CTA*/

.uk-button-primary{
    background: var(--secondary);
    color: var(--black);
}
.uk-button-primary:hover{
    background: var(--tertiary);
}



/*Background*/
.uk-background-muted {
    background-color: var(--accent-red);
    color: var(--black);
}

.uk-background-default{
    background-color: var(--cream-bg);
    color: var(--text-dark);
}

.uk-background-primary{
    background-color: var(--brand-blue);
    color: var(--white); 
}


/*Section*/

.uk-hr, hr {

    border-top: 1px solid  var(--tertiary);
}

.uk-section-default{
    background: var(--cream-bg);
}

.uk-section-muted{
    background: var(--royalblue);
}

.uk-section-tertiary{
    background: var(--soft-blue);    
}

.uk-section-tertiary .uk-heading-line>::after{
    border-bottom: calc(.2px + .05em) solid var(--brand-blue);
}

.uk-section-tertiary .uk-heading-line>::before{
    border-bottom: calc(.2px + .05em) solid var(--brand-blue);
}


/*Card*/
.uk-card-primary{
      background-color: var(--primary);
}
.uk-card-primary>:not([class*=uk-card-media]){
      color: var(--white);
}

/*Headings*/

.uk-section-default h2{
      color: var(--brand-blue-dark);
}

.uk-section-muted h2{
      color: var(--cream-bg);
}

.uk-section-default .uk-list li{
      color: var(--white);
}

.uk-section-default p{
    color: var(--brand-blue-dark);
}

.uk-section-default .uk-card-title{
    font-size: 1rem;
}

.uk-background-muted span{
    color: var(--cream-bg);
}

.topbar{
    padding: 10px;
}
.schoolname h1{
    color: var(--brand-blue-dark);
}

/*Table*/
#age-criteria .uk-table th{
    text-align: center;
    background: var(--tertiary);
    color: black;
    font-weight:bold;
}

.uk-table-striped tbody tr:nth-of-type(even), .uk-table-striped>tr:nth-of-type(even) {
    background: var(--cream-bg);
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
}

.uk-heading-bullet::before {

    border-left: calc(5px + .1em) solid var(--brand-blue-dark);
}

/*Header*/
.uk-navbar-container{
      display: flex;
      margin: 0 auto;
      max-width: 1200px;
}

.uk-navbar-nav li,.uk-navbar-nav li a{
      color: var(--white);
}

.uk-light .uk-navbar-nav li,.uk-light .uk-navbar-nav li a {
    color: var(--cream-bg);
}

.uk-link, a {
    color: var(--text-dark);
}

.uk-navbar-nav li a {
  position: relative;
  transition: color 0.25s ease;
}

.uk-light .uk-navbar-nav>li.uk-active>a{
    color: #00BCD4;
}

.uk-navbar-item{
      color: var(--white);
}

.uk-navbar-nav li a:not(.uk-navbar-dropdown-nav)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 15px;
  width: 100%;
  height: 2px;
  background-color: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.uk-navbar-dropdown-nav a::after {
  display: none !important;
}
.uk-navbar-nav li a:hover {
  color: var(--white);
}

.uk-navbar-nav li a:hover::after {
  transform: scaleX(1);
}

.uk-navbar-dropdown{
    padding: 10px 20px;
}

/*Menu*/

.uk-navbar-dropdown {
    background: var(--text-dark);
}

.uk-list-divider>:nth-child(n+2) {
    border-top: 1px solid var(--brand-blue-dark);
}


header.uk-sticky.uk-active.uk-sticky-below.uk-sticky-fixed {
    background:var(--text-dark);
    color: var(--white);
}

header{
     background : var(--text-dark);
     color: var(--white);
}

/*Hero Section*/
.hero-video,
.hero-video .uk-cover-container,
.hero-video video {
  width: 100%;
  height: 768px;
}

.hero-video video {
  object-fit: cover;
  pointer-events: none;
}

/* Overlay */
.hero-overlay {
  background: linear-gradient(180deg, rgba(27, 78, 68, 0.2082) 0%, rgba(27, 78, 68, 0.25) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Ensure video stays underneath */
.hero-video .uk-cover-container {
  z-index: 1;
}

/*Announcement Bar*/
.marquee {
      white-space: nowrap;
      overflow: hidden;
}

.marquee span {
      display: inline-block;
      padding-left: 100%;
      animation: marquee 30s linear infinite;
}

@keyframes marquee {
0%   { transform: translateX(0); }
100% { transform: translateX(-100%); }
}


/*About School Card*/
.uk-card {
  transition: transform .2s ease, box-shadow .2s ease;
}

.uk-card:hover {
  transform: translateY(-4px);
}

.aboutussection{
    max-width: 80%;
    margin: 0 auto;
}


/*Hero Slider*/
.hero-slideshow {
      min-height: 45vh;
}

/* Tablet */
@media (min-width: 640px) {
  .hero-slideshow {
    min-height: 45vh;
  }
}

/* Desktop */
@media (min-width: 960px) {
  .hero-slideshow {
    min-height: 40vh;
  }
}


/* Leadership Section */
.flip-card {
  perspective: 1000px;
  height: 100%;
}

/* Inner wrapper */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* Front & back faces */
.flip-card-front,
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Back face */
.flip-card-back {
  transform: rotateY(180deg);
}

/* Flip state */
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card {
  perspective: 1000px;
  min-height: 480px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}



/*Gallery*/
a.uk-position-center-left.uk-position-small.uk-icon.uk-slidenav-previous.uk-slidenav {
    background: var(--secondary);
    padding: 20px 25px;
    opacity: 0.7;
    left: -15px;
}

a.uk-position-center-right.uk-position-small.uk-icon.uk-slidenav-next.uk-slidenav {
    background: var(--secondary);
    padding: 20px 25px;
    opacity: 0.7;
    right: -15px;
}
a.uk-position-center-left.uk-position-small.uk-icon.uk-slidenav-previous.uk-slidenav svg
,a.uk-position-center-right.uk-position-small.uk-icon.uk-slidenav-next.uk-slidenav svg{
      color: var(--black);
}

.uk-dotnav>.uk-active>*{
      background-color: var(--royalblue);
}
.uk-dotnav>*>*{
      border: 1px solid var(--royalblue);
}

.uk-section-muted .uk-dotnav>.uk-active>* {
    background-color: var(--white);
}
.uk-section-muted .uk-dotnav>*>*{
      border: 1px solid var(--white);
}



/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
}


/*Back to Top*/
.back-to-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}


.uk-icon-button {
    background-color: var(--text-dark) !important;
    color: rgb(255 255 0 / 100%) !important;
}

.socialaccount .uk-icon-button {
    background-color: rgba(255, 255, 255, .1) !important;
    color: rgb(255 255 255 / 100%) !important;
}


@media (max-width: 639px) {
  .flip-card {
    min-height: auto; /* stack naturally on mobile */
  }
}

@media(max-width: 1280px){

    .uk-navbar-toggle {
        min-height: 50px;
    }

    span.uk-icon.uk-navbar-toggle-icon
    {
        color: #fff;
    }

    .uk-nav-parent-icon {
        margin-left: 0;
    }

    .uk-navbar-container .uk-container{
        padding-left: 10px;
        padding-right: 10px;
    }
    .uk-navbar-nav {
        gap: 25px;
    }
    .uk-navbar-left{
        justify-content: center;
    }
}

@media(max-width: 1199px){
    .uk-navbar-container .uk-container {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (max-width: 1080px) {
    .uk-navbar-nav {
        gap: 20px !important;
    }
}

@media (max-width: 1024px) {
    .uk-navbar-nav {
        gap: 10px !important;
    }

    .uk-navbar-right .uk-margin-large-left {
       margin-left: 20px !important;   
     }

     .schoolname h1{
        font-size: 1.2rem;
     }
}

@media(max-width: 980px){
    .schoolname{
        display: none;
    }
}

@media(max-width: 960px){

}

@media(max-width: 680px){
    .headerphonecall{
        flex-direction: column;
        align-items: start;
    }

    .aboutussection{
        max-width: 100%;
    }

    .topbar{
        padding: 2.5px;
    }

    .topheaderbar{
        flex-direction: column;
    }
}

@media(max-width: 480px){

    .uk-navbar-item img{
        height: 75px !important;
    }
    .uk-navbar-item .uk-text-bold{
        font-size: 18px;
    }

    .logosection{
        flex-direction: column;
    }

    .headerphonecall{
        align-items: start;
    }
}