/* ================= RESET ================= */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Segoe UI', sans-serif;
}

/* ================= COLORS ================= */
:root{
--primary:#0b4fa3;   /* blue */
--accent:#5cb85c;    /* green */
--white:#ffffff;
--light:#f4f8fb;
--text:#333;
}

/* ================= BODY ================= */
body{
background:var(--white);
color:var(--text);
line-height:1.6;
padding-top:80px; 
margin: 0;
padding: 0;
overflow-x: hidden;
width: 100%;

}

/* ================= NAVBAR ================= */
.navbar{
position:fixed;
top:0;
left:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 40px;
z-index:1000;

background:rgba(255,255,255,0.85);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);

box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

/* LOGO */
.logo img{
height:90px;
object-fit:contain;
}

/* NAV LINKS */
.nav-links{
display:flex;
gap:25px;
position:relative;
align-items:center;
}

.nav-links a{
text-decoration:none;
color:var(--text);
font-weight:500;
padding:5px 0;
transition:0.3s;
}

/* HOVER */
.nav-links a:hover{
color:var(--accent);
}

/* ACTIVE */
.nav-links a.active{
color:var(--primary);
}

/* UNDERLINE */
.nav-underline{
position:absolute;
bottom:-5px;
height:3px;
width:0;
background:var(--accent);
border-radius:2px;
transition:all 0.3s ease;
}

/* ================= HERO ================= */
/* HERO */
.hero{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;

/* CHANGE THIS ↓ */
min-height:60vh;   /* reduce from 80–100vh */

/* ADD THIS */
padding-top:20px;
padding-bottom:30px;
}
.hero-box{
margin-top:0;
padding-top:0;
}
/* HERO BOX */
.hero-box{
max-width:750px;
margin:auto;
display:flex;
flex-direction:column;
align-items:center;
}


/* MOBILE FIX */
@media(max-width:768px){

.hero-logo{
min-height:55vh;
height:80px;   /* increase from 80–85 */

}

}
.hero-logo{
max-width:100vw;
}
.hero-logo{
margin-top:0;
margin-bottom:-3px;
}
.hero-logo{
animation:fadeZoom 0.6s ease;
}

@keyframes fadeZoom{
from{
opacity:0;
transform:scale(0.9);
}
to{
opacity:1;
transform:scale(1);
}
}

/* TITLE */
.hero-title{
font-size:26px;
color:var(--primary);
margin-bottom:12px;
line-height:1.4;
}

/* SUBTEXT */
.hero-sub{
font-size:16px;
color:#666;
margin-bottom:25px;  
}

/* BUTTON GROUP */
.hero-buttons{
display:flex;
gap:12px;            
justify-content:center;
flex-wrap:wrap;

}
.primary-btn{
background:white;
color:var(--primary);
border:2px solid var(--primary);
padding:12px 25px;
border-radius:6px;
cursor:pointer;
transition:0.3s;
}

.primary-btn:hover{
opacity:0.9;
background:var(--accent);
color:white;

}
.secondary-btn{
background:white;
color:var(--primary);
border:2px solid var(--primary);
padding:12px 25px;
border-radius:6px;
cursor:pointer;
transition:0.3s;
}

.secondary-btn:hover{
background:var(--accent);
color:white;
}

/* BUTTON SIZE IMPROVEMENT */
.primary-btn,
.secondary-btn{
padding:14px 28px;
font-size:15px;
border-radius:8px;
}
/* ================= SECTIONS ================= */
.section{
padding:30px 15px;
max-width: 100%;
text-align:center;
}

.section h2{
color:var(--primary);
margin-bottom:80px;
font-size: 22px;
}

/* TEXT */
.section-text{
max-width:700px;
margin:auto;
color:#555;
line-height:1.6;
}

/* ================= GRID ================= */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); /* smaller for mobile */
gap:15px;
width:100%;
max-width:100%;   /* REMOVE fixed width */
padding:0 10px;
}


