:root{
  --emerald-900:#0b1e16;
  --emerald-850:#10271c;
  --emerald-800:#173b28;
  --emerald-700:#1f3a2e;
  --emerald-600:#2a4a3a;
  --emerald-500:#4B7766;
  --jade-400:#3b5f50;
  --ivory:#FFF4CA;
  --ivory-soft:#f7f6ea;
  --gold:#ffcc00;
  --gold-400:#E4C25A;
  --ink:#0f1115;
  --muted:#cfe3d9;
}

/* 1. Fluid Root Font Size */
html {
  font-size: clamp(0.875rem, 1.2vw + 0.5rem, 1.125rem); /* 14px to 18px */
  line-height: 1.5;
}

/* 2. Global Body Styling */
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--neutral-dark, #333);
  margin: 0;
  padding: 0;
  font-size: 1rem;
  background-color: #f9f9f9;
}

/* 3. Typography Scale */
:root {
  --scale-ratio: 1.25;
}

h1 { font-size: calc(1rem * var(--scale-ratio) * var(--scale-ratio) * var(--scale-ratio)); }
h2 { font-size: calc(1rem * var(--scale-ratio) * var(--scale-ratio)); }
h3 { font-size: calc(1rem * var(--scale-ratio)); }
h4 { font-size: 1rem; }
h5 { font-size: calc(1rem / var(--scale-ratio)); }
h6 { font-size: calc(1rem / var(--scale-ratio) / var(--scale-ratio)); }

