/* ================================
   THEME TOKENS
================================ */
:root{
  --brand:#18a957;         /* main green */
  --brand-dark:#0f7e41;    /* darker hover green */
  --ink:#0f172a;           /* body text */
  --muted:#64748b;         /* muted text */
  --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* ================================
   BASE
================================ */
html{
  scroll-behavior: smooth;
}
body{
  margin:0;
  font-family:'Inter', sans-serif;
  color:var(--ink);
  line-height:1.65; /* Increased for better readability */
  -webkit-font-smoothing: antialiased; /* Smoother text on WebKit browsers */
  -moz-osx-font-smoothing: grayscale; /* Smoother text on Firefox */
  text-rendering: optimizeLegibility;
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
.container{ width:92%; max-width:1200px; margin:0 auto; }

/* Grid helpers */
.grid{ display:grid; gap:24px; }

/* --- Flexible Grid System --- */
/* Default to 1 column on mobile */
.grid-2, .grid-3 { grid-template-columns: 1fr; }

/* Auto-fit grid: creates as many columns as can fit with a min width of 320px */
.grid-autofit { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* Tablet and up */
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); } /* 2 columns for tablets */
}

/* Desktop and up */
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); } /* 3 columns for desktop */
}

/* ================================
   HEADER & NAV
================================ */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  /* A subtle border is cleaner than a heavy shadow for a sticky header */
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand{ display:flex; gap:10px; align-items:center; font-weight:700; }
.menu{ display:flex; gap:18px; align-items:center; }
.burger{ display:none; background:#eee; border-radius:8px; padding:.4rem .6rem; border:none; cursor:pointer; }

.menu a.is-active{
  color: var(--brand);
  font-weight: 700;
}

@media (max-width:860px){
  .menu{
    position:fixed; inset:60px 0 auto 0; background:#fff; box-shadow:var(--shadow);
    padding:16px;
    display:flex; /* Keep display:flex so children layout correctly when visible */
    flex-direction:column;
    opacity: 0; /* Start hidden */
    visibility: hidden; /* Prevent interaction when hidden */
    pointer-events: none; /* Prevent interaction when hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Add transition for fade */
  }
  .menu.open{ opacity:1; visibility:visible; pointer-events:auto; } /* Show when open */
  .burger{ display:block; }
  .burger .burger-icon-close { display: none; }
  .burger[aria-expanded="true"] .burger-icon-open { display: none; }
  .burger[aria-expanded="true"] .burger-icon-close { display: inline; }
  .burger-icon-close { font-size: 1.5rem; line-height: 1; }


}

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.8rem 1.1rem; border-radius:10px; border:1px solid #e5e7eb; font-weight:600; }
.btn:focus-visible{ outline:3px solid rgba(24,169,87,.35); outline-offset:2px; }
.btn-primary{ background:var(--brand); color:#fff; border-color:transparent; }
.btn-primary:hover{ background:var(--brand-dark); }
.btn-outline{ background:#fff; color:var(--ink); }
.btn-whatsapp{ background:#25D366; color:#fff; border-color:transparent; }

/* ================================
   HERO SLIDER
================================ */
.hero.slider{ position:relative; height:clamp(420px,70vh,720px); overflow:hidden; }
.hero .slide{
  position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.2)), var(--bg) top center/cover;
  opacity:0; transition:opacity .6s ease;
  display: grid; /* Use grid for easy centering */
  place-items: center; /* Center the hero-inner content */
}
.hero .slide.is-active{ opacity:1; z-index: 1; }
.hero .hero-inner{
  color:#fff; max-width:800px; width:90%; text-align:center;
  /* Remove absolute positioning as grid handles it now */
}
.hero .hero-inner h1{
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  font-weight: 900;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3); /* Improve text readability */
  /* Gradient text effect */
  background: linear-gradient(to right, #ffffff 50%, #a7f3d0); /* More prominent white to light green */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .hero-inner p {
  text-shadow: 0 1px 4px rgba(0,0,0,0.3); /* Improve text readability */
}
.hero .actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:20px; }
.hero .actions .btn { transition: background-color 0.2s ease, transform 0.2s ease; }
.hero .actions .btn:hover { transform: translateY(-2px); }

.hero .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.2); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  border:1px solid rgba(255,255,255,.4);
  border-radius:50%; width:44px; height:44px; cursor:pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.hero .nav:hover { background:rgba(255,255,255,.4); transform: translateY(-50%) scale(1.05); }
