html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:Segoe UI;
background:#f4f4f4;
}

/* ===== TOP BAR ===== */

.topbar{
background:linear-gradient(90deg,#cc2b5e,#753a88);
display:flex;
align-items:center;
justify-content:space-between;
padding:20px 40px;
color:white;
}

.clg-logo{
height:80px;
border-radius:50%;
}

.principal{
height:80px;
border-radius:50%;
border:3px solid white;
}

.title-box{
text-align:center;
flex:1;
}

.title-box h1{
margin:0;
font-size:26px;
    font-family: "Algerian";
animation:glow 2s infinite alternate;
}

.title-box h3{
margin:5px 0;
font-weight:normal;
}

.title-box span{
color:yellow;
font-weight:bold;
}



@keyframes glow{
from{text-shadow:0 0 5px white;}
to{text-shadow:0 0 20px yellow;}
}

/* ===== MENU ===== */

.menu{
background:#111;
text-align:center;
padding:10px;
position:sticky;
font-family: 'Times New Roman';
top: 0;
z-index:1000;
overflow:visible;
}

.menu a{
color:white;
margin:30px;
text-decoration:none;
font-size:20px;
position:relative;
padding:5px 15px;
transition:0.3s;
}

/* Hover Glow + Zoom */
.menu a:hover{
color:yellow;
transform:scale(1.1);
}

/* Animated underline */
.menu a::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:0%;
height:2px;
background:yellow;
transition:0.3s;
}

.menu a:hover::after{
width:100%;
}


