:root{
   --blue:#0b2b66;
   --red:#d62828;
   --white:#fff;
   --muted:#6b7280;
   --container:1100px;
}
*{
   box-sizing:border-box
}
html,body{
   height:100%;
   margin:0;
   font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
   color:var(--blue);
   /* background-color: #f5f6f7; */
   overflow-x: hidden;

}
body {
   padding-top: 140px;   /* adjust based on your navbar height */
}

/************************************************************************************************************************************
                                                Reusable code
*************************************************************************************************************************************/
a{
   color:inherit;
   text-decoration:none;
}
section h3{
   background-image: linear-gradient(to right, var(--red), var(--blue));
   color: var(--white);
   text-align: center;
   padding:10px 50px;
   display:inline-block;
   border-radius: 10px;
}
.card{
   background:linear-gradient(180deg, rgba(11,43,102,0.03), rgba(214,40,40,0.01));
   border-radius:14px;
   padding:18px;
}

.muted{
   color:var(--muted);
   font-weight: 600;
}
.divider{
   height:2px;background:#eee;
   margin:18px 0;
   box-shadow:0px 2px 2px var(--blue);
}

/************************************************************************************************************************************
                                                   Header/Navbar Section Start
*************************************************************************************************************************************/
.wrap{
   max-width:var(--container);
   margin:0 auto;
   padding:24px;
}
header{
   position:fixed;
   top:0;
   left:0;
   width: 100%;
   z-index:9999;
   background:var(--white);
   border-bottom:1px solid var(--blue);
   box-shadow:0px 4px 10px var(--blue);
}

.topbar{
   display:flex;
   align-items:center;
   justify-content:space-between;
   padding:10px 0;
}
.brand{
   display:flex;
   align-items:center;
   gap:14px;
}
.brand img{
   height:120px;
   width:auto;
}
.brand h1{
   font-size:20px;
   margin:0;
   color:var(--blue);
   letter-spacing:0.6px;
}
nav{
   display:flex;
   align-items:center;
   gap:18px;
}
.nav-links{
   display:flex;
   gap:18px;
   align-items:center;
}
.nav-links a{
   padding:8px 10px;
   font-weight:600; 
   transition:.2s ease;
}
.nav-links a:hover{
   border:1px solid var(--muted);
    border-radius:999px; 
    color:var(--red);
}
.cta{
   background:var(--red);
   color:var(--white);
   padding:8px 14px;
   border-radius:10px;
   font-weight:700;
}
.hamburger{
   display:none;
   background:none;
   border:0;
   padding:8px;
   font-size: 1.6rem;
}
.mobile-drawer{
   position:fixed;
   inset:0;
   background:rgba(5,8,20,0.45);
   display:none;
   z-index:60;
}
.mobile-drawer .menu{
   position:absolute;
   right:0;
   top:0;
   height:100%;
   width:100%;
   background:var(--white);
   padding:20px;
   box-shadow:-8px 0 24px rgba(11,43,102,0.12);
}
.mobile-drawer .menu a{
   display:block;
   padding:12px 8px;
   border-radius:8px;
}
/***************************************************************************************************************************
                                       Hero Section Start
****************************************************************************************************************************/
.hero{
   display:grid;
   grid-template-columns:1fr 420px;
   gap:32px;
   align-items:center;
   padding:36px 0;
}

.hero-left{
   padding:8px;
}
.hero-wrap{
   border-radius:12px;
   overflow:hidden;
   display:flex;
}
.hero-image{
  flex:1;
  background-size:cover;
  background-position:center;
  min-height:420px;                 /* desktop/tablet default */
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  /* background-color: #dcf9ff;    */
  background-color: #98ebfe;   
  overflow: hidden;                 /* clip the image to the blob */
  box-shadow: 0 18px 40px rgba(11,43,102,0.06);
  -webkit-mask-image: none;         /* keep default masking; useful if you add SVG masks later */
  /* isolation: isolate;                */
  /* if you keep the inline style background-image it will be used automatically */
}
.cta-row{
   display:flex;
   gap:12px;
}
.hero-left h2{
   font-size:36px;
   margin:0 0 12px;
   color:var(--blue);
}
.hero-left p{
   color:var(--muted);
   margin:0 0 18px;
   font-size:16px;
}
.features{
   display:flex;
   gap:18px;
   margin-top:18px;
}
.feature{
   flex:1;
   background:var(--white);
   padding:16px;
   border-radius:10px;
   box-shadow:0 6px 18px rgba(11,43,102,0.04);
}
@media (max-width:900px){
   .hero{
      grid-template-columns:1fr;
      gap:20px;
   }
   .hero-image{
      min-height:320px;
  }
  .hero-left h2{
    font-size:28px;
    line-height:1.12;
  }
}
@media (max-width:480px){
   .hero-image{
      min-height:280px;
      /* border-radius: 18% 82% 82% 18% / 22% 22% 78% 78%; */
      /* border-radius: 18% 82% 82% 48% / 22% 22% 78% 78%;
      background-position: center 30%; */
  }
  .hero-left h2{
      font-size:20px;
  }
   .cta-row{ 
      flex-direction:column;
      width:100%;
      gap:10px;
  }
  .features{
    flex-direction:column;
  }
}

