/* ================================================================
   LMS MODERN — FULL VISUAL OVERHAUL
   Brand green: #6aaf08  |  Font: Inter
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

:root {
  --g:      #6aaf08;
  --gd:     #4d8506;
  --gl:     #8fd41e;
  --glow:   rgba(106,175,8,0.40);
  --dark:   #0a0e1a;
  --dark2:  #111827;
  --dark3:  #1e293b;
  --text:   #0f172a;
  --muted:  #64748b;
  --bg:     #f8fafc;
  --card:   #ffffff;
  --ease:   cubic-bezier(0.4,0,0.2,1);
  --bounce: cubic-bezier(0.34,1.56,0.64,1);
}

/* ── KEYFRAMES ── */
@keyframes heroUp   { from{opacity:0;transform:translateY(60px)}  to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn   { from{opacity:0} to{opacity:1} }
@keyframes pulseDot { 0%,100%{box-shadow:0 0 0 0 rgba(106,175,8,0.8)} 70%{box-shadow:0 0 0 12px rgba(106,175,8,0)} }
@keyframes scanLine { from{transform:translateX(-120%)} to{transform:translateX(450%)} }

/* ── BASE ── */
*,*::before,*::after { box-sizing:border-box; }
body,html {
  font-family:'Inter','Open Sans',sans-serif;
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
  color:var(--muted);
}
h1,h2,h3,h4,h5 { font-family:'Inter',sans-serif; color:var(--text); }
h2 { font-size:42px; font-weight:800; letter-spacing:-1px; line-height:1.12; }
h3 { font-weight:700; letter-spacing:-0.3px; }
p  { line-height:1.80; }
hr {
  height:3px; width:40px; border:0; margin-bottom:30px;
  background:linear-gradient(90deg,var(--g),var(--gd));
  border-radius:999px;
}
a { transition:color 0.2s ease; }

/* ════════════════════════════════════════
   NAVIGATION — Glassmorphism
════════════════════════════════════════ */
#menu { padding:20px 28px; transition:all 0.4s var(--ease); }
#menu.navbar-default { background:transparent !important; border:none !important; box-shadow:none; }
#menu.on {
  background:rgba(8,12,24,0.85) !important;
  border:none !important;
  -webkit-backdrop-filter:blur(28px) saturate(200%);
  backdrop-filter:blur(28px) saturate(200%);
  padding:8px 28px !important;
  box-shadow:0 8px 48px rgba(0,0,0,0.50),0 1px 0 rgba(255,255,255,0.05) inset;
}
#menu.navbar-default .navbar-nav > li > a {
  font-family:'Inter',sans-serif;
  font-size:11px; font-weight:700; letter-spacing:2.2px; text-transform:uppercase;
  color:rgba(255,255,255,0.75); padding:6px 0 !important; margin:9px 18px 0;
  position:relative; transition:color 0.25s ease;
}
#menu.navbar-default .navbar-nav > li > a::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0;
  height:2px; background:var(--g); border-radius:999px;
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.35s var(--ease);
}
#menu.navbar-default .navbar-nav > li > a:hover { color:#fff; }
#menu.navbar-default .navbar-nav > li > a:hover::after { transform:scaleX(1); }
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover { color:var(--g) !important; background:transparent !important; }
.navbar-default .navbar-toggle:hover>.icon-bar { background:var(--g); }

/* ════════════════════════════════════════
   HERO — Dramatic, Animated
════════════════════════════════════════ */
.intro {
  position:relative;
  background-size:cover !important;
  background-position:center !important;
  min-height:100vh;
}

/* Layered gradient overlay */
.intro .overlay {
  background:
    linear-gradient(170deg,
      rgba(4,8,18,0.90) 0%,
      rgba(4,8,18,0.60) 55%,
      rgba(77,133,6,0.45) 100%) !important;
  display:flex; align-items:center;
}