.grid .card:hover{
background:var(--accent);
color:white;
}

/* ================= CARD ================= */
.card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
transition:0.3s;

border-top:4px solid var(--primary);
}

.card:hover{
transform:translateY(-5px);
background:var(--accent);
color:white;

}
.program-card{
width:100%;
padding:15px;
font-size:14px;
}

/* ================= CONTACT ================= */
.contact-section{
display:flex;
justify-content:center;
align-items:center;
min-height:80vh;
padding:20px;
}

.contact-box{
background:white;
padding:30px;
border-radius:10px;
width:100%;
max-width:400px;
box-shadow:0 4px 12px rgba(0,0,0,0.1);
text-align:center;
}

.contact-box h2{
color:var(--primary);
margin-bottom:10px;
}

.contact-box p{
margin-bottom:20px;
color:#555;
}

/* FORM */
.contact-box form{
display:flex;
flex-direction:column;
}

.contact-box input,
.contact-box select,
.contact-box textarea{
margin:10px 0;
padding:12px;
border-radius:6px;
border:1px solid #ccc;
font-size:14px;
}

.contact-box textarea{
resize:none;
height:80px;
}

/* ================= WHATSAPP ================= */
.whatsapp-float{
position:fixed;
bottom:20px;
right:20px;
background:#25D366;
padding:12px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

/* ================= ANIMATION ================= */
.fade-in{
opacity:0;
transform:translateY(20px);
transition:all 0.6s ease;
}

.fade-in.show{
opacity:1;
transform:translateY(0);
}

/* ================= MOBILE ================= */
@media(max-width:768px){

.navbar{
padding:10px 20px;
}

.logo img{
height:50px;
}

.hero-logo{
height:80px;
}

.hero{
height:70vh;
}

.hero h1{
font-size:24px;
}

}
.hero-logo{
animation:fadeUp 0.8s ease;
}

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

/* ABOUT (HOME PREVIEW) */
/* ABOUT SECTION FIX */
.about-home{
margin-top:60px;   /* 👈 THIS FIXES YOUR ISSUE */
padding:40px 20px;
text-align:center;
}

/* TEXT */
.about-text{
max-width:600px;
margin:0 auto;
line-height:1.6;
color:#555;
}
@media(max-width:768px){

.about-home{
margin-top:40px;
padding:30px 15px;
}

}

/* CTA SECTION */
.cta-section{
padding:80px 20px;
background:linear-gradient(135deg,#eaf4ff,#ffffff);
text-align:center;
}

/* BOX */
.cta-box{
max-width:700px;
margin:auto;
}

/* TITLE */
.cta-box h2{
color:var(--primary);
margin-bottom:10px;
font-size:28px;
}

/* TEXT */
.cta-box p{
color:#555;
margin-bottom:25px;
font-size:16px;
}

/* BUTTONS */
.cta-buttons{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}
/* FOOTER */
.footer{
background:#0b4fa3;
color:white;
padding:50px 20px 20px;
margin-top:40px;
}

/* CONTAINER */
.footer-container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:30px;
max-width:1000px;
margin:auto;
}

/* COLUMN */
.footer-col h3,
.footer-col h4{
margin-bottom:10px;
}

.footer-col p{
font-size:14px;
margin:5px 0;
}

/* SOCIAL */
.social-links{
display:flex;
flex-direction:column;
gap:8px;
}


.social-links a{
color:white;
text-decoration:none;
transition:0.3s;
}

.social-links a:hover{
color:#5cb85c; /* green */
}

/* SECTION */
.contact-map-section{
padding:70px 20px;
background:var(--light);
}

/* CONTAINER */
.contact-map-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
max-width:1100px;
margin:auto;
align-items:center;
}

/* LEFT SIDE */
.contact-info{
text-align:left;
}

.contact-info h2{
color:var(--primary);
margin-bottom:10px;
}

.contact-info p{
color:#555;
margin-bottom:10px;
}

