
/* main styles */
body { font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }
.service-card { background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,1)); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(15,23,42,0.06); transition: transform 280ms ease, box-shadow 280ms ease; display:flex; flex-direction:column; }
.service-card:hover { transform: translateY(-10px) scale(1.01); box-shadow: 0 18px 40px rgba(15,23,42,0.12); }
.card-top { padding: 14px; display:flex; align-items:center; }
.card-icon { width: 100px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; color:white; font-weight:700; box-shadow: 0 8px 18px rgba(15,23,42,0.08); }
.card-body { padding: 16px; flex:1; }
@keyframes popIn { from { opacity:0; transform: translateY(12px) scale(0.98);} to { opacity:1; transform: translateY(0) scale(1);} }
#servicesGrid .service-card { animation: popIn 420ms ease both; }
#servicesGrid .service-card:nth-child(1){ animation-delay: 0ms; }
#servicesGrid .service-card:nth-child(2){ animation-delay: 60ms; }
#servicesGrid .service-card:nth-child(3){ animation-delay: 120ms; }
#servicesGrid .service-card:nth-child(4){ animation-delay: 180ms; }
#servicesGrid .service-card:nth-child(5){ animation-delay: 240ms; }
#servicesGrid .service-card:nth-child(6){ animation-delay: 300ms; }
#servicesGrid .service-card:nth-child(7){ animation-delay: 360ms; }
#servicesGrid .service-card:nth-child(8){ animation-delay: 420ms; }

/* Hero extras */
@keyframes slideBG { 0% { transform: translateX(-10%); } 50% { transform: translateX(10%); } 100% { transform: translateX(-10%); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fadeInUp { animation: fadeInUp 700ms ease forwards; opacity: 0; }
.animate-fadeInUp.delay-100 { animation-delay: 100ms; }
.animate-fadeInUp.delay-200 { animation-delay: 200ms; }
.drop-shadow-sm { filter: drop-shadow(0 6px 20px rgba(0,0,0,0.08)); }
.video-wrapper{position:relative}.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}

/* override hero compact */




/* Modern sticky gradient header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(6px);
  background: linear-gradient(90deg, rgba(37,99,235,0.95), rgba(124,58,237,0.95));
  box-shadow: 0 6px 20px rgba(15,23,42,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header-inner {
  max-width: 100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 20px; /* compact height ~72px including logo */
  color: white;
}
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand-logo { border-radius:8px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.brand-title { font-weight:700; font-size:1rem; letter-spacing:0.2px; }
.main-nav .nav-list { list-style:none; display:flex; gap:18px; margin:0; padding:0; align-items:center; }
.main-nav a { color: rgba(255,255,255,0.95); text-decoration:none; padding:8px 10px; border-radius:8px; font-weight:600; transition: all 220ms cubic-bezier(.2,.9,.3,1); }
.main-nav a:hover, .main-nav a:focus {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(99,102,241,0.18);
  background: rgba(255,255,255,0.06);
  outline: none;
}
.nav-toggle { display:none; background:transparent; border:0; color:white; padding:8px; }
.hamburger { width: 100px; height:2px; background:white; display:block; position:relative; }
.hamburger:before, .hamburger:after { content:''; position:absolute; left:0; right:0; height:2px; background:white; display:block; }
.hamburger:before { top:-7px; }
.hamburger:after { top:7px; }

/* Responsive */
@media (max-width:880px) {
  .main-nav { display:none; }
  .nav-toggle { display:block; }
  .site-header-inner { padding:10px 14px; }
}



/* teal to blue, different from header */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px; /* same as header */
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}







/* Refined tagline styling - bold, italic, gold on blue header */
.brand-tagline {
  font-size: 0.8rem;
  font-weight: 700;
  font-style: italic;
  color: #facc15; /* gold tone for visibility */
  letter-spacing: 0.4px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}




/* YouTube card matching header height */
.yt-card {
  background: linear-gradient(90deg, rgba(10,25,47,0.95), rgba(37,99,235,0.95));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px; /* match header */
  box-shadow: 0 4px 12px rgba(2,6,23,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.yt-card-inner { max-width: 100px; width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 0 20px; }
.yt-info { flex: 0 0 auto; }
.yt-channel { font-weight:700; font-size:1rem; }
.yt-handle { display:inline-block; margin-left:8px; font-weight:500; opacity:0.85; font-size:0.9rem; color:#f3f4f6; }
.yt-player { flex: 0 0 320px; max-width: 100px; height:56px; overflow:hidden; border-radius:8px; }
.yt-player iframe { width: 100px; height:56px; border:0; display:block; }
@media (max-width:880px) {
  .yt-card-inner { flex-direction:column; align-items:center; gap:6px; padding:8px 12px; }
  .yt-player { width:100%; max-width:none; height:56px; }
  .yt-player iframe { width:100%; height:56px; }
}








/* Improved header layout: keep items on a single row and aligned */
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 20px; /* compact */
  flex-wrap: nowrap;
  max-width: 1200px;
  margin: 0 auto;
}
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; flex: 0 0 auto; }
.brand-text { display:flex; flex-direction:column; line-height:1.05; align-items:flex-start; }
.brand-title { font-weight:700; font-size:1rem; margin:0; }
.brand-tagline { font-size:0.78rem; margin:0; font-weight:700; font-style:italic; color:#facc15; }

/* Navigation takes available space and centers links, but prevents wrapping */
.main-nav { flex: 1 1 auto; display:flex; justify-content:center; }
.main-nav .nav-list { list-style:none; display:flex; gap:22px; margin:0; padding:0; align-items:center; white-space:nowrap; }
.main-nav a { color: rgba(255,255,255,0.95); text-decoration:none; padding:8px 10px; border-radius:8px; font-weight:600; transition: all 180ms ease; display:inline-block; }
.main-nav a:hover, .main-nav a:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(99,102,241,0.14);
  background: rgba(255,255,255,0.04);
}

/* Search kept at end, small and won't push items */
.header-search { flex: 0 0 auto; margin-left: 12px; }
.header-search input { width: 100px; padding:6px 8px; border-radius:16px; }
@media (max-width:1024px) {
  .nav-list { gap:14px; }
  .header-search input { width: 90px; }
}
@media (max-width:880px) {
  .main-nav { display:none; }
  .header-search { display:none; }
  .nav-toggle { display:block; }
}



/* Buttons reuse existing classes, ensure visual consistency */
.btn-primary { background: linear-gradient(90deg,#2563eb,#7c3aed); color:white; padding:10px 16px; border-radius:10px; text-decoration:none; }
.btn-outline { border:2px solid rgba(37,99,235,0.12); color:#2563eb; padding:8px 14px; border-radius:10px; text-decoration:none; background:transparent; }

@media (max-width:880px) {
  
  .rich-right { order:-1; } /* show cards above on small screens */
  
}

.proceed-btn:hover {
    text-decoration: underline;
}

/* Global text justification */
main, section, article, p { text-align: justify; }


/* Added by assistant: crafted-by footer style */
.crafted-by { text-align: center; font-weight: 700; color: #d4af37; margin-top: 10px; font-size: 1rem; }
