/* ========== BLUE 3-D THEME ========== */
:root {
  --bg: #0a192f;            /* deep navy */
  --bg-light: #3971d3;      /* lighter navy */
  --accent: #64ffda;        /* cyan pop */
  --text: #f0f6fc;          /* clean white */
  --card: rgba(17, 34, 64, 0.75);
  --radius: 12px;
  --transition: .4s cubic-bezier(.25, .8, .25, 1);
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ========== GLOBAL RESET ========== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Segoe UI',sans-serif;
  background:linear-gradient(135deg,var(--bg) 0%,var(--bg-light) 100%);
  color:var(--text);
  overflow-x:hidden;
}

/* ========== NAVBAR (sticky) ========== */
.navbar{
  position:fixed;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:1em 2rem;
  background:rgba(10, 25, 47, 0.9);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--accent);
  z-index:1000;
}
.logo{height:50px}
.logo-group{display:flex;align-items:center;gap:.8rem}
.gov-icons img{height:26px;width:auto;filter:drop-shadow(0 0 2px var(--accent))}
.nav-tabs{display:flex;gap:2rem;list-style:none}
.nav-tabs li{cursor:pointer;color:var(--text);transition:var(--transition)}
.nav-tabs li:hover{transform:translateY(-4px) scale(1.1);color:var(--accent)}

/* ========== SECTIONS + 3-D ENTRY ========== */
.section{display:none;min-height:100vh;padding-top:80px;perspective:1000px}
.section.active{display:block;animation:fadeIn .8s forwards}
@keyframes fadeIn{
  from{opacity:0;transform:rotateX(-10deg) translateY(30px)}
  to{opacity:1;transform:rotateX(0) translateY(0)}
}

/* ========== HOME (carousel + hero) ========== */
.carousel-wrapper{position:relative;width:100%;height:60vh;overflow:hidden}
.carousel-slide{position:absolute;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);transition:opacity 1s,transform 2s}
.carousel-slide.active{opacity:.4;transform:scale(1)}
.hero-text{
  position:absolute;top:20%;right:0;transform:translateY(-50%);
  width:50%;max-width:600px;padding:2rem;border-radius:var(--radius) 0 0 var(--radius);
  background:var(--card);backdrop-filter:blur(6px);box-shadow:var(--shadow);
  z-index:10;
}
.hero-text h1{font-size:2.2rem;margin-bottom:.5rem}
.hero-text span{color:var(--accent)}

/* ========== FEATURES + IMAGE GRID ========== */
.features-grid{display:flex;flex-wrap:wrap;gap:2rem;padding:3rem 2rem}
.features-left{flex:1 1 300px;max-width:450px}
.features-left h2{font-size:2rem;margin-bottom:1rem;color:var(--accent)}
.features-left ul{list-style:none}
.features-left li{font-size:1.1rem;margin:.7rem 0;color:var(--text)}
.features-left li::before{content:"✅";margin-right:.5rem;color:var(--accent)}
.features-images{flex:1 1 450px;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.feat-img{background:#112240;border:1px solid #e0e6f1;border-radius:var(--radius);overflow:hidden;transition:var(--transition)}
.feat-img:hover{transform:translateY(-5px)}
.feat-img img{width:100%;height:120px;object-fit:cover}
.feat-img h4{margin:.5rem 0;text-align:center;color:black}

/* ========== MINI TESTIMONIAL ========== */
.mini-testimonial {
  padding: 3rem 2rem;
  text-align: center;
}

.mini-testimonial h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--accent);
}

.mini-carousel {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.mini-slide {
  position: relative;
  flex: 0 0 200px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.mini-slide:hover {
  transform: scale(1.05);
}

.mini-slide video {
  width: 180px;
  height: 180px;
  border-radius: 10px; /* Square style */
  border: 3px solid var(--accent);
  object-fit: cover;
  display: block;
}

/* Play button overlay */
.mini-slide::before {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: white;
  background: rgba(0, 0, 0, 0.4);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.mini-slide:hover::before {
  opacity: 1;
}

.mini-slide h4 {
  margin-top: 0.5rem;
  font-size: 1rem;
}

/* ========== FULL TESTIMONIAL ========== */
#testimonial{padding:5rem 2rem;text-align:center}
#testimonial h2{font-size:2.5rem;margin-bottom:2rem;color:var(--accent)}
.testimonial-carousel{display:flex;gap:2rem;overflow-x:auto;padding:1rem}
.testimonial-slide{min-width:300px;text-align:center}
.testimonial-slide img{width:200px;height:200px;border-radius:50%;border:3px solid var(--accent)}
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;padding:2rem}
.testimonial-grid img{width:100%;border-radius:var(--radius)}

/* ========== BLOG ========== */
#blog{padding:5rem 2rem}
#blog h2{font-size:2.5rem;margin-bottom:2rem;text-align:center;color:var(--accent)}
#blog article{background:var(--card);margin:1rem 0;padding:1.5rem;border-radius:var(--radius);transition:var(--transition)}
#blog article:hover{transform:translateZ(20px)}

/* ========== CONTACT ========== */
#contact{padding:5rem 2rem;text-align:center}
#contact h2{font-size:2.5rem;margin-bottom:2rem;color:var(--accent)}
#contact form{max-width:500px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
#contact input,#contact textarea{
  width:100%;padding:.8rem;border:none;border-radius:var(--radius);
  background:rgba(255,255,255,.1);color:var(--text);
}
#contact button{
  background:var(--accent);color:var(--bg);padding:.8rem 2rem;border:none;
  border-radius:var(--radius);cursor:pointer;transition:var(--transition);
}
#contact button:hover{transform:translateY(-2px)}

