/* styles.css
   Pixel-focused recreation of top nav + hero from the PDF screenshot you uploaded.
   - Inter font (Google)
   - Icon placeholders left empty (replace <svg> or CSS shapes with your SVGs)
   - Responsive + accessible burger menu
   Comments mark important parts to adjust if needed.
*/
@import url('https://fonts.cdnfonts.com/css/campton');

/* Variables */
:root {
    --design-width: 1440px;
    --bg: #fFFFFF;
    --card-bg: #fafafa;
    --pill-bg: #e8f5ea;
    /* soft green pill behind label */
    --green: #109b4a;
    /* brand green */
    --green-dark: #4F4F4F;
    --muted: #6b6b6b;
    --white: #ffffff;
    --radius-lg: 42px;
    --radius-md: 18px;
    --shadow-1: 0 20px 48px rgba(10, 10, 10, 0.06);
    --shadow-2: 0 10px 24px rgba(12, 12, 12, 0.05);
    --ease: cubic-bezier(.2, .9, .22, 1);
}

/* Base */
* {
    box-sizing: border-box
}

html,
body {
    height: 100%;
    margin: 0;
    /*font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;*/
    font-family: 'Campton', sans-serif;
}

body {
    background: var(--bg);
    color: #0b0b0b;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased
}
main{
    /*background: #F6F6F6;*/
}

/* ==========================
   TOP NAV
   ========================== */
.top-nav {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--design-width) - 10px);
    max-width: calc(100% - 48px);
    border-radius: 50px;
    padding: 14px 18px;
    z-index: 120;
    background-color: #f6f6f6;
}

.top-nav-inner {
    max-width: var(--design-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

/* Brand left */
.brand {
    display: flex;
    align-items: center;
    gap: 12px
}

.brand-mark {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04)
}
.brd{
    display: block;
}
.muted{
    color: #6b6b6b;
}

.brand-name {
    font-weight: 800;
    color: var(--green);
    letter-spacing: 1px;
    font-size: 18px
}

/* Center nav */
.main-nav ul {
    display: flex;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0
}

.main-nav a {
    font-weight: 600;
    color: var(--green-dark);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 0.6px
}
.main-nav a.focus{
    color: var(--green) !important;
}

.nav-arrow {
    color: var(--green-dark);
    opacity: 0.85;
    margin-left: 6px
}

/* Right actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 12px
}

.btn-login {
    background: var(--green);
    color: white;
    padding: 10px 22px;
    border-radius: 28px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(27, 85, 46, 0.12)
}

/* Burger (hidden on desktop) */
.burger {
    display: none;
    background: transparent;
    border: 0;
    padding: 8px;
    border-radius: 8px;
    cursor: pointer
}

.burger .bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #0b0b0b;
    margin: 4px 0;
    border-radius: 2px;
    transition: transform .22s var(--ease), opacity .18s var(--ease)
}

/* mobile menu */
.mobile-menu {
    max-width: calc(var(--design-width) - 240px);
    margin: 8px auto 0;
    background: white;
    border-radius: 14px;
    padding: 12px;
    box-shadow: var(--shadow-2)
}

.mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.mobile-menu a {
    display: block;
    padding: 8px 12px;
    color: #111;
    text-decoration: none;
    border-radius: 8px
}

/* ==========================
   HERO FRAME (rounded large container)
   ========================== */
.hero-section {
    padding-top: 110px;
     height: 90vh; /* full viewport height */
   /* FIX: full background settings */
    background-image: url('../images/bg2.png');
    background-size: cover;
    background-position: center 110px;
    background-repeat: no-repeat;

    /* Optional: if you WANT full width, remove the max-width */
    width: 100%;
    max-width: 100%; /* ← ensure background spans entire screen */

    margin: 0 auto;
}
/* Hero Section Full Screen */

/* leave space for fixed nav */
.hero-frame {
    /* this large rounded container with vertical rails simulates the screenshot background */
    max-width: var(--design-width);
    margin: 0 auto;
    padding: 56px 40px 120px;
    /*background: linear-gradient(180deg, #f9faf9, #f4f5f4); */
    border-radius: 28px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.02) inset;
    position: relative;
    overflow: visible;
    /*border:8px solid #FFF;*/
}

