/* styles.css
   Modern glossy UI: glassmorphism + gradient + subtle animations
   Copy this file next to index.html
*/

:root{
 --card-bg: rgba(34, 197, 94, 0.06);
  --glass-border: rgba(34, 197, 94, 0.12);
  --accent1: #22c55e; /* emerald */
  --accent2: #4ade80; /* light green */
  --accent: #16a34a;  /* deep green */
  --muted: rgba(200, 255, 220, 0.7);
  --glass-blur: 10px;
  --container: 1180px;

  --radius: 14px;
  --glass-shadow: 0 6px 30px rgba(2,6,23,0.6);
  --gap: 22px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: dark;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,0.12), transparent 8%),
              radial-gradient(1000px 400px at 90% 90%, rgba(6,182,212,0.08), transparent 8%),
              var(--bg);
  color: #eef2ff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* Container */
.container{
  width: calc(100% - 48px);
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px 0;
}

/* NAV */
.nav-wrap{position:fixed;left:0;right:0;top:18px;z-index:60;backdrop-filter: blur(6px);}
.nav{
  display:flex;align-items:center;gap:16px;justify-content:space-between;
  padding:10px 18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04);box-shadow:var(--glass-shadow);
}
.logo{font-weight:700;font-size:20px;color:white;text-decoration:none;text-shadow: 0 0 5px cyan,0 0 16px cyan,0 0 25px cyan,0 0 34px cyan;}
.logo span{color:var(--accent2);margin-left:6px;font-weight:600}

/* nav links */
.nav-links{
  display:flex;gap:14px;list-style:none;margin:0;padding:0;align-items:center;
}
.nav-links a{
  color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:10px;font-weight:500;
}
.nav-links a:hover{color:white;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));}

.cta{
  background: linear-gradient(135deg,var(--accent1),var(--accent2));
  padding:9px 14px;border-radius:12px;color:white;text-decoration:none;font-weight:600;box-shadow:0 6px 18px rgba(6,182,212,0.08);
}
.cta:hover{background:teal;}

/* Mobile toggle */
.nav-toggle{display:none;background:none;border:0;padding:8px;border-radius:8px}
.nav-toggle span{display:block;height:2px;width:20px;background:var(--muted);margin:4px 0;border-radius:3px}

/* HERO */
.hero{
  padding-top:110px;padding-bottom:80px;position:relative;overflow:hidden;
}
.hero-bg-anim{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:0.65;
  background: radial-gradient(600px 350px at 0% 10%, rgba(124,58,237,0.14), transparent 10%),
              radial-gradient(400px 300px at 100% 80%, rgba(6,182,212,0.12), transparent 8%);
  transform: translateZ(0);
}

/* hero card */
.hero-inner{display:flex;justify-content:center}
.hero-card{
  display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding:30px;border-radius:18px;
  border:1px solid var(--glass-border);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));box-shadow:var(--glass-shadow);
}

/*custom css*/
.glossy-shine {
  font-size: 3rem; /* adjust size */
  font-weight: 800;
  background: linear-gradient(135deg, #00b7ff, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  margin: 40px 0;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
  overflow: hidden;
}

/* Shimmer effect */
.glossy-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0.0) 100%);
  transform: skewX(-25deg);
  animation: shine 2s infinite;
}

@keyframes shine {
  0% {
    left: -75%;
  }
  50% {
    left: 125%;
  }
  100% {
    left: 125%;
  }
}



/*custom codes end*/

.lead{color:rgba(255,255,255,0.85);margin-bottom:18px}
.hero-image img{width:100%;height:auto;border-radius:12px;display:block;object-fit:cover;filter:contrast(1.03) saturate(1.02)}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:12px;text-decoration:none;font-weight:600}
.btn-primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;box-shadow:0 8px 24px rgba(7,12,34,0.6)}
.btn-outline{border:1px solid rgba(255,255,255,0.08);color:var(--muted);background:transparent}

/* Section basics */
.section{padding:70px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005))}
.section-title{font-size:26px;margin:0 0 6px}
.muted{color:rgba(255,255,255,0.72)}

/* glass cards */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border-radius: var(--radius);
  border:1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  padding:20px;
}

/* About grid */
.section-grid{display:grid;grid-template-columns:1fr 340px;gap:24px;align-items:start}
.about-card p{color:var(--muted)}
.features{margin:14px 0 0;padding-left:18px;color:var(--muted)}
.stats{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.stat{background:linear-gradient(90deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));padding:16px;border-radius:12px;text-align:center}
.stat h3{margin:0;font-size:22px}

/* services cards */
.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:20px}
.service-card{padding:20px;min-height:160px;display:flex;flex-direction:column;gap:10px}
.service-card .icon{font-size:28px}

/* gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
.gallery-item{overflow:hidden;border-radius:12px;border:1px solid rgba(255,255,255,0.04);cursor:pointer}
.gallery-item img{display:block;width:100%;height:220px;object-fit:cover;transform:scale(1.02);transition:transform .6s ease}
.gallery-item:hover img{transform:scale(1.08)}

/* testimonials */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.testimonial{padding:18px}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 420px;gap:20px;align-items:start}
.contact-form input, .contact-form textarea{
  width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:inherit;margin-bottom:10px;
}
.form-row{display:flex;gap:12px}
.form-row input{flex:1}
.form-actions{display:flex;gap:12px;align-items:center;margin-top:6px}
.form-msg{margin-top:8px;color:var(--muted)}