/* ========== COURSES / DOWNLOAD GRIDS ========== */
.courses-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;padding:2rem}
.course-card{background:#fff;border:1px solid #e0e6f1;border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:var(--transition)}
.course-card:hover{transform:translateY(-10px) rotateY(5deg) scale(1.05)}
.course-card img{width:100%;height:160px;object-fit:cover}
.course-card h3{margin:.8rem;color:var(--accent)}
.price-tag{display:flex;gap:.3rem;font-weight:700;margin:.4rem .8rem}
.price-tag .old{text-decoration:line-through;color:#555}
.price-tag .new{color:var(--accent);font-size:1.1rem}

/* ========== MODALS ========== */
.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:2000}
.modal-content{background:#070707;margin:5% auto;padding:2rem;width:90%;max-width:700px;border-radius:var(--radius);animation:pop .4s forwards}
@keyframes pop{from{transform:scale(.8)}to{transform:scale(1)}}
.close{float:right;font-size:2rem;cursor:pointer;color:var(--accent)}
/* ========== MODAL (contact-form style) ========== */
.modal{
  display:none;position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(10, 25, 47, 0.85);backdrop-filter:blur(10px);
  z-index:2000;
}
.modal-content{
  background:var(--card);
  margin:5% auto;
  padding:2.5rem 2rem;
  width:90%;
  max-width:500px;
  border:1px solid var(--accent);
  border-radius:var(--radius);
  animation:pop .4s cubic-bezier(.25,.8,.25,1) forwards;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.modal-content h3{
  font-size:1.6rem;
  margin-bottom:1.5rem;
  color:var(--accent);
  text-align:center;
}
.modal-content form{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.modal-content input,
.modal-content textarea{
  width:100%;
  padding:.8rem 1rem;
  background:rgba(255,255,255,.1);
  border:1px solid var(--accent);
  border-radius:var(--radius);
  color:var(--text);
  outline:none;
}
.modal-content input:focus,
.modal-content textarea:focus{
  border-color:#fff;
}
.modal-content button{
  background:var(--accent);
  color:var(--bg);
  padding:.8rem 2rem;
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  transition:var(--transition);
}
.modal-content .close {
  position: absolute;
  top: 0.8rem;
  right: 1rem;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--accent);
  background: rgba(17, 34, 64, 0.8);
  border: 1px solid var(--accent);
  border-radius: 50%;
  cursor: pointer;
  transition: var(--transition);
  z-index: 10;
}
.modal-content .close:hover {
  background: var(--accent);
  color: var(--bg);
  transform: rotate(90deg) scale(1.1);
}


/* ========== FLOAT HELP BUTTON  ========== */
#help-btn{
  position:fixed;bottom:20px;right:20px;
  z-index:9999;
  background:var(--accent);
  color:var(--bg);
  border:none;
  border-radius:50%;
  width:55px;height:55px;
  font-size:1.2rem;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
  transition:var(--transition);
}
#help-btn:hover{
  transform:scale(1.1) rotateZ(5deg);
  box-shadow:0 6px 20px rgba(100,255,218,.4);
}


/* ========== GLOBAL FOOTER ========== */
footer{background:var(--bg-light);color:var(--text);padding:2rem;text-align:center}
.footer-flex{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem}
.footer-flex a{margin:0 .5rem;font-size:1.5rem;color:var(--accent)}
.footer-flex a:hover{color:#fff}
@media(max-width:768px){
  .hero-text{width:90%;right:5%;text-align:center}
  .features-grid{flex-direction:column}
}