/* ECO World Tours & Travels — PURE BLUE + GREEN THEME (No modal, no rotating ring) */
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

/* ---------- Palette ---------- */
:root{
  --deep-sea:#012e40;   /* navy teal */
  --ocean:#024c61;      /* deep blue-green */
  --reef:#036f5d;       /* rich green */
  --emerald:#04bf8a;    /* mid-green accent */
  --aqua:#00b8b8;       /* bright aqua */
  --teal:#04d9c4;       /* vivid teal */
  --sky:#00c4ff;        /* sky blue */
  --azure:#0091ff;      /* strong blue */
  --mint:#02f2b2;       /* bright mint */
  --cyan:#0fe5e5;       /* glowing cyan */
  --ink:#a6ffe8;        /* readable light text (greenish) */
  --ink-soft:#8cf1dd;   /* secondary text */
  --shadow:0 22px 60px rgba(0,0,0,.35);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Poppins, system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(0,196,255,.35) 0%, transparent 60%),
    radial-gradient(1000px 600px at 90% -20%, rgba(2,242,178,.30) 0%, transparent 60%),
    linear-gradient(160deg, var(--deep-sea) 0%, var(--ocean) 45%, var(--reef) 100%);
  overflow-x:hidden;
}

/* Moving-ocean shimmer */
body::after{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    repeating-radial-gradient(circle at 50% 120%,
      rgba(0,255,204,.10) 0 12px,
      rgba(0,196,255,.13) 12px 24px);
  animation:oceanFlow 22s linear infinite;
  opacity:.28;
}
@keyframes oceanFlow{
  from{background-position:0 0}
  to{background-position:0 240px}
}

.container{width:min(1200px,92%); margin-inline:auto}

/* ---------- Floating glowing blobs ---------- */
.blob{
  position:fixed; width:420px; height:420px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, var(--mint), transparent 70%),
    radial-gradient(circle at 70% 70%, var(--sky), transparent 70%);
  filter:blur(50px); opacity:.35; z-index:0; pointer-events:none;
  animation:drift 18s ease-in-out infinite alternate;
}
.blob.b2{
  right:-110px; top:28vh;
  background:
    radial-gradient(circle at 30% 30%, var(--azure), transparent 70%),
    radial-gradient(circle at 70% 70%, var(--emerald), transparent 70%);
  animation-duration:24s;
}
@keyframes drift{
  from{transform:translate(-50px,-30px) scale(1)}
  to{transform:translate(60px,60px) scale(1.1)}
}

/* ---------- Header & Nav ---------- */
.header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(90deg, var(--reef), var(--ocean));
  border-bottom:2px solid var(--teal);
  box-shadow:var(--shadow);
}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.brand{display:flex;gap:10px;text-decoration:none}

/* Logo chip */
.brand-mark{
  background:linear-gradient(135deg, var(--sky), var(--mint));
  color:var(--deep-sea); padding:6px 10px; border-radius:10px; font-weight:800
}
/* Animated gradient logo glow (text) */
.brand-name{
  font-weight:800; letter-spacing:.4px;
  background:linear-gradient(270deg, var(--teal), var(--sky), var(--mint));
  background-size:400% 400%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:shiftGradient 8s ease infinite;
  text-shadow:0 0 18px rgba(0,196,255,.25);
}
@keyframes shiftGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.nav{display:flex; gap:10px; align-items:center}
.nav a{
  color:var(--ink); text-decoration:none; font-weight:700;
  padding:10px 14px; border-radius:10px; transition:.25s;
}
.nav a:hover{
  background:linear-gradient(90deg, var(--teal), var(--sky));
  color:var(--deep-sea);
}
.nav a.active{background:var(--mint); color:var(--deep-sea)}

/* ---------- Buttons (no rotating ring; subtle hover glow) ---------- */
.btn{
  display:inline-block; padding:12px 18px; border-radius:14px;
  text-decoration:none; font-weight:800; transition:.25s transform, .25s box-shadow;
  position:relative; isolation:isolate;
}
.btn:hover{transform:translateY(-2px)}