/* content layout: two-column (left content, right spacer) */
.hero-content {
    display: grid;
    /*grid-template-columns: 1fr 420px;*/
    gap: 32px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto
}

/* LEFT content card (visually centered within frame) */
.hero-left {
    padding: 18px 10px;
    background: transparent;
    text-align: center;
    margin-top: 10px
}

/* small label pill centered above heading */
.label-pill {
    display: inline-block;
    background: var(--pill-bg);
    color: #0f4427;
    padding: 8px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 22px
}

/* Main title: heavy, uppercase, two-line as in screenshot */
.hero-heading {
    font-size: 54px;
    line-height: 1.02;
    margin: 0 0 18px;
    color: var(--green-dark);
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    /* Tight responsive clamp for very small screens */
}

/* descriptive paragraph under heading */
.hero-desc {
    max-width: 720px;
    margin: 0 auto 28px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7
}

/* email pill input with CTA button on right inside same pill */
.input-pill {
    width: 720px;
    max-width: 100%;
    height: 56px;
    border-radius: 999px;
    background: var(--white);
    display: flex;
    align-items: center;
    padding: 8px;
    box-shadow: 0 10px 26px rgba(12, 12, 12, 0.05);
    margin: 0 auto;
}

.input-pill input {
    border: 0;
    outline: none;
    padding: 12px 18px;
    font-size: 15px;
    flex: 1;
    border-radius: 999px;
    background: transparent;
}

.cta-btn {
    background: var(--green);
    color: white;
    padding: 12px 24px;
    border-radius: 999px;
    border: none;
    font-weight: 700;
    margin-right: 6px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(27, 85, 46, 0.12);
}

/* Right spacer column (keeps hero centered visually like screenshot) */
.hero-right-spacer {}

/* ==========================
   Floating cards (bottom-left + bottom-right)
   ========================== */
.floating-card {
    position: absolute;
    width: 320px;
    background: var(--white);
    border-radius: 14px;
    padding: 14px;
    box-shadow: var(--shadow-2);
    transform: translateY(18px);
}

/* left one: positioned with reference to frame */
.floating-left {
    left: 48px;

}

.floating-right {
    right: 48px;
}

/* card interior */
.card-title {
    font-weight: 700;
    color: #111;
    font-size: 15px
}

.card-sub {
    font-size: 13px;
    color: var(--muted);
    margin-top: 6px
}

.card-avatars {
    display: flex;
    gap: 8px;
    margin-top: 12px
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #e6f0e9);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05)
}

/* mini chart */
.mini-chart {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    margin-top: 10px;
    height: 56px
}

.mini-chart span {
    width: 18px;
    background: var(--green);
    border-radius: 6px;
    display: inline-block
}

.chart-foot {
    font-size: 12px;
    color: var(--muted);
    margin-top: 10px
}

/* subtle float animation for interest */
@keyframes floaty {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-8px)
    }

    100% {
        transform: translateY(0)
    }
}

.floating-card {
    animation: floaty 6s var(--ease) infinite
}

/* ==========================
   Accessibility helpers
   ========================== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

/* -------------------------
   FEATURES BAND (deep green)
   ------------------------*/
.features-band {
    background: var(--green);
    color: white;
    padding: 52px 0;
}

.band-inner {
    max-width: var(--design-width);
    margin: 0 auto;
    padding: 0 28px;
    text-align: center
}

.band-heading {
    font-size: 22px;
    margin-bottom: 8px;
    font-weight: 700
}

.band-copy {
    max-width: 980px;
    margin: 0 auto 22px;
    color: rgba(255, 255, 255, 0.92)
}
.r-a{
    position: absolute;
    right: 10px;
    top: 20px;
    display: block;
    width: 30px;
}



.hero-heading span {
  opacity: 0;
  display: inline-block;
  margin-right: 0.3em;
  animation: fadeIn 0.5s forwards;
}

