:root{
--heading:#0e1b2b;
--bg:red; /* deep navy */
--surface:#0f2236; /* slightly lighter */
--card:#112c45; /* card surface */
--brand:#3ad29f; /* mint green */
--brand-2:#66b2ff; /* sky */
--accent:#f7b267; /* warm accent */
--text:#e6f2ff; /* near white */
--muted:#9cb4cc; /* muted */
--ok:#2ecc71; /* success */
--warn:#f1c40f; /* warning */
--danger:#ff6b6b; /* error */
--radius:18px;
--radius-lg:26px;
--shadow:0 10px 30px rgba(0,0,0,.35);
--shadow-soft:0 6px 18px rgba(0,0,0,.25);
--maxw:1200px;
}

/* Reset/Defaults */
*,*::before,*::after{
    box-sizing:border-box
}
html,body{
    height:100%
}
body{
margin:0; 
font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
/* background:radial-gradient(1000px 600px at 110% -10%, #1a3456 0%, #0e1b2b 60%) fixed; */
/* background-color: rgb(239, 102, 102); */
background:radial-gradient(1000px 600px at 110% -10%, #1a3456 40%, red 60%) fixed;
color:var(--text);
line-height:1.6;
padding-top: 90px;   /* adjust to header height */
}

@media(min-width:450px){
    body{
        background:radial-gradient(1000px 600px at 110% -10%, #1a3456 80%, red 20%) fixed;
    }
}

img{
    max-width:100%; 
    display:block
}
a{
    color:var(--brand); 
    text-decoration:none
}
a:hover{
    opacity:.9
}
.container{
    max-width:var(--maxw); 
    margin-inline:auto; 
    padding: clamp(14px, 3vw, 24px)
}


/* Header/Nav */
header {
    position: fixed;        
    top: 0;
    left: 0;
    width: 100%;            
    z-index: 1000;          
    backdrop-filter: saturate(140%) blur(8px);
    background: linear-gradient(#0e1b2bdd,#0e1b2bcc);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav{
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:16px
}
.brand{
    display:flex; 
    align-items:center; 
    gap:12px
}
.logo{
    width:44px; 
    height:44px; 
    border-radius:12px; 
    display:grid; 
    place-items:center;
    /* background:conic-gradient(from 210deg at 50% 50%, var(--brand), var(--brand-2)); */
    background: var(--bg);
    box-shadow:var(--shadow-soft);
}
.brand h1{
    font-size:clamp(18px, 2.2vw, 26px); 
    margin:0; 
    letter-spacing:.3px
}
.tagline{
    font-size:12px; 
    color:var(--muted); 
    margin-top:-2px
}


.navlinks{
    display:flex; 
    gap:10px; 
    align-items:center
}
.navlinks a{
    padding:10px 14px; 
    border-radius:999px; 
    color:var(--text);
    border:1px solid transparent; 
    transition:.2s ease;
}
.navlinks a:hover{
    border-color:rgba(255,255,255,.12); 
    color:var(--bg);
}


/* Hamburger */
.ham{
    display:none;
    place-items:center; 
    width:44px; height:44px; 
    border-radius:12px; 
    border:1px solid rgba(255,255,255,.12); 
    background:#0f2236; cursor:pointer
}
.bar{
    width:22px; 
    height:2px; 
    background:#fff; 
    border-radius:2px; 
    position:relative; 
    transition:.3s ease
}
.bar::before,.bar::after{
    content:""; 
    position:absolute; 
    left:0; 
    width:22px; 
    height:2px; 
    background:#fff; 
    border-radius:2px; 
    transition:.3s ease;
}
.bar::before{
    top:-7px;
}
.bar::after{
    top:7px;
}
.ham[aria-expanded="true"] .bar{background:transparent}
.ham[aria-expanded="true"] .bar::before{transform:translateY(7px) rotate(45deg)}
.ham[aria-expanded="true"] .bar::after{transform:translateY(-7px) rotate(-45deg)}


/* Mobile menu */
.mobile-menu{
    display:none;
}
.mobile-menu.open{
    display:block;
}
.mobile-menu a{
    display:block; 
    padding:14px 16px; 
    border-top:1px solid rgba(255,255,255,.06)
}



@media (max-width: 980px) {
  .navlinks {
    display: none;
  }
  .ham {
    display: inline-grid;
  }
  .mobile-menu {
    display: none;
    flex-direction: column;
    background: var(--surface);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
  }
  .mobile-menu.open {
    display: flex;
    max-height: 400px; 
  }
}


/* Hero */
.hero{
    position:relative; 
    overflow:hidden
}
.hero .wrap{
    display:grid; 
    gap:24px; 
    align-items:center;
}
.hero h2{
    font-size:clamp(28px, 4.2vw, 48px); 
    line-height:1.15; 
    margin:.2rem 0 .6rem;
}
.hero p{
    color:var(--text);  
    font-size:clamp(14px, 2vw, 18px);
}
.ctas{
    display:flex; 
    gap:12px; 
    flex-wrap:wrap;
}
.btn{
    display:inline-flex; 
    align-items:center; 
    gap:10px; 
    padding:12px 18px; 
    border-radius:14px; 
    border:1px solid rgba(255,255,255,.12); 
    cursor:pointer;
}
.btn.primary{
    background:linear-gradient(135deg, var(--brand), var(--brand-2)); 
    color:#06131f; 
    font-weight:700;
}
.btn.ghost{
    background:#0f2236;
}


.illustration{
    position:relative; 
    isolation:isolate;
}
.rightside{
    border-radius: 30% 70% 70% 30% / 30% 70% 70% 70% ; 
    /* background-color: #dcf9ff; */
    background-color:var(--bg);
}

.glow{
position:absolute; 
inset:auto -20% -30% -20%; 
height:260px; 
filter:blur(60px);
background:radial-gradient(60% 60% at 50% 50%, #3ad29f33, transparent 60%), radial-gradient(40% 40% at 70% 30%, #66b2ff33, transparent 70%);
z-index:-1; 
pointer-events:none;
}

/* Sections */
section{
    scroll-margin-top:80px;
}
.section{
    padding: clamp(40px, 6vw, 90px) 0;
}

.section h3{
    color:var(--heading);
    font-size:clamp(22px, 2.6vw, 34px); 
    margin:0 0 10px;
}

.lede{
    color:var(--text);
    margin:0 0 24px;
}


.cards{
    display:grid; 
    gap:16px;
}
.card{
    background:linear-gradient(180deg, #112c45 0%, #0f2236 100%);
    border:1px solid rgba(255,255,255,.06); 
    border-radius:var(--radius);
    padding:18px; 
    box-shadow:var(--shadow-soft);
}
.card h4{
    margin:.2rem 0 .6rem;
}
.badge{
    display:inline-flex; 
    align-items:center; 
    gap:8px; 
    padding:6px 10px; 
    border-radius:999px; 
    border:1px solid rgba(255,255,255,.08); 
    background:#10253d; 
    color:#cfe6ff; 
    font-size:12px;
}


/* Why Choose Seven Earth Section */
.why p{
    color:var(--text);  
    font-size:clamp(14px, 2vw, 18px);
}
.Why-list li span{
    font-weight: 700;
}



/* Grids */
@media(min-width:768px){
    .hero .wrap{grid-template-columns:1.2fr 1fr}
    .cards{grid-template-columns:repeat(2, 1fr)}
}
@media(min-width:1024px){
    .cards{grid-template-columns:repeat(3, 1fr)}
}



/* Timeline / Steps */
.steps{
    display:grid; 
    gap:14px;
}
.step{
    display:grid; 
    grid-template-columns:auto 1fr; 
    gap:12px; 
    align-items:start;
}
.step .dot{
    width:26px; 
    height:26px; 
    border-radius:50%; 
    background:linear-gradient(135deg, var(--brand), var(--brand-2)); 
    display:grid; 
    place-items:center; 
    color:#052236; 
    font-weight:800;
}
.step .body{
    padding-bottom:6px; 
    border-left:2px dashed rgba(255,255,255,.14); 
    padding-left:14px; 
    margin-left:12px;
}


/* Table-ish for Classes */
.grid-min{
    display:grid; 
    gap:12px;
}
@media(min-width:900px){
    .grid-min{
        grid-template-columns:repeat(3, 1fr);
    }
}


.pill{
    display:inline-block; 
    padding:6px 10px; 
    border-radius:999px; 
    background:#0f2236; 
    border:1px solid rgba(255,255,255,.08); 
    color:#cfe6ff; 
    font-size:12px;
}



/* Contact / Form */
form{
    display:grid; 
    gap:12px;
}
input,select,textarea{
    width:100%; 
    padding:12px 14px; 
    border-radius:12px; 
    border:1px solid rgba(255,255,255,.14); 
    background:#0f2236; 
    color:var(--text);
}
textarea{
    min-height:120px;
}
.grid-2{
    display:grid; 
    gap:12px;
}
@media(min-width:700px){
    .grid-2{
        grid-template-columns:1fr 1fr;
    }
}


/* Footer */
footer{
    padding:34px 0; 
    background:#0a1522; 
    border-top:1px solid rgba(255,255,255,.08);
}
.footgrid{
    display:grid; 
    gap:16px;
}
@media(min-width:800px){
    .footgrid{
        grid-template-columns:2fr 1fr 1fr;
    }
}


/* Reveal animation */
.reveal{
    opacity:0; 
    transform:translateY(16px); 
    transition:opacity .6s ease, transform .6s ease;
}
.reveal.shown{
    opacity:1; 
    transform:none;
}




/* 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; 
    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);
}


/* Active nav link on scroll */
.navlinks a.active{
    background:#0f2236; 
    border-color:rgba(255,255,255,.18);
}


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

.campus-container{
    margin: auto;
}


.campus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem;
  padding-top:2rem;
}
.campus-card {
  background: #fff;
  padding: 2rem 1rem;
  border-radius: 15px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.campus-card img {
  width: 80px;
  height: 80px;
  transition: transform 0.3s ease;
  margin-right:10px;
}

.campus-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.campus-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.campus-card:hover img {
  transform: scale(1.1) rotate(5deg);
}