p, li {
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* 4. Utility Font Sizes */
.text-sm  { font-size: 0.875rem; }
.text-base{ font-size: 1rem; }
.text-lg  { font-size: 1.125rem; }
.text-xl  { font-size: 1.25rem; }

/* 5. Media Queries */
@media (min-width: 48em) {
  html {
    font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
  }
}

/* HEADER */
header {
  background-color: var(--primary-bg, #4B7766);
  background-image: linear-gradient(135deg, var(--primary-bg, #4B7766), var(--light-variant, #BFD8BD));
  color: var(--primary-text, #FFF);
}

/* NAVBAR */
.glass-navbar {
  background: rgba(75, 119, 102, 0.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(75, 119, 102, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
}

.navbar-brand,
.nav-link {
  color: #cfe3d9 !important;
  font-weight: 500;
  font-size: 1rem;
}

.nav-link:hover {
  color: #FFF4CA !important;
  background-color: rgba(255, 244, 202, 0.2);
  border-radius: 8px;
}

.navbar-toggler {
  background-color: rgba(255, 244, 202, 0.4);
  border: none;
}

.navbar-toggler:focus {
  box-shadow: none;
}

.brand-name {
    color: #ffcc00;
    font-family: "DM Serif Text", serif;
  font-weight: 900;
  font-style: italic;
}



/* ============================
   HERO SECTION
   ============================ */
/* HERO SECTION */
.hero {
  width: 100%;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: 
    linear-gradient(120deg, rgba(11,30,22,0.92), rgba(11,30,22,0.97)),
   url('cool-background11.png') center/cover no-repeat;
  padding: 20px;
  
  background:
    linear-gradient(120deg, rgba(11,30,22,.88), rgba(11,30,22,.94)),
    url('https://www.transparenttextures.com/patterns/fabric-of-squares.png'),
    url('cool-background11.png'); /* your existing bg if present */
  background-size: cover, 600px 600px, cover;
  background-position: center, center, center;
  background-blend-mode: overlay, soft-light, normal;
  
  background:
    linear-gradient(120deg, rgba(11,30,22,.88), rgba(11,30,22,.94)),
    url('https://www.transparenttextures.com/patterns/fabric-of-squares.png'),
    url('cool-background11.png'); /* your existing bg if present */
  background-size: cover, 600px 600px, cover;
  background-position: center, center, center;
  background-blend-mode: overlay, soft-light, normal;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 10px;
}

.hero p {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: 10px;
  max-width: 700px;
}

#started-btn {
  background-color: #4B7766;
  color: #FFF4CA;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 20px;
}

#started-btn:hover {
  background-color: #3b5f50;
}


/* === MEDIA QUERIES FOR HERO === */
@media (max-width: 768px) {
  .hero {
    padding: 3rem 1rem;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .hero p {
    font-size: 1.2rem;
  }

  .feature {
    flex-direction: column;
    align-items: center;
  }
}




/* ============================
   FEATURE SECTION
   ============================ */

/* FEATURE grid (your flip cards) — refined */
h4{
    color: #f3d55b;
}
.feature{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2rem;
  padding: 4.5rem 2rem;
  background: var(--emerald-800);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.image-wrapper{ width:100%; max-width:640px; margin:0 auto 1.25rem }
.responsive-img{
  width:100%; height:auto; object-fit:contain; border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.flip-card{ perspective:1000px; max-width:320px; flex: 1 1 280px; position:relative }
.flip-card__inner{ width:100%; height:260px; transform-style:preserve-3d; transition: transform .75s cubic-bezier(.2,.8,.2,1) }
.flip-card:hover .flip-card__inner{ transform: rotateY(180deg) }
.flip-card__face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:16px; padding:1.25rem;
  display:flex; flex-direction:column; justify-content:center; text-align:left;
  box-shadow:0 10px 28px rgba(0,0,0,.25);
}
.flip-card__face--front{
  background: linear-gradient(135deg, var(--emerald-600), var(--gold-400));
  color:#fff;
}
.flip-card__face--back{
  background:#fdfcf7; color:var(--emerald-700); transform: rotateY(180deg);
}
.flip-card:hover::before{
  content:""; position:absolute; inset:-6px; border-radius:22px;
  background: linear-gradient(135deg, var(--gold), #ffffff44);
  filter: blur(10px); opacity:.55; z-index:-1; animation:pulse 1.6s infinite;
}
@keyframes pulse{ 0%{transform:scale(.98); opacity:.35} 50%{transform:scale(1.02); opacity:.9} 100%{transform:scale(.98); opacity:.35} }



/* ============================
   FEATURE SECTION for MOBILE ONLY (≤ 600px): TWO CARDS PER ROW WITH SIDE PADDING
   ============================ */
@media (max-width: 600px) {
  /* 1) Prevent horizontal scroll entirely */
  html, body {
    overflow-x: hidden !important;
    margin: 0;
    padding: 0;
  }

  /* 2) .feature → 2-column grid + 1rem padding around */
  .feature {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;           /* 1rem gap between cards */
    padding: 1rem !important;       /* 1rem padding on all sides */
    margin: 0 auto !important;
    box-sizing: border-box !important;
    background: #046C4E !important;
    width: 100vw !important;
    max-width: 100% !important;
  }

  /* 3) Image should span both columns but respect padding */
  .image-wrapper {
    grid-column: 1 / -1 !important; 
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 1rem 0 !important;   /* bottom margin to separate from cards */
    padding: 0 !important;           /* no extra side padding inside */
    box-sizing: border-box !important;
    display: block !important;
  }
  .responsive-img {
    width: 100% !important;
    max-height: 180px !important;    /* reduced height so cards don’t push too far */
    object-fit: contain !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
  }

  /* 4) Each .flip-card fills one grid cell exactly (50% of container minus 1rem gaps) */
  .flip-card {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    perspective: 1000px !important;
    grid-column: auto !important;
  }

  /* 5) Shorten card height to fit two rows comfortably */
  .flip-card__inner {
    height: 150px !important;        /* further shrink */
    transition: transform 0.6s ease !important;
  }

  /* 6) Reduce internal padding and font sizes inside each face */
  .flip-card__face {
    padding: 0.5rem !important;      /* smaller padding */
  }
  .flip-card__face--front h4 {
    font-size: 1rem !important;      /* shrink the headline */
    margin-bottom: 0.25rem !important;
  }
  .flip-card__face--front p {
    font-size: 0.8rem !important;     /* smaller subtext */
    line-height: 1.3 !important;
    margin: 0;
  }
  .flip-card__face--back {
    font-size: 0.8rem !important;     /* smaller back text */
  }
  .flip-card__face--back li {
    margin-bottom: 0.3rem !important;
    padding-left: 0.7rem !important;  /* slight indent */
    line-height: 1.3 !important;
  }
  .flip-card__face--back li::before {
    content: '✔' !important;
    color: #CBB26A;
    position: absolute;
    left: 0 !important;
    font-size: 0.75rem !important;   /* smaller checkmark */
  }
}



/* === Portfolio One-Side Layout === */
/* ==============================
   Portfolio Section Styles
   ============================== */

/* 1. Section wrapper with reduced vertical padding */
.portfolio-section {
  background-color: #264736;
  padding: 2rem 1rem; /* reduced from 3rem to 2rem */
}

/* 2. Constrain container width and center */
.portfolio-section .container {
  max-width: 1000px;   /* tightened from 1100px to 1000px */
  margin: 0 auto;
  padding: 0 1rem;
}

/* 3. Heading styles */
.portfolio-heading {
  font-size: 2.5rem;
  color: #198754;
  font-weight: 700;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .portfolio-heading {
    text-align: center;
    font-size: 2rem;
  }
}

/* 4. Subtext below heading */
.portfolio-subtext {
  font-size: 1.125rem;
  color: #f4e8b8;
  line-height: 1.6;
}
@media (max-width: 768px) {
  .portfolio-subtext {
    text-align: center;
  }
}

/* 5. Project grid centering (for cards not to stretch too wide) */
.portfolio-section .row.justify-content-center > .col-sm-6 {
  max-width: 450px; /* each card column won’t exceed 450px */
}

/* 6. Project card container */
.project-card {
  background-color: whitesmoke;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  max-height: 320px; /* cap overall card height */
}

/* 7. Hover lift effect */
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* 8. Project image with tighter height cap */
.project-img {
  width: 100%;
  max-height: 140px;  /* reduced from 200px to 140px */
  object-fit: cover;
  border-radius: 15px 15px 0 0;
}

/* 9. Project content area with reduced padding */
.project-content {
  padding: 0.75rem; /* reduced from 1.5rem to 0.75rem */
  flex: 1 0 auto;   /* allow content area to adjust within limited height */
  overflow: hidden; /* hide overflow text */
}

/* 10. Title within each card */
.project-title {
  font-size: 1.3rem;  /* reduced from 1.5rem */
  color: #046C4E;
  margin-bottom: 0.5rem; /* reduced bottom margin */
  font-weight: 600;
}

/* 11. Description text within each card */
.project-description {
  font-size: 0.9rem;  /* reduced from 1rem */
  color: #4D5C59;
  margin-bottom: 0.75rem; /* reduced bottom margin */
  line-height: 1.4;
}

/* 12. “View Project” button with smaller padding */
.btn-explore {
  background-color: #CBB26A;
  color: #1e1d21;
  padding: 0.4rem 1rem; /* reduced from 0.6rem 1.25rem */
  font-size: 0.9rem;    /* reduced from 1rem */
  font-weight: 500;
  border-radius: 20px;  /* slightly smaller radius */
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-explore:hover {
  background-color: #A38B53;
  color: #ffffff;
}

/* 13. Responsive adjustments */
@media (max-width: 768px) {
  /* Remove card max-height on mobile so they flow naturally */
  .project-card {
    max-height: none;
  }
  /* Further reduce image height */
  .project-img {
    max-height: 120px;
  }
  /* Further shrink text size */
  .project-title {
    font-size: 1.2rem;
  }
  .project-description {
    font-size: 0.85rem;
  }
  .btn-explore {
    font-size: 0.85rem;
    padding: 0.35rem 0.9rem;
  }
}




/* ===== FAQ Section (Emerald Royal Classic) ===== */
.faq-section {
  background: linear-gradient(135deg, #0b1e16 0%, #173b28 80%);
  color: #dce8e0;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.faq-section .accordion-item {
  background-color: rgba(255,255,255,0.05);
  border: none;
  border-radius: 10px;
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.faq-section .accordion-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.faq-section .accordion-button {
  background-color: rgba(75,119,102,0.2);
  color: #fff4ca;
  font-weight: 600;
  font-family: 'Montserrat Alternates', sans-serif;
  letter-spacing: 0.3px;
}
.faq-section .accordion-button:not(.collapsed) {
  background: linear-gradient(135deg, #4b7766, #cbb26a);
  color: #fff;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.1);
}
.faq-section .accordion-body {
  background-color: rgba(255,255,255,0.05);
  color: #e9f3ee;
  line-height: 1.6;
  font-size: 0.95rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
@media (max-width: 768px) {
  .faq-section .accordion-button {
    font-size: 0.95rem;
  }
  .faq-section .accordion-body {
    font-size: 0.85rem;
  }
}

/* FAQ Button — TheVB24 Luxury Style */
.btn-faq {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background: linear-gradient(135deg, #cbb26a, #ffcc00);
  color: #0b1e16;
  font-weight: 700;
  font-family: 'Montserrat Alternates', sans-serif;
  letter-spacing: 0.5px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(203,178,106,0.4);
  transition: all 0.3s ease;
}
.btn-faq:hover {
  background: linear-gradient(135deg, #ffcc00, #cbb26a);
  color: #0f1115;
  transform: translateY(-3px);
  box-shadow: 0 6px 25px rgba(255,204,0,0.6);
}






/* ================================
   Pricing Section (TheVB24 Theme)
   ================================ */
#pricing {
  background: #4B7766; /* Your signature green */
  padding: 5rem 0;
}
#pricing .section-title {
  color: #FFF4CA; /* Ivory */
  font-family: 'Montserrat Alternates', sans-serif;
}

/* Cards sit side by side on desktop, full width on mobile */
#pricing .row {
  display: flex;
  flex-wrap: wrap;
  gap: 2%;
  justify-content: center;
}
#pricing .row > .col-md-6 {
  flex: 0 0 48%;
  max-width: 48%;
}
@media (max-width: 767px) {
  #pricing .row > .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Card Styling */
.pricing-card {
  background: #FFF4CA; /* Ivory cards */
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  max-width: 90%; /* fixed width for cards */
  margin: 1rem auto; /* center cards with margin */
}
.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.pricing-card .card-header {
  padding: 2rem 1rem 1rem;
  text-align: center;
}
.pricing-card h3 {
  font-family: 'Montserrat Alternates', sans-serif;
  color: #4B7766; /* green title */
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.pricing-card .price {
  font-family: 'DM Serif Text', serif;
  font-style: italic;
  font-size: 2rem;
  color: #CBB26A; /* gold accent */
  margin: 0.5rem 0;
}


/* Feature list */
.features-list {
  list-style: none;
  padding: 0 1.5rem;
  margin: 1rem 0;
}
.features-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
  color: #4B7766; /* green text */
  font-weight: 500;
}
.features-list li::before {
  content: "✔";
  position: absolute;
  left: 0;
  color: #CBB26A;
}

/* Custom‐pricing note */
.features-list li em {
  display: block;
  color: #6E7D7A;
  font-style: italic;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* Buttons */
.btn-pricing {
  display: inline-block;
  background: #4B7766; /* green */
  color: #FFF4CA !important; /* ivory */
  padding: 0.6rem 1.5rem;
  border-radius: 25px;
  font-family: 'Montserrat Alternates', sans-serif;
  font-weight: 700;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.btn-pricing:hover {
  background: #3f6455;
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(203,178,106,0.7), /* gold glow */
              0 8px 16px rgba(0,0,0,0.2);       /* soft lift */
}
.btn-pricing.btn-highlight {
  background: #CBB26A; /* gold */
  color: #1E1D21 !important;
}
.btn-pricing.btn-highlight:hover {
  background: #A38B53;
}

/* Footer note */
#pricing p.small {
  color: #FFF4CA;
  margin-top: 1.5rem;
}
/* 2) Remove underline on the custom plan link */
#pricing p.small a {
  text-decoration: none !important;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.2s ease;
}

#pricing p.small a:hover {
  border-color: #FFF4CA; /* ivory dash underline on hover */
}


/* ─────────────────────────────────────
   Mobile Adjustments for Pricing (≤ 767px)
   ───────────────────────────────────── */
@media (max-width: 767px) {
  #pricing {
    padding: 3rem 0;         /* less vertical space */
  }

  /* Cards stack full width with a bit of margin */
  #pricing .row {
    gap: 1rem;               /* tighter gutter */
  }
  #pricing .row > .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Shrink card padding & box size */
  .pricing-card {
    margin: 0 auto;
    max-width: 90%;          /* card only occupies 90% of screen */
    box-shadow: 0 6px 16px rgba(0,0,0,0.1);
  }
  .pricing-card .card-header {
    padding: 1.5rem 1rem 0.75rem;
  }

  /* Tighter list & font sizes */
  .features-list {
    padding: 0 1rem;
    margin: 0.75rem 0;
  }
  .features-list li {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    padding-left: 1.25rem;
  }
  .features-list li em {
    font-size: 0.85rem;
    margin-top: 0.25rem;
  }

  /* Price & headings scale down */
  .pricing-card h3 {
    font-size: 1.25rem;
  }
  .pricing-card .price {
    font-size: 1.75rem;
  }

  /* Button size */
  .btn-pricing {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
  }

  /* Footer note */
  #pricing p.small {
    font-size: 0.85rem;
  }
}


.luxe-footer {
  background: #0d1412;
  color: #cfe3d9;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.luxe-footer h6, .luxe-footer h5 {
  color: #ffcc00;
}
.luxe-footer a {
  transition: opacity 0.3s ease, color 0.3s ease;
}
.luxe-footer a:hover {
  color: #ff8c00 !important;
  opacity: 1 !important;
}
.luxe-footer .hover-opacity-100:hover {
  opacity: 1 !important;
}
@media (max-width: 768px) {
  .luxe-footer img {
    width: 35% !important;
    margin: 0 auto 10px !important;
    display: block;
  }
  .luxe-footer .col-md-4, 
  .luxe-footer .col-md-2 {
    text-align: center;
  }
}