.hero-heading span:nth-child(1) { animation-delay: 0s; }
.hero-heading span:nth-child(2) { animation-delay: 0.5s; }
.hero-heading span:nth-child(3) { animation-delay: 1s; }
.hero-heading span:nth-child(4) { animation-delay: 1.5s; }
.hero-heading span:nth-child(5) { animation-delay: 2s; }
.hero-heading span:nth-child(6) { animation-delay: 2.5s; }
.hero-heading span:nth-child(7) { animation-delay: 3s; }
.hero-heading span:nth-child(8) { animation-delay: 3.5s; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}


.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 22px;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto
}

.feature {
    background: rgba(1, 9, 1, 0.2);
    padding: 20px;
    border-radius: 14px;
    text-align: left;
    min-height: 120px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.02);
    transition: transform .18s var(--ease);
    position: relative;
}

.feature:hover {
    transform: translateY(-6px)
}

.feature h3 {
    margin: 10px 0 6px;
    font-size: 16px
}

.feature p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    line-height: 1.38
}

.feature-icon-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
        text-align: center;
    padding: 8px;
    margin-bottom: 20px;
}

/* Utility container that centers to the design width */
.container-centered {
    max-width: var(--design-width);
    margin: 0 auto;
    padding: 0 28px
}


/* MANAGE */
.manage-section {
    padding: 64px 0;
    background: var(--bg)
}

.manage-inner {
    max-width: var(--design-width);
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 1fr 700px;
    gap: 28px;
    align-items: start
}

.manage-left h3 {
    font-size: 22px;
    margin-bottom: 6px
}

.manage-list {
    margin-top: 16px
}

.mini-stats-card {
    background: #F7F9F9;
    border-radius: 18px;
    padding: 16px;
}
.manage-inner {
  display: flex;
  align-items: center; /* vertically centers children */
  gap:100px; /* optional spacing between left and right */
  flex-wrap: wrap; /* optional, allows stacking on mobile */
}

/* Optional: responsive widths */
.manage-left {
  flex: 0 0 30%; /* 30% width */
}

.manage-right {
  flex: 1; /* remaining space */
  margin-top: 5%;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .manage-inner {
    flex-direction: column; /* stack left + right */
    align-items: flex-start; /* align left side on top */
  }

  .manage-left, .manage-right {
    flex: 1 1 100%;
  }
}

.mini-bars {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    height: 90px
}

.mini-bars .mini-col {
    flex: 1;
    background: linear-gradient(180deg, var(--green-800), var(--green-700));
    border-radius: 6px
}

.mini-values {
    display: flex;
    justify-content: space-between;
    margin-top: 12px
}

.mini-values .big {
    font-weight: 800;
    font-size: 18px
}

.manage-list li strong {
    display: block;
    margin-bottom: 10px;
}

.manage-list {
    list-style-image: url("check.png");
    padding-left: 28px;
}

.manage-list li {
    margin-bottom: 14px;
}

/* INTEGRATIONS */
.integrations {
    padding: 56px 0
}

.integrations-inner {
    max-width: var(--design-width);
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 1fr 440px;
    gap: 28px;
    align-items: center
}


.int-right.placeholder {
    /*height: 220px;*/
    border-radius: 14px;
    background: linear-gradient(45deg, #fff, #f3f3f3);
    border: 1px dashed rgba(0, 0, 0, 0.04);
}
.int-right img{
     border-radius: 14px;
}

.btn-outline {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: var(--green);
    color: #FFF;
    text-decoration: none
}

/* CTA band */
.cta-band {
    background: #109b4a;
    color: white;
    padding: 150px 0;
    margin-top: 36px;
    background-image: url(../images/gbg2.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
     /* Animation */
  animation: bounceBG 6s ease-in-out infinite alternate;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/gbg2.svg);
  background-size: cover;
  background-position: center;
  opacity: 0.25; /* << adjust opacity here */
  z-index: -1;
}
@keyframes bounceBG {
  0% {
    background-position: 0% center;
  }
  50% {
    background-position: 50% center;
  }
  100% {
    background-position: 100% center;
  }
}
.cta-inner {
    max-width: var(--design-width);
    margin: 0 auto;
    padding: 0 28px;
    text-align: center
}
.int-left h3{
    font-size: 25px;
}

.btn-primary-lg {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 12px 20px;
    border-radius: 999px;
    color: white;
    text-decoration: none;
    font-weight: 700
}


/* FOOTER */
.site-footer {
    background: white;
    padding: 40px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    margin-top: 50px;
}

.footer-inner {
    max-width: var(--design-width);
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: 320px 1fr 240px;
    gap: 28px;
    align-items: start
}

.footer-brand .brand-mark.small {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--green-800), var(--green-700));
    margin-bottom: 8px
}