.hero .prev{ left:16px; } .hero .next{ right:16px; }

/* ================================
   CARDS / FORMS / TEXT
================================ */
.card{ border:1px solid #e5e7eb; border-radius:14px; padding:22px; background:#fff; box-shadow:var(--shadow); }
.page-section { padding: 40px 0; }

/* --- TYPOGRAPHY HIERARCHY --- */
h1, h2, h3, h4 {
  font-weight: 800; /* Bolder headings */
  line-height: 1.2;
  color: var(--ink);
  margin: 2.5rem 0 1rem; /* Consistent vertical rhythm */
}
h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 4vw, 2.5rem); }
h3 { font-size: 1.5rem; font-weight: 700; }
h4 { font-size: 1.2rem; font-weight: 700; }

p, ul, ol {
  margin-bottom: 1.25rem;
  max-width: 75ch; /* Optimal line length for reading */
}

/* --- END TYPOGRAPHY --- */
.page-section { padding: 40px 0; }

/* Font-family helpers */
.font-inter { font-family: 'Inter', sans-serif; }

/* Service Cards */
.svc {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.svc:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,.1);
}
.svc h3 { margin: 16px 0 8px; }
.svc ul { padding-left: 20px; margin: 0 0 16px; color: var(--muted); }
.svc .btn {
  margin-top: auto; /* Pushes button to the bottom */
  align-self: flex-start; /* Aligns button to the left */
}

/* Service Card Image Figure */
.service-hero{ margin:0; }
.service-hero img{
  width:100%; height:180px; object-fit:cover; border-radius:12px;
  box-shadow: var(--shadow);
}
/* About Page Hero */
.about-hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/about-hero.jpg');
    background-size: cover;
    background-position: center;
}

/* Team Slider scrollbar */
.slider-container::-webkit-scrollbar {
    display: none;
}
.slider-container {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Team Card Styles */
.team-card {
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow: hidden;
    width: 320px;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.team-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.team-card-img {
    width: 100%;
    height: 350px;
    object-fit: cover;
}
.team-card-body {
    padding: 20px;
    text-align: center;
}
.team-card-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 4px;
}
.team-card-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--brand);
    display: block;
    margin-bottom: 16px;
}
.team-card-bio {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, margin-top 0.5s ease-out;
    font-size: 0.9rem;
    color: var(--muted);
    line-height: 1.6;
    text-align: left;
}
.team-card.is-expanded .team-card-bio {
    max-height: 500px; /* Large enough to fit content */
    margin-top: 16px;
}
.team-card-read-more {
    background: none;
    border: none;
    color: var(--brand-dark);
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0 0;
    margin-top: 8px;
    font-size: 0.9rem;
}
/* Team Slider Enhancements */
.team-slider-wrapper {
    position: relative;
}
.slider-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #e5e7eb;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    color: #374151; /* gray-700 */
}
.slider-nav-arrow:hover {
    background-color: #fff;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    color: var(--brand);
}
.slider-nav-arrow.prev { left: -22px; }
.slider-nav-arrow.next { right: -22px; }

/* Hide arrows on smaller screens where swiping is natural */
@media (max-width: 1023px) {
    .slider-nav-arrow { display: none; }
}

/* ================================
   ON-SCROLL ANIMATIONS
================================ */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Default state for elements that will be animated */
.animate-on-scroll {
  opacity: 0;
}

/* When element becomes visible, apply the animation */
.animate-on-scroll.is-visible.anim-fade-up {
  animation: fade-up 0.8s ease-out forwards;
}
.animate-on-scroll.is-visible.anim-fade-in {
  animation: fade-in 0.8s ease-out forwards;
}
/* text-field styles — do NOT hit checkboxes/radios */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea{
  width:100%;
  padding:12px;
  border-radius:10px;
  border:1px solid #e5e7eb;
}
input:focus, select:focus, textarea:focus{
  outline: none; /* Explicitly remove default outline */
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(24,169,87,.25); /* Custom focus ring */
}

