@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* CSS VARIABLES */
:root{
  --primary:#0F6F70;
  --secondary:#BFD8C8;
  --accent:#CC6B49;
  --dark:#1D2630;
  --light:#F5F7F4;

  --ink-1: rgba(15,111,112,0.12);
  --ink-2: rgba(191,216,200,0.18);
  --ink-3: rgba(204,107,73,0.10);
  --shadow-soft: 0 14px 40px rgba(0,0,0,0.08);
}

/* BASE */
html { scroll-behavior: smooth; }
body{
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  color: var(--dark);
  background:
    radial-gradient(1200px 600px at -5% -10%, var(--secondary) 0%, transparent 40%),
    radial-gradient(800px 500px at 110% 10%, rgba(15,111,112,0.10) 0%, transparent 50%),
    linear-gradient(180deg, #ffffff 0%, #F8FAF8 100%);
  line-height: 1.7;
  font-size: 16.5px;
  overflow-wrap: break-word;
}

/* TYPOGRAPHY */
h1,h2,h3,h4,h5,h6{
  font-family: 'Bebas Neue', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  overflow-wrap: break-word; word-break: break-word; hyphens: auto;
  color: var(--dark);
}
h1{ font-size: clamp(2rem,5vw,3.5rem); line-height: 1.1; }
h2{ font-size: clamp(1.6rem,3.6vw,2.4rem); line-height: 1.15; }
h3{ font-size: clamp(1.3rem,2.8vw,1.8rem); line-height: 1.2; }
p, li, a, span, small, blockquote, label{
  overflow-wrap: break-word;
}
.text-center{ text-align: center; }

/* UTILITIES */
.container{ max-width:1200px; margin:0 auto; padding:0 24px; width:100%; }
.section-padding{ padding:80px 0; }

/* WATER-COLOR OVERLAYS */
.section-padding{
  position: relative;
  isolation: isolate;
}
.section-padding::before{
  content:"";
  position:absolute; inset:-60px 0 auto 0; height:120px;
  background: linear-gradient( to bottom right, rgba(191,216,200,0.35), rgba(15,111,112,0.12) );
  transform: skewY(-3deg);
  z-index:-1;
  pointer-events:none;
  filter: blur(0.4px);
}
.section-padding::after{
  content:"";
  position:absolute; inset:auto 0 -60px 0; height:120px;
  background: linear-gradient( to top left, rgba(204,107,73,0.15), rgba(15,111,112,0.10) );
  transform: skewY(-3deg);
  z-index:-1;
  pointer-events:none;
}

/* TOP BAR */
.top-bar{
  background: linear-gradient(90deg, var(--accent), #B85F3F);
  color: #fff;
  font-size: 0.9rem;
  letter-spacing: 0.3px;
  position: relative;
}
.top-bar .container{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:6px 24px;
}
.top-bar::after{
  content:"";
  position:absolute; inset:auto 0 -1px 0; height:2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.35), transparent 40%, rgba(0,0,0,0.15));
  opacity:0.5;
}