.footer-links .col h4 {
    margin-bottom: 8px
}

.footer-links .col ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.footer-links .col li {
    color: var(--muted);
    margin-bottom: 8px
}
.footer-links .col li  a{
    color: var(--muted);
    text-decoration: none;
}
.footer-links .col li  a:hover{
    color: var(--green);
}

.footer-contact h4 {
    margin-bottom: 8px
}

.copyright {
    text-align: center;
    color: var(--muted);
    margin-top: 20px;
       
        
        width: 100%;
}
.brd-tp{
     border-top: 1px solid rgba(0, 0, 0, 0.07);
     padding-bottom: 20px;
}

.footer-contact{
      margin-top: 30px;
}
/* Footer links columns */
.footer-links {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    /* allows wrapping on smaller screens */
    margin-top: 30px;
    margin-bottom: 30px;
}

.footer-links .col {
    flex: 1 1 200px;
    /* grow/shrink with a minimum width */
    min-width: 200px;
    /* ensures columns don't get too small */
}

/* Optional: adjust heading and list spacing */
.footer-links .col h4 {
    margin-bottom: 8px;
}

.footer-links .col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links .col li {
    color: var(--muted);
    margin-bottom: 8px;
}

.copyright {
  display: flex;
  justify-content: space-between; /* left and right */
  align-items: center;
  padding: 10px 20px;
  font-size: 14px;
}

.copyright-left {
  /* nothing extra needed, left by default */
}

.copyright-right {
  /* right aligned via flex */
}



/* Mobile responsiveness */
@media (max-width: 768px) {
    .footer-inner {
        grid-template-columns: 1fr;
        /* stack brand, links, contact */
    }

    .footer-links {
        flex-direction: column;
        margin-bottom: 0px;
    }

    .footer-links .col {
        min-width: 100%;
        margin-bottom: 0px;
    }
    .footer-links .col {
    flex: 0px;
    min-width: 200px;
}
      .copyright {
    flex-direction: column; /* stack left and right */
    align-items: flex-start; /* align text to left */
    gap: 6px; /* optional spacing between lines */
    padding: 10px 16px; /* adjust padding for smaller screens */
    font-size: 13px; /* slightly smaller text if needed */
  }

  .copyright-left,
  .copyright-right {
    text-align: left; /* ensure left alignment */
  }
}


/* ==========================
   Responsiveness
   ========================== */
@media (max-width:1100px) {
    .hero-content {
        /* grid-template-columns: 1fr 1fr;*/
        padding: 0 18px
    }

    .input-pill {
        width: 520px
    }

    .floating-left {
        left: 28px
    }

    .floating-right {
        right: 28px
    }

    .top-nav {
        width: calc(100% - 40px)
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr)
    }
     .integrations-inner{grid-template-columns:1fr}
}

@media (max-width:820px) {

    /* mobile: collapse nav to burger, stack hero */
    .main-nav {
        display: none
    }

    .burger {
        display: inline-block
    }

    .top-nav {
        padding: 10px 12px;
        border-radius: 32px;
        top: 12px
    }

    .hero-content {
        /*grid-template-columns: 1fr;*/
        gap: 14px
    }

    .hero-heading {
        font-size: 28px
    }

    .hero-desc {
        font-size: 14px
    }

    .input-pill {
        width: 100%;
        height: 50px;
        margin: 0 auto;
        padding: 6px
    }

    .floating-left {
        left: 14px;
        bottom: 8px;
        transform: translateY(0);
        width: 260px
    }

    .floating-right {
        right: 14px;
        bottom: 8px;
        transform: translateY(0);
        width: 260px
    }

    .floating-card {
        animation: none
    }

    .brand-name {
        font-size: 16px
    }

    .features-grid {
        grid-template-columns: 1fr !important
    }

    .manage-inner {
        grid-template-columns: 1fr
    }
    .hero-section {
    padding-top: 110px;
     height: auto; /* full viewport height */
}
}

