/* ===== RESET & GLOBAL ===== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

:root{
  --dark:#b5f8f3;
  --card:#024950;
  --accent:#964734;
  --primary:#0FA4AF;
  --light:#FFFFFF;
}

body{
  font-family: Arial, Helvetica, sans-serif;
  background: var(--dark);
  color: var(--light);
}

h1, h2, h3, .logo{
  font-family: Georgia, serif;
}

img{
  max-width:100%;
  display:block;
}


/* ===== HEADER ===== */

.header-container{
display:flex;
justify-content:center;
padding-top:20px;
margin:20px auto 40px;
}

header{
  background:var(--card);
  width:90%;
  max-width:1200px;
  border-radius:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:24px 40px;
  box-shadow:0 8px 25px rgba(0,0,0,0.4);
  position:relative;
}

.logo{
  font-size:26px;
  font-weight:700;
  color:var(--primary);
}

.logo span{
  color:var(--light);
}

nav{
  display:flex;
  gap:35px;
}

nav a{
  text-decoration:none;
  color:var(--light);
  font-size:16px;
  position:relative;
}

nav a::after{
  content:"";
  position:absolute;
  width:0;
  height:2px;
  left:0;
  bottom:-6px;
  background:var(--primary);
  transition:0.3s;
}

nav a:hover::after{
  width:100%;
}

.menu{
  display:none;
  font-size:28px;
  cursor:pointer;
}


/* ===== HERO ===== */

.hero{
  height:85vh;
  width:90%;
  max-width:1200px;
  margin:40px auto;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  background:
  linear-gradient(rgba(0,49,53,0.8),rgba(0,49,53,0.9)),
  url("images/hero.jpg");

  background-size:cover;
  background-position:center;

  background-size:cover;
}

.hero-content h1{
  font-size:56px;
  margin-bottom:15px;
  color: #ffffff;

  text-shadow:
    0 0 5px #00eaff,
    0 0 10px #00eaff,
    0 0 20px #00cfff,
    0 0 40px #00cfff,
    0 0 80px #00bfff;
}

@keyframes electricGlow{
  0%{
    text-shadow:
      0 0 5px #00eaff,
      0 0 10px #00cfff;
  }
  50%{
    text-shadow:
      0 0 15px #00eaff,
      0 0 30px #00cfff,
      0 0 60px #00bfff;
  }
  100%{
    text-shadow:
      0 0 5px #00eaff,
      0 0 10px #00cfff;
  }
}

.hero-content h1{
  animation:electricGlow 2s infinite alternate;
}

.hero-content h2{
  color: #b5f8f3;
}

.hero-content p{
  font-size:22px;
  margin-bottom:35px;
}

.hero-btn{
  background:var(--primary);
  color:white;
  padding:15px 36px;
  border-radius:40px;
  text-decoration:none;
}

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


/* ===== STATS ===== */

.stats{
  width:90%;
  max-width:1100px;
  margin:60px auto;
}

.stats-container{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
  text-align:center;
}

.stat-box h2{
  font-size:40px;
  color:#964734;
}

.stat-box p{
  color:#012a2d;
}


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

.course-slider{
  width:90%;
  max-width:1100px;
  margin:80px auto;
  text-align:center;
}

.slider-container{
  position:relative;
  overflow:hidden;
}

/* TRACK */
.slider-track{
  display:flex;
  transition:0.5s ease-in-out;
}

/* SLIDE */
.slider-title{
  font-size:36px;
  font-weight:700;
  color:#06393f;  
  margin-bottom:25px;
  letter-spacing:1px;
}

.slide-text h3{
  font-size:26px;
  font-weight:700;
  margin-bottom:10px;
  color:#ffffff;
}

.slide-text p{
  font-size:17px;
  line-height:1.5;
  margin-bottom:10px;
}

.slide-text ul{
  padding-left:20px;
}