/* MAIN NAV */
.main-nav{ position:sticky; top:0; z-index:1000; width:100%; background: linear-gradient(180deg, #ffffff 0%, #F5F7F4 100%); }
.nav-container{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; max-width:1200px; margin:0 auto; padding:8px 24px; }
.nav-logo{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  color: var(--primary);
  font-family:'Bebas Neue', sans-serif; font-size:1.6rem; letter-spacing:1px;
}
.nav-logo::before{
  content:""; width:28px; height:28px;
  background:
    radial-gradient(circle at 30% 30%, var(--primary) 0 55%, transparent 56%),
    radial-gradient(18px 10px at 60% 65%, var(--accent) 0 55%, transparent 56%);
  border:2px solid var(--primary);
  transform: rotate(-12deg);
}

/* NAV LINKS (MANDATORY RULES) */
.nav-links{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; list-style:none; padding:0; margin:0; }
.nav-links a{ white-space:nowrap; font-size:0.9rem; padding:6px 10px; }

/* Additional nav link styling */
.nav-links a{
  color: var(--dark);
  text-decoration: none;
  border-top: 3px solid transparent;
  transition: color .2s ease, border-color .25s ease, background .25s ease;
  border-bottom: 1px dashed rgba(15,111,112,0.18);
}
.nav-links a:hover,
.nav-links a:focus{
  color: var(--primary);
  border-top-color: var(--accent);
  background: linear-gradient(180deg, rgba(191,216,200,0.18), rgba(255,255,255,0));
  outline: none;
}

/* NAV TOGGLE (checkbox hack) */
.nav-toggle-checkbox{ position:absolute; appearance:none; -webkit-appearance:none; width:1px; height:1px; clip-path: inset(50%); overflow:hidden; }
.nav-toggle-label{
  display:none; align-items:center; justify-content:center; gap:8px;
  padding:8px 10px; border:2px solid var(--primary); color:var(--primary);
  cursor:pointer; user-select:none;
  font-weight:600; border-radius:6px;
  background: linear-gradient(180deg, rgba(191,216,200,0.35), rgba(255,255,255,0));
}
.nav-toggle-label .bars{
  position:relative; width:20px; height:14px; display:inline-block;
}
.nav-toggle-label .bars::before,
.nav-toggle-label .bars::after,
.nav-toggle-label .bars span{
  content:""; position:absolute; left:0; right:0; height:2px; background:var(--primary); transition:.25s ease;
}
.nav-toggle-label .bars::before{ top:0; }
.nav-toggle-label .bars::after{ bottom:0; }
.nav-toggle-label .bars span{ top:50%; transform:translateY(-50%); }
.nav-toggle-checkbox:checked + .nav-toggle-label .bars::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle-checkbox:checked + .nav-toggle-label .bars::after{ transform:translateY(-6px) rotate(-45deg); }
.nav-toggle-checkbox:checked + .nav-toggle-label .bars span{ transform:scaleX(0); }

/* HERO */
.hero-section{
  position: relative;
  background:
    radial-gradient(900px 400px at 15% 15%, rgba(191,216,200,0.55) 0%, transparent 60%),
    radial-gradient(1200px 500px at 85% 0%, rgba(15,111,112,0.25) 0%, transparent 65%),
    linear-gradient(180deg, #EAF3EE 0%, #FFFFFF 100%);
  overflow: visible;
}
.hero-section::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    radial-gradient(18px 18px at 10% 20%, rgba(204,107,73,0.18) 40%, transparent 42%),
    radial-gradient(12px 12px at 92% 18%, rgba(15,111,112,0.22) 40%, transparent 45%),
    radial-gradient(8px 8px at 70% 80%, rgba(204,107,73,0.16) 40%, transparent 45%);
  animation: dotTwinkle 8s ease-in-out infinite;
  pointer-events:none;
  z-index:0;
}
.hero-section::after{
  content:"";
  position:absolute; inset:auto -10% -5% -10%; height:120px;
  background: linear-gradient( to top left, rgba(191,216,200,0.4), rgba(15,111,112,0.1) );
  transform: skewY(-3deg);
  z-index:0;
}
/* Hero card */
.hero-section .card{
  margin: 30px auto 0 auto;
  max-width: 880px;
  border-top: 4px solid var(--accent);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.85), rgba(245,247,244,0.95)),
    radial-gradient(160% 120% at 20% 0%, rgba(191,216,200,0.35), transparent 40%),
    radial-gradient(140% 120% at 110% 30%, rgba(15,111,112,0.15), transparent 45%);
  backdrop-filter: blur(2px);
  padding: 36px 36px 32px 36px;
  transform: translateZ(0);
  position: relative;
  overflow: visible; min-width:0; width:100%;
}
.hero-section .card::before{
  content:"";
  position:absolute; inset:-10px -10px auto auto; width:120px; height:120px;
  background: radial-gradient(60px 40px at 50% 50%, rgba(15,111,112,0.18) 0, transparent 60%);
  transform: rotate(-12deg);
  filter: blur(0.4px);
  animation: washFloat 14s ease-in-out infinite;
  z-index: -1;
}

/* CARDS (flat, industrial top border) */
.card{
  overflow: visible; min-width:0; width:100%;
  border-top:4px solid var(--accent);
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAF8 100%);
  padding:24px 22px;
  box-shadow: none; border-radius: 0;
  transition: transform .25s ease, outline-color .25s ease, background .35s ease;
  position:relative;
}
.card::after{
  content:"";
  position:absolute; left:0; right:0; top:-4px; height:4px;
  background: linear-gradient(90deg, rgba(204,107,73,0.0), rgba(204,107,73,0.55), rgba(204,107,73,0.0));
  opacity:0; transition: opacity .25s ease;
  pointer-events:none;
}
.card h2, .card h3{ overflow-wrap:break-word; word-break:break-word; hyphens:auto; }
.card:hover{
  transform: translateY(-4px);
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F7F4 100%);
}
.card:hover::after{ opacity:1; }