/* DETAILS */
.contact-details p{
margin:8px 0;
font-size:15px;
}

/* MAP */
.map-container{
border-radius:12px;
overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,0.12);
}

.map-container iframe{
width:100%;
height:250px;
border:0;
display:block;
}

/* LINK */
.map-link{
display:inline-block;
margin-top:15px;
color:var(--primary);
font-weight:600;
text-decoration:none;
transition:0.3s;
}

.map-link:hover{
color:var(--accent);
}

/* MOBILE */
@media(max-width:768px){

.contact-map-container{
grid-template-columns:1fr;
}

.contact-info{
text-align:center;
}

}
/* FORM BOX */
.contact-box{
background:white;
padding:10px;
border-radius:12px;
max-width:450px;
margin:auto;
box-shadow:0 8px 25px rgba(0,0,0,0.08);
text-align:center;
}

/* TITLE */
.contact-box h2{
color:var(--primary);
margin-bottom:10px;
}

.contact-box p{
color:#666;
margin-bottom:20px;
font-size:14px;
}

/* FORM */
.contact-box form{
display:flex;
flex-direction:column;
}

/* INPUTS */
.contact-box input,
.contact-box select,
.contact-box textarea{
margin:8px 0;
padding:12px;
border-radius:8px;
border:1px solid #ddd;
font-size:14px;
transition:0.3s;
}

/* FOCUS EFFECT */
.contact-box input:focus,
.contact-box select:focus,
.contact-box textarea:focus{
border-color:var(--primary);
outline:none;
box-shadow:0 0 0 2px rgba(11,79,163,0.1);
}

/* TEXTAREA */
.contact-box textarea{
resize:none;
height:80px;
}

/* BUTTON */
.contact-box button{
margin-top:15px;
padding:14px;
font-size:15px;
border-radius:8px;
}
.college-img{
width:100%;
height:180px;              /* fixed height for all */
object-fit:contain;        /* IMPORTANT: no cropping */
background:#f4f8fb;        /* light background */
padding:10px;              /* spacing inside */
border-radius:8px;
margin-bottom:12px;
}

.college h3{
color:var(--primary);
margin:8px 0;
}

.college p{
color:#555;
font-size:14px;
margin-bottom:10px;
}

/* HIDE ALL BY DEFAULT */
.college{
display:none;
}
/* REMOVE DEFAULT LINK STYLE */
.card{
background:white;
padding:20px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
border-top:4px solid var(--primary);

display:block; /* FIXED */
text-align:center;

transition:0.3s;
}
/* REMOVE VISITED PURPLE COLOR */


/* HOVER EFFECT */
.card:hover{
color:var(--accent);
transform:translateY(-3px);
}
.card a{
display:block;
margin-top:10px;
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
max-width:1100px;
margin:auto;
}
a.card,
a.card:visited,
a.card:active{
text-decoration:none !important;
color:var(--primary) !important;
}
/* wrapper already exists: .college */
.college{
overflow:hidden; /* keeps zoom inside card */
}

/* IMAGE BASE */
.college-img{
width:100%;
height:180px;
object-fit:contain;
background:#f4f8fb;
padding:10px;
border-radius:8px;
margin-bottom:12px;

transition:transform 0.4s ease; /* smooth zoom */
}

/* HOVER ZOOM */
.college:hover .college-img{
transform:scale(1.08);
}
.college{
transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.college:hover{
transform:translateY(-6px);
box-shadow:0 12px 25px rgba(0,0,0,0.12);
}
.logo a{
display:flex;
align-items:center;
}

.logo img{
cursor:pointer;
transition:0.3s;
}

.logo img:hover{
transform:scale(1.05);
}

@media(max-width:768px){

.section{
padding:20px 10px;
}

.grid{
grid-template-columns:repeat(2,1fr); /* 2 cards per row */
}

}
@media(max-width:480px){
.grid{
grid-template-columns:1fr;
}
}