body {
  font-family: 'Instrument Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Mono', monospace !important;
}

body{
  overflow-x: hidden;
}
/* gallery styles */
/* ================= BRANCH ================= */

.branch{
position:absolute;
top:0;
left:0;
width:100%;
z-index:20;
pointer-events:none;
}

/* ================= PIN ================= */

.pin{
width:12px;
height:12px;
border-radius:50%;
background:radial-gradient(circle at 40% 35%,#fff7a8,#e6a400);
box-shadow:0 3px 6px rgba(0,0,0,.35);
}

/* ================= THREAD ================= */

.thread{
width:2px;
background:linear-gradient(to bottom,#a88c5b,#e2d4a7,#a88c5b);
}

/* ================= PHOTO WRAP ================= */

.photo-wrap{
position:absolute;
display:flex;
flex-direction:column;
align-items:center;
transform-origin:top center;
animation:sway 4s ease-in-out infinite;
}

@keyframes sway{
0%,100%{transform:rotate(var(--r))}
50%{transform:rotate(calc(var(--r) + 3deg))}
}

.photo-wrap:hover{
animation-play-state:paused;
transform:rotate(6deg);
}

/* ================= PHOTO CARD ================= */

.photo-card{
position:relative;
border-radius:14px;
overflow:hidden;
border:3px solid white;
box-shadow:0 10px 30px rgba(0,0,0,.2);
}

/* ================= SHINE ================= */

.shine{
position:absolute;
inset:0;

background:linear-gradient(
115deg,
transparent 0%,
transparent 40%,
rgba(255,255,255,.6) 50%,
transparent 60%,
transparent 100%
);

background-size:200% 100%;
background-position:200% 0;
transition:.6s;
}

.photo-wrap:hover .shine{
background-position:-40% 0;
}

/* ================= ICON ================= */

.icon-bg{
position:absolute;
bottom:-30px;
left:50%;
transform:translateX(-50%) scale(.6);
opacity:0;
transition:.4s;
z-index:-1;
}

.photo-wrap:hover .icon-bg{
opacity:1;
transform:translateX(-50%) scale(1);
}

.icon-bg svg{
width:60px;
height:60px;

filter:
drop-shadow(0 0 10px rgba(255,200,40,.9))
drop-shadow(0 0 25px rgba(255,150,20,.6))
drop-shadow(0 0 40px rgba(255,120,0,.4));
}

/* ================= FALLING LEAVES ================= */

.leaf{
position:absolute;
top:-40px;
width:18px;
height:18px;
background:#4CAF50;
border-radius:50% 0;
transform:rotate(45deg);
opacity:.8;
animation:fall linear infinite;
}

@keyframes fall{

0%{
transform:translateY(-50px) rotate(0deg);
opacity:1;
}

100%{
transform:translateY(700px) rotate(360deg);
opacity:0;
}

}


/* Facilities styles */

/* Mobile / Tablet equal heights */
@media (max-width:767px){
.fac9-track{align-items:stretch;}
.fac9-item{display:flex;}
.fac9-item>div{display:flex;flex-direction:column;flex:1;}
.fac9-item img{flex-shrink:0;}
.fac9-item .explore-btn{margin-top:auto;}
}

/* Text clamp */
.desc-text{
overflow:hidden;
max-height:4.5em;
transition:max-height .4s ease;
}

.desc-text.expanded{
max-height:600px;
}

/* Read more button */
.read-more-btn{
display:none;
background:none;
border:none;
color:#2C3691;
font-size:13px;
font-weight:600;
cursor:pointer;
margin-bottom:10px;
}

@media (max-width:1023px){
.read-more-btn{display:inline-block;}
}

@media (min-width:1023px){
.desc-text{max-height:none!important;}
.read-more-btn{display:none!important;}
}

/* Animation css */

.fade-up,
.fade-down,
.fade-left,
.fade-right,
.fade-in,
.animate-down,
.animate-up {
  opacity: 0;

  transition:
    opacity 2.1s cubic-bezier(0.22, 1, 0.36, 1),
    transform 2.1s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform, opacity;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}


/* Directions */

.fade-up    { transform: translateY(40px); }
.fade-down  { transform: translateY(-40px); }
.fade-left  { transform: translateX(-40px); }
.fade-right { transform: translateX(40px); }
.fade-in    { transform: scale(0.94); }


/* Visible state */

.show {
  opacity: 1;
  transform: translate3d(0,0,0) scale(1);
}


/* Keyframe cinematic versions */

.animate-down,
.animate-up {
  transition: none;
}


/* Top → Down */

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Bottom → Up */

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.show.animate-down {
  animation: slideDownFade 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.show.animate-up {
  animation: slideUpFade 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* TITLE LETTER ANIMATION */

.phil-title .char{
display:inline-block;
opacity:0;
transform:translateY(70%) rotateX(-90deg);
transform-origin:bottom center;

transition:
opacity 1.2s cubic-bezier(.22,1,.36,1),
transform 1.4s cubic-bezier(.22,1,.36,1);
}

.phil-title .space{
display:inline-block;
width:.3em;
}

.phil-title.in-view .char{
opacity:1;
transform:translateY(0) rotateX(0);
}



/* IMAGE */

.phil-img-wrap{
position:relative;
display:inline-block;

opacity:0;
transform:translateX(-70px) scale(.95);

transition:
opacity 1.8s cubic-bezier(.22,1,.36,1),
transform 1.8s cubic-bezier(.22,1,.36,1);
}

.phil-img-wrap.in-view{
opacity:1;
transform:translateX(0) scale(1);
}



/* FRAME */

.phil-img-wrap::before{
content:'';
position:absolute;
inset:0;

border-radius:1rem;

transform:translate(16px,16px);

opacity:0;

transition:
opacity 1.1s ease,
transform 1.2s cubic-bezier(.22,1,.36,1);
}

.phil-img-wrap.in-view::before{
opacity:1;
}

.phil-img-wrap:hover::before{
transform:translate(8px,8px);
}



/* IMAGE STYLE */

.phil-img-wrap img{
position:relative;
z-index:1;

border-radius:1rem;

transition:
transform 1.2s cubic-bezier(.22,1,.36,1),
filter .8s ease;

filter:saturate(.85);
}

.phil-img-wrap:hover img{
transform:scale(1.05);
filter:saturate(1);
}



/* HEADING */

.phil-heading{
opacity:0;
transform:translateY(40px);

transition:
opacity 1.2s cubic-bezier(.22,1,.36,1) .3s,
transform 1.2s cubic-bezier(.22,1,.36,1) .3s;
}

.phil-heading.in-view{
opacity:1;
transform:translateY(0);
}



/* HEADING UNDERLINE */

.phil-heading::after{
content:'';
display:block;

width:0;
height:3px;

background:linear-gradient(90deg,#2C3691,#6675e0);

margin-top:12px;

transition:
width 1.2s cubic-bezier(.22,1,.36,1) .8s;
}

.phil-heading.in-view::after{
width:70px;
}



/* LIST */

.phil-list li{
opacity:0;
transform:translateX(40px);

transition:
opacity .9s cubic-bezier(.22,1,.36,1),
transform .9s cubic-bezier(.22,1,.36,1),
background .25s ease;

border-radius:8px;
padding:6px 10px;
margin-left:-10px;
}

.phil-list li.in-view{
opacity:1;
transform:translateX(0);
}

.phil-list li:hover{
background:rgba(44,54,145,.06);
}



/* BUTTON */

.phil-btn{
opacity:0;
transform:translateY(30px);

transition:
opacity 1s cubic-bezier(.22,1,.36,1),
transform 1s cubic-bezier(.22,1,.36,1),
box-shadow .4s ease;

position:relative;
overflow:hidden;
}

.phil-btn.in-view{
opacity:1;
transform:translateY(0);
}

.phil-btn:hover{
transform:translateY(-4px);
box-shadow:0 14px 36px rgba(44,54,145,.35);
}






/* philosphy */
.phil-section{
  background: linear-gradient(135deg, #f8fafc, #eef2f7, #f9fafb);
}



.method-section{
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
}



/* .wave-bg{
    background-image: url("school-images/wave-2.jpg"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;

} */


/* vision and mission and philosophy */

  .vmp-dot-grid {
    background-image: radial-gradient(circle, rgba(26, 58, 31, 0.055) 1px, transparent 1px);
    background-size: 28px 28px;
  }

  .vmp-swiper {
    overflow: hidden !important;
  }

  .vmp-swiper .swiper-wrapper {
    align-items: stretch;
  }

  .vmp-swiper .swiper-slide {
    height: auto !important;
    display: flex;
  }

  .vmp-card {
    width: 100%;
    height: 100%;
  }

  .vmp-body {
    overflow: hidden;
    transition: all 0.35s ease;
  }

  .vmp-card.is-open .vmp-body {
    overflow-y: auto;
    padding-right: 6px;
  }

  .vmp-card.is-open .vmp-body::-webkit-scrollbar {
    width: 5px;
  }

  .vmp-card.is-open .vmp-body::-webkit-scrollbar-thumb {
    background: rgba(44, 54, 145, 0.45);
    border-radius: 999px;
  }

  .vmp-extra {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.45s cubic-bezier(.4,0,.2,1), opacity 0.35s ease;
  }

  .vmp-extra.open {
    max-height: 1000px;
    opacity: 1;
  }

  .vmp-toggle.open svg {
    transform: rotate(180deg);
  }

  .vmp-dots .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: rgba(44, 54, 145, 0.3);
    border-radius: 999px;
    opacity: 1;
    transition: all 0.35s ease;
    margin: 0 !important;
  }

  .vmp-dots .swiper-pagination-bullet-active {
    width: 22px;
    background: #3d5140;
  }

  .vmp-btn.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(22px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .vmp-card {
    animation: fadeUp 0.55s cubic-bezier(.22,.68,0,1.1) both;
  }

  .swiper-slide:nth-child(1) .vmp-card {
    animation-delay: 0.05s;
  }

  .swiper-slide:nth-child(2) .vmp-card {
    animation-delay: 0.15s;
  }

  .swiper-slide:nth-child(3) .vmp-card {
    animation-delay: 0.25s;
  }

  @media (max-width: 639px) {
    .vmp-card {
      height: 450px;
    }
  }

  @media (min-width: 640px) and (max-width: 1023px) {
    .vmp-card {
      height: 470px;
    }
  }

  @media (min-width: 1024px) {
    .vmp-card {
      height: 490px;
    }
  }