/* Animated scan line */
.intro .overlay::after {
  content:''; position:absolute; top:0; width:30%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(106,175,8,0.06),transparent);
  animation:scanLine 6s linear infinite;
  pointer-events:none;
}

/* Hero text layout */
header .intro-text {
  padding-top:240px;
  padding-bottom:140px;
}

/* Live badge */
.hero-live-badge {
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(106,175,8,0.12); border:1px solid rgba(106,175,8,0.35);
  border-radius:999px; padding:8px 22px; margin-bottom:32px;
  font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,0.90);
  animation:heroUp 0.8s var(--ease) both;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.live-dot {
  width:9px; height:9px; background:var(--g); border-radius:50%;
  animation:pulseDot 2s ease-in-out infinite;
  flex-shrink:0;
}

/* H1 */
.intro h1 {
  font-size:72px; font-weight:900;
  letter-spacing:-3px; line-height:1.03;
  color:#fff; text-transform:uppercase;
  text-shadow:0 4px 40px rgba(0,0,0,0.60);
  animation:heroUp 0.85s 0.15s var(--ease) both;
  margin-bottom:22px;
}
.intro h1 .highlight-word {
  color:var(--g);
  text-shadow:0 0 60px rgba(106,175,8,0.50);
}

/* Subtitle */
.intro p {
  font-size:19px; font-weight:400; line-height:1.68; opacity:0.82;
  color:#fff; text-shadow:0 2px 14px rgba(0,0,0,0.40);
  max-width:560px; margin:0 auto 40px;
  animation:heroUp 0.85s 0.30s var(--ease) both;
}

/* CTA Button */
.btn-custom {
  font-family:'Inter',sans-serif; font-size:12px; font-weight:800;
  letter-spacing:2.5px; text-transform:uppercase;
  background:var(--g); color:#fff; border:none;
  border-radius:999px; padding:18px 52px;
  box-shadow:0 0 0 0 var(--glow);
  transition:all 0.35s var(--ease);
  animation:heroUp 0.85s 0.45s var(--ease) both;
  position:relative; overflow:hidden;
}
.btn-custom::before {
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,0.22) 0%,transparent 55%);
}
.btn-custom::after {
  content:''; position:absolute; top:-50%; left:-60%;
  width:40%; height:200%;
  background:rgba(255,255,255,0.18); transform:skewX(-20deg);
  transition:left 0.6s var(--ease);
}
.btn-custom:hover { background:var(--gd); color:#fff; transform:translateY(-4px); box-shadow:0 12px 48px rgba(106,175,8,0.55); }
.btn-custom:hover::after { left:130%; }
.btn-custom:active { transform:translateY(-1px); }


/* ════════════════════════════════════════
   SECTION TITLES
════════════════════════════════════════ */
.section-title { margin-bottom:72px; }
.section-title h2 { font-weight:800; }
.section-title p { font-size:17px; max-width:600px; margin:0 auto; opacity:0.75; }

/* ════════════════════════════════════════
   ABOUT
════════════════════════════════════════ */
#about { padding:120px 0 100px; background:var(--bg); }
#about .about-text h2 { font-size:40px; font-weight:900; }
#about .about-text h2 span { color:var(--g); }
#about p { font-size:15px; line-height:1.82; }
#about hr { margin-left:0; }

#about .about-media {
  border-radius:20px; overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,0.12);
  transition:all 0.55s var(--ease);
  position:relative;
}
#about .about-media::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(106,175,8,0.08) 0%,transparent 60%);
  border-radius:20px; pointer-events:none;
}
#about .about-media:hover { transform:translateY(-8px) rotate(-0.5deg); box-shadow:0 20px 60px rgba(0,0,0,0.18); }
#about .about-media img { display:block; width:100%; transition:transform 0.60s var(--ease); }
#about .about-media:hover img { transform:scale(1.07); }
#about .about-desc h3 { font-size:17px; font-weight:700; margin:16px 0 8px; color:var(--text); }
#about .about-desc p { font-size:13.5px; line-height:1.74; }
#about hr { margin-bottom:36px; }