/* tiny screens */
@media (max-width:420px) {
    .hero-heading {
        font-size: 22px
    }

    .input-pill input {
        font-size: 14px
    }

    .btn-login {
        padding: 8px 12px;
        font-size: 12px;
    }

    .features-grid {
        grid-template-columns: 1fr !important
    }
    
}
@media (max-width: 768px) {
  .floating-card {
    position: static;      /* stop absolute positioning */
    width: 100%;           /* full width of parent */
    transform: none;       /* remove translateY */
    margin: 10px 0;        /* spacing between stacked cards */
  }

  .floating-left,
  .floating-right {
    left: auto;            /* reset left/right */
    right: auto;
  }
  .cta-btn{
    padding:5px 14px;
    margin-right: 0px;
    font-size: 10px;
  }
}
.footer-contact a{
    color: #109b4a;
    text-decoration: none;
}
.manage-list {
  list-style: none;
  padding-left: 0;
}

.manage-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 18px;
}
.manage-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;

 background: url('data:image/svg+xml;utf8,\<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">\<circle cx="12" cy="12" r="12" fill="%231f5a2f"/>\<path d="M17.7 7.3l-8.8 8.9L6.3 11.6l1.4-1.3 1.2 1.3 7.4-7.6 1.4 1.3z" fill="white"/>\</svg>');
  background-size: contain;
  background-repeat: no-repeat;
}
.social-icons {
  display: flex;
  gap: 10px; /* space between icons */
  margin-top: 8px;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;  /* set a square container size */
  height: 36px;
  background-color: #E1E4E3;
  border-radius: 4px;  /* slight rounding if desired */
  text-decoration: none;
}

.social-icon svg {
  width: 20px;
  height: 20px;
  fill: #333334;
  transition: transform 0.2s, background-color 0.2s;
}

.social-icon:hover svg {
  transform: scale(1.1); /* hover effect for the icon */
}

.social-icon:hover {
  background-color: #d0d3d2;  /* slightly darker on hover */
}
/* Container flex setup */
.manage-inner {
  display: flex;
  flex-wrap: wrap;          /* allows stacking */
  align-items: flex-start;  /* align top */
  gap: 20px;                /* space between left and right */
  width: 100%;
  max-width: 1300px;        /* optional container width */
  margin: 0 auto;           /* center horizontally */
  box-sizing: border-box;
}

/* Left and right columns */
.manage-left,
.manage-right {
  flex: 0 0 45%;            /* 50% width */
  box-sizing: border-box;
  padding: 10px;
}

/* Make sure image doesn’t break layout */
.manage-left img {
  display: block;
  width: 100%;
  height: auto;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 768px) {
  .manage-left,
  .manage-right {
    flex: 1 1 100%;          /* full width */
    padding: 5px 0;
  }
}

.integrations-inner {
  display: flex;
  flex-wrap: wrap;          /* allows stacking */
  align-items: flex-start;  /* top-aligned */
  gap: 20px;                /* space between columns */
  width: 100%;
  max-width: 1300px;        /* optional container width */
  margin: 0 auto;
  box-sizing: border-box;
}

.int-left,
.int-right {
  flex: 1 1 40%;            /* 50% width */
  box-sizing: border-box;
  padding: 10px;
}
.int-left{
    margin-top: 5%;
}

/* Make sure image fits column */
.int-right img {
  display: block;
  width: 100%;
  height: auto;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 768px) {
  .int-left,
  .int-right {
    flex: 1 1 100%;          /* full width */
    padding: 5px 0;
  }
}
.lgo{
    display: inline-block;
    margin-right: 20px;
}
.lgo img{
    margin-bottom: -10px;
}
.contact-final-cta {
  margin-top: 80px;
  background: #109b4a;
  padding: 60px 20px;
  border-radius: 22px;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: 1440px;
  margin: auto;
  background-image: url(../images/gbg.svg);
  background-position: top center;
  background-repeat: no-repeat;
}

.final-inner h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.final-inner p {
  font-size: 15px;
  max-width: 650px;
  margin: auto;
  line-height: 1.6;
}


