:root{
  --bg-start:#0d6efd;
  --bg-end:#6610f2;
  --muted:#6c757d;
}
body{font-family:'Inter', system-ui, -apple-system,'Segoe UI', Roboto,'Helvetica Neue', Arial;background:#f8fafc;color:#111827}
/* Headings use Montserrat for a modern geometric look */
h1,h2,h3,h4{font-family:'Montserrat', Inter, system-ui, sans-serif}

/* Hero */
.modern-hero{padding:6rem 0; border-bottom-left-radius:28px; border-bottom-right-radius:28px; position:relative; background-color:var(--bg-start); background-image: linear-gradient(180deg, rgba(13,110,253,0.40), rgba(102,16,242,0.32)), url('../img/ocg-saving-the-ocean-_1j7_atc0z8-unsplash.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat}
.modern-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(6,7,18,0.35), rgba(6,7,18,0.25));border-bottom-left-radius:28px;border-bottom-right-radius:28px}
.modern-hero h1{color:#fff}
.modern-hero .lead{color:rgba(255,255,255,0.9)}
.hero-art{min-height:220px}
/* Ensure content sits above overlay */
.modern-hero > .container{position:relative;z-index:1}

/* Hero buttons styling */
.modern-hero .btn{border-radius:999px; padding:0.85rem 1.4rem; font-weight:600; letter-spacing:0.2px}
.modern-hero .btn-light{background:rgba(255,255,255,0.95); color:#042024; border:none}
.modern-hero .btn-light:hover{transform:translateY(-3px); box-shadow:0 20px 40px rgba(2,6,23,0.12)}
.modern-hero .btn-outline-light{border:2px solid rgba(255,255,255,0.18); color:rgba(255,255,255,0.95); background:transparent}
.modern-hero .btn-outline-light:hover{background:rgba(255,255,255,0.12); transform:translateY(-3px)}
.hero-art img{display:none}

/* Navbar */
.navbar{transition:all .28s ease;padding:1rem 0}
/* Navbar colors: light text over hero, dark on scroll */
.navbar .nav-link{color:rgba(255,255,255,0.95)}
.navbar .navbar-brand span{color:#fff}
.navbar .navbar-toggler{border-color:rgba(255,255,255,0.18)}
.navbar .navbar-toggler-icon{filter:invert(1) brightness(2)}
.navbar-solid{background:#ffffffee!important;box-shadow:0 10px 40px rgba(2,6,23,0.08)}
.navbar-solid .nav-link{color:#0b1220!important}
.navbar-solid .navbar-brand span{color:#0b1220}
.navbar-solid .navbar-toggler{border-color:rgba(11,18,32,0.08)}
.navbar-solid .navbar-toggler-icon{filter:none}

/* Cards */
.card{transition:transform .28s ease,box-shadow .28s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(2,6,23,0.08)}

.icon-wrap{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:12px}
.text-white-75{color:rgba(255,255,255,0.9)}
.text-white-50{color:rgba(255,255,255,0.65)}

@media (max-width: 991px){
  .modern-hero{padding:3.5rem 0}
}

/* Features section spacing */
.section-features{padding:4.5rem 0}
.section-features .card{padding:2rem}
.section-features .icon-wrap{width:64px;height:64px;font-size:1.25rem}
.section-features .card h5{margin-top:0.5rem}
.section-features .lead{max-width:36rem;margin-left:auto;margin-right:auto}

/* How section */
.how-section{padding:4.5rem 0;margin-bottom:2.5rem}
.how-step{border-radius:12px}
.step-badge{width:48px;height:48px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem}
.how-step h5{font-weight:600}
.how-step p{color:var(--muted)}

@media (min-width: 992px){
  .how-step{min-height:160px}
}

/* Add extra gap between "How it works" and Contact sections */
#contact{margin-top:5.5rem}
@media (max-width:767px){
  #contact{margin-top:3rem}
}

/* Contact section: two-column layout (info | form) */
.contact-form .form-control{border-radius:10px;padding:0.85rem}
.contact-form textarea.form-control{min-height:140px}
.how-section + .section-features {}
.card.shadow-sm.p-4{padding:2.25rem}

/* Base card padding removed so columns can provide their own padding */
.contact-card{padding:0.5rem 0.5rem;border-radius:12px;overflow:hidden}
.contact-card > .row{gap:1rem;align-items:stretch}
.contact-card .col-md-5,.contact-card .col-md-7{padding:0}
.contact-card .list-unstyled li{margin-bottom:0.5rem}
.contact-form .form-control{border-radius:10px;padding:0.75rem;margin-bottom:0.6rem}
.contact-form textarea.form-control{min-height:140px}
.contact-form .btn-primary{padding:0.85rem 1.4rem;border-radius:999px}

/* Desktop: left info panel with subtle background and right form panel */
@media (min-width: 768px){
  /* Use flex layout for a clear two-column split (only the immediate row) */
  .contact-card > .row{display:flex;flex-wrap:nowrap}
  .contact-card .col-md-5{flex:0 0 38%;max-width:38%;background:#fbfdff;padding:2.5rem 2rem;border-right:2px solid rgba(6,182,180,0.08)}
  .contact-card .col-md-7{flex:1 1 62%;max-width:62%;padding:2rem 2.25rem}
  .contact-card .col-md-5 h4{margin-top:0}
  .contact-card .col-md-5 p{color:var(--muted)}
  .contact-card .col-md-5 .list-unstyled{margin-top:1rem}
  .contact-card .col-md-5 i{color:rgba(6,182,180,0.95)}
  .contact-card .col-md-7 .text-end{display:block}
}

/* Add breathing space inside the contact section so card doesn't touch previous section */
#contact .container{padding-top:1.5rem;padding-bottom:1.5rem}
@media (min-width:768px){
  #contact .container{padding-top:2.5rem;padding-bottom:2.5rem}
}

/* Mobile: stacked with internal padding */
@media (max-width: 767px){
  .contact-card{padding:1rem}
  .contact-card .col-md-5,.contact-card .col-md-7{padding-left:0.6rem;padding-right:0.6rem}
  .contact-card .row{gap:0.6rem}
  .contact-form .btn-primary{text-align:center;width:100%}
}

/* Reveal animations */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.9,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal-delay{transition-delay:.12s}
.reveal-slow{transition-duration:.9s}

.btn-primary{background:linear-gradient(90deg,#06b6d4 0%,#0ea5a7 100%);border:none;color:#042024;box-shadow:0 12px 30px rgba(6,182,180,0.14)}
.btn-primary:hover, .btn-primary:focus{transform:translateY(-2px);box-shadow:0 18px 40px rgba(6,182,180,0.18)}
.btn-light{box-shadow:0 6px 18px rgba(2,6,23,0.06)}
.btn-outline-light{border-color:rgba(255,255,255,0.18); color:rgba(255,255,255,0.95)}