.btn-primary{
  color:var(--deep-sea);
  background:linear-gradient(135deg, var(--teal), var(--sky));
  box-shadow:0 10px 26px rgba(0,196,255,.35);
}
.btn-primary:hover{
  box-shadow:0 0 16px var(--teal), 0 0 32px rgba(0,196,255,.45);
}

.btn-outline{border:2px solid var(--mint); color:var(--mint)}
.btn-outline:hover{background:var(--mint); color:var(--deep-sea)}
.btn-ghost{background:rgba(0,255,204,.10); color:var(--ink); border:1px solid rgba(2,242,178,.28)}
.btn-ghost:hover{background:rgba(0,255,204,.18)}

/* ---------- Hero ---------- */
.hero{
  margin-top:24px; border-radius:24px; overflow:hidden;
  background:linear-gradient(120deg, var(--reef), var(--ocean), var(--deep-sea));
  box-shadow:var(--shadow); position:relative; z-index:1;
}
.hero-grid{display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:24px; padding:clamp(24px,5vw,56px)}
.hero h1{font-size:clamp(30px,4.4vw,54px); color:var(--mint); margin:0 0 12px}
.hero p{color:var(--ink-soft); margin:0 0 18px}
.hero-img{
  border-radius:18px; aspect-ratio:4/3; object-fit:cover;
  box-shadow:var(--shadow); outline:6px solid var(--teal);
}

/* ---------- Sections (scroll-triggered ripple waves) ---------- */
.section{position:relative; padding:56px 0}
.section h2{font-size:clamp(22px,3.2vw,36px); color:var(--cyan); margin:0 0 10px}
.section .sub{color:var(--ink-soft); margin-bottom:24px}

/* Wave layer (inactive) */
.section::before{
  content:""; position:absolute; inset:-8px; z-index:0; pointer-events:none; opacity:0;
  background:
    radial-gradient(160px 160px at 20% 10%, rgba(0,196,255,.22) 0%, transparent 60%),
    radial-gradient(220px 220px at 80% 0%,  rgba(2,242,178,.20) 0%, transparent 60%),
    radial-gradient(240px 240px at 40% 100%, rgba(0,196,255,.18) 0%, transparent 60%),
    radial-gradient(200px 240px at 85% 100%, rgba(2,242,178,.16) 0%, transparent 60%);
  transform:scale(.9);
  transition:opacity .6s ease, transform .6s ease;
}
/* Reveal bubble rise + ripples */
.reveal{opacity:0; transform:translateY(40px) scale(.94); transition:all .8s cubic-bezier(.2,.6,.3,1.2)}
.reveal.in{opacity:1; transform:none}
.reveal.in::before{
  opacity:.9; transform:scale(1); animation:soft-ripples 1.2s ease-out forwards;
}
@keyframes soft-ripples{
  0%{filter:blur(10px); opacity:.0}
  40%{filter:blur(6px); opacity:.6}
  100%{filter:blur(8px); opacity:.35}
}