/* ================================
   QUICK ACTIONS: COLLAPSIBLE GREEN DOCK
   (WhatsApp • Call • Enquire • Calculator)
================================ */
.rail-dock{
  position:fixed; right:14px; top:50%; transform:translateY(-50%);
  z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.rail-toggle{
  width:56px; height:56px; border:0; border-radius:12px;
  background:var(--brand); box-shadow:0 10px 24px rgba(0,0,0,.18);
  display:grid; place-items:center; cursor:pointer;
  transition:background .15s ease, transform .15s ease;
}
.rail-toggle:hover{ background:var(--brand-dark); transform:translateX(-1px); }
.rail-toggle svg{ width:26px; height:26px; fill:#fff; }

/* panel (hidden by default) */
.rail-list{
  list-style:none; margin:0; padding:10px; border-radius:14px;
  background:#fff; border:1px solid #e5e7eb; box-shadow:0 12px 30px rgba(0,0,0,.12);
  display:grid; gap:10px;
  transform:translateX(10px); opacity:0; pointer-events:none;
  transition:transform .18s ease, opacity .18s ease;
}
/* reveal on hover (desktop) or when toggled (mobile) */
.rail-dock:hover .rail-list,
.rail-dock.open .rail-list{ transform:translateX(0); opacity:1; pointer-events:auto; }

/* buttons inside panel */
.rail-btn{
  width:56px; height:56px; border:0; border-radius:10px;
  display:grid; place-items:center; cursor:pointer;
  background:var(--brand); color:#fff;
  transition:transform .15s ease, filter .15s ease, background .15s ease;
}
.rail-btn:hover{ transform:translateX(-2px); background:var(--brand-dark); }
.rail-btn svg{ width:26px; height:26px; }

/* WhatsApp distinct green */
.rail-wa{ background:#25D366; } .rail-wa:hover{ background:#1fb45a; }

/* staggered appearance */
.rail-list .rail-btn{ opacity:0; transform:translateX(8px); transition:transform .22s ease, opacity .22s ease; }
.rail-dock:hover .rail-list .rail-btn,
.rail-dock.open  .rail-list .rail-btn{ opacity:1; transform:translateX(0); }
.rail-list .rail-btn:nth-child(1){ transition-delay:.02s; }
.rail-list .rail-btn:nth-child(2){ transition-delay:.06s; }
.rail-list .rail-btn:nth-child(3){ transition-delay:.10s; }
.rail-list .rail-btn:nth-child(4){ transition-delay:.14s; }

/* mobile position + sizing */
@media (max-width:860px){
  .rail-dock{ right:10px; top:auto; bottom:90px; transform:none; }
  .rail-toggle, .rail-btn{ width:52px; height:52px; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .rail-list, .rail-btn{ transition:none !important; }
}

/* Hard kill any legacy floating calc or old rails */
.floating-calc, .action-rail{ display:none !important; }

/* ================================
   FOOTER (GREEN THEME, HIGH CONTRAST)
   Use in HTML: <footer class="site-footer">…</footer>
================================ */
.site-footer{
  background:#0f7e41;           /* darker green for contrast */
  color:#f1f5f9;                /* light text */
  margin-top:60px;
  box-shadow:0 -10px 30px rgba(0,0,0,.08) inset;
}
.site-footer a{ color:#ffffff; transition:color .2s ease; }
.site-footer a:hover{
  /* This lighter green has better contrast (AA rating) on the dark background */
  color:#d1fae5;
}

.footer-top{ padding:40px 0; }
.site-footer h4{ color:#fff; margin:0 0 14px; font-size:1.15rem; font-weight:700; }

.ft-col{ min-width:0; }
.ft-row{ display:flex; gap:10px; align-items:flex-start; margin:8px 0; line-height:1.6; }
.ft-row svg{ width:18px; height:18px; fill:#ffffff; opacity:.9; margin-top:4px; }

.ft-socials{ display:flex; gap:10px; margin-top:10px; }
.ft-socials a{
  display:inline-grid; place-items:center; width:34px; height:34px;
  border:1px solid rgba(255,255,255,.6); border-radius:50%; font-weight:600; color:#ffffff;
}
.ft-socials a:hover{ background:#ffffff; color:#0f7e41; border-color:#ffffff; }

.ft-links{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.ft-links li a{ position:relative; padding-left:18px; }
.ft-links li a::before{ content:"›"; position:absolute; left:0; top:0; color:#d1fae5; }

/* bottom bar */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.3);
  background:#0d6935;           /* even darker strip */
  color:#e2e8f0;
  padding:12px 0; font-size:.95rem;
}
.footer-bottom .container{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between;
}
.footer-bottom a{ color:#ffffff; font-weight:600; }
.footer-bottom a:hover{ color:#d1fae5; }

@media (max-width:980px){
  .footer-top.grid{ grid-template-columns:1fr; } /* stack columns on mobile */
}
/* Two-column footer layout (balanced) */
.footer-grid{
  grid-template-columns: 1.3fr 1fr;   /* address a bit wider than links */
  align-items: start;
  gap: 28px;
}

/* On tablets, make them equal columns */
@media (min-width: 768px) and (max-width: 1023px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}

/* On phones, stack */
@media (max-width: 767px){
  .footer-grid{ grid-template-columns: 1fr; gap: 40px; }
}

/* Optional: make Quick Links into two slim columns on large screens */
@media (min-width: 1100px){
  .ft-links{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
  }
}
.ft-row{ margin: 6px 0; }
/* --- Clean copyright strip --- */
.footer-bottom{
  background:#0d6935;               /* dark green strip */
  border-top:1px solid rgba(255,255,255,.25);
  padding:12px 0;
}

.footer-bottom .container{
  /* kill any accidental card-like styles */
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;

  /* layout */
  display:flex;
  justify-content:center;           /* center the text */
  align-items:center;
  gap:12px;                         /* spacing around the dot */
  padding:0;                        /* no extra padding box */
}

/* copyright text + links */
.footer-bottom,
.footer-bottom a{
  color:#eaf6ee;                    /* readable on dark green */
  font-weight:500;
}

/* optional smaller text */
.footer-bottom{ font-size:.95rem; }

/* if you want left-aligned on wide screens instead of centered */
@media (min-width: 1100px){
  .footer-bottom .container{ justify-content:space-between; }
}
/* Add space on mobile to prevent fixed docks from overlapping footer content */
@media (max-width: 860px) {
  .site-footer { padding-bottom: 150px; }
}


@media (max-width:860px){
  .service-hero img{ height:160px; }
}
/* --- FORCE real checkbox, not a text field --- */
label.consent input[type="checkbox"],
.card input[type="checkbox"],
input[type="checkbox"]{
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  appearance: checkbox !important;

  width:18px !important;
  height:18px !important;
  padding:0 !important;
  border:none !important;
  background:none !important;
  box-shadow:none !important;

  display:inline-block !important;
  vertical-align:middle !important;
  margin: 3px 6px 0 0 !important;

  /* optional: green tick color in modern browsers */
  accent-color: var(--brand) !important;
}

/* ================================
   PROJECTS PAGE STYLES
================================ */
.project-card {
  display: flex;
  flex-direction: column;
}
.project-card img {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.project-card h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 16px;
}
.project-card strong { font-weight: 600; color: var(--muted); }
.project-card .mt-auto { border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 20px; }
.project-card .italic {
  font-style: normal;
  color: #374151;
  font-size: 0.95rem;
  line-height: 1.6;
}
.project-card .text-right { font-weight: 600; color: var(--brand); }

/* ================================
   ABOUT PAGE: CORE VALUES
================================ */
.value-card {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.value-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  margin-bottom: 16px;
}
.project-card .text-right { font-weight: 600; color: var(--brand); }