/* BUTTONS */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 20px; border:2px solid currentColor; font-weight:700;
  letter-spacing:0.6px; text-transform:uppercase; text-decoration:none; cursor:pointer;
  min-height:44px;
  transition: transform .2s ease, background .25s ease, color .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative; overflow:visible; border-radius:0;
}
.btn-primary{
  color:#fff; background: linear-gradient(90deg, var(--primary), #0B5A5A);
  border-color: transparent;
}
.btn-primary:hover{ transform: translateY(-2px); background: linear-gradient(90deg, #0B5A5A, var(--primary)); }
.btn-secondary{
  color: var(--primary); background: linear-gradient(180deg, rgba(191,216,200,0.55), rgba(191,216,200,0.15));
  border-color: var(--primary);
}
.btn-secondary:hover{ color:#fff; background: linear-gradient(90deg, var(--primary), #0B5A5A); border-color: transparent; }

/* STATS */
.stats-section{
  background:
    radial-gradient(900px 300px at 0% 20%, rgba(191,216,200,0.45) 0%, transparent 60%),
    radial-gradient(700px 260px at 100% 80%, rgba(15,111,112,0.25) 0%, transparent 65%),
    linear-gradient(180deg, #F5F7F4 0%, #FFFFFF 100%);
  position:relative;
}
.stats-section::before{
  content:""; position:absolute; inset:0; mix-blend-mode:multiply; opacity:0.08;
  background-image: radial-gradient(2px 2px at 20% 30%, var(--dark) 40%, transparent 42%),
                    radial-gradient(2px 2px at 40% 70%, var(--dark) 40%, transparent 42%),
                    radial-gradient(2px 2px at 70% 50%, var(--dark) 40%, transparent 42%);
  pointer-events:none;
}
.stat-number{
  font-family:'Bebas Neue', sans-serif;
  font-size: 2.2rem;
  color: var(--primary);
  letter-spacing: 1px;
}
.service-icon{
  font-size: 1.6rem;
  color: var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border:2px solid rgba(204,107,73,0.45);
  margin-bottom:10px;
}

/* GRIDS */
.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:22px; }
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:22px; }
.grid-4{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:18px; }

/* FORMS */
.contact-form{ display:grid; gap:14px; }
.contact-form label{ font-weight:700; text-transform:uppercase; letter-spacing:.6px; font-size:0.85rem; }
.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  padding:12px 14px;
  border:2px solid rgba(15,111,112,0.18);
  background:#fff;
  font-family:inherit; font-size:1rem; line-height:1.5;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  outline-offset: 2px;
  min-height:44px;
}
.contact-form textarea{ min-height:140px; resize:vertical; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(15,111,112,0.15);
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F7F4 100%);
}
.contact-form .btn{ margin-top:6px; }