.slide{
  min-width:100%;
  background:linear-gradient(135deg,#005252,#027d88);
  padding:40px 50px;   /* reduced from 60px */
  border-radius:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#fff;
  gap:20px;   /* reduced gap */
}

.slide-text{
  width:65%;
  text-align:left;
}

/* ===== IMAGE ICON (UPDATED) ===== */
.slide-icon{
  width:35%;
  height:auto;
  display:flex;
  align-items:center;
  justify-content:center;
}

.slide-icon img{
  width:100%;
  max-width:260px;   /* control size */
  height:auto;
  object-fit:contain;
  transition:0.3s
}

.slide:hover .slide-icon img{
  transform:scale(1.1);
}

/* ===== ARROWS FIX ===== */
.prev,.next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#0FA4AF;
  color:#fff;
  border:none;
  width:45px;
  height:45px;
  border-radius:50%;
  cursor:pointer;
  z-index:10;              /* 🔥 important */
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.prev{ left:10px; }
.next{ right:10px; }

/* ===== DOTS FIX ===== */
.slider-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:20px;
}

.dot{
  width:10px;
  height:10px;
  background:#ccc;
  border-radius:50%;
  cursor:pointer;
}

.dot.active{
  background:#0FA4AF;
}

.join-btn{
  display:inline-block;
  margin-top:15px;
  padding:10px 20px;
  background:#0FA4AF;   /* bright teal */
  color:#ffffff;
  text-decoration:none;
  border-radius:25px;
  font-weight:600;
  transition:0.3s;
}

.join-btn:hover{
  background:#0c8a93;
}

/* ===== POPULAR COURSES ===== */

/* ===== POPULAR COURSES ===== */

.popular-courses{
  padding:90px 20px;
  background:linear-gradient(135deg,#E0FFFF,#8fefef) !important;
  text-align:center;
}

.courses-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}