/* --------------------------
   HERO SECTION EXACT STYLE
---------------------------*/
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 120px 7%;
  gap: 40px;
  background: white;
}

/* --------------------------
   LEFT SECTION
---------------------------*/
.hero-left {
  max-width: 50%;
  text-align: left;
}

/* Tag (track. manage. deliver.) */
.tag {
  display: inline-block;
  padding: 8px 18px;
  font-size: 0.9rem;
  border-radius: 30px;
  background: #e9f3e9;
  color: #1a5b26;
  text-transform: lowercase;
  font-weight: 500;
  margin-bottom: 25px;
}

/* Title */
.hero-title {
  font-size: 2.0rem;
  font-weight: 800;
  color: #215c38;
  line-height: 1.18;
  margin-bottom: 22px;
}

/* Subtitle */
.hero-sub {
  font-size: 1.05rem;
  color: #6b6b6b;
  line-height: 1.6;
  margin-bottom: 35px;
  max-width: 530px;
}

/* --------------------------
   INPUT GROUP (Rounded)
---------------------------*/
.hero-form {
  display: flex;
  align-items: center;
  background: #f3f3f3;
  padding: 10px;
  width: fit-content;
  border-radius: 50px;
}

.hero-form input {
  border: none;
  outline: none;
  padding: 14px 20px;
  width: 260px;
  background: transparent;
  font-size: 1rem;
}

.hero-form button {
  padding: 14px 28px;
  background: #1a5b26;
  border: none;
  outline: none;
  color: white;
  font-size: 1rem;
  border-radius: 40px;
  font-weight: 600;
  cursor: pointer;
}

/* --------------------------
   RIGHT IMAGE
---------------------------*/
.hero-right img {
  width:800px;
  max-width: 100%;
  display: block;
}

/* --------------------------
   RESPONSIVE
---------------------------*/
@media (max-width: 950px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 80px 5%;
  }

  .hero-left {
    max-width: 100%;
  }

  .hero-right img {
    margin-top: 40px;
    width: 90%;
  }

  .hero-form {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 500px) {
  .hero-title {
    font-size: 2.1rem;
  }

  .hero-sub {
    font-size: 1rem;
  }

  .hero-form {
    flex-direction: column;
    background: transparent;
    padding: 0;
  }

  .hero-form input {
    width: 100%;
    background: #f3f3f3;
    border-radius: 30px;
    margin-bottom: 10px;
  }

  .hero-form button {
    width: 100%;
  }
}


.pair {
  display: flex;
  align-items: center; /* optional: vertically center */
  gap: 12px; /* spacing between left and right */
  margin-top: 20px;
}

.p-left .card-icon {
  font-size: 32px; /* enlarge icon if needed */
}
.p-left .card-icon img{
    width: 30px;
}