.hero{
background:linear-gradient(to right,#003366,#0059b3);
color:white;
padding:15px 20px;   /* <<< MAIN FIX */
text-align:center;
}

/* ===== FLASH CARDS ===== */

.flash{
display:flex;
justify-content:center;
gap:20px;
padding:40px;
flex-wrap:wrap;
}

.flash-card{
background:white;
padding:25px;
width:200px;
border-radius:10px;
box-shadow:0 5px 15px rgba(0,0,0,0.2);
text-align:center;
transition:0.3s;
}

.flash-card:hover{
background:#003366;
color:white;
transform:scale(1.1);
}

/* ===== ABOUT ===== */

.about{
background:white;
padding:50px;
text-align:center;
margin:20px;
border-radius:10px;
}

/* ===== FACILITIES ===== */

.facilities{
padding:40px;
text-align:center;
background:white;
margin:20px;
border-radius:10px;
}

.facility{
display:inline-block;
background:#002147;
color:white;
padding:20px;
margin:10px;
border-radius:8px;
}



/* ===== CONTACT ===== */

.contact{
padding:50px;
text-align:center;
background:white;
margin:20px;
border-radius:10px;
}

.contact input,textarea{
width:60%;
padding:10px;
margin:10px;
border-radius:5px;
border:1px solid #ccc;
}

button{
background:#002147;
color:white;
padding:10px 30px;
border:none;
border-radius:5px;
}

/* ===== FOOTER ===== */

footer{
background:#002147;
color:white;
text-align:center;
padding:15px;
}

p,span{
    font-family: 'Times New Roman', Times, serif;
}

h1,h3{
    font-family: 'Cambria';
}

/* ===== COURSE SLIDER ===== */

.slider{
overflow:hidden;
width:100%;
}

.track{
display:flex;
width:max-content;
animation:scroll 20s linear infinite;
}

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

.course-card{
min-width:200px;
margin:20px;
}


.super-quote{
font-size:52px;
font-family: 'Times New Roman', Times, serif;
letter-spacing:3px;

/* Gradient text */
background:linear-gradient(90deg,#ffffff,#ffeb3b,#00e5ff,#ffffff);
background-size:300%;

/* Standard + vendor prefixes */
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;

/* Animation + style */
opacity:0;
transform:translateY(20px) scale(.95);
transition:.6s ease;
text-shadow:
0 0 10px rgba(255,255,255,.6),
0 0 25px rgba(0,229,255,.6),
0 0 40px rgba(255,235,59,.4);

/* Shimmer effect */
animation:shine 4s linear infinite;
}

.super-quote.show{
opacity:1;
transform:translateY(0) scale(.90);
}

/* Gradient movement */

@keyframes shine{
0%{background-position:0%;}
100%{background-position:300%;}
}


/* ===== FACULTY PAGE ===== */

.faculty-hero{
background:linear-gradient(120deg,#2193b0,#6dd5ed);
color:white;
text-align:center;
padding:10px 10px;
}

.faculty-wrap{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
padding:50px;
}

.faculty-card{
background:white;
width:220px;
border-radius:15px;
text-align:center;
padding:20px;
box-shadow:0 10px 25px rgba(0,0,0,.2);
transition:.4s;
}

.faculty-card img{
width:100%;
border-radius:12px;
height:220px;
object-fit:cover;
}

.faculty-card:hover{
transform:translateY(-15px) scale(1.05);
box-shadow:0 0 25px #6dd5ed;
}

.faculty-card span{
color:#555;
}

/* ===== FACULTY ADVANCED ===== */

.faculty-info{
opacity:0;
transform:translateY(10px);
transition:.3s;
}

.detail:hover .faculty-info{
opacity:1;
transform:translateY(0);
}

.simple{
padding:30px;
}

.simple h3{
margin:0;
}

.simple span{
color:#555;
}
/* ===== FACULTY ROW LAYOUT ===== */

.faculty-top{
display:flex;
justify-content:center;
gap:40px;
padding:40px;
}

.faculty-bottom{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
padding:30px;
}

.faculty-bottom2{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
padding:30px;
}


/* ===== CONTACT PAGE STYLING ===== */

.contact-hero{
background:linear-gradient(120deg,#6a11cb,#2575fc);
color:white;
text-align:center;
padding:80px 20px;
font-size:28px;
}

.contact-container{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:50px;
padding:50px;
}

.contact-info-box{
display:flex;
flex-direction:column;
gap:20px;
max-width:350px;
}

.info-card{
background:white;
padding:20px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
transition:.3s;
}

.info-card:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 15px 30px rgba(0,0,0,0.25);
}

.info-card h3{
margin:10px 0 5px;
}

.icon-phone::before{
content:"📞";
font-size:24px;
}
.icon-mail::before{
content:"✉️";
font-size:24px;
}
.icon-location::before{
content:"📍";
font-size:24px;
}

.contact-form-box{
max-width:450px;
}

.contact-form-box form input,
.contact-form-box form textarea{
width:100%;
padding:12px;
margin:10px 0;
border-radius:8px;
border:1px solid #ccc;
transition:.3s;
}

.contact-form-box form input:focus,
.contact-form-box form textarea:focus{
border:2px solid #2575fc;
outline:none;
}

.btn-submit{
background:linear-gradient(90deg,#2575fc,#6a11cb);
color:white;
padding:12px 30px;
border:none;
border-radius:25px;
font-size:18px;
cursor:pointer;
transition:.4s;
}

.btn-submit:hover{
transform:translateY(-6px) scale(1.05);
box-shadow:0 10px 20px rgba(0,0,0,0.3);
}

/* Customize map container */
.map-section{
padding:30px 0;
}

.map3d{
border-radius:20px;
overflow:hidden;
box-shadow:0 15px 30px rgba(0,0,0,0.25);
transform-style:preserve-3d;
transition:.5s;
}

.map3d:hover{
transform:scale(1.02) rotateX(5deg);
}

.event-title{
text-align:center;
margin-top: 5px;
font-size:28px;
color:#2575fc;
}

.events-gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
margin:0 auto 40px;     /* centers container */
justify-items:center;  /* centers images inside grid */
max-width:900px;       /* keeps gallery compact */
}


.events-gallery img{
width:80%;
border-radius:15px;
box-shadow:0 10px 25px rgba(0, 0, 0, 0.25);
transition:.3s;
}

.events-gallery img:hover{
transform:scale(1.05);
}


/* ===== VIDEO CAROUSEL ===== */

.video-slider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  margin:20px 0;
}

.video-viewport{
  width:960px;   /* 3 videos */
  overflow:hidden;
}

.video-track{
  display:flex;
  gap:20px;
  transition:transform .5s ease;
}

.video-track video{
  width:300px;
  height:180px;
  border-radius:15px;
  object-fit:cover;
  background:black;
  box-shadow:0 10px 25px rgba(0,0,0,.3);
}

.video-slider .arrow{
  font-size:45px;
  margin:0 15px;
}


.video-s video{
  width:650px;
  height:300px;
  border-radius:15px;
  align-items: center;
  object-fit: fill;
  background:black;
  box-shadow:0 10px 25px rgba(0,0,0,.3);
}
/* arrows */

.arrow{
  font-size:40px;
  color:#ff7043;
  cursor:pointer;
  user-select:none;
  background:none;
  border:none;
  transition:.3s;
}

.arrow:hover{
  color:#f4511e;
  transform:scale(1.2);
}


.events-slider{
overflow:hidden;
width:100%;
}

.events-track{
display:flex;
gap:30px;
width:max-content;
animation:eventScroll 25s linear infinite;
}

.events-track1{
display:flex;
gap:30px;
width:max-content;
animation:eventScrollR 25s linear infinite;
}

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

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

.events-track img{
width:250px;
height:200px;
object-fit:cover;
border-radius:15px;
box-shadow:0 10px 25px rgba(0,0,0,.25);
transition:.3s;
}

.events-track img:hover{
transform:scale(1.1);
}

/* Pause on hover (nice touch) */
.events-slider:hover .events-track{
animation-play-state:paused;
}

.events-track1 img{
width:250px;
height:200px;
object-fit:cover;
border-radius:15px;
box-shadow:0 10px 25px rgba(0,0,0,.25);
transition:.2s;
}

.events-track1 img:hover{
transform:scale(1.1);
}

/* Pause on hover (nice touch) */
.events-slider:hover .events-track1{
animation-play-state:none;
}



/* ===== FACILITIES PREMIUM ===== */

.facilities{
padding:10px 20px;
text-align:center;
}

.facility-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
padding:30px;
}

.facility-card{
background:rgba(255,255,255,0.85);
backdrop-filter:blur(10px);
padding:30px;
border-radius:20px;
box-shadow:0 15px 30px rgba(0,0,0,.2);
transition:.4s;
transform-style:preserve-3d;
transition:.5s;
position:relative;

}

.fac-icon{
font-size:40px;
margin-bottom:10px;
}

.facility-card:hover{
animation:rainbow 2s linear infinite;
}

@keyframes rainbow{
0%{box-shadow:0 0 15px rgb(0, 255, 200);}
25%{box-shadow:0 0 20px yellow;}
50%{box-shadow:0 0 25px rgb(0, 174, 255);}
75%{box-shadow:0 0 30px cyan;}
100%{box-shadow:0 0 35px magenta;}
}

.facility-card h3{
margin:10px 0;
}

/* ===== COURSES PAGE BEAUTIFY ===== */

.courses-hero{
background:linear-gradient(120deg,#141e30,#243b55);
color:white;
text-align:center;
padding:90px 20px;
}

.courses-hero h1{
font-size:48px;
letter-spacing:2px;
}

.course-page{
max-width:1000px;
margin:auto;
padding:40px 20px;
}

.course-detail{
background:white;
padding:35px;
margin:30px 0;
border-radius:20px;
box-shadow:0 15px 30px rgba(0,0,0,.2);
transition:.4s;
}

.course-detail:hover{
transform:translateY(-10px);
box-shadow:0 0 30px #2575fc;
}

.course-detail h2{
color:#2575fc;
margin-bottom:15px;
}

/* Stylish list */

.course-detail ul{
list-style:none;
padding:0;
}

.course-detail ul li{
padding:10px 0;
position:relative;
padding-left:30px;
font-weight:500;
}

.course-detail ul li::before{
content:"✔";
position:absolute;
left:0;
color:#2575fc;
}

/* BCA subjects */

.bca-subjects{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:25px;
padding:40px 0;
}

.subject-card{
background:linear-gradient(135deg,#667eea,#764ba2);
color:white;
padding:30px;
text-align:center;
border-radius:18px;
font-weight:bold;
font-size:18px;
transition:.4s;
box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.subject-card:hover{
transform:translateY(-12px) scale(1.05);
box-shadow:
0 0 15px #667eea,
0 0 25px magenta,
0 0 35px cyan;
}

/* Footer spacing */

footer{
margin-top:50px;
}

/* ===== EVENTS ADVANCED ===== */

.events-hero{
background:linear-gradient(120deg,#ff512f,#dd2476);
color:white;
text-align:center;
padding:10px 10px;
}

.events-cards{
display:flex;
justify-content:center;
gap:10px;
padding:50px;
flex-wrap:wrap;
}

.events-card{
  
display:flex;
justify-content:center;
gap:10px;
padding:0;
flex-wrap:wrap;
}

.event-card{
background:linear-gradient(135deg,#667eea,#764ba2);
color:white;
width:220px;
padding:30px;
border-radius:20px;
text-align:center;
cursor:pointer;
transition:.4s;
box-shadow:0 10px 25px rgba(0,0,0,.3);
}

.event-card:hover{
transform:translateY(-10px) scale(1.05);
box-shadow:0 0 25px magenta;
}

[id^="display"] > div{
  display:none;
}

[id^="display"] > .active{
  display:block;
}

/* Lightbox */

.lightbox{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.8);
display:none;
align-items:center;
justify-content:center;
z-index:2000;
}

.lightbox-content{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
padding:40px;
max-width:900px;
}

.lightbox-content img{
width:100%;
border-radius:15px;
box-shadow:0 10px 20px rgba(0,0,0,.5);
}

/* ===== ACHIEVEMENTS SECTION ===== */

.achievements{
background:linear-gradient(120deg,#000428,#004e92);
padding:20px 20px;
}

.achieve-title{
color:white;
text-align:center;
font-size:40px;
letter-spacing:3px;
font-family:'Algerian';
animation:moveTitle 3s linear infinite alternate;
}

@keyframes moveTitle{
from{transform:translateX(-20px);}
to{transform:translateX(20px);}
}

.achieve-slider{
overflow:hidden;
margin-top:20px;
}

.achieve-track{
display:flex;
gap:20px;
animation:slideAchieve 25s linear infinite;
}

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

.achieve-track img{
width:260px;
height:160px;
object-fit:cover;
border-radius:15px;
box-shadow:0 10px 25px rgba(0,0,0,.5);
transition:.4s;
}

.achieve-track img:hover{
transform:scale(1.1);
}

/* ================= MOBILE RESPONSIVE ================= */

@media(max-width:768px){

/* Top bar */
.topbar{
flex-direction:column;
gap:10px;
padding:10px;
}

.clg-logo,.principal{
height:60px;
}

.title-box h1{
font-size:18px;
text-align:center;
}

.title-box h3{
font-size:14px;
}

/* Menu */
.menu a{
margin:6px;
font-size:14px;
padding:4px 8px;
}

/* Hero + Quote */
.hero{
padding:20px 10px;
}

.super-quote{
font-size:24px;
letter-spacing:1px;
}

/* Flash cards */
.flash{
padding:15px;
}

.flash-card{
width:90%;
}

/* About + Facilities */
.about,.facilities{
padding:20px;
margin:10px;
}

.facility-card{
padding:20px;
}

/* Faculty */
.faculty-top,.faculty-bottom,.faculty-bottom2{
flex-direction:column;
padding:15px;
}

.faculty-card{
width:90%;
}

/* Courses */
.course-detail{
padding:20px;
}

.subject-card{
font-size:15px;
padding:18px;
}

/* Achievements */
.achieve-track img{
width:160px;
height:110px;
}

/* Events */
.events-cards{
padding:20px;
}

.event-card{
width:90%;
}

/* Contact */
.contact-container{
padding:20px;
}

.contact-form-box,.contact-info-box{
width:100%;
}

.contact input,textarea{
width:90%;
}

/* Footer */
footer{
font-size:13px;
}

}


/* ===== WELCOME POPUP ===== */

.welcome-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.6);
display:flex;
align-items:center;
justify-content:center;
z-index:5000;
backdrop-filter:blur(5px);
}

.welcome-card{
background:white;
padding:40px;
border-radius:20px;
text-align:center;
width:320px;
box-shadow:0 20px 40px rgba(0,0,0,.4);
animation:pop 0.6s ease;
}

@keyframes pop{
0%{transform:scale(.5);opacity:0;}
100%{transform:scale(1);opacity:1;}
}


/* ===== FOOTER SOCIAL ===== */

.footer-social{
margin-bottom:10px;
}

.insta-footer{
text-decoration:none;
color:white;
padding:8px 20px;
border-radius:25px;
background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
font-size:14px;
transition:.3s;
display:inline-block;
}

.insta-footer:hover{
transform:scale(1.1);
box-shadow:0 0 15px #dd2a7b;
}

.event-btn{
padding:10px 20px;
margin:5px;
border:none;
border-radius:25px;
background: #00e5ff;
background:linear-gradient(135deg,#667eea,#764ba2);
color:white;
cursor:pointer;
transition:.3s;
}

.event-btn:hover{
transform:scale(1.1);
box-shadow:0 0 15px magenta;
}

.event-section{
display:none;
}

.sticky-events{
position:sticky;
top:80px;      /* below navbar */
z-index:999;
padding:5px 0;
}

/* Image popup overlay */
.img-popup{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.8);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.img-popup img{
  max-width:70%;
  max-height:70%;
  border-radius:20px;
  box-shadow:0 0 30px rgba(255,255,255,0.4);
  animation:zoomIn .3s ease;
}

@keyframes zoomIn{
  from{transform:scale(.7);opacity:0;}
  to{transform:scale(1);opacity:1;}
}

/* Placements */


.placement-partners{
  background:#f0f3f4;
  text-align:center;
}

.section-title{
  color:#00e5ff;
  font-size:36px;
  margin-bottom:10px;
}

.company-grid{
  display:flex;
  justify-content:center;
  gap:40px;
  flex-wrap:wrap;
}

.company-card{
  background:#f1f2f7;
  padding:10px;
  width:220px;
  border-radius:20px;
  box-shadow:0 0 20px rgba(247, 191, 4, 0.3);
  transition:.4s;
}

.company-card img{
  width:100%;
  height:120px;
  object-fit:contain;
  margin-bottom:15px;
}

.company-card p{
  color:rgb(5, 3, 3);
  font-size:18px;
  font-weight:bold;
}

.company-card:hover{
  transform:translateY(-10px) scale(1.05);
  box-shadow:0 0 35px #00e5ff;
}


.placed-students{
  padding:40px 20px;
  background:#f4f4f4;
  text-align:center;
}

.year-title{
  font-size:26px;
} 

.nav-dropdown{
  position:relative;
  display:inline-block;
}

.nav-link{
  color:white;
  font-size:20px;
  padding:5px 15px;
  cursor:pointer;
}

/* dropdown */
.dropdown-menu{
  position:absolute;
  top:100%;          /* NO GAP */
  left:50%;
  transform:translateX(-50%);
  background:#111;
  border-radius:15px;
  padding:10px 0;
  min-width:140px;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition:.25s ease;
  z-index:5000;
}

/* keep dropdown OPEN */
.nav-dropdown:hover .dropdown-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.dropdown-menu a{
  display:block;
  padding:12px 20px;
  color:white;
  text-decoration:none;
  text-align:center;
}

.dropdown-menu a:hover{
  background:#222;
  color:yellow;
}


.student-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:100px;
  max-width:1000px;
  margin:auto;
}

.student-card{
background:white;
width:220px;
border-radius:15px;
text-align:center;
padding:20px;
box-shadow:0 10px 25px rgba(0,0,0,.2);
transition:.4s;
}

.student-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  border-radius:12px;
}

.student-card h4{
  margin:10px 0 5px;
}

.student-card span{
  color:#555;
}

.student-card:hover{
  transform:translateY(-8px);
  box-shadow:0 0 25px #6dd5ed;
}


.place-year{
  animation:fadeUp .4s ease;
}

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


.p-card{
  
display:flex;
justify-content:center;
gap:50px;
padding:0px;
flex-wrap:wrap;
}

.p-card{
background:linear-gradient(135deg,#1eced8,#d9df87);
color:rgb(29, 29, 29);
width:220px;
padding:30px;
border-radius:20px;
font-family: Algerian;
font-size: 30px;
font-style: bold;
text-align:center;
cursor:pointer;
transition:.4s;
box-shadow:0 10px 25px rgba(0,0,0,.3);
}

.p-card:hover{
transform:translateY(-10px) scale(1.05);
box-shadow:0 0 25px magenta;
}

.p-cards{
display:flex;
justify-content:center;
gap:40px;
padding:10px;
flex-wrap:wrap;
}

.student-img-box{
  position:relative;
}

.eye-btn{
  position:absolute;
  top:10px;
  right:10px;
  background:rgba(0,0,0,0.7);
  color:white;
  font-size:18px;
  padding:6px 8px;
  border-radius:50%;
  cursor:pointer;
  transition:.3s;
}

.eye-btn:hover{
  background:#00e5ff;
  transform:scale(1.2);
}

#offerPopup iframe{
  width:80%;
  height:80%;
  border:none;
  border-radius:15px;
  background:white;
}

.student-card{
  background:white;
  padding:20px;
  border-radius:15px;
  box-shadow:0 10px 25px rgb(120, 189, 235);
  transition:.3s;

  /* NEW */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
}

.view-offer{
  margin-top:15px;
  width:20%;
  text-align:center;
  color:rgb(13, 10, 10);
  border-radius:20px;
  cursor:pointer;
  font-size:30px;
  transition:.3s;
}

.view-offer:hover{
  transform:scale(1.05);
}


.pdf-popup{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.8);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.pdf-box{
  width:80%;
  height:80%;
  background:white;
  border-radius:15px;
  position:relative;
}

.pdf-box iframe{
  width:100%;
  height:100%;
  border:none;
}

.close-btn{
  position:absolute;
  top:-15px;
  right:-15px;
  background:red;
  color:white;
  padding:8px 12px;
  border-radius:50%;
  cursor:pointer;
}