/* footer */
.footer{padding:18px 0;background:transparent;border-top:1px solid rgba(255,255,255,0.02)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted)}

/* lightbox */
.lightbox{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(3,6,14,0.72);z-index:120;opacity:0;pointer-events:none;transition:opacity .25s ease}
.lightbox.show{opacity:1;pointer-events:auto}
.lightbox-img{max-width:92%;max-height:86%;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,0.6)}
.lightbox-close{position:fixed;top:28px;right:28px;background:transparent;border:0;color:white;font-size:20px}

/* responsive */
@media (max-width: 980px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .section-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .hero-card{grid-template-columns:1fr; padding:18px}
}
@media (max-width: 640px){
  
  .nav-links{display:none}
  .nav-toggle{display:inline-block}
  .btn{display:none}
  .cards-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:1fr}
  .testimonials-grid{grid-template-columns:1fr}
  .hero-inner{padding:6px}
  .hero-card .hero-content h1{font-size:30px;color:yellow;
  }
}

/* --- Additions for animations & hero --- */
.hero {
  position: relative;
  background-size: cover;
  background-position: center;
  color: white;
  min-height: 90vh;
  display: flex;
  align-items: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 6, 24, 0.6);
  backdrop-filter: blur(2px);
}
.hero-content {
  position: relative;
  z-index: 1;
  text-align: left;
  max-width: 600px;
}

/* --- Animation classes --- */
.animate {opacity: 0; transform: translateY(40px); transition: all 0.8s ease;}
.animate.fade-up.visible {opacity: 1; transform: translateY(0);}
.animate.fade-left.visible {opacity: 1; transform: translateX(0);}
.animate.fade-right.visible {opacity: 1; transform: translateX(0);}
.animate.fade-left {transform: translateX(-50px);}
.animate.fade-right {transform: translateX(50px);}
.animate.zoom-in {opacity: 0; transform: scale(0.9); transition: all 0.8s ease;}
.animate.zoom-in.visible {opacity: 1; transform: scale(1);}

/* Delay classes for staggered animations */
.delay1 {transition-delay: 0.2s;}
.delay2 {transition-delay: 0.4s;}
.delay3 {transition-delay: 0.6s;}
.delay4 {transition-delay: 0.8s;}
.delay5 {transition-delay: 1s;}


/* === HERO two-column layout === */
.hero-inner.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3rem;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-image img {
  width: 100%;
  border-radius: 1.5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  animation: float 5s ease-in-out infinite alternate;
}

@keyframes float {
  from { transform: translateY(0); }
  to { transform: translateY(-10px); }
}

/* === TEACHERS SECTION === */
.teachers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.teacher-card {
  text-align: center;
  padding: 1.5rem;
  border-radius: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.teacher-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 3px solid rgba(255,255,255,0.5);
}

.teacher-card h3 {
  margin-bottom: 0.3rem;
  font-weight: 700;
  color: #fff;
}

.teacher-card p {
  margin-bottom: 1rem;
  color: rgba(255,255,255,0.75);
}

.teacher-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}

.teacher-card .socials {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.teacher-card .socials a {
  color: #fff;
  font-size: 1.2rem;
  transition: color 0.3s;
}

.teacher-card .socials a:hover {
  color: var(--accent, #6cf);
}

/* FontAwesome Icons */

/* === CONTACT SECTION REDESIGN === */
.contact-section {
  background: linear-gradient(to bottom right, rgba(20,20,40,0.9), rgba(10,10,30,0.95));
  padding-top: 5rem;
  padding-bottom: 5rem;
  color: #fff;
}

.contact-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3rem;
  align-items: flex-start;
}

.contact-info, .contact-form {
  border-radius: 1.5rem;
  padding: 2rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-info:hover, .contact-form:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

/* INFO SIDE */
.contact-info h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.contact-info p {
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 1.5rem;
}

.contact-details {
  list-style: none;
  padding: 0;
  margin: 1rem 0 2rem 0;
}

.contact-details li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.9);
}

.contact-details i {
  color: var(--accent, #00b7ff);
}

/* SOCIALS */
.contact-info .socials {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.contact-info .socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: #fff;
  transition: all 0.3s;
}

.contact-info .socials a:hover {
  background: var(--accent, #00b7ff);
  color: #000;
  transform: translateY(-4px);
}

/* FORM SIDE */
.contact-form h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
  color: #fff;
}

.contact-form form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  border: none;
  outline: none;
  border-radius: 0.8rem;
  background: rgba(255,255,255,0.08);
  color: #fff;
  transition: background 0.3s, box-shadow 0.3s;
  
}


.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255,255,255,0.6);
}

.form-group input:focus,
.form-group textarea:focus {
  background: rgba(255,255,255,0.15);
  box-shadow: 0 0 0 2px var(--accent, #00b7ff);
}

.contact-form .btn-primary {
  align-self: flex-start;
  padding: 0.8rem 1.6rem;
  font-size: 1rem;
  border-radius: 0.8rem;
}

.form-msg {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: #00ffcc;
  font-weight: 500;
}


/*custom codes*/