/* ---------- Cards ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  position:relative; background:linear-gradient(160deg, var(--ocean), var(--reef));
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
  transform:translateY(0); transition:transform .25s, filter .25s, box-shadow .25s, border-color .25s;
  border:1px solid rgba(2,242,178,.18);
}
.card:hover{
  transform:translateY(-8px); filter:brightness(1.1);
  border-color:var(--mint);
  box-shadow:0 0 18px var(--teal), 0 0 36px rgba(0,196,255,.45);
}
.card .media{aspect-ratio:4/3; object-fit:cover}
.card .body{padding:16px; position:relative; z-index:1}
.card .body h3{margin:0 0 6px; color:var(--ink)}
.card .body p{margin:0 0 12px; color:var(--cyan)}
.card .meta{display:flex; gap:10px; font-size:13px; color:var(--mint)}

/* ---------- Features / Services ---------- */
.features{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.feature{
  background:linear-gradient(180deg, var(--ocean), var(--reef));
  border-radius:16px; padding:16px; text-align:center; box-shadow:var(--shadow);
  border:1px solid rgba(0,196,255,.18);
}
.feature i{font-size:26px; display:block; margin-bottom:6px; color:var(--mint)}

/* ---------- Destinations ---------- */
.destinations{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.dest{position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); background:var(--ocean)}
.dest img{width:100%; height:180px; object-fit:cover; opacity:.95}
.dest .label{position:absolute; left:10px; bottom:10px; background:rgba(1,46,64,.55); color:var(--ink); padding:6px 10px; border-radius:10px}

/* ---------- Process ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.step{background:linear-gradient(180deg, var(--ocean), var(--reef)); border-radius:16px; padding:16px; box-shadow:var(--shadow); border:1px solid rgba(0,196,255,.18)}
.step .num{font-weight:900; color:var(--sky)}

/* ---------- Testimonials ---------- */
.testimonials{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.quote{background:linear-gradient(180deg, var(--ocean), var(--reef)); border-radius:16px; padding:16px; font-style:italic; box-shadow:var(--shadow); border:1px solid rgba(0,196,255,.18)}
.quote .who{margin-top:10px; color:var(--mint); font-weight:700}

/* ---------- Gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:6px}
.gallery img{width:100%; height:120px; object-fit:cover; border-radius:10px; filter:saturate(1.1)}

/* ---------- FAQ ---------- */
.faq{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.q{background:linear-gradient(180deg, var(--ocean), var(--reef)); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(0,196,255,.18)}
.q button{all:unset; cursor:pointer; display:flex; justify-content:space-between; width:100%; padding:12px 14px; font-weight:800; color:var(--ink)}
.q .a{max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 14px; color:var(--ink-soft)}
.q.open .a{max-height:240px; padding:10px 14px 14px}

/* ---------- Newsletter ---------- */
.news{background:linear-gradient(90deg, var(--ocean), var(--reef)); border-radius:18px; padding:18px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow); border:1px solid rgba(0,196,255,.18)}
.inline{display:flex; gap:8px; flex-wrap:wrap}
.input-dark{
  border:2px solid var(--teal); background:var(--deep-sea); color:var(--ink);
  border-radius:12px; padding:12px 14px; min-width:260px; outline:none;
}
.input-dark:focus{border-color:var(--sky); box-shadow:0 0 0 3px rgba(0,196,255,.25)}

/* ---------- Forms ---------- */
.form{background:linear-gradient(160deg, var(--ocean), var(--reef)); border-radius:18px; padding:18px; box-shadow:var(--shadow); border:1px solid rgba(0,196,255,.18)}
label{display:block; font-weight:700; margin:6px 0; color:var(--ink)}
.input, textarea{
  width:100%; border:2px solid var(--teal); background:var(--deep-sea); color:var(--ink);
  border-radius:12px; padding:12px 14px; outline:none
}
.input:focus, textarea:focus{border-color:var(--sky); box-shadow:0 0 0 3px rgba(0,196,255,.25)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
textarea{min-height:140px; resize:vertical}

/* ---------- Footer ---------- */
.footer{
  background:linear-gradient(180deg, var(--ocean), var(--deep-sea));
  color:var(--ink); border-top:2px solid var(--teal); margin-top:48px;
}
.footer-inner{padding:28px 0; display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:24px}
.footer h4{margin:0 0 10px; color:var(--cyan)}
.footer a{color:var(--ink); text-decoration:none}
.footer a:hover{color:var(--teal)}
.bottom{border-top:1px solid var(--reef); padding:12px 0; color:var(--ink-soft); text-align:center}

/* ---------- Floating Contact Bubble (CTA) ---------- */
.float-bubble{
  position:fixed; right:24px; bottom:24px; z-index:50;
  width:58px; height:58px; border-radius:50%;
  background:linear-gradient(135deg, var(--teal), var(--sky));
  display:flex; align-items:center; justify-content:center;
  color:var(--deep-sea); font-size:28px; font-weight:800;
  box-shadow:0 0 24px rgba(0,196,255,.45), 0 8px 24px rgba(0,0,0,.35);
  animation:pulse 2.6s ease-in-out infinite;
  text-decoration:none;
  border:1px solid rgba(2,242,178,.35);
}
.float-bubble:hover{transform:translateY(-2px)}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .card-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}

/* ECO World Tours & Travels — PURE BLUE + GREEN THEME (Hero image FIXED to fill height properly) */
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

/* ---------- Palette ---------- */
:root {
  --deep-sea:#012e40;
  --ocean:#024c61;
  --reef:#036f5d;
  --emerald:#04bf8a;
  --teal:#04d9c4;
  --sky:#00c4ff;
  --mint:#02f2b2;
  --cyan:#0fe5e5;
  --ink:#a6ffe8;
  --ink-soft:#8cf1dd;
  --shadow:0 22px 60px rgba(0,0,0,.35);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Poppins, system-ui, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(0,196,255,.35) 0%, transparent 60%),
    radial-gradient(1000px 600px at 90% -20%, rgba(2,242,178,.30) 0%, transparent 60%),
    linear-gradient(160deg, var(--deep-sea) 0%, var(--ocean) 45%, var(--reef) 100%);
  overflow-x:hidden;
}

body::after{
  content:""; position:fixed; inset:0; z-index:-1;
  background:
    repeating-radial-gradient(circle at 50% 120%,
      rgba(0,255,204,.10) 0 12px,
      rgba(0,196,255,.13) 12px 24px);
  animation:oceanFlow 22s linear infinite;
  opacity:.28;
}
@keyframes oceanFlow{
  from{background-position:0 0}
  to{background-position:0 240px}
}

.container{width:min(1200px,92%); margin-inline:auto}

/* ---------- Glowing Blobs ---------- */
.blob{
  position:fixed; width:420px; height:420px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, var(--mint), transparent 70%),
    radial-gradient(circle at 70% 70%, var(--sky), transparent 70%);
  filter:blur(50px); opacity:.35; z-index:0; pointer-events:none;
  animation:drift 18s ease-in-out infinite alternate;
}
.blob.b2{
  right:-110px; top:28vh;
  background:
    radial-gradient(circle at 30% 30%, var(--sky), transparent 70%),
    radial-gradient(circle at 70% 70%, var(--emerald), transparent 70%);
  animation-duration:24s;
}
@keyframes drift{
  from{transform:translate(-50px,-30px) scale(1)}
  to{transform:translate(60px,60px) scale(1.1)}
}

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:10;
  background:linear-gradient(90deg, var(--reef), var(--ocean));
  border-bottom:2px solid var(--teal);
  box-shadow:var(--shadow);
}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.brand{display:flex;gap:10px;text-decoration:none}
.brand-mark{
  background:linear-gradient(135deg, var(--sky), var(--mint));
  color:var(--deep-sea); padding:6px 10px; border-radius:10px; font-weight:800
}
.brand-name{
  font-weight:800; letter-spacing:.4px;
  background:linear-gradient(270deg, var(--teal), var(--sky), var(--mint));
  background-size:400% 400%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:shiftGradient 8s ease infinite;
  text-shadow:0 0 18px rgba(0,196,255,.25);
}
@keyframes shiftGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
.nav{display:flex; gap:10px; align-items:center}
.nav a{
  color:var(--ink); text-decoration:none; font-weight:700;
  padding:10px 14px; border-radius:10px; transition:.25s;
}
.nav a:hover{background:linear-gradient(90deg, var(--teal), var(--sky)); color:var(--deep-sea)}
.nav a.active{background:var(--mint); color:var(--deep-sea)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block; padding:12px 18px; border-radius:14px;
  text-decoration:none; font-weight:800; transition:.25s transform, .25s box-shadow;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  color:var(--deep-sea);
  background:linear-gradient(135deg, var(--teal), var(--sky));
  box-shadow:0 10px 26px rgba(0,196,255,.35);
}
.btn-primary:hover{box-shadow:0 0 16px var(--teal), 0 0 32px rgba(0,196,255,.45)}
.btn-outline{border:2px solid var(--mint); color:var(--mint)}
.btn-outline:hover{background:var(--mint); color:var(--deep-sea)}