.contact-resources {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.cr-card {
  flex: 1;
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
@media (max-width: 768px) {
  .contact-resources {
    flex-direction: column;
  }
}


        .container {
            width: 100%;
            
            margin: auto;
        }

        /* --- Header Section (Dark Green) --- */
        .header-section {
            background-color: #129b4a; /* Dark green color from the image */
            color: #ffffff;
            padding: 80px 60px 100px 60px;
            border-radius: 5px;
            margin-bottom: -50px; /* Overlap the cards */
            position: relative;
            z-index: 1;
            width: 100%;
            
        }
        .header-inner{
             max-width: 1300px;
            margin: auto;
        }

        .quote-icon {
            font-size: 80px;
            line-height: 0.5;
            color: #ffffff;
            opacity: 0.9;
            float: left;
            margin-right: 20px;
            margin-top: -10px;
           
        }

        .quote-text {
            font-size: 24px;
            font-weight: 600;
            line-height: 1.5;
            padding-left: 100px; /* Space for the quote icon */
        }

        /* --- Cards Section --- */
        .cards-section {
            display: flex;
            gap: 20px;
            justify-content: center;
            position: relative;
            z-index: 2;
        }

        .card2 {
            flex: 1;
            background-color: #ffffff;
            border-radius: 10px;
            padding: 30px;
            text-align: left;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Subtle box shadow */
            max-width: 350px;
        }

        .card-image {
            /* This is a placeholder for the illustrations */
            height: 150px;
            background-color: #fff;
            border-radius: 5px;
            margin-bottom: 20px;
            /* In a real project, replace this with actual SVG/PNG images */
            display: flex;
            /*justify-content: center;
            align-items: center;*/
            color: #385e3a;
            font-weight: 700;
            font-size: 16px;
        }
        /* Simulating the specific image content for demonstration */
        #img-collab::before { content: ''; }
        #img-stakeholder::before { content: ''; }
        #img-execution::before { content: ''; }

        .card-title {
            font-size: 18px;
            font-weight: 700;
            color: #1a1a1a;
            margin-bottom: 5px;
        }

        .card-subtitle {
            font-size: 14px;
            font-weight: 600;
            color: #385e3a; /* Subtle green for the secondary title */
            margin-bottom: 15px;
        }

        .card-description {
            font-size: 13px;
            color: #555555;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .read-more {
            display: inline-block;
            font-size: 13px;
            font-weight: 600;
            color: #181818;
            text-decoration: none;
            padding-bottom: 2px;
            border-bottom: 2px solid #385e3a; /* Underline effect */
        }

        .illustration-area img {
    animation: floatWork 6s ease-in-out infinite;
    transform-origin: center bottom;
    width: 100%;
}

@keyframes floatWork {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    25% {
        transform: translateY(-10px) rotate(-1deg);
    }
    50% {
        transform: translateY(0px) rotate(0deg);
    }
    75% {
        transform: translateY(-10px) rotate(1deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}
        /* Responsive Adjustments */
        @media (max-width: 1024px) {
            .cards-section {
                flex-direction: column;
                align-items: center;
            }
            .card2 {
                max-width: 100%;
                width: 90%;
            }
            .header-section {
                padding: 60px 30px 80px 30px;
            }
            .quote-text {
                font-size: 20px;
                padding-left: 80px;
            }
        }
        @media (max-width: 600px) {
            .quote-icon {
                font-size: 60px;
            }
            .quote-text {
                font-size: 18px;
                padding-left: 60px;
            }
        }
           .main-container {
            /* Ensures the section is centered and has room to breathe */
            max-width: 1440px;
            margin: auto;
            padding: 1rem;
            margin-top: 50px;
        }

        /* --- Custom Styles to match the image precisely --- */
        .illustration-bg {
            /* The main dark green background */
            background-color: #129b4a; 
            border-radius: 12px;
            /* REMOVED: overflow: hidden; -- This was causing the clipping */
            position: relative; /* Needed for absolute positioning of illustration and overlap box */
        }

        .illustration-area {
            /* Placeholder for the complex illustration with transparent text */
            height: 400px; /* Fixed height for the visual area */
            display: flex;
            justify-content: center;
            align-items: flex-end; /* Align the image/content to the bottom */
            padding-bottom: 2rem;
            position: relative;
        }

        .illustration-placeholder {
            /* Visual placeholder for the detailed illustration */
            width: 90%;
            height: 100%;
            background-image: url('https://placehold.co/900x400/385e3a/ffffff?text=Detailed+Illustration+Placeholder');
            background-size: cover;
            background-position: center;
            /* Using a generic placeholder URL for the complex illustration */
            filter: brightness(0.9); /* Subtle filter to match the image tone */
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0.15; /* Make the placeholder subtle */
        }

         .text-overlay-box {
            /* The overlapping dark green box at the bottom */
            background-color: #129b4a; 
            color: #FFF;
            border-radius: 10px;
            padding: 2.5rem 3rem;
            position: absolute;
            bottom: -50px; 
            width: 80%;
            max-width: 900px;
            text-align: center;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
            z-index: 10;
            
            /* --- CENTERING FIX --- */
            left: 50%;
            transform: translateX(-50%);
            /* --------------------- */
        }

        /* Adjust overlap on smaller screens */
        @media (max-width: 768px) {
            .illustration-area {
                height: 300px;
            }
            .text-overlay-box {
                width: 90%;
                padding: 1.5rem 1.5rem;
                bottom: -30px;
            }
        }