/* FOOTER */
.site-footer{
  position:relative; color:#E6ECEA;
  background: linear-gradient(180deg, #1D2630 0%, #11161D 100%);
  overflow: visible;
}
.site-footer .container{ padding-top:56px; padding-bottom:28px; }
.site-footer h4{ color:#FFFFFF; margin-bottom:10px; }
.site-footer a{ color:#E6ECEA; text-decoration:none; }
.site-footer a:hover{ color:#FFFFFF; }
.footer-contact-list a{ border-bottom:1px dashed rgba(230,236,234,0.2); padding-bottom:2px; }
.footer-contact-list a:hover{ border-bottom-color: rgba(255,255,255,0.55); }
.site-footer::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 10px),
    radial-gradient(1000px 300px at 10% -10%, rgba(15,111,112,0.22) 0%, transparent 60%),
    radial-gradient(900px 280px at 110% 110%, rgba(191,216,200,0.12) 0%, transparent 65%);
  opacity:0.28;
  pointer-events:none;
}
.footer-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:28px; position:relative; z-index:1; }
.footer-brand{ display:flex; flex-direction:column; gap:10px; }
.footer-logo{
  display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none;
  font-family:'Bebas Neue', sans-serif; font-size:1.8rem; letter-spacing:1px;
}
.footer-logo::before{
  content:""; width:26px; height:26px; border:2px solid #fff;
  background:
    radial-gradient(circle at 40% 40%, #fff 0 45%, transparent 46%),
    radial-gradient(14px 10px at 60% 65%, rgba(255,255,255,0.5) 0 55%, transparent 56%);
  transform: rotate(-10deg);
}
.footer-description{ color:#D3DDDA; }
.footer-links{ list-style:none; display:grid; gap:10px; padding:0; margin:0; }
.footer-links a{ color:#E6ECEA; text-decoration:none; border-bottom:1px dashed rgba(230,236,234,0.2); padding-bottom:4px; }
.footer-links a:hover{ color:#fff; border-bottom-color: rgba(255,255,255,0.5); }
.footer-contact-list{ list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.08); margin-top:24px; padding-top:16px; font-size:0.9rem; color:#B8C4C2;
}

/* PAGE-SPECIFIC ACCENTS */
.badge-accent{
  display:inline-block; padding:4px 8px; background: linear-gradient(90deg, rgba(204,107,73,0.15), rgba(204,107,73,0.05)); color: var(--accent);
  border-top:3px solid var(--accent); font-weight:700; letter-spacing:.4px; text-transform:uppercase;
}

/* ANIMATIONS */
@keyframes dotTwinkle{
  0%, 100% { opacity: .55; transform: translateY(0px) }
  50% { opacity: .9; transform: translateY(-6px) }
}
@keyframes washFloat{
  0% { transform: translate(0,0) rotate(-8deg) scale(1); }
  50% { transform: translate(8px, -6px) rotate(-10deg) scale(1.02); }
  100% { transform: translate(0,0) rotate(-8deg) scale(1); }
}
@keyframes fadeUp{
  0% { opacity:0; transform: translateY(16px); }
  100% { opacity:1; transform: translateY(0); }
}
@keyframes scaleIn{
  0% { opacity:0; transform: scale(.95); }
  100% { opacity:1; transform: scale(1); }
}

/* APPLY ANIMATIONS TO COMMON UI */
.hero-section h1, .hero-section p, .hero-section .btn{ animation: fadeUp .7s ease both; }
.hero-section h1{ animation-delay:.05s }
.hero-section p{ animation-delay:.15s }
.hero-section .btn{ animation-delay:.25s }
.service-icon{ animation-delay: .2s; }
.stat-number{ animation-delay: .1s; }

/* ACCESSIBILITY FOCUS */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px dashed var(--accent); outline-offset:3px;
}

/* TABLES (if used) */
table{ width:100%; border-collapse: collapse; }
th, td{ text-align:left; padding:12px 10px; border-bottom:1px solid rgba(0,0,0,0.08); }
th{ font-weight:700; }

/* IMAGES */
img{ max-width:100%; height:auto; display:block; }

/* WRAPPED SECTIONS WITH DISTINCT BACKGROUNDS */
.section--wash-teal{
  background:
    radial-gradient(800px 280px at 0% 20%, rgba(191,216,200,0.45) 0, transparent 60%),
    radial-gradient(700px 260px at 100% 80%, rgba(15,111,112,0.25) 0, transparent 60%),
    linear-gradient(180deg, #F5F7F4 0%, #FFFFFF 100%);
}
.section--wash-clay{
  background:
    radial-gradient(700px 300px at 110% -10%, rgba(204,107,73,0.18) 0, transparent 60%),
    radial-gradient(600px 300px at -10% 110%, rgba(191,216,200,0.25) 0, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFA 100%);
}

/* LISTS */
ul{ padding-left:1.2rem; }
li + li{ margin-top:6px; }

/* QUOTES */
blockquote{
  border-left:4px solid var(--primary);
  padding:10px 16px; background: linear-gradient(180deg, rgba(191,216,200,0.25), rgba(191,216,200,0.05));
  font-style:italic;
}

/* PRICING HIGHLIGHT */
.pricing-plan.featured{
  outline: 3px solid var(--primary);
  background: linear-gradient(180deg, rgba(191,216,200,0.35), rgba(191,216,200,0.08));
}

/* RESULTS GALLERY STYLE */
.results-grid .card{
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F7F3 100%);
}
.results-grid .card .label{
  display:inline-block; padding:2px 8px; border:2px solid var(--primary); color:var(--primary); text-transform:uppercase; font-weight:700; font-size:.8rem; letter-spacing:.6px;
}

/* FAQ accordion hints (no JS, but style-ready) */
.faq-item .faq-question{
  cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:700;
  border-top:3px solid var(--primary); padding:14px 0;
}
.faq-item .faq-answer{ padding:10px 0 18px 0; }

/* RESPONSIVE */
@media (max-width: 1024px){
  .nav-logo{ font-size:1.45rem; }
}

/* MANDATORY 768px RULES */
@media (max-width: 768px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
  .nav-toggle-label{ display:flex; }
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; padding:16px 24px; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,0.12);
  }
  .nav-toggle-checkbox:checked ~ .nav-links{ display:flex; }
  .nav-links a{ display:block; width:100%; padding:12px 16px; border-radius:8px; font-size:1rem; }
  .hero-section .card{ padding:28px 20px; }
  .footer-grid{ grid-template-columns:1fr; }
}

/* MANDATORY 480px */
@media (max-width: 480px){
  .btn{ width:100%; }
  .nav-logo{ gap:8px; font-size:1.35rem; }
  .top-bar .container{ flex-direction:column; align-items:flex-start; }
}

/* PAGE HEADER STYLING EXAMPLE (MUNKVOLD RANCH LLC) */
.brandline{
  display:inline-block; height:8px; width:120px; background: linear-gradient(90deg, var(--primary), var(--accent)); margin:8px 0 16px 0;
}

/* HELPER: subtle separators */
.hr-soft{
  height:1px; background: linear-gradient(90deg, rgba(0,0,0,0), rgba(15,111,112,0.2), rgba(0,0,0,0));
  border:0; margin:22px 0;
}

/* === LAYOUT SAFETY OVERRIDES (always appended) === */
*,*::before,*::after{box-sizing:border-box}
h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;word-break:break-word;hyphens:auto}
p,li,span,a,td,th,label,blockquote,figcaption{overflow-wrap:break-word}
img,video,svg,canvas{max-width:100%;height:auto}
.container{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px;width:100%}
.main-nav{position:sticky;top:0;z-index:1000;width:100%}
.nav-container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;max-width:1200px;margin:0 auto;padding:8px 24px}
.nav-logo{flex-shrink:0}
.nav-links{display:flex;flex-wrap:wrap;list-style:none;gap:6px 16px;align-items:center;padding:0;margin:0}
.nav-links li{list-style:none}
.nav-links a{white-space:nowrap;font-size:0.9rem;padding:6px 10px;display:inline-block}
.card{overflow:visible;min-width:0}
.card h2,.card h3,.card h4{overflow-wrap:break-word;word-break:break-word;hyphens:auto}
.grid-2,.grid-3,.grid-4{display:grid}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.grid-2>*,.grid-3>*,.grid-4>*{min-width:0;width:100%}
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.team-grid>*{min-width:0}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.footer-grid>*{min-width:0}
@media(max-width:768px){
  .nav-links{position:absolute;top:100%;left:0;right:0;flex-direction:column;padding:16px 24px;display:none;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,0.12);border-top:1px solid rgba(0,0,0,0.06);z-index:999}
  .nav-links li{width:100%}
  .nav-links a{display:block;width:100%;padding:12px 16px;border-radius:8px;font-size:1rem;transition:background 0.2s}
  .nav-links a:hover{background:rgba(0,0,0,0.04)}
  .nav-toggle-label{display:flex!important;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;cursor:pointer}
  .nav-toggle-label:hover{background:rgba(0,0,0,0.04)}
  .nav-toggle-checkbox:checked~.nav-links{display:flex!important}
  .grid-2,.grid-3,.grid-4,.team-grid,.footer-grid{grid-template-columns:1fr}
  .hero-section{padding:80px 0 60px!important}
  .hero-section h1{font-size:clamp(1.8rem,6vw,2.8rem)!important}
  .section-padding{padding:50px 0!important}
  .card{padding:24px!important}
  .stats-section .stat-number{font-size:2rem!important}
}
@media(max-width:480px){
  .hero-section{padding:60px 0 40px!important}
  .section-padding{padding:40px 0!important}
  .btn{padding:12px 24px!important;font-size:0.95rem!important;width:100%!important;text-align:center}
  .hero-section .btn{width:auto!important}
  h2{font-size:clamp(1.3rem,4vw,2rem)!important}
}