/* ---------- HERO FIXED ---------- */
.hero{
  margin-top:24px; border-radius:24px; overflow:hidden;
  background:linear-gradient(120deg, var(--reef), var(--ocean), var(--deep-sea));
  box-shadow:var(--shadow); position:relative;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:24px;
  align-items:stretch;               /* ✅ fills height equally */
  padding:clamp(24px,5vw,56px);
}
.hero-grid > div:first-child{
  display:flex; flex-direction:column; justify-content:center;
}
.hero h1{font-size:clamp(30px,4.4vw,54px); color:var(--mint); margin:0 0 12px}
.hero p{color:var(--ink-soft); margin:0 0 18px}
.hero-img{
  width:100%; height:100%;
  display:block; border-radius:18px;
  object-fit:cover;                  /* ✅ cover container */
  aspect-ratio:auto;                 /* ✅ remove fixed ratio */
  box-shadow:var(--shadow);
  outline:6px solid var(--teal);
}

/* ---------- Section ---------- */
.section{position:relative; padding:56px 0}
.section h2{font-size:clamp(22px,3.2vw,36px); color:var(--cyan); margin:0 0 10px}
.section .sub{color:var(--ink-soft); margin-bottom:24px}

/* ---------- Card Grids ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{
  background:linear-gradient(160deg, var(--ocean), var(--reef));
  border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
  border:1px solid rgba(2,242,178,.18);
  transition:.25s;
}
.card:hover{transform:translateY(-8px); border-color:var(--mint); filter:brightness(1.1)}
.card .media{width:100%; height:200px; object-fit:cover}
.card .body{padding:16px}
.card .meta{display:flex; gap:10px; font-size:13px; color:var(--mint)}

/* ---------- Destinations ---------- */
.destinations{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.dest{position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
.dest img{width:100%; height:200px; object-fit:cover}
.dest .label{position:absolute; left:10px; bottom:10px; background:rgba(1,46,64,.6); color:var(--ink); padding:6px 10px; border-radius:10px}

/* ---------- Footer ---------- */
.footer{
  background:linear-gradient(180deg, var(--ocean), var(--deep-sea));
  color:var(--ink); border-top:2px solid var(--teal); margin-top:48px;
}
.footer-inner{padding:28px 0; display:grid; grid-template-columns:1.2fr .8fr .8fr; gap:24px}
.footer h4{margin:0 0 10px; color:var(--cyan)}
.footer a{color:var(--ink); text-decoration:none}
.footer a:hover{color:var(--teal)}
.bottom{border-top:1px solid var(--reef); padding:12px 0; color:var(--ink-soft); text-align:center}

/* ---------- Responsive ---------- */
@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-img{min-height:360px}
  .card-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .card-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}

/* ---------- RESPONSIVE ENHANCEMENTS ---------- */

/* Mobile-first adjustments */
body { font-size: 16px; line-height: 1.6; }
img { max-width: 100%; height: auto; }

/* Navbar toggle */
.menu-toggle {
  display: none;
  background: none;
  border: 2px solid var(--mint);
  color: var(--mint);
  font-size: 26px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: .3s;
}
.menu-toggle:hover { background: var(--mint); color: var(--deep-sea); }

/* Mobile Nav */
.nav {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.nav.open {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, var(--ocean), var(--deep-sea));
  border-radius: 12px;
  padding: 12px;
  width: 100%;
}

/* Containers and grids */
.container, .yoga-container { width: 92%; margin-inline: auto; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 960px) {
  .grid-2 { grid-template-columns: 1fr; }
  .features, .steps, .testimonials, .faq { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr; }
  .destinations { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
}

/* Tablet & small laptop (600–960 px) */
@media (max-width: 960px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.6rem; }
  p, .sub { font-size: 1rem; }
  .hero { padding: 24px; }
  .hero-img { min-height: 300px; border-radius: 14px; }
  .btn { padding: 10px 16px; font-size: 15px; }
}

/* Mobile (<600 px) */
@media (max-width: 600px) {
  .header-inner { flex-wrap: wrap; justify-content: space-between; }
  .menu-toggle { display: block; margin-left: auto; }
  .nav { display: none; width: 100%; }
  .nav.open { display: flex; }

  .card-grid, .destinations, .features, .steps, .testimonials, .gallery, .faq {
    grid-template-columns: 1fr;
  }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-img { width: 100%; height: auto; }

  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.4rem; }
  .section { padding: 36px 0; }

  .float-bubble { width: 50px; height: 50px; font-size: 22px; }
}

/* For better form usability on phones */
.input, textarea, .input-dark {
  width: 100%;
  font-size: 16px;
}
button, .btn {
  width: auto;
  min-width: 120px;
  font-size: 16px;
  padding: 12px 20px;
}
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: var(--shadow);
  aspect-ratio: auto;
}