/* =============================================================
   HiCare Protection Pest Control -- main stylesheet
   Brand palette extracted from the shield logo:
     red    #DE3333   blue  #206BAB   blue-light #3985C2
     green  #5C8A2E   gray  #4B5563
   ============================================================= */

:root{
    --red:        #DE3333;
    --red-dark:   #B32424;
    --blue:       #206BAB;
    --blue-dark:  #123657;
    --blue-light: #3985C2;
    --sky:        #79BADF;
    --green:      #5C8A2E;
    --green-dark: #43671F;
    --ink:        #1F2937;
    --gray-700:   #46505c;
    --gray-500:   #6B7280;
    --gray-300:   #D6DCE3;
    --gray-100:   #F3F5F8;
    --off-white:  #F7F9FB;
    --white:      #FFFFFF;

    --font-head: 'Poppins', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;

    --radius: 14px;
    --radius-sm: 8px;
    --shadow: 0 10px 30px rgba(18, 54, 87, 0.10);
    --shadow-sm: 0 4px 14px rgba(18, 54, 87, 0.08);
    --container: 1180px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
    margin:0;
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5{
    font-family: var(--font-head);
    color: var(--blue-dark);
    line-height: 1.25;
    margin: 0 0 .6em;
}
p{ margin: 0 0 1em; }
a{ color: var(--blue); text-decoration: none; }
img{ max-width: 100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }
.container{ max-width: var(--container); margin: 0 auto; padding: 0 20px; }

.skip-link{
    position:absolute; left:-999px; top:0; background:var(--blue-dark); color:#fff;
    padding:10px 16px; z-index:9999; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---------------- Buttons ---------------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family: var(--font-head); font-weight:600; font-size:.95rem;
    padding: 13px 26px; border-radius: 50px; border:2px solid transparent;
    cursor:pointer; transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
    white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn-red{ background: var(--red); color:#fff; box-shadow: 0 8px 20px rgba(222,51,51,.30);}
.btn-red:hover{ background: var(--red-dark); color:#fff; }
.btn-blue{ background: var(--blue); color:#fff; box-shadow: 0 8px 20px rgba(32,107,171,.30);}
.btn-blue:hover{ background: var(--blue-dark); color:#fff; }
.btn-green{ background: var(--green); color:#fff; box-shadow: 0 8px 20px rgba(92,138,46,.30);}
.btn-green:hover{ background: var(--green-dark); color:#fff; }
.btn-outline{ background: transparent; border-color: currentColor; color: var(--white); }
.btn-outline:hover{ background: rgba(255,255,255,.15); color: var(--white); }
.btn-outline-blue{ background: transparent; border-color: var(--blue); color: var(--blue); }
.btn-outline-blue:hover{ background: var(--blue); color:#fff; }
.btn-sm{ padding: 9px 18px; font-size: .85rem; }
.btn-block{ width:100%; }

/* ---------------- Top bar ---------------- */
.topbar{ background: var(--blue-dark); color: #dbe7f2; font-size: .82rem; }
.topbar-inner{ display:flex; justify-content:space-between; align-items:center; padding: 8px 20px; gap: 16px; flex-wrap: wrap;}
.topbar-left{ display:flex; gap: 22px; flex-wrap: wrap;}
.topbar-left a{ color:#dbe7f2; display:inline-flex; align-items:center; gap:6px; }
.topbar-left a:hover{ color:#fff; }
.topbar-right{ display:flex; align-items:center; gap:18px; }
.topbar-tagline{ font-style: italic; color:#a9c4dc; }
.topbar-social{ display:flex; gap:8px; }
.topbar-social a{
    width:24px; height:24px; border-radius:50%; background: rgba(255,255,255,.12);
    display:flex; align-items:center; justify-content:center; font-size:.7rem; color:#fff; text-transform: uppercase;
}
.topbar-social a:hover{ background: var(--red); }
.topbar-email{ display:none; }
@media (min-width: 560px){ .topbar-email{ display:inline-flex; } }

/* ---------------- Icons (simple css shapes to avoid extra icon fonts) ---------------- */
.ico{ display:inline-block; width:14px; height:14px; position:relative; }
.ico-phone::before{ content:"\260E"; }
.ico-mail::before{ content:"\2709"; }
.ico-pin::before{ content:"\1F4CD"; }
.ico-clock::before{ content:"\23F0"; }
.ico-phone::before,.ico-mail::before,.ico-pin::before,.ico-clock::before{ font-size: .95em; }

/* ---------------- Header / Nav ---------------- */
.site-header{
    background: #fff; position: sticky; top:0; z-index: 500;
    box-shadow: 0 2px 14px rgba(18,54,87,.08);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding: 12px 20px; gap: 20px;}
.brand{ display:flex; align-items:center; gap:12px; flex-shrink:1; min-width:0; }
.brand img{ width:52px; height:52px; object-fit:contain; flex-shrink:0; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.brand-name{ font-family: var(--font-head); font-weight:800; font-size:1.15rem; color: var(--blue-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-tagline{ font-size:.72rem; color: var(--green-dark); font-weight:600; letter-spacing:.03em; text-transform: uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.main-nav{ display:flex; align-items:center; gap: 26px; margin-left:auto; }
.main-nav > ul{ display:flex; align-items:center; gap: 4px; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
    display:block; padding: 10px 14px; color: var(--ink); font-weight:600; font-size:.95rem;
    border-radius: 8px; transition: color .15s, background .15s;
}
.main-nav > ul > li > a:hover, .main-nav > ul > li > a.active{ color: var(--blue); background: var(--gray-100); }
.has-dropdown .dropdown{
    position:absolute; top: 100%; left:0; background:#fff; min-width: 220px;
    box-shadow: var(--shadow); border-radius: var(--radius-sm); padding: 8px; opacity:0; visibility:hidden;
    transform: translateY(8px); transition: all .18s ease; z-index:50;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.dropdown li a{ display:block; padding: 9px 14px; border-radius:6px; color: var(--ink); font-size:.9rem; font-weight:500; }
.dropdown li a:hover{ background: var(--gray-100); color: var(--blue); }
.nav-cta{ display:flex; gap:10px; }
.nav-toggle{
    display:none; flex-direction:column; justify-content:center; gap:5px; width:38px; height:34px;
    background:transparent; border:0; cursor:pointer; padding:4px; flex-shrink:0;
}
.nav-toggle span{ display:block; height:3px; border-radius:3px; background: var(--blue-dark); }

@media (max-width: 400px){
    .brand-name{ font-size:.98rem; }
    .brand-tagline{ display:none; }
    .header-inner{ gap:10px; }
}

@media (max-width: 980px){
    .nav-toggle{ display:flex; }
    .main-nav{
        position:fixed; inset: 0 0 0 auto; width: min(320px, 85%); height:100vh;
        background:#fff; flex-direction:column; align-items:stretch; padding: 90px 24px 24px;
        transform: translateX(100%); transition: transform .3s ease; overflow-y:auto; box-shadow: -10px 0 40px rgba(0,0,0,.15);
        gap: 14px;
    }
    .main-nav.open{ transform: translateX(0); }
    .main-nav > ul{ flex-direction:column; align-items:stretch; gap:2px; }
    .has-dropdown .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; display:none; padding-left: 10px; }
    .has-dropdown.open .dropdown{ display:block; }
    .nav-cta{ flex-direction:column; margin-top: 10px; }
}

.whatsapp-float{
    position:fixed; right: 20px; bottom: 22px; width:58px; height:58px; border-radius:50%;
    background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow: 0 8px 24px rgba(37,211,102,.45); z-index: 400; transition: transform .2s;
}
.whatsapp-float:hover{ transform: scale(1.08); }

/* ---------------- Hero ---------------- */
.hero{
    position:relative; overflow:hidden; color:#fff; min-height: 78vh; display:flex; align-items:center;
    background: var(--blue-dark);
}
.hero video, .hero .hero-poster{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
.hero::after{
    content:""; position:absolute; inset:0; z-index:1;
    background: linear-gradient(100deg, rgba(18,54,87,.92) 15%, rgba(18,54,87,.68) 55%, rgba(18,54,87,.42) 100%);
}
.hero-inner{ position:relative; z-index:2; padding: 90px 20px 70px; }
.hero-eyebrow{
    display:inline-flex; align-items:center; gap:8px; background: rgba(255,255,255,.14); backdrop-filter: blur(3px);
    padding: 7px 16px; border-radius: 50px; font-size:.82rem; font-weight:600; letter-spacing:.03em; margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,.25);
}
.hero h1{ color:#fff; font-size: clamp(2rem, 4.6vw, 3.4rem); max-width: 720px; font-weight:800; }
.hero h1 span{ color: #ffd8d8; }
.hero p.lead{ font-size: 1.12rem; max-width: 560px; color:#e4edf5; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 26px; }
.hero-trust{ display:flex; gap: 26px; flex-wrap:wrap; margin-top: 46px; }
.hero-trust .stat{ min-width: 110px; }
.hero-trust .stat b{ display:block; font-family: var(--font-head); font-size: 1.7rem; color:#fff; }
.hero-trust .stat span{ font-size:.82rem; color:#cfe0ee; }

/* ---------------- Section basics ---------------- */
.section{ padding: 78px 0; }
.section-tight{ padding: 50px 0; }
.section-alt{ background: var(--off-white); }
.section-dark{ background: var(--blue-dark); color:#e7eef5; }
.section-dark h2, .section-dark h3{ color:#fff; }
.section-head{ max-width: 680px; margin: 0 auto 46px; text-align:center; }
.eyebrow{
    display:inline-block; color: var(--red); font-weight:700; font-size:.78rem; letter-spacing:.09em;
    text-transform:uppercase; margin-bottom: 10px;
}
.section-head h2{ font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.section-head p{ color: var(--gray-700); font-size: 1.02rem; }

/* ---------------- Services grid ---------------- */
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 900px){ .services-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .services-grid{ grid-template-columns: 1fr; } }

.service-card{
    background:#fff; border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-300); transition: transform .2s ease, box-shadow .2s ease; display:flex; flex-direction:column;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.svc-icon-wrap{
    width:64px; height:64px; border-radius:50%; background: var(--gray-100); color: var(--blue);
    display:flex; align-items:center; justify-content:center; margin-bottom: 18px; flex-shrink:0;
}
.service-card:nth-child(6n+1) .svc-icon-wrap{ color: var(--red); }
.service-card:nth-child(6n+2) .svc-icon-wrap{ color: var(--blue); }
.service-card:nth-child(6n+3) .svc-icon-wrap{ color: var(--green); }
.service-card:nth-child(6n+4) .svc-icon-wrap{ color: var(--blue-light); }
.service-card:nth-child(6n+5) .svc-icon-wrap{ color: var(--red); }
.service-card:nth-child(6n+6) .svc-icon-wrap{ color: var(--green); }
.svc-icon{ width:32px; height:32px; }
.service-card h3{ font-size: 1.18rem; margin-bottom: 8px; }
.service-card p{ color: var(--gray-700); font-size: .95rem; flex-grow:1; }
.service-card .card-link{ font-weight:700; color: var(--blue); font-size:.9rem; display:inline-flex; align-items:center; gap:6px; margin-top: 10px; }
.service-card .card-link::after{ content:"\2192"; transition: transform .15s; }
.service-card:hover .card-link::after{ transform: translateX(4px); }

/* Category strip (matches the 6 icon badges on the logo) */
.pest-strip{ display:flex; flex-wrap:wrap; justify-content:center; gap: 30px; margin-top: 10px;}
.pest-chip{ display:flex; flex-direction:column; align-items:center; gap:8px; width: 96px; }
.pest-chip .circle{
    width:70px; height:70px; border-radius:50%; border:2px solid var(--gray-300); display:flex;
    align-items:center; justify-content:center; color: var(--blue); background:#fff;
}
.pest-chip span{ font-size:.78rem; font-weight:700; text-align:center; color: var(--gray-700); text-transform:uppercase; letter-spacing:.02em;}

/* ---------------- Why choose us ---------------- */
.features-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
@media (max-width: 980px){ .features-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .features-grid{ grid-template-columns: 1fr; } }
.feature-card{ text-align:center; padding: 10px; }
.feature-icon{
    width:66px; height:66px; border-radius: 18px; margin: 0 auto 16px; display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, var(--blue), var(--blue-light)); color:#fff; font-size:1.6rem;
}
.feature-card:nth-child(2n) .feature-icon{ background: linear-gradient(135deg, var(--green), #7fb14a); }
.feature-card:nth-child(3n) .feature-icon{ background: linear-gradient(135deg, var(--red), #ef6a6a); }
.feature-card h3{ font-size: 1.05rem; }
.feature-card p{ color: var(--gray-700); font-size: .92rem; }

/* ---------------- About split / media blocks ---------------- */
.split{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
@media (max-width: 860px){ .split{ grid-template-columns: 1fr; gap: 34px; } }
.split-media{ position:relative; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.split-media img, .split-media video{ width:100%; height:100%; object-fit:cover; display:block; }
.split-media.ratio{ aspect-ratio: 4/3; }
.split-media .badge-float{
    position:absolute; bottom:18px; left:18px; background:#fff; padding: 14px 20px; border-radius: var(--radius-sm);
    box-shadow: var(--shadow); display:flex; align-items:center; gap:12px;
}
.badge-float b{ display:block; font-family: var(--font-head); font-size:1.35rem; color: var(--blue-dark); }
.badge-float span{ font-size:.78rem; color: var(--gray-700); }
.check-list{ margin-top: 18px; }
.check-list li{ display:flex; gap:12px; align-items:flex-start; margin-bottom: 12px; font-size:.97rem; color: var(--gray-700); }
.check-list li::before{
    content:"\2713"; flex-shrink:0; width:24px; height:24px; border-radius:50%; background: var(--green);
    color:#fff; font-size:.72rem; display:flex; align-items:center; justify-content:center; margin-top:2px; font-weight:700;
}

/* ---------------- Stats counters ---------------- */
.stats-band{ background: linear-gradient(120deg, var(--blue-dark), var(--blue)); color:#fff; }
.stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; text-align:center; }
@media (max-width: 700px){ .stats-grid{ grid-template-columns: repeat(2,1fr); } }
.stats-grid .stat b{ font-family: var(--font-head); font-size: clamp(1.8rem,4vw,2.6rem); display:block; }
.stats-grid .stat span{ color: #bcd4e8; font-size:.92rem; }

/* ---------------- Gallery ---------------- */
.gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px){ .gallery-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); } }
.gallery-item{
    position:relative; border-radius: var(--radius-sm); overflow:hidden; aspect-ratio: 1/1; cursor:pointer;
    box-shadow: var(--shadow-sm);
}
.gallery-item img, .gallery-item video{ width:100%; height:100%; object-fit:cover; transition: transform .3s ease; }
.gallery-item:hover img, .gallery-item:hover video{ transform: scale(1.06); }
.gallery-item .play-badge{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(18,54,87,.25);
}
.gallery-item .play-badge::before{
    content:""; width:0; height:0; border-top:11px solid transparent; border-bottom:11px solid transparent;
    border-left:18px solid #fff; margin-left:4px;
}
.gallery-item .play-badge{
    width:48px; height:48px; border-radius:50%; background: rgba(18,54,87,.55); margin:auto; position:absolute; inset:0; top:calc(50% - 24px); left:calc(50% - 24px);
}
.gallery-caption{ position:absolute; left:0; right:0; bottom:0; background: linear-gradient(0deg, rgba(18,54,87,.85), transparent); color:#fff; font-size:.78rem; padding: 20px 10px 8px; opacity:0; transition: opacity .2s; }
.gallery-item:hover .gallery-caption{ opacity:1; }

.lightbox{ position:fixed; inset:0; background: rgba(10,20,30,.92); z-index:1000; display:none; align-items:center; justify-content:center; padding: 30px; }
.lightbox.open{ display:flex; }
.lightbox-content{ max-width: 900px; width:100%; max-height:85vh; }
.lightbox-content img, .lightbox-content video{ width:100%; max-height:85vh; object-fit:contain; border-radius: 10px; }
.lightbox-close{ position:absolute; top:20px; right:26px; color:#fff; font-size:2rem; background:none; border:0; cursor:pointer; line-height:1; }

/* ---------------- Testimonials ---------------- */
.testimonial-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px){ .testimonial-grid{ grid-template-columns: 1fr; } }
.testimonial-card{
    background:#fff; border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-sm); border:1px solid var(--gray-300);
}
.stars{ color: #f0a500; letter-spacing: 2px; margin-bottom: 12px; font-size: .95rem; }
.testimonial-card p{ color: var(--gray-700); font-size:.98rem; }
.testimonial-name{ font-weight:700; color: var(--blue-dark); font-family: var(--font-head); font-size:.95rem; }
.testimonial-loc{ font-size:.8rem; color: var(--gray-500); }

/* ---------------- CTA banner ---------------- */
.cta-banner{
    background: linear-gradient(120deg, var(--red), #c92a2a); color:#fff; border-radius: var(--radius);
    padding: 44px; display:flex; align-items:center; justify-content:space-between; gap: 26px; flex-wrap:wrap;
    margin: 0 20px;
}
.cta-banner h3{ color:#fff; margin-bottom: 6px; font-size: 1.5rem; }
.cta-banner p{ color:#ffdada; margin:0; }

/* ---------------- Contact page ---------------- */
.contact-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 46px; align-items:start; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-info-card{
    background: var(--blue-dark); color:#e7eef5; border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow);
}
.contact-info-card h3{ color:#fff; }
.contact-info-list li{ display:flex; gap:14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.contact-info-list li:last-child{ border-bottom:0; }
.contact-info-list .ico-box{
    width:40px; height:40px; border-radius:10px; background: rgba(255,255,255,.12); display:flex; align-items:center;
    justify-content:center; flex-shrink:0; font-size:1.1rem;
}
.contact-info-list b{ display:block; color:#fff; font-size:.92rem; }
.contact-info-list span, .contact-info-list a{ font-size:.88rem; color:#c7d9e8; }

.map-embed{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); margin-top: 22px; border:0; width:100%; height:260px; }

.form-card{ background:#fff; border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); border:1px solid var(--gray-300); }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px){ .form-grid{ grid-template-columns: 1fr; } }
.form-group{ margin-bottom: 18px; }
.form-group.full{ grid-column: 1 / -1; }
label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:7px; color: var(--gray-700); }
input[type=text], input[type=email], input[type=tel], textarea, select{
    width:100%; padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--gray-300);
    font-family: var(--font-body); font-size:.95rem; color: var(--ink); background:#fff; transition: border-color .15s;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color: var(--blue); }
textarea{ resize:vertical; min-height:120px; }
.hp-field{ position:absolute; left:-9999px; top:-9999px; }
.alert{ padding: 14px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size:.92rem; }
.alert-success{ background:#e7f6e9; color: var(--green-dark); border: 1px solid #bfe3c4; }
.alert-error{ background:#fdeaea; color: var(--red-dark); border: 1px solid #f6c3c3; }

/* ---------------- Page (generic CMS) content ---------------- */
.page-hero{
    background: linear-gradient(120deg, var(--blue-dark), var(--blue)); color:#fff; padding: 62px 0 46px; text-align:center;
}
.page-hero h1{ color:#fff; margin-bottom: 8px; }
.breadcrumbs{ font-size:.85rem; color:#cfe0ee; }
.breadcrumbs a{ color:#fff; }
.page-content{ max-width: 820px; margin: 0 auto; }
.page-content h2{ margin-top: 1.4em; }
.page-content ul{ list-style: disc; padding-left: 22px; margin-bottom: 1em; }
.page-content ul li{ margin-bottom: 6px; }

/* Service detail page */
.service-detail-grid{ display:grid; grid-template-columns: 2fr 1fr; gap: 44px; align-items:start; }
@media (max-width: 900px){ .service-detail-grid{ grid-template-columns: 1fr; } }
.service-sidebar{ background: var(--off-white); border-radius: var(--radius); padding: 26px; border:1px solid var(--gray-300); }
.service-sidebar h4{ font-size:1rem; margin-bottom: 14px; }
.service-sidebar ul li a{
    display:block; padding: 10px 12px; border-radius: 8px; font-size:.9rem; font-weight:600; color: var(--ink); margin-bottom:4px;
}
.service-sidebar ul li a:hover, .service-sidebar ul li a.active{ background: var(--blue); color:#fff; }
.service-content ul{ list-style: disc; padding-left: 22px; margin-bottom: 1.2em; }
.service-content ul li{ margin-bottom: 8px; color: var(--gray-700); }

/* ---------------- Misc ---------------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.divider-icon{ display:flex; justify-content:center; margin-bottom: 18px; }
.divider-icon svg{ width:44px; height:44px; color: var(--red); }

.badge-pill{
    display:inline-flex; align-items:center; gap:6px; background: #eaf2f9; color: var(--blue-dark); font-weight:700;
    font-size:.78rem; padding:6px 14px; border-radius: 50px; text-transform:uppercase; letter-spacing:.03em;
}

@media (max-width: 700px){
    .section{ padding: 54px 0; }
    .cta-banner{ padding: 30px 24px; text-align:center; justify-content:center; }
}

/* ---------------- Footer ---------------- */
.site-footer{ background: var(--blue-dark); color: #c7d9e8; }
.footer-top{ padding: 64px 0 40px; }
.footer-grid{
    display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px;
}
@media (max-width: 980px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .footer-grid{ grid-template-columns: 1fr; } }

.footer-col h4{
    color:#fff; font-size:1rem; margin-bottom: 18px; position:relative; padding-bottom:10px;
}
.footer-col h4::after{
    content:""; position:absolute; left:0; bottom:0; width:34px; height:3px; background: var(--red); border-radius:3px;
}
.footer-col ul li{ margin-bottom: 11px; }
.footer-col ul li a{ color:#b9cee0; font-size:.92rem; transition: color .15s, padding-left .15s; }
.footer-col ul li a:hover{ color:#fff; padding-left:3px; }

.footer-about img{ margin-bottom: 16px; background:#fff; border-radius:10px; padding:4px; }
.footer-about p{ color:#b9cee0; font-size:.92rem; line-height:1.7; }
.footer-social{ display:flex; gap:10px; margin-top: 16px; }
.footer-social a{
    width:34px; height:34px; border-radius:50%; background: rgba(255,255,255,.1); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:.78rem; text-transform:uppercase; font-weight:700;
    transition: background .2s;
}
.footer-social a:hover{ background: var(--red); }

.footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:#b9cee0; margin-bottom:14px; }
.footer-contact li .ico{ margin-top:3px; flex-shrink:0; }
.footer-contact li a{ color:#b9cee0; }
.footer-contact li a:hover{ color:#fff; }

.footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; }
.footer-bottom-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-bottom-inner p{ margin:0; font-size:.85rem; color:#9fb7cc; }
.footer-credit{ font-style: italic; }

@media (max-width: 700px){
    .section{ padding: 54px 0; }
    .cta-banner{ padding: 30px 24px; text-align:center; justify-content:center; }
}