/* ===========================================
   ULTRA MODERN IT TRAINING THEME (Premium)
   Colors: Dark Blue, Black, Sky Blue, Yellow
=========================================== */
:root{
  --bg: #ffffff;
  --text: #071A4B;               /* deep dark blue */
  --muted: #6c7a90;
  --primary: #0047FF;            /* strong blue */
  --primary-light: #4DB8FF;      /* sky blue */
  --accent: #FFD447;             /* yellow highlight */
  --card: #ffffff;
  --nav-bg: rgba(255,255,255,0.95);
}

/* GLOBAL STYLES */
*{ box-sizing:border-box; }

body{
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-weight: 700;
  scroll-behavior: smooth;
  padding-top:72px;
  font-size: 1.5rem;
}

/* LOGO */
#nav-logo{
  height:48px;
  width:auto;
}

/* ===========================================
       NAVBAR — Modern, Compact
=========================================== */
.navbar{
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  transition: 0.3s ease;
}

.navbar-nav .nav-link{
  padding: 8px 12px !important;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text) !important;
  transition: 0.3s;
}

.navbar-nav .nav-link:hover{
  color: var(--primary-light) !important;
  border-bottom: 2px solid var(--accent);
}

/* Navbar scroll effect */
.navbar.scrolled{
  background: #ffffff !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.1);
}

/* ===========================================
     HERO SECTION — Premium Gradient Banner
=========================================== */
.hero{
  height: 85vh;
  display:flex;
  align-items:center;
  justify-content:center;

  background:
    linear-gradient(
      135deg,
      rgba(7,26,75,0.85),
      rgba(0,71,255,0.65),
      rgba(77,184,255,0.55)
    ),
    url('https://images.unsplash.com/photo-1526378729303-9a3fc3bf3b3b?q=80&w=1600')
    center/cover no-repeat;
}

.hero h1{
  font-size: 3rem;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 3px 14px rgba(0,0,0,0.4);
}

.hero p{
  font-size: 1.3rem;
  font-weight: 600;
  color: #EAF6FF;
}

/* ===========================================
   BUTTONS — Sky Blue + Yellow Glow
=========================================== */
.cta{
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  color: #fff;
  padding: 14px 34px;
  font-size: 1.1rem;
  font-weight: 800;
  border-radius: 40px;
  border: none;
  box-shadow: 0 4px 12px rgba(0,71,255,0.4);
  transition: 0.3s;
}

/* .cta:hover{
  background: var(--accent);
  color: #000;
  box-shadow: 0 4px 18px rgba(255,212,71,0.6);
} */

/* ===========================================
   CARDS — Modern Floating Cards
=========================================== */
.card, .service-card{
  background: #ffffff;
  border-radius: 18px;
  padding: 1.4rem;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transition: 0.3s;
}

.card:hover, .service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 8px 30px rgba(0,71,255,0.15);
}

.card-title{
  font-weight: 800;
  color: var(--text);
}

.card-text{
  font-weight: 600;
  color: var(--muted);
}







/* ===========================================
   WHATSAPP FAB
=========================================== */
.whatsapp-fab{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  background:#25D366;
  border-radius: 50%;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  z-index: 2000;
}

/* ===========================================
   SCROLL ANIMATIONS
=========================================== */
.reveal{
  opacity:0;
  transform: translateY(20px);
  transition: all 700ms ease;
}
.reveal.visible{
  opacity:1;
  transform: translateY(0);
}

/* RESPONSIVE */
@media (max-width: 991px){
  .hero{ height:65vh; padding:1rem; }
  #nav-logo{ height:40px; }
}

@media (max-width: 575px){
  .hero h1{ font-size: 1.8rem; }
  .brand-text{ display:none; }
}

/* SMALL TEXT */
.small{
  font-size:0.88rem;
  color:var(--muted);
}