:root {
  --brand: #f97316;   /* Orange */
  --brand-2: #f59e0b; /* Amber */
  --dark-text: #1f2937; 
  --light-bg: #f3f4f6; 
  --section-bg: #f7f6f3; 
  --section-bg-alt: #f2f2f0; 
  --footer-bg: #1a1a1a;
  --footer-text: #f9fafb;
}

html,body{scroll-behavior:smooth;}
body{font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color:var(--dark); background:#fffdf9;}

/* =============== NAVBAR (STICKY ON SCROLL, NOT OVERLAY) =============== */
.navbar{
  transition: box-shadow .25s ease, background .25s ease;
  background: #ffffffcc; /* slightly translucent for a modern feel */
  backdrop-filter: blur(8px);
}
.navbar.stuck{ box-shadow: 0 8px 22px rgba(15,23,42,.08); background:#fff; }
.navbar-brand{
  font-weight:800; letter-spacing:.5px; color:var(--dark);
}
.nav-link{
  position:relative; font-weight:600; color:var(--dark) !important; margin:0 .35rem;
}
.nav-link::after{
  content:""; position:absolute; left:50%; bottom:-6px; width:0; height:3px; background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border-radius:999px; transform:translateX(-50%); transition:width .25s ease;
}
.nav-link:hover{ color:var(--brand) !important; }
.nav-link:hover::after{ width:80%; }

/* =============== HERO SLIDER (BELOW NAV, WITH DOTS & ARROWS) =============== */
#hero{ position:relative; }
#hero .carousel-item{
  height: 85vh; min-height: 520px; background: #000 no-repeat center/cover;
}
#hero .carousel-item .overlay{
  position:absolute; inset:0; background:linear-gradient( to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55) );
}
#hero .caption{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  color:#fff; text-align:center; padding:0 1rem;
}
#hero h1{
  font-weight:800; font-size: clamp(2rem, 3.5vw + 1rem, 4rem);
  text-shadow:0 6px 24px rgba(0,0,0,.45);
}
#hero p.lead{
  max-width: 760px; margin: 0 auto 1.25rem; color:#f2f6ff;
}
.btn-brand{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border:none; 
  color:#1a1a1a; 
  font-weight:700; 
  padding:.85rem 1.85rem; 
  border-radius:999px;
  box-shadow: 0 10px 30px rgba(255, 122, 24, .35);
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.btn-brand:hover{ transform: translateY(-3px) scale(1.02); filter:brightness(1.05); box-shadow:0 16px 40px rgba(255, 122, 24, .45); }

/* carousel arrows & dots */
.carousel-control-prev-icon, .carousel-control-next-icon{ filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.carousel-indicators [data-bs-target]{
  width: 12px; height: 12px; border-radius:50%;
  background: #ffffffb3; transition: transform .2s ease, background .2s ease;
}
.carousel-indicators .active{ background: var(--brand-2); transform: scale(1.2); }

/* fun floating sticker */
.sticker{
  position:absolute; right: min(4vw, 48px); bottom: min(4vw, 48px);
  background:#fff; color:#111; border-radius:16px; padding:.6rem .9rem; font-weight:700;
  box-shadow:0 12px 28px rgba(0,0,0,.15); display:flex; gap:.5rem; align-items:center;
  transform: rotate(-2deg);
}

/* =============== SECTION DECOR =============== */
.wave-sep{
  display:block; width:100%; line-height:0; transform: translateY(1px);
}

/* =============== ABOUT =============== */
#about{ padding: 90px 0 70px; background:
  radial-gradient(1200px 1200px at -10% 10%, #fff1e6 0, transparent 60%),
  radial-gradient(900px 900px at 110% -10%, #fffbe6 0, transparent 50%)
;}
.about-img-wrap{
  position:relative; max-width:560px; margin-inline:auto;
}
.about-img-wrap::before{
  content:""; position:absolute; inset:-18px -18px 18px 18px; border-radius:28px;
  background: conic-gradient(from 180deg, var(--brand), var(--brand-2), var(--brand));
  filter: blur(24px); opacity:.25; z-index:0;
}
.about-card{
  position:relative; border-radius:28px; overflow:hidden; z-index:1;
  box-shadow: 0 20px 50px rgba(15,23,42,.18);
}
.about-card img{ width:100%; height:auto; display:block; }
.about-card .badge-chip{
  position:absolute; top:14px; left:14px; background:#ffffffea; border-radius:999px; padding:.4rem .75rem; font-weight:700; color:#111;
}

/* =============== FEATURES (3 BOXES) =============== */
#features{ padding: 30px 0 30px 0; }
.feature{
  background:#fff; border-radius:20px; padding:28px; height:100%;
  box-shadow: 0 14px 36px rgba(15,23,42,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature:hover{ transform: translateY(-6px); box-shadow: 0 22px 60px rgba(15,23,42,.12); }
.feature .f-icon{
  width:64px; height:64px; display:grid; place-items:center; border-radius:16px;
  background: radial-gradient(160px 120px at 30% 30%, #fff6ea, #fff);
  box-shadow: inset 0 -2px 10px rgba(0,0,0,.04), 0 10px 24px rgba(255, 122, 24, .14);
  color:var(--brand);
  font-size:28px;
}

/* =============== MISSION & VISION =============== */
#mv{
  padding: 90px 0; background: linear-gradient(135deg,#fffefc, #fffefc);
  position:relative; overflow:hidden;
}
#mv::after{
  content:""; position:absolute; inset:auto -10% -80px -10%;
  height:160px; background:url('https://raw.githubusercontent.com/abhishekrahar/waves-svg/main/waves/wave-10.svg') center/cover repeat-x;
  opacity:.35;
}
.mv-card{
  background:#fff; border-radius:20px; padding:28px; box-shadow:0 14px 36px rgba(15,23,42,.08);
  height:100%;
}

/* =============== SERVICES (single section + button) =============== */
#services{ padding: 90px 0; background:
  radial-gradient(1000px 900px at 0% 100%, #fff1f2 0, transparent 55%),
  radial-gradient(900px 900px at 100% 0%, #ecfeff 0, transparent 50%); }
.svc-card{
  background:#fff; border-radius:18px; padding:24px; height:100%;
  box-shadow: 0 10px 28px rgba(15,23,42,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.svc-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 50px rgba(15,23,42,.12); }
.svc-icon{
  width:56px; height:56px; border-radius:14px; display:grid; place-items:center;
  background: linear-gradient(145deg, #fff, #fff3e6);
  color: var(--brand); font-size:22px; margin-bottom:10px;
  box-shadow: 0 10px 22px rgba(255,122,24,.15);
}

/* =============== WHY CHOOSE US =============== */
#why{ 
  background: #fffefc;
  padding: 90px 0; 
}
.why-point{
  display:flex; gap:12px; align-items:flex-start; margin-bottom:14px;
}
.why-point i{
  color: var(--brand); background:#fff4e8; border-radius:10px; width:30px; height:30px; display:grid; place-items:center;
}


/* =============== FOOTER =============== */
footer{
  position:relative; color:#f3f4f6; background:#0b0f1a; 
  /* padding-top: 80px; */
}
.footer-wave{ display:block; width:100%; line-height:0; 
  /* transform: translateY(1px);  */
}
.footer-link{ color:#cbd5e1; text-decoration:none; }
.footer-link:hover{ color:#fff; text-decoration:underline; }
.social a{ color:#cbd5e1; font-size:1.1rem; margin-right:.7rem; }
.social a:hover{ color:var(--brand-2); }

/* small helpers */
.section-title{ font-weight:800; letter-spacing:.3px; }
.subtle{ color:var(--muted); }

body {
  background: var(--light-bg);
  color: var(--dark-text);
}

.section-light {
  background: var(--section-bg);
}

.section-alt {
  background: var(--section-bg-alt);
}

/* Footer */
footer {
  background: var(--footer-bg);
  color: var(--footer-text);
}

footer a {
  color: var(--brand-2);
}

footer a:hover {
  color: var(--brand);
}

.footer-head{
  color: var(--brand);
  font-weight: 700;
}

.list-unstyled li{
  font-size: 16px;
}

.nav-brand{
  font-size: 16px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.main-line{
  font-size: 20px !important;
  color: var(--brand);
}

.nav-link{
  position:relative; font-weight:600; color:var(--dark) !important;
}
.nav-link::after{
  content:""; position:absolute; left:50%; bottom:-6px; width:0; height:3px; background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border-radius:999px; transform:translateX(-50%); transition:width .25s ease;
}
.nav-link:hover{ color:var(--brand) !important; }
.nav-link:hover::after{ width:80%; }