/************************************************************************************************************************************
                                                Extra Activities Section Start
*************************************************************************************************************************************/

.activities{
   display:grid;
   grid-template-columns:repeat(3,1fr);
   gap:18px;
   margin-top:18px;
}
.activity{
   background:var(--white);
   border-radius:12px;
   overflow:hidden;
   box-shadow:0 8px 26px rgba(11,43,102,0.06);
}
.activity img{
   width:100%;
   height:200px;
   object-fit:cover;
   display:block;
}
.activity .body{
   padding:12px;
}
.activity h4{
   margin:0 0 6px;
   color:var(--blue);
}
.activity p{
   margin:0;
   color:var(--muted);
   font-size:14px;
}


/*******************************************************************************************************************************
                                       Future Ready Campus Section Start 
********************************************************************************************************************************/

.future-wrap{
   background:linear-gradient(180deg, rgba(11,43,102,0.02), rgba(214,40,40,0.01));
   padding:18px;
   border-radius:12px;
}
.future-grid{
   display:grid;
   grid-template-columns:repeat(3,1fr);
   gap:12px;
   margin-top:14px;
}
.future-item{
   display:flex;
   align-items:flex-start;
   flex-direction:column;
   align-items:center;
   text-align:center;
   gap:15px;
   padding:12px;
   border-radius:10px;
   background:var(--white);
   box-shadow:0 8px 20px rgba(11,43,102,0.04);
}
.future-item h5{
   margin:0 0 6px;
   font-size:15px;
   color:var(--blue);
}
.future-item p{
   margin:0;
   color:var(--muted);
   font-size:13px;
}
.future-icon{
  width:72px;
  height:72px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  background: linear-gradient(135deg, rgba(11,43,102,0.06), rgba(214,40,40,0.03));
  box-shadow:
    0 8px 20px rgba(11,43,102,0.07),
    inset 0 2px 6px rgba(255,255,255,0.35);
  transition: transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}

/* the actual icon element that rotates */
.future-icon .icon{
  display:inline-block;
  font-size:60px;               /* emoji / glyph size */
  line-height:1;
  transform-origin: 50% 50%;
  will-change: transform;
  animation: frc-rotate 7s linear infinite;
  filter: drop-shadow(0 6px 18px rgba(11,43,102,0.08));
}

/* subtle floating + parallax tilt for the whole tile */
.future-item .future-icon {
  transform-origin: center;
  transition: transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s;
}

/* hover / focus — pause rotation and give pop */
.future-item:hover .future-icon,
.future-item:focus-within .future-icon{
  transform: translateY(-6px) scale(1.04);
  box-shadow:
    0 18px 40px rgba(11,43,102,0.12),
    inset 0 4px 10px rgba(255,255,255,0.45);
}
.future-item:hover .future-icon .icon,
.future-item:focus-within .future-icon .icon{
  animation-play-state: paused; /* pause rotation on hover so users can inspect */
  transform: rotate(0deg) scale(1.05);
}

/* keyboard accessibility: allow focus outline */
.future-item:focus-within{
  outline: 3px solid rgba(11,43,102,0.06);
  border-radius: 12px;
}