.course-card{
  background:linear-gradient(135deg,#008d99,#68e3e6) !important;
  color:#fff !important;
  padding:30px;
  border-radius:15px;
  transition:0.3s;
}

.course-card h3,
.course-card p,
.duration{
  color:#ffffff !important;
}

.course-icon{
  background:#F0FFFF !important;
}

/* ===== WHY SECTION (BRAND COLORS) ===== */

.why-section{
  padding:90px 10%;
  background:#FFFFFF;   /* light brand bg */
}

/* VERTICAL LAYOUT */
.why-wrapper{
  display:block;
}

/* TEXT AREA */
.why-left{
  width:100%;
  text-align:center;
  margin-bottom:50px;
}

.why-left h2{
  font-size:38px;
  color:#003135;   /* dark brand */
  font-weight:700;
  margin-bottom:15px;
}

.why-tagline{
  font-size:18px;
  color:#0FA4AF;   /* primary */
  font-weight:600;
  margin-bottom:15px;
}

.why-left p{
  color:#003135;
  max-width:750px;
  margin:0 auto;
  line-height:1.6;
}

/* CARDS GRID */
.why-right{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:25px;
}

/* CARDS */
.why-item{
  display:flex;
  gap:15px;
  background:#E0F2F1;
  padding:20px;
  border-radius:14px;
  align-items:flex-start;
  transition:0.3s;
  border-left:5px solid #984705;  /* 🔥 brand accent */
}

/* HOVER */
.why-item:hover{
  transform:translateY(-6px);
  box-shadow:0 15px 30px rgba(0,0,0,0.15);
}

/* ICON */
.icon{
  font-size:26px;
  background:#abe6ea;
  color:#fff;
  padding:12px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* TEXT */
.why-item h4{
  margin:0;
  font-size:18px;
  color:#003135;
}

.why-item p{
  margin:5px 0 0;
  font-size:14px;
  color:#444;
}

/* ANIMATION BASE */
.why-item{
  opacity:0;
  transform:translateY(40px);
  transition:all 0.6s ease;
}

/* ACTIVE STATE */
.why-item.show{
  opacity:1;
  transform:translateY(0);
}


/* ===== TESTIMONIAL ===== */

.testimonial-section{
  padding:80px 10%;
  background:linear-gradient(135deg,#a8e5ea,#a8eef5,#86eefc);
  border-top:4px solid #0FA4AF;
}

.testimonial-top h2{
  font-size:42px;          /* bigger */
  font-weight:700;
  color:#003135;           /* dark brand color */
  text-align:center;       /* center */
  margin-bottom:10px;
}

/* Optional: center button also */
.testimonial-top{
  text-align:center;
  margin-bottom:40px;
}

.testimonial-top h2{
  letter-spacing:1px;
  text-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.testimonial-btn{
  display:inline-block;
  margin-top:10px;
  padding:10px 20px;
  background:#0FA4AF;
  color:#fff;
  border-radius:25px;
  text-decoration:none;
  font-weight:600;
}

/* CARD */
.testimonial-card{
  display:flex;
  align-items:center;
  gap:30px;
  background:#ffffff;
  padding:25px;
  border-radius:15px;
  margin-bottom:25px;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.testimonial-card{
  background:#ffffff;
  border-left:5px solid #0FA4AF;
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

.student-info span{
  display:block;   /* 🔥 makes each span go to next line */
  font-size:14px;
  color:#0FA4AF;
  margin-top:2px;
}

/* IMAGE */
.student-photo img{
  width:100px;
  height:100px;
  border-radius:50%;
  object-fit:cover;
}

/* TEXT */
.testimonial-text{
  flex:1;
  position:relative;
}

.testimonial-text p{
  font-size:16px;
  color:#333;
  line-height:1.6;
}

/* NAME AT BOTTOM RIGHT */
.student-info{
  margin-top:15px;
  text-align:right;
}

.student-info h3{
  margin:0;
  color:#003135;
}

.student-info span{
  font-size:14px;
  color:#0FA4AF;
}

.testimonial-card:hover{
  transform:translateY(-5px);
  transition:0.3s;
}

.testimonial-text p::before{
  content:"“";
  font-size:30px;
  color:#0FA4AF;
}

@media(max-width:768px){

  #nav{
    display:none;
    position:absolute;
    top:100%;          /* 👈 directly below header */
    left:0;
    width:100%;        /* 👈 same width as header */
    background:var(--card);
    
    flex-direction:column;
    padding:15px 0;
    border-radius:0 0 14px 14px;

    box-shadow:0 10px 25px rgba(0,0,0,0.3);
    z-index:999;
  }

  #nav.show{
    display:flex;
  }

  #nav a{
    padding:12px;
    text-align:center;
    width:100%;
  }

  .menu{
    display:block;
  }
}

/* ===== LEARNING FORMAT ===== */

.learning-format{
  padding:90px 20px;
  background:#f7fbfc;
  text-align:center;
}

.format-container{
  max-width:1200px;
  margin:auto;
}

.learning-format h2{
  font-size:42px;
  color:#003135;
  margin-bottom:10px;
}

.format-subtext{
  font-size:18px;
  color:#555;
  margin-bottom:60px;
  max-width:700px;
  margin-inline:auto;
}

/* CARDS */

.format-cards{
  display:flex;
  gap:30px;
  justify-content:center;
  flex-wrap:wrap;
}

.format-card{
  background:white;
  width:340px;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  transition:0.4s;
}

.format-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* CARD TOP */

.card-top{
  padding:35px 25px;
  color:white;
}

.card-top h3{
  font-size:24px;
  margin:10px 0;
}

.card-top p{
  font-size:16px;
  opacity:0.9;
}

.card-icon{
  font-size:35px;
  margin-bottom:10px;
}

/* CARD COLORS */

.card1{
  background:linear-gradient(135deg,#0FA4AF,#3cbcc7);
}

.card2{
  background:linear-gradient(135deg,#964734,#c46d58);
}

.card3{
  background:linear-gradient(135deg,#003135,#0b5c63);
}

/* CARD BOTTOM */

.card-bottom{
  padding:30px;
  text-align:left;
}

.card-bottom p{
  margin-bottom:12px;
  font-size:16px;
  color:#444;
}

/* BUTTON */

.format-btn{
  display:block;
  margin-top:20px;
  text-align:center;
  background:#0FA4AF;
  color:white;
  padding:12px;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

.format-btn:hover{
  background:#003135;
}


/* ===== POPULAR COURSES ===== */

.popular-courses{
  padding:90px 20px;
  background:#ffffff;
  text-align:center;
}

.course-container{
  max-width:1200px;
  margin:auto;
}

.popular-courses h2{
  font-size:40px;
  color:#003135;
  margin-bottom:10px;
}

.course-subtitle{
  font-size:18px;
  color:#555;
  margin-bottom:50px;
}

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

.course-card{
  background:#f7fbfc;
  padding:30px;
  border-radius:15px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  transition:0.3s;
}

.course-card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 30px rgba(0,0,0,0.15);
}

/* ICON FIX (FINAL) */

.course-icon{
  width:75px;
  height:75px;
  background:#68dcdf;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  margin-bottom:15px;
}

.course-icon img{
  width:60px;
  height:60px;
  object-fit:contain;
}

.course-card h3{
  font-size:22px;
  margin-bottom:10px;
  color:#003135;
}

.course-card p{
  font-size:15px;
  color:#555;
  margin-bottom:15px;
}

.duration{
  font-weight:bold;
  color:#0FA4AF;
}


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

.site-footer{
  background:#003135;
  color:white;
  padding-top:60px;
}

.footer-container{
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:40px;
  padding:0 20px;
}

.footer-column{
  flex:1;
  min-width:220px;
}

.footer-column h3{
  margin-bottom:15px;
  font-size:20px;
  color:#0FA4AF;
}

.footer-column p{
  font-size:15px;
  line-height:1.6;
  margin-bottom:10px;
}

.footer-column ul{
  list-style:none;
}

.footer-column ul li{
  margin-bottom:8px;
}

.footer-column ul li a{
  color:white;
  text-decoration:none;
  transition:0.3s;
}

.footer-column ul li a:hover{
  color:#0FA4AF;
}

/* COPYRIGHT */

.footer-bottom{
  text-align:center;
  margin-top:40px;
  padding:20px;
  border-top:1px solid rgba(255,255,255,0.2);
  font-size:14px;
}

/* ========================= */
/* ABOUT PAGE ONLY STYLES */
/* ========================= */


/* ABOUT HERO */

.about-hero{
background:#b5f8f3;
color:#05253e;
padding:80px 20px 50px;
text-align:center;
}

.about-hero h1{
font-size:40px;
margin-bottom:8px;
}

.about-hero p{
font-size:20px;
opacity:0.9;
}


/* ABOUT INTRO */

.about-intro{
padding:70px 20px;
background:#b2edec;
display:flex;
justify-content:center;
}

.about-container{
max-width:900px;
width:100%;
}

.about-text{
background:#033135;
padding:40px;
border-radius:14px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
text-align:center;
border-top:4px solid #0FA4AF;
}

.about-text h2{
font-size:34px;
margin-bottom:18px;
color:#FFFFFF;
}

.about-text p{
font-size:18px;
line-height:1.7;
color:#FEEFFF;
}


/* SILVER JUBILEE */

.jubilee-section{
padding:100px 20px;
background:linear-gradient(135deg,#003135,#0FA4AF);
color:white;
}

.jubilee-container{
max-width:1100px;
margin:auto;
display:flex;
align-items:center;
gap:60px;
flex-wrap:wrap;
justify-content:center;
}

.jubilee-badge img{
width:220px;
filter:drop-shadow(0 10px 25px rgba(0,0,0,0.4));
animation:badgeFloat 3s ease-in-out infinite;
}

@keyframes badgeFloat{
0%{transform:translateY(0);}
50%{transform:translateY(-12px);}
100%{transform:translateY(0);}
}

.jubilee-content{
max-width:600px;
}

.jubilee-content h2{
font-size:40px;
margin-bottom:10px;
}

.jubilee-content h3{
font-size:26px;
margin-bottom:25px;
color:#AFDDE5;
}

.jubilee-content p{
line-height:1.7;
margin-bottom:15px;
}

.jubilee-highlight{
font-size:18px;
font-weight:bold;
margin-top:15px;
}

.jubilee-btn{
display:inline-block;
margin-top:20px;
padding:14px 32px;
background:white;
color:#003135;
border-radius:30px;
font-weight:bold;
text-decoration:none;
transition:0.3s;
}

.jubilee-btn:hover{
background:#964734;
color:white;
transform:translateY(-3px);
}


/* FOUNDER */

.founder-section{
padding:70px 20px;
display:flex;
justify-content:center;
background:#ffffff;
}

.founder-card{
max-width:900px;
width:100%;
background:#003135;
color:white;
padding:45px;
border-radius:14px;
box-shadow:0 8px 20px rgba(0,0,0,0.15);
display:flex;
align-items:center;
gap:35px;
flex-wrap:wrap;
border-top:4px solid #0FA4AF;
position:relative;
}

.founder-image img{
width:180px;
border-radius:10px;
}

.founder-content{
flex:1;
}

.founder-content h2{
color:#ead324;
margin-bottom:15px;
}

.founder-content p{
line-height:1.7;
color:#e6f2f3;
}

.experience-badge{
position:absolute;
bottom:-20px;
right:-20px;
width:90px;
filter:drop-shadow(0 5px 10px rgba(0,0,0,0.3));
}


/* ACHIEVEMENTS */

.achievements{
padding:80px 20px;
background:#e0ffff;
text-align:center;
}

.achievements-title{
font-size:36px;
margin-bottom:50px;
color:#003135;
}

.achievements-container{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:40px;
justify-items:center;
}


/* FLIP CARDS */

.flip-card{
width:260px;
height:320px;
perspective:1000px;
box-shadow:0 8px 20px rgba(0,0,0,0.1);
border-radius:14px;
}


.flip-card-inner{
position:relative;
width:100%;
height:100%;
transition:transform 0.6s ease;
transform-style:preserve-3d;
}

/* FLIP EFFECT */
.flip-card:hover .flip-card-inner{
transform:rotateY(180deg);
}

/* CARD SIDES */
.flip-card-front,
.flip-card-back{
position:absolute;
width:100%;
height:100%;
backface-visibility:hidden;
border-radius:14px;
overflow:hidden;
}

/* FRONT SIDE */
.flip-card-front{
background:#003135;
color:white;
display:flex;
flex-direction:column;
align-items:center;
padding:20px;
gap:15px;
}

.flip-card-front h3{
margin:0;
}

/* CLEAN IMAGE */
.flip-card-front img{
width:100%;
height:170px;
object-fit:cover;
border-radius:10px;
}

/* BACK SIDE */
.flip-card-back{
background:#0a676e;
color:white;
transform:rotateY(180deg);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px;
text-align:center;
}

.flip-card-back h3{
color:#f7f30a; /* dark contrast */
margin-bottom:10px;
}

/* HOVER LIFT (smooth & safe) */
.flip-card:hover{
transform:translateY(-6px);
transition:0.3s;
}

@media(max-width:768px){
.achievements-container{
grid-template-columns:repeat(2, 1fr);
}
}

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

/* TIMELINE SECTION */

.timeline-section{
  padding:100px 20px;
  background:#b5f8f3;
}

/* TITLE */

.timeline-title{
  text-align:center;
  font-size:38px;
  margin-bottom:70px;
  color:#003135;
  font-family:Georgia, serif;
}

/* MAIN CONTAINER */

.timeline{
  position:relative;
  max-width:1000px;
  margin:auto;
}

/* CENTER LINE */

.timeline::after{
  content:'';
  position:absolute;
  width:4px;
  background:#0FA4AF;
  top:0;
  bottom:0;
  left:50%;
  margin-left:-2px;
}

/* TIMELINE ITEMS */

.timeline-item{
  padding:20px 40px;
  position:relative;
  width:50%;
}

/* LEFT SIDE */

.timeline-item.left{
  left:0;
}

/* RIGHT SIDE */

.timeline-item.right{
  left:50%;
}

/* DOTS */

.timeline-item::after{
  content:'';
  position:absolute;
  width:18px;
  height:18px;
  right:-9px;
  background:#0FA4AF;
  border:4px solid white;
  top:30px;
  border-radius:50%;
  z-index:1;
}

.timeline-item.right::after{
  left:-9px;
}

/* CONTENT CARD */

.timeline-content{
  background:white;
  padding:25px 30px;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.15);
  transition:0.3s;

  /* 🔥 IMPORTANT FIX */
  color:#003135;
}

/* TEXT FIX */

.timeline-content h3{
  color:#003135;
  margin-bottom:8px;
}

.timeline-content p{
  color:#555;
  font-size:15px;
  line-height:1.6;
}

/* HOVER EFFECT */

.timeline-content:hover{
  transform:translateY(-5px);
  box-shadow:0 12px 30px rgba(0,0,0,0.25);
}

/* 📱 MOBILE RESPONSIVE */

@media(max-width:768px){

  .timeline::after{
    left:20px;
  }

  .timeline-item{
    width:100%;
    padding-left:60px;
    padding-right:20px;
    margin-bottom:40px;
  }

  .timeline-item.right{
    left:0;
  }

  .timeline-item::after{
    left:11px;
  }
}



/* ========================= */
/* COURSES PAGE CLEAN CSS */
/* ========================= */


/* ===== HERO ===== */
.courses-hero{
  background:linear-gradient(135deg,#003135,#0FA4AF);
  color:white;
  text-align:center;
  padding:110px 20px;
}

.courses-hero h1{
  font-size:48px;
  margin-bottom:12px;
}

.courses-hero p{
  font-size:18px;
  opacity:0.9;
}


/* ===== FILTER SECTION ===== */
.course-filter{
  padding:70px 20px 30px;
  text-align:center;
  background:#e0f8f7;
}

.section-title{
  font-size:36px;
  color:#003135;
  font-weight:700;
  letter-spacing:0.5px;
}

.filter-buttons{
  margin-top:25px;
}

.filter-btn{
  border:none;
  padding:10px 22px;
  margin:8px;
  border-radius:25px;
  background:#003135;
  color:white;
  cursor:pointer;
  transition:0.3s;
}

.filter-btn:hover,
.filter-btn.active{
  background:#0FA4AF;
}


/* ===== COURSES SECTION ===== */
.courses-section{
  padding:80px 20px;
  background:#e0f8f7;
}


/* ===== GRID ===== */
.courses-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:30px;
  max-width:1100px;
  margin:auto;
}


/* ===== COURSE CARD ===== */
.course-card{
  background:linear-gradient(135deg,#003135,#0FA4AF);
  color:white;
  padding:30px;
  border-radius:16px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:transform 0.35s ease, box-shadow 0.35s ease;
}

.course-card h3{
  color:#062d61 !important; /* gold highlight */
}

.course-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(0,0,0,0.25);
}

.course-card h3{
  margin-bottom:10px;
}

.course-card p{
  font-size:14px;
  opacity:0.9;
}

.duration{
  display:block;
  margin-top:10px;
  font-size:14px;
  font-weight:600;
  color:#144a53;
}


/* ===== ICON ===== */
.course-icon{
  width:70px;
  height:70px;
  margin:auto;
  margin-bottom:15px;
  background:#ffffff;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.course-icon img{
  width:50px;
  height:50px;
  object-fit:contain;
}


/* ===== BUTTON ===== */
.course-btn{
  display:inline-block;
  margin-top:auto;
  padding:10px 22px;
  background:#05253e;
  color:#ebeeee;
  text-decoration:none;
  border-radius:25px;
  font-size:14px;
  font-weight:600;
  transition:0.3s;
}

.course-btn:hover{
  background:#964734;
  color:white;
}


/* ===== WHO SECTION ===== */
.who-can-learn{
  padding:80px 20px;
  background:#b5f8f3;
  text-align:center;
}

.who-title{
  font-size:36px;
  color:#003135;
  font-weight:700;
  letter-spacing:0.5px;
}

.who-title::after{
  content:"";
  width:80px;
  height:4px;
  background:#964734;
  display:block;
  margin:10px auto;
}

.who-subtitle{
  max-width:650px;
  margin:0 auto 50px;
  color:#444;
}

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

.who-card{
  background:white;
  padding:25px;
  border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,0.1);
  transition:0.3s;
}

.who-card:hover{
  transform:translateY(-8px);
}

.who-card h3{
  color:#024950;
}

.who-card p{
  color:#3a6b70;
}

.who-icon{
  color:#0FA4AF;
}


/* ===== TRAINING PROCESS ===== */
.training-process{
  padding:80px 20px;
  background:#e0ffff;
  text-align:center;
}

.process-title{
  font-size:36px;
  color:#003135;
  font-weight:700;
  letter-spacing:0.5px;
}

.process-title::after{
  content:"";
  width:80px;
  height:4px;
  background:#c94e2f;
  display:block;
  margin:10px auto;
}

.process-subtitle{
  max-width:650px;
  margin:20px auto 50px;
  color:#555;
}

.process-container{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:25px;
}

.process-step{
  background:white;
  padding:25px;
  border-radius:12px;
  width:200px;
  box-shadow:0 8px 20px rgba(0,0,0,0.1);
  transition:0.3s;
  position:relative;
}

.process-step::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(90deg,#0FA4AF,#964734);
  border-radius:12px 12px 0 0;
}

.process-step:hover{
  transform:translateY(-8px);
}

.process-step h3{
  color:#024950;
  font-size:18px;
  margin-bottom:8px;
}

.process-step p{
  color:#555;
  font-size:14px;
  line-height:1.5;
}

.step-number{
  width:50px;
  height:50px;
  background:linear-gradient(135deg,#003135,#0FA4AF);
  color:white;
  font-weight:bold;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 15px;
  font-size:16px;
}


/* ===== CERTIFICATE SECTION ===== */
.certificate-section{
  padding:100px 20px;
  text-align:center;
  background:#e0f8f7;
}

.certificate-title{
  font-size:36px;
  color:#003135;
  font-weight:700;
  letter-spacing:0.5px;
}

.certificate-text{
  font-size:18px;
  color:#024950;
  margin-bottom:40px;
}

.certificate-card{
  max-width:500px;
  margin:auto;
  background:#003135;
  color:white;
  padding:40px;
  border-radius:16px;
  box-shadow:0 15px 40px rgba(0,0,0,0.2);
}

.certificate-btn{
  margin-top:20px;
  padding:12px 30px;
  border:none;
  background:#0FA4AF;
  color:white;
  border-radius:25px;
  cursor:pointer;
}

.certificate-btn:hover{
  background:#964734;
}


/* ===== CERTIFICATE MODAL FIX ===== */

.certificate-modal{
  display:none; /* ✅ keep hidden initially */
  position:fixed;
  z-index:999;
  inset:0;
  background:rgba(0,0,0,0.9);

  align-items:center;
  justify-content:center;

  padding:20px;
  overflow:auto;
}

/* IMAGE */
.certificate-modal img{
  width:100%;
  height:auto;
  max-height:90vh;
  object-fit:contain;
}
/* CLOSE BUTTON */
.close-cert{
  position:fixed;
  top:15px;
  right:20px;
  font-size:30px;
  color:white;
  cursor:pointer;
  z-index:1000;
}

/* ===== CTA ===== */
.courses-cta{
  background:linear-gradient(135deg,#003135,#0FA4AF);
  color:white;
  text-align:center;
  padding:80px 20px;
}

.cta-btn{
  display:inline-block;
  margin-top:20px;
  background:white;
  color:#003135;
  padding:14px 35px;
  border-radius:30px;
  text-decoration:none;
  font-weight:bold;
}

.cta-btn:hover{
  background:#964734;
  color:white;
}

/* ========================= */
/* ADMISSIONS PAGE */
/* ========================= */

/* HERO */

.admissions-hero{
padding:80px 20px;
text-align:center;
background: linear-gradient(135deg,#003135,#0FA4AF);
}

.admissions-hero h1{
font-size:40px;
color:#e9f6f8;
}

.admissions-hero p{
margin-top:10px;
color:#f9f9f9;
}


/* SECTION */

.admissions-section{
padding:80px 20px;
text-align:center;
}

.admission-text{
margin-bottom:40px;
color:#555;
}


/* FORM CARD */

.form-card{
max-width:550px;
margin:auto;
background:white;
padding:40px;
border-radius:12px;
box-shadow:0 15px 40px rgba(0,0,0,0.15);
}


/* FORM */

.admission-form{
display:flex;
flex-direction:column;
gap:18px;
}


/* FORM GROUP */

.form-group{
display:flex;
flex-direction:column;
text-align:left;
}

.form-group label{
margin-bottom:5px;
font-weight:bold;
}


/* INPUTS */

.form-group input,
.form-group select,
.form-group textarea{
padding:12px;
border-radius:6px;
border:1px solid #ccc;
font-size:14px;
transition:0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
border-color:#024950;
outline:none;
box-shadow:0 0 5px rgba(2,73,80,0.2);
}


/* BUTTON */

.admission-btn{
margin-top:10px;
padding:14px;
background:#024950;
color:white;
border:none;
border-radius:6px;
font-size:16px;
cursor:pointer;
transition:0.3s;
}

.admission-btn:hover{
background:#01363b;
transform:translateY(-2px);
}


/* SUCCESS MESSAGE */

.success-message{
display:none;
margin-top:20px;
padding:12px;
background:#e6f7f2;
color:#024950;
border-radius:6px;
font-weight:500;
text-align:center;
}


/* WHATSAPP */

.admission-contact{
padding:70px 20px;
text-align:center;
background:#00A083;
}

.whatsapp-btn{
display:inline-block;
margin-top:15px;
padding:12px 25px;
background:#25D366;
color:white;
text-decoration:none;
border-radius:6px;
font-weight:bold;
}

.whatsapp-btn:hover{
background:#1ebe5d;
}


/* DOCUMENTS */

.documents-section{
padding:70px 10%;
background:#f9fbff;
text-align:center;
}

.documents-subtitle{
color:#666;
margin-bottom:40px;
}

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

.document-card{
background:#00A083;
padding:25px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:0.3s;
}

.document-card:hover{
transform:translateY(-5px);
}

.doc-icon{
font-size:35px;
margin-bottom:10px;
}

/* ------------------ CONTACT PAGE (CLEAN VERSION) ------------------ */

/* HERO */

.contact-hero{
  padding:90px 20px;
  background:linear-gradient(135deg,#003135,#0FA4AF);
  color:white;
  text-align:center;
}

.contact-hero h1{
  font-size:40px;
  margin-bottom:10px;
}

.contact-hero p{
  font-size:18px;
  opacity:0.9;
}


/* CONTACT INFO */

.contact-info{
  padding:80px 20px;
  background:#b5f8f3;
  text-align:center;
}

.section-title{
  font-size:34px;
  margin-bottom:40px;
  color:#003135;
}


/* GRID */

.contact-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
  max-width:1100px;
  margin:auto;
}


/* CARD */

.contact-card{
  background:#e6f7f9;
  padding:30px;
  border-radius:14px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  transition:0.3s;
  border-top:4px solid #0FA4AF;
  color:#003135;
}

.contact-card h3{
  margin-bottom:8px;
}

.contact-card p{
  color:#555;
  font-size:15px;
  line-height:1.6;
}

.email-link{
  color:#0FA4AF;
  text-decoration:none;
  word-break:break-all;
}

.email-link:hover{
  text-decoration:underline;
}

.contact-card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 30px rgba(0,0,0,0.15);
}

.contact-icon{
  font-size:36px;
  margin-bottom:10px;
}


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

.contact-form-section{
  padding:80px 20px;
  background:#f1f3f3; /* 👉 change here anytime */
  text-align:center;
}

.contact-form{
  max-width:600px;
  margin:40px auto;
  background:#9ddfe1; /* 👉 change here anytime */
  padding:40px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,0.1);
}


/* INPUTS */

.contact-form input,
.contact-form textarea{
  width:100%;
  padding:14px;
  margin-bottom:18px;
  border-radius:10px;
  border:1px solid #ccc;
  font-size:15px;
  outline:none;
  transition:0.3s;
}

.contact-form textarea{
  min-height:120px;
  resize:none;
}


/* INPUT FOCUS */

.contact-form input:focus,
.contact-form textarea:focus{
  border-color:#0FA4AF;
  box-shadow:0 0 0 2px rgba(15,164,175,0.2);
}


/* BUTTON */

.contact-btn{
  width:100%;
  padding:14px;
  border:none;
  border-radius:25px;
  background:linear-gradient(135deg,#07581f,#0FA4AF); /* 👉 now this WILL work */
  color:white;
  font-size:16px;
  cursor:pointer;
  transition:0.3s;
}

.contact-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,0.2);
}


/* SUCCESS MESSAGE */

.success-message{
  margin-top:15px;
  color:green;
  display:none;
}


/* VISITING HOURS */

.visit-section{
  padding:80px 20px;
  text-align:center;
  background: linear-gradient(135deg,#003135,#0FA4AF);
}

.visit-section .section-title{
  color:#F0FFFF; /* or any color you want */
}

.timing-card{
  background:#003135;
  color:white;
  padding:35px;
  border-radius:14px;
  display:inline-block;
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
  font-size:18px;
}


/* MAP */

.map-section{
  padding:80px 20px;
  text-align:center;
}

.map-container{
  max-width:900px;
  margin:auto;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
}


/* CTA */

.contact-cta{
  padding:80px 20px;
  background:linear-gradient(135deg,#003135,#0FA4AF);
  text-align:center;
  color:white;
}

.contact-cta h2{
  margin-bottom:20px;
  font-size:30px;
}

.cta-btn{
  background:white;
  color:#003135;
  padding:12px 28px;
  border-radius:30px;
  text-decoration:none;
  font-weight:bold;
  transition:0.3s;
}

.cta-btn:hover{
  background:#964734;
  color:white;
}


/* RESPONSIVE */

@media(max-width:768px){
  .course-icon{
    width:65px;
    height:65px;
  }

  .course-icon img{
    width:50px;
    height:50px;
  }
}

@media(max-width:768px){
  .course-icon{
    width:65px;
    height:65px;
  }

  .course-icon img{
    width:50px;
    height:50px;
  }
}