/* ════════════════════════════════════════
   SERVICES — Glassmorphism Cards
════════════════════════════════════════ */
#services {
  padding:110px 0;
  background:linear-gradient(140deg,#1a3000 0%,#2e5500 50%,#1e3d00 100%);
  position:relative; overflow:hidden;
}

/* Dot grid — cheap, no repaints */
#services::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size:26px 26px;
}

/* Central glow orb — static, no animation */
#services::after {
  content:''; position:absolute; width:700px; height:700px;
  background:radial-gradient(circle,rgba(106,175,8,0.12) 0%,transparent 70%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none; border-radius:50%;
}

/* Inner wrapper — keeps content centred without Bootstrap grid */
.services-inner {
  max-width:1140px; margin:0 auto; padding:0 24px;
  position:relative; z-index:1;
}

/* Section title */
#services h2 { font-size:40px; font-weight:900; }
#services h3 { font-size:17px; font-weight:700; letter-spacing:-0.2px; }
#services p  { font-size:14px; line-height:1.76; }
#services hr { background:rgba(255,255,255,0.40); }
#services .section-title { margin-bottom:60px; }

/* ── Cards flex grid — no Bootstrap dependency ── */
.services-grid {
  display:flex;
  justify-content:center;
  align-items:stretch;
  gap:24px;
  flex-wrap:wrap;
}

.service-card {
  flex:0 1 320px;
  background:rgba(255,255,255,0.07);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:24px;
  padding:40px 28px 32px;
  transition:transform 0.40s var(--ease), background 0.40s var(--ease), box-shadow 0.40s var(--ease);
  position:relative; overflow:hidden;
}
/* top sheen line */
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.45),transparent);
  pointer-events:none;
}
.service-card:hover {
  background:rgba(255,255,255,0.12);
  transform:translateY(-12px);
  box-shadow:0 28px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.22);
}

/* Circular image */
#services .service-media {
  width:148px; height:148px; margin:0 auto 22px;
  border-radius:50%; overflow:hidden;
  border:3px solid rgba(255,255,255,0.25);
  box-shadow:0 8px 32px rgba(0,0,0,0.25), 0 0 0 6px rgba(106,175,8,0.12);
  transition:transform 0.50s var(--ease), box-shadow 0.50s var(--ease);
  position:relative;
}
#services .service-media::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,0.20) 0%,transparent 50%);
  pointer-events:none;
}
.service-card:hover .service-media {
  transform:scale(1.08);
  box-shadow:0 16px 48px rgba(0,0,0,0.35), 0 0 0 8px rgba(106,175,8,0.22);
}
#services .service-media img {
  width:100%; height:100%; object-fit:cover; border-radius:50%; border:none;
  transition:transform 0.50s var(--ease);
}
.service-card:hover .service-media img { transform:scale(1.10); }
#services .service-desc { margin:0; }

@media(max-width:992px){ .services-grid{ gap:18px; } .service-card{ flex:0 1 280px; } }
@media(max-width:600px){ .service-card{ flex:1 1 100%; max-width:100%; } }

/* ════════════════════════════════════════
   PORTFOLIO / GALLERY
════════════════════════════════════════ */
#portfolio { padding:120px 0 100px; background:#fff; }
#portfolio .section-title h2 { font-weight:900; }

.portfolio-item {
  margin:10px 0 6px; border-radius:18px; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,0.06); transition:all 0.40s var(--ease);
}
.portfolio-item:hover { box-shadow:0 16px 48px rgba(0,0,0,0.14); transform:translateY(-4px); }
.portfolio-item .hover-bg { border-radius:18px; overflow:hidden; display:block; }
.portfolio-item .hover-bg img { transition:transform 0.60s var(--ease); display:block; width:100%; }
.portfolio-item .hover-bg:hover img { transform:scale(1.08); }
.hover-bg .hover-text {
  background:linear-gradient(to top,rgba(0,12,0,0.75) 0%,rgba(0,0,0,0.05) 100%);
  padding:0 0 24px; display:flex; align-items:flex-end; justify-content:center;
}
#portfolio .col-md-4>a { display:block; margin-top:10px; padding:0 4px; }
#portfolio .col-md-4>a>p { font-size:13px; line-height:1.64; color:var(--muted); transition:color 0.2s ease; }
#portfolio .col-md-4>a:hover>p { color:var(--g); }