/* make rotation even slower on mobile for battery / motion comfort */
@media (max-width:900px){
   .future-grid{
      grid-template-columns:repeat(2,1fr);
   }
}
@media (max-width:480px){
   .future-grid{
      grid-template-columns:repeat(1,1fr);
   }
   .future-icon .icon{
      animation-duration: 8s;
      font-size:35px;
  }
   .future-icon{ 
      width:64px;
      height:64px;
      border-radius:12px 
   }
}
/* smooth, slow rotation keyframes */
@keyframes frc-rotate{
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

/************************************************************************************************************************************
                                             What Parent Says Section 
*************************************************************************************************************************************/

/* .slider{
   position:relative;
   overflow:hidden;
   border-radius:12px;
}
.slides{
   display:flex;
   transition:transform .45s ease;
}
.slide{
   min-width:100%;
   padding:24px;
   background:linear-gradient(180deg, rgba(11,43,102,0.03), rgba(0,0,0,0.01));
}
.slider-controls{
   display:flex;
   gap:8px;
   justify-content:center;
   margin-top:12px;
}
.dot{
   width:10px;
   height:10px;
   border-radius:50%;
   background:#d8d8d8;
}
.dot.active{
   background:var(--blue);
} */

/************************************************************************************************************************************
                                    Admission and Visit Section Start
*************************************************************************************************************************************/

.panel{
   display:grid;
   grid-template-columns:1fr 1fr;
   gap:18px;
   padding:20px;
   border-radius:12px;
   background:linear-gradient(180deg,#fff,#fbfbff);
}
label{
   display:block;
   font-size:13px;
   margin-bottom:6px;
   color:var(--blue);
}
input,textarea,select{
   width:100%;
   padding:10px;
   border-radius:8px;
   border:1px solid #e6e6ee;
   font-size:14px;
}
button.primary{
   background:var(--blue);
   color:var(--white);
   border:0;
   padding:10px 14px;
   border-radius:10px;
   font-weight:700;
}

/************************************************************************************************************************************
                                                   Footer Section Start
*************************************************************************************************************************************/

footer{
   padding:0px 0;
   color:var(--muted);
   font-size:14px;
   background: #eaf1ff;  
}
.footer-wrap{
   max-width:var(--container);
   margin:0 auto;
   padding:24px;
}
.grid-3{
   display:grid;
   grid-template-columns:repeat(3,1fr);
   gap:18px;
   margin:28px 0;
}
.footer-grid { 
   align-items: start; 
   gap: 22px; 
}
/* Brand column */
.footer-brand .brand img {
  height: 72px;
  width: auto;
  display: block;
}
.footer-brand .brand-text { 
   margin-top: 8px; 
}
.footer-title { 
   font-size: 18px; 
   color: var(--blue); 
   display:block; 
   margin-bottom:6px; 
}
.footer-tagline { 
   font-size:14px; 
   font-weight:700; 
   margin:0 0 6px; 
   color:var(--muted); 
}
.footer-sub { 
   font-size:13px; 
   margin:0; 
   color:var(--muted); 
}

/* Links column */
.footer-links h4, .footer-address h4 { 
   margin:0 0 10px; 
   color:var(--blue); 
   font-size:15px; 
}
.footer-nav { 
   list-style:none; padding:0; 
   margin:0; 
   display:flex; 
   flex-direction:column; 
   gap:8px; 
}
.footer-nav a { 
   color:var(--muted); 
   font-weight:600; 
   display:inline-block; 
   padding:6px 8px; 
   border-radius:8px; 
   transition:background .18s, color .18s, transform .12s; 
}
.footer-nav a:hover, .footer-nav a:focus { 
   color:var(--blue); 
   background: rgba(11,43,102,0.03); 
   transform:translateX(4px); text-decoration:none; 
}

/* Address column */
.footer-address .adr { 
   font-style:normal; 
   display:flex; 
   flex-direction:column; 
   gap:8px; 
}
.footer-address .muted a { 
   color:inherit; 
   text-decoration:none; 
   font-weight:600; 
}
.footer-address .muted a:hover { 
   text-decoration:underline; 
   color:var(--blue); 
}
.footer-nav a:focus { 
   outline:3px solid rgba(11,43,102,0.06); 
}

.footer-brand .brand img { 
   box-shadow: none; 
}
.footer-box{
   padding:25px 0px;
   border:2px solid var(--blue);
   background-color: var(--blue);
}

 /*smaller devices - stack footer */
 
@media (max-width:760px) {
    .grid-3 { 
      grid-template-columns:repeat 1fr; 
   }
  .footer-grid { 
   grid-template-columns: 1fr; gap:14px; 
}
  .brand img { 
    /*height:64px;  */
}
  footer { 
   padding:22px 0; 
}
}


@media (min-width:761px) and (max-width:1000px) {
  .grid-3 { 
      grid-template-columns:repeat(2,1fr); 
   }
  .footer-grid { 
      grid-template-columns:repeat(2,1fr); 
   }
  .footer-address { 
      order:3; 
   }
}


/**********************************************************************************************************************************
                                    Sticky social icons (left bottom) 
***********************************************************************************************************************************/

.social-stick{
    position:fixed; 
    left:12px; 
    bottom:12px; 
    z-index:40; 
    display:flex; 
    flex-direction:column; 
    gap:10px;
}
.sbtn{
    width:44px; 
    height:44px; 
    border-radius:12px; 
    display:grid; 
    place-items:center; 
    background:#0f2236; 
    background-image: linear-gradient(to right, var(--red), var(--blue));
    border:1px solid rgba(255,255,255,.12); 
    box-shadow:var(--shadow-soft);
}
.sbtn svg{
    width:22px; 
    height:22px; 
    fill:#fff;
}
.sbtn:hover{
    transform:translateY(-2px);
}

/**********************************************************************************************************************************
                                    Responsiveness Section 
***********************************************************************************************************************************/

@media (max-width:1000px){
   .hero{                                                /*Hero Section */
      grid-template-columns:1fr 320px;
   }
   .activities{                                          /*Extra Activity Section */
      grid-template-columns:repeat(2,1fr);
   }
}
@media (max-width:760px){
   body {
      padding-top: 90px;   /* adjust based on your navbar height */
      overflow-x: hidden;
   }
   .wrap{                                                /*Reusable Code */
      padding-top:16px;                       
   }
   .nav-links{                                           /*Header/Navbar Section */
      display:none;
   }
   .hamburger                                            /*Header/Navbar Section */
   {
      display:inline-flex;
   }
   .hero{                                                /*Hero Section */                             
      grid-template-columns:1fr;
      gap:18px;
   }
   .brand img{                                           /*Header/Navbar Section */
      height:80px;
   }
   .card{                                               /*Reusable Code */
      padding:14px;
   }
   .panel{                                              /*Admission and Visit Section */
      grid-template-columns:1fr;
   }
   .activities{                                         /*Extra Activity Section */                                     
      grid-template-columns:1fr;
   }
}