/* ════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════ */
#testimonials {
  background-size:cover;
  background-position:center;
  background-attachment:scroll !important;
}
#testimonials .overlay {
  padding:120px 0;
  background:linear-gradient(135deg,rgba(20,60,2,0.92) 0%,rgba(77,133,6,0.88) 100%) !important;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
#testimonials h2 { font-size:40px; font-weight:900; }
#testimonial .item img {
  border-radius:18px; box-shadow:0 12px 56px rgba(0,0,0,0.45);
  max-height:400px; object-fit:cover; margin:0 auto; display:block;
}
#testimonial p { font-size:15px; line-height:1.82; margin-top:22px; color:rgba(255,255,255,0.92); }

/* ════════════════════════════════════════
   CONTACT
════════════════════════════════════════ */
#contact { padding:120px 0 100px; background:var(--bg); }
#contact .contact-info {
  background:#fff; border-radius:28px;
  box-shadow:0 8px 48px rgba(0,0,0,0.10);
  padding:52px 16px; margin-bottom:40px;
  border:1px solid rgba(0,0,0,0.05);
  position:relative; overflow:hidden;
}
#contact .contact-info::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--gd),var(--g),var(--gl),var(--g),var(--gd));
}
#contact .contact-info>[class*="col-"] { padding:16px 44px; border-right:1px solid #f0f2f5; }
#contact .contact-info>[class*="col-"]:last-child { border-right:none; }
#contact h3 { font-size:10px; font-weight:800; letter-spacing:3px; color:var(--g); text-transform:uppercase; margin-bottom:16px; }
#contact hr { background:#edf0f4; width:100%; margin-left:0; height:1px; margin-bottom:20px; }
#contact .contact-item p { font-size:14.5px; line-height:1.82; }

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
#footer {
  background:var(--dark);
  padding:52px 0 28px;
  position:relative; border-top:0;
}
#footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--gd),var(--g),var(--gl),var(--g),var(--gd));
}
#footer .social { margin:16px 0 44px; }
#footer .social ul li { display:inline-block; margin:0 8px; }
#footer .social i.fa {
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:12px; font-size:18px;
  background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.50);
  border:1px solid rgba(255,255,255,0.08);
  transition:all 0.35s var(--bounce);
}
#footer .social i.fa:hover {
  background:var(--g); color:#fff;
  transform:translateY(-6px) scale(1.08);
  box-shadow:0 10px 32px rgba(106,175,8,0.45); border-color:transparent;
}
#footer p { color:rgba(255,255,255,0.32); font-size:13px; letter-spacing:0.4px; }

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media(max-width:1100px){
  .hero-stat-item{padding:0 24px;}
}
@media(max-width:992px){
  .intro h1{font-size:52px;letter-spacing:-2px;}
  h2{font-size:32px;}
  #services .col-md-3{margin:8px 0;}
  #contact .contact-info>[class*="col-"]{border-right:none;border-bottom:1px solid #f0f2f5;padding:24px 28px;}
  #contact .contact-info>[class*="col-"]:last-child{border-bottom:none;}
}
@media(max-width:768px){
  .intro h1{font-size:38px;letter-spacing:-1.5px;}
  .intro p{font-size:16px;}
h2{font-size:28px;}
  #about,#services,#portfolio,#testimonials,#contact{padding:88px 0 68px;}
  .hero-live-badge{font-size:10px;padding:7px 16px;}
}