/* ============================================================
   Neo Padma (Pvt) Ltd — styles.css
   With explanatory comments on each section
   ============================================================ */

/* ------------------------------------------------------------
   Base & Tokens (Global variables for colors, spacing, etc.)
   ------------------------------------------------------------ */
:root {
    --bg: #ffffff;
    /* Background color */
    --fg: #000000;
    /* Main text color */
    --muted: #4a5a5f;
    /* Muted/secondary text */
    --brand: #000000;
    /* Primary brand color */
    --brand-2: #e475a3;
    /* Accent color */
    --surface: #e4e2e2;
    /* Surface/background blocks */
    --ring: rgba(13, 179, 168, .35);
    /* Focus/hover ring */
    --radius: 0%;
    /* Border radius for cards */
    --shadow: 0 10px 30px rgba(0, 0, 0, .08);
    /* Global shadow */
}

/* ------------------------------------------------------------
   HTML & Body Defaults
   ------------------------------------------------------------ */
html {
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    scroll-behavior: smooth;
    /* Smooth scrolling for anchor links */
}

body {
    margin: 0;
    color: var(--fg);
    background: var(--bg);
    line-height: 1.6;
}

/* ------------------------------------------------------------
   Generic Elements
   ------------------------------------------------------------ */
img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--brand);
    text-decoration: none;
}

.container {
    width: min(1100px, 92%);
    margin: 0 auto;
}

/* ------------------------------------------------------------
   Accessibility: Skip Link
   ------------------------------------------------------------ */
.skip {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip:focus {
    left: 8px;
    top: 8px;
    width: auto;
    height: auto;
    padding: .5rem .75rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

/* ------------------------------------------------------------
   Header & Navigation
   ------------------------------------------------------------ */
header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #eef2f3;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .8rem 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-weight: 700;
    letter-spacing: .2px;
}

.brand img {
    width: clamp(140px, 20vw, 160px);
    /* min 140px, scales up, max 160px */
    height: auto;
}

nav ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav a {
    display: inline-block;
    padding: .5rem .75rem;
    border-radius: 10px;
}

nav a:hover {
    background: none;
    /* no background fill */
    color: var(--brand-2);
    /* optional: change text color on hover */
}

.menu-btn {
    display: none;
    /* Only visible in mobile view */
}

/* ------------------------------------------------------------
   Hero Section (Banner + Image Slider)
   ------------------------------------------------------------ */
.hero {
    padding: 6rem 0 4rem;
    position: relative;
    overflow: hidden;
    background: none;
    min-height: clamp(360px, 68vh, 760px);
}

/* Hero Section H1 color */
.hero h1 {
    color: #ffffff;
    /* white for readability */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    /* optional: improves contrast */
    font-weight: 300;
    /* thin/light weight */
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    /* ~26px min, ~38px max */
    line-height: 1.2;
}

/* Hero Section Buttons – Border Only,Hover Sync with Text */
.hero .btn {
    background: none !important;
    /* remove background */
    display: inline-block;
    padding: 0.4rem 1.2rem;
    border: 1px solid #fff;
    /* white border by default */
    border-radius: 999px;
    /* pill shape */
    box-shadow: none !important;
    /* remove shadow */
    color: #fff;
    /* keep text visible on images */
    font-weight: 300;
    /* keep text neat */
    transition: all 0.25s ease;
}

/* Hero Section Buttons Hover Effect */
.hero .btn:hover {
    color: var(--brand-2);
    /* pink accent on hover */
    border-color: var(--brand-2);
    /* optional: match border with text */
}

/* ------------------------------------------------------------
   Hero Text Slide Sync (Text per background image)
   ------------------------------------------------------------ */
.hero-texts {
    position: relative;
    /* stack text slides on top of each other */
}

.hero-slide {
    opacity: 0;
    /* hidden by default */
    position: absolute;
    /* overlap in the same space */
    top: 0;
    left: 0;
    transition: opacity 3s ease-in-out;
    /* smooth fade effect */
}

.hero-slide.active {
    opacity: 1;
    /* show current slide */
    position: relative;
    /* reflow into layout for spacing */
}

/* Slider wrapper */
.hero .slider {
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* Images inside slider */
.hero .slider img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: fadeCycle 21s linear infinite;
    transition: opacity 3s ease-in-out;
    /* ensures smooth fade */
}

/* Animation delays for each image */
.hero .slider img:nth-child(1) {
    animation-delay: 0s;
}

.hero .slider img:nth-child(2) {
    animation-delay: 7s;
}

.hero .slider img:nth-child(3) {
    animation-delay: 14s;
}

/* Slow fade-in and fade-out */
@keyframes fadeCycle {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    /* fade in over ~2s */
    40% {
        opacity: 1;
    }

    /* stay visible */
    60% {
        opacity: 0;
    }

    /* fade out slowly */
    100% {
        opacity: 0;
    }

    /* remain hidden */
}

/* Overlay gradient to improve text legibility */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .10) 40%, rgba(255, 255, 255, 0));
    z-index: -1;
}

@media (prefers-color-scheme: light) {
    .hero::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15) 40%, rgba(255, 255, 255, 0));
    }
}

@keyframes slideUp {

    0%,
    20% {
        transform: translateY(0);
    }

    25%,
    45% {
        transform: translateY(calc(var(--h) * -1));
    }

    50%,
    70% {
        transform: translateY(calc(var(--h) * -2));
    }

    75%,
    95% {
        transform: translateY(calc(var(--h) * -3));
    }

    100% {
        transform: translateY(0);
    }
}

/* ------------------------------------------------------------
   Typography & Buttons
   ------------------------------------------------------------ */
h1 {
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.2;
    margin: 0 0 .6rem;
}

.tagline {
    font-weight: 300;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.7vw, 1.2rem);
}

.cta-row {
    display: flex;
    gap: .8rem;
    margin-top: 1.4rem;
}

.btn {
    border: 0;
    padding: .9rem 1.1rem;
    border-radius: 999px;
    font-weight: 600;
    cursor: pointer;
}

.btn.primary {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
    box-shadow: 0 10px 20px var(--ring);
}

.btn.ghost {
    background: #fff;
    border: 1px solid #e5eef0;
}

/* ------------------------------------------------------------
   Sections (About, Services, etc.)
   ------------------------------------------------------------ */
section {
    padding: 4rem 0;
}

/* ------------------------------------------------------------
   About Section (custom background)
   ------------------------------------------------------------ */
.about-section {
    background: linear-gradient(135deg, #ffffff, #ffffff);
    /* light gradient */
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}

/* Center align About Neo Padma label */
#about .section-head {
    display: block;
    /* override flexbox */
    text-align: center;
    /* center text */
}

#about .section-head h2 {
    margin-bottom: 0.5rem;
    /* spacing under title */
}

/* Center-aligned About paragraph */
.about-text {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #000000;
    /* or var(--fg) if you want dark text */
}

.section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.6rem;
}

.section-head h2 {
    margin: 0;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.muted {
    color: var(--muted);
}

/* Tagline Highlight Section */
.tagline-highlight {
    background: var(--brand-2);
    /* brand teal → accent pink */
    text-align: center;
    padding: 2rem 1rem;
    margin: 0;
}

.tagline-highlight p {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    /* min ~24px, scales with viewport, max ~32px */
    font-weight: 300;
    color: #000000;
    margin: 0;
    letter-spacing: 1px;
}

.tagline-highlight span {
    font-style: italic;
    /* highlight keyword */
    font-weight: 300;
    /* make 'Savvy Technology' bolder */
}

/* ------------------------------------------------------------
   Grid Layout & Cards
   ------------------------------------------------------------ */
.grid {
    display: grid;
    gap: 1rem;
}

/* ------------------------------------------------------------
   Services Section (1 column, 6 cards)
   ------------------------------------------------------------ */
.grid {
    display: grid;
    gap: 1rem;
}

#services .grid.cols-2 {
    grid-template-columns: 1fr;
    /* one column only */
}

@media (max-width: 820px) {
    .grid.cols-2 {
        grid-template-columns: 1fr;
    }
}

.service {
    background: #fff;
    border: 1px solid #eaf0f2;
    border-radius: 0;
    padding: 1.2rem 1.25rem;
    box-shadow: 0 10px 30px #d0cfcf;
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

#services .service {
    text-align: left;
}

/* ------------------------------------------------------------
   Services: Visually hide the section heading (keep for SEO/Accessibility)
   ------------------------------------------------------------ */
#services .section-head {
    position: absolute;
    /* take it out of normal flow */
    width: 1px;
    /* shrink to a tiny box */
    height: 1px;
    margin: -1px;
    /* avoid affecting layout */
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    /* clip to nothing (legacy technique) */
    overflow: hidden;
    /* hide overflowed content */
    white-space: nowrap;
    /* prevent line breaks inside */
}

.service:hover {
    background: #ffffff;
    box-shadow: 0 20px 45px #e8e8e8;
    border-color: #cccbcb;
    transform: translateY(-3px);
}

.service:hover::after {
    opacity: 1;
}

.svc-ico {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-bottom: .8rem;
    background: linear-gradient(135deg, #000000, #a3a3a3);
    color: #fff;
    /* box-shadow: 0 10px 22px rgba(194, 12, 67, 0.32);*/
}

.svc-ico svg {
    width: 24px;
    height: 24px;
}

.service h3 {
    margin: .2rem 0 .45rem;
    font-size: 1.4rem;
    color: #6c6c6c;
    font-weight: 400;
    /* Light/Thin */
}

.service p {
    margin: 0 0 .8rem;
    color: #000000;
}

/* === SERVICES · Chips (labels at bottom of each card) === */
#services .svc-meta {
    margin-top: 0.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    /* spacing between chips */
}

#services .svc-meta .chip {
    background-color: var(--brand-2);
    /* brand accent background */
    color: var(--brand);
    /* white text for contrast */
    font-size: 0.8rem;
    font-weight: 400;
    padding: 0.3rem 0.7rem;
    border-radius: 12px;
    /* pill-shaped style */
    display: inline-block;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.svc-link {
    display: inline-block;
    margin-top: .2rem;
    font-weight: 400;
    font-size: .85rem;
    color: inherit;
    display: block;
    /* full width inside card */
    text-align: right;
    /* push text to right edge */
    margin-top: 0.6rem;
    /* space above link */
    transition: color 0.3s ease;
    text-decoration: none;
    /* clean until hover */
}

.svc-link:hover {
    color: var(--brand-2);
    /* hover color */
}

.grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card {
    background: #fff;
    border: 1px solid #eaf0f2;
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow);
}

.card h3 {
    margin: .3rem 0 .35rem;
    font-size: 1.1rem;
}

#services .service .svc-detail {
    margin-top: 0.6rem;
    /* space above the details block */
}

#services .service .svc-detail h4 {
    margin: 0.6rem 0 0.3rem;
    /* compact section headings */
    font-size: 1rem;
    font-weight: 500;
    /* medium weight to create hierarchy */
    color: var(--brand);
    /* match your brand color */
}

#services .service .svc-detail p {
    margin: 0 0 0.5rem;
    /* comfortable paragraph spacing */
    line-height: 1.55;
    /* improve readability */
    color: var(--fg);
    /* follow main body color if defined */
}

#services .service .svc-detail ul {
    margin: 0.2rem 0 0.6rem;
    /* tighten list block spacing */
    padding-left: 1.2rem;
    /* readable list indent */
    line-height: 1.55;
}

#services .service .svc-detail li {
    margin: 0.15rem 0;
    /* slight separation between bullets */
}

/* === STATIC IMAGE BANNER SECTION === */
#services-banner {
    position: relative;
    background: url("imgs/services-banner.jpg") center/cover no-repeat;
    /* Replace "imgs/services-banner.jpg" with your image path */
    padding: 4rem 1rem;
    /* adjust height by increasing/decreasing padding */
    text-align: center;
    color: #fff;
    /* white text */
}

/* Optional dark overlay to improve text readability */
#services-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    /* semi-transparent black overlay */
    z-index: 0;
}

#services-banner .container {
    position: relative;
    z-index: 1;
    /* keep text above overlay */
}

#services-banner .banner-text {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.5;
    max-width: 900px;
    margin: 0 auto;
}

/* ------------------------------------------------------------
   Why Partner With Us Section (Split Columns, Centered, Detailed)
   ------------------------------------------------------------ */

/* Section main heading (h2) */
#why-us .section-title {
    margin: 0 0 .6rem;
    /* space below title */
    text-align: center;
    /* center align text */
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    /* responsive size: min 1.4rem, scales with screen, max 1.9rem */
}

/* Split layout wrapper */
#why-us .why-split {
    display: grid;
    /* grid layout */
    grid-template-columns: 1fr 1fr;
    /* 2 equal columns */
    gap: 2rem 3rem;
    /* row gap: 2rem, column gap: 3rem */
    background: #fff;
    /* white background */
    border-top: 1px solid #eaf0f2;
    /* subtle top border */
    border-bottom: 1px solid #eaf0f2;
    /* subtle bottom border */
    padding: 1.4rem 1.2rem;
    /* space inside container */
    text-align: center;
    /* center align content inside */
}

/* ------------------------------------------------------------
   Why Partner With Us – h3 Subheadings
   ------------------------------------------------------------ */

/* Style the subheading text inside each column */
#why-us .why-split article h3 {
    margin: .1rem 0 .45rem;
    /* spacing around heading */
    font-weight: 400;
    /* medium-bold weight */
    color: var(--muted);
    font-size: 1.4rem;
    /* slightly larger than body text */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
    /* Light shadow for Why Us headings */
    position: relative;
    /* required for ::after underline */
    display: inline-block;
    /* keeps underline tight to text */
    margin-bottom: 0.8rem;
    /* add space below heading */
    padding-bottom: 0.3rem;
    /* space for accent bar */
}

/* Accent underline bar under each h3 */
#why-us .why-split article h3::after {
    content: "";
    /* generates underline */
    position: absolute;
    /* position relative to h3 */
    left: 50%;
    /* center align */
    bottom: 0;
    /* stick to bottom */
    transform: translateX(-50%);
    /* adjust centering */
    width: 40px;
    /* length of bar */
    height: 2px;
    /* thickness */
    background-color: var(--brand-2);
    /* accent color (pink) */
    border-radius: 2px;
    /* soften edges */
}

/* Emphasized words in subheadings */
#why-us .why-split article h3 em {
    font-style: normal;
    /* remove italic style */
    color: var(--muted);
    font-weight: 400;
}

/* Paragraph text inside each column */
#why-us .why-split article p {
    margin: 0;
    /* remove default margins */
    color: var(--brand);
}

/* Mobile responsiveness */
@media (max-width: 820px) {
    #why-us .why-split {
        grid-template-columns: 1fr;
        /* stack into 1 column on smaller screens */
    }
}

/* ============================================================
   Partners / Logo Wall (FINAL CLEAN VERSION)
   - Logos show in color by default
   - On hover, logos turn grayscale + slightly faded
   - Logos are larger and spacing between them is reduced
   ============================================================ */

/* Section wrapper */
.partners {
    padding: 3rem 0 2.2rem;
    /* top/bottom padding for section */
    background: #fff;
    /* white background */
    border-top: 1px solid #eaf0f2;
    /* subtle border for separation */
    border-bottom: 1px solid #eaf0f2;
}

/* Main heading */
.partners__title {
    margin: 0 0 .4rem;
    /* spacing below title */
    text-align: center;
    /* center align title */
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    /* responsive font size */
}

/* Optional subtitle */
.partners__subtitle {
    margin: 0 0 1rem;
    /* space below subtitle */
    text-align: center;
    /* centered */
    color: var(--muted);
    /* muted gray tone */
    font-size: .98rem;
    /* slightly smaller text */
}

/* Grid of logos */
.partners__logos {
    list-style: none;
    /* remove bullets */
    margin: 0;
    padding: 0;
    display: grid;
    /* CSS grid layout */
    /*grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));  Each logo cell is at least 180px wide; grid auto-wraps */
    grid-template-columns: repeat(4, 1fr);
    /* EXACTLY 4 equal-width columns */
    gap: 0.5rem;
    /* tighter space between logos */
    align-items: center;
    /* vertically center logos */
    justify-items: center;
    /* horizontally center logos */
}

/* Each logo “tile” */
.partners__item {
    display: grid;
    place-items: center;
    /* center logo in tile */
    padding: .5rem .75rem;
    /* smaller inner padding */
    background: #fff;
    /* tile background */
    border: 1px solid #eef2f3;
    /* light border */
    border-radius: var(--radius);
    /* use global corner radius */
    box-shadow: var(--shadow);
    /* subtle shadow */
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* On hover: highlight tile */
.partners__item:hover {
    transform: translateY(-2px);
    /* subtle lift effect */
    border-color: var(--brand-2);
    /* accent border color */
    box-shadow: 0 14px 26px rgba(0, 0, 0, .06);
    /* stronger shadow */
}

/* Logo images (bigger by default) */
.partners__item img {
    display: block;
    height: 84px;
    /* <-- force the visual size */
    width: auto;
    /* keep aspect ratio */
    max-width: none;
    /* don't clamp by width */
    max-height: none;
    /* don't clamp by height */
    filter: none;
    /* color at rest */
    opacity: 1;
}

/* On hover: logos fade + grayscale */
.partners__item:hover img {
    filter: grayscale(100%) contrast(1);
    opacity: .8;
}

/* Mobile responsiveness */
@media (max-width:640px) {
    .partners__logos {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 0.5rem;
        /* keep tighter spacing */
    }

    .partners__item img {
        height: 64px;
        /* a bit smaller on phones */
    }
}

/* ===========================================================
   Neo Padma · 3-Column CTA / Contact Section (Light Theme)
   =========================================================== */

/* === Section wrapper ===
   - Light background (white)
   - Dark text (default body color) */
.contact-cta3 {
    position: relative;
    padding: clamp(2.5rem, 4vw + 1rem, 5rem) 0;
    color: var(--brand);
    background: #fff;
    /* Light background */
}

/* Inner grid (3 columns) */
.contact-cta3__wrap {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: clamp(1rem, 2.2vw, 2rem);
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius);
    padding: clamp(1.25rem, 2.2vw, 2rem);
    box-shadow: var(--shadow);
    align-items: center;
}

/* Column base */
.contact-cta3__col {
    min-width: 0;
}

/* Titles and text */
.contact-cta3__title {
    margin: 0 0 .6rem;
    font-size: clamp(1.2rem, 1.1rem + 1.6vw, 1.6rem);
    line-height: 1.15;
    color: var(--brand);
}

.contact-cta3__lead {
    margin: 0;
    font-size: clamp(1rem, .95rem + .35vw, 1rem);
    line-height: 1.7;
    color: var(--muted);
}

.contact-cta3__h {
    margin: 0 0 .6rem;
    font-size: clamp(1.05rem, 1rem + .6vw, 1.2rem);
    font-weight: 400;
    color: var(--brand);
}

/* Contact details */
.contact-cta3__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.contact-cta3__list li {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: start;
    gap: .6rem;
    color: var(--brand);
}

/* Ensure address text is not italic */
.contact-cta3__list address {
    font-style: normal;
}

.contact-cta3__list svg {
    width: 22px;
    height: 22px;
    opacity: .9;
    margin-top: .2rem;
}

.contact-cta3__list a {
    color: var(--brand);
    text-decoration: none;
}


/* Quick Actions */
.contact-cta3__btns {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: flex-start;
    justify-content: center;
}

/* Boxed action buttons (white card look) */
.action-btn {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1.2rem;
    height: 22px;
    width: 60%;
    border: 1px solid #ddd;
    border-radius: var(--radius);
    font-weight: 600;
    background: #fff;
    color: var(--brand);
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform .25s ease, color .25s ease, border-color .25s ease;
    min-height: 18px;
}

.action-btn:hover {
    transform: translateY(-2px);
    border-color: var(--brand-2);
    color: var(--brand-2);
}

.action-btn:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand-2) 60%, #fff);
    outline-offset: 2px;
}

.action-btn svg {
    width: 20px;
    height: 20px;
}

/* Platform-specific icon colors */
.action-btn.linkedin svg {
    fill: #0a66c2;
}

.action-btn.whatsapp svg {
    fill: #25d366;
}

.action-btn.email svg {
    fill: var(--brand-2);
}

.action-btn.phone svg {
    fill: #28a745;
}

/* Fine print note */
.contact-cta3__fineprint {
    margin: .9rem 0 0;
    font-size: .9rem;
    color: var(--muted);
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .contact-cta3__wrap {
        grid-template-columns: 1fr;
    }

    .contact-cta3__btns {
        align-items: center;
    }
}

@media (max-width: 560px) {
    .action-btn {
        width: 60%;
        justify-content: center;
    }
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
footer {
    padding: 2.2rem 0;
    color: #395158;
}

.foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    border-top: 1px solid #eaf0f2;
    padding-top: 1.2rem;
}

.tiny {
    font-size: .9rem;
}

/* ------------------------------------------------------------
   Responsive Breakpoints (CLEAN + COMMENTED)
   ------------------------------------------------------------ */

/* Tablet / small laptop (≤900px)
   - Collapse hero layout into one column
   - Adjust 3-column grid down to 2 columns
*/
@media (max-width:900px) {
    .hero .wrap {
        grid-template-columns: 1fr !important;
        /* force single column */
    }

    .grid.cols-3 {
        grid-template-columns: 1fr 1fr;
        /* reduce 3 cols → 2 cols */
    }
}

/* Hide the close button by default on larger screens */
.menu-close-li {
    display: none;
}

/* Mobile (≤640px)
   - Turn nav into dropdown panel
   - Show/hide menu with toggle button
   - Collapse all multi-column grids into single column
*/
@media (max-width:640px) {
    nav ul {
        display: none;
        /* hidden by default */
        position: absolute;
        right: 1rem;
        top: 64px;
        background: #fff;
        padding: .6rem;
        border-radius: 12px;
        border: 1px solid #eaf0f2;
        box-shadow: var(--shadow);
    }

    nav ul.open {
        display: flex;
        /* show menu on toggle */
        flex-direction: column;
    }

    .menu-btn {
        display: inline-flex;
        /* show hamburger/menu button */
        align-items: center;
        gap: .4rem;
        border: 1px solid #dfe8ea;
        background: #fff;
        border-radius: 10px;
        padding: .35rem .55rem;
        cursor: pointer;
        margin-left: auto;
        /* pushes it to the far right */
    }

    .grid.cols-3,
    .grid.cols-2 {
        grid-template-columns: 1fr;
        /* collapse to 1 col on mobile */
    }
}

/* ------------------------------------------------------------
   Mobile (≤640px) - Center Footer (fixed selector)
   ------------------------------------------------------------ */
@media (max-width:640px) {
    footer {
        text-align: center;
        /* center plain text */
    }

    .foot {
        /* <-- was footer .wrap (wrong) */
        display: flex;
        flex-direction: column;
        /* stack brand, nav, copyright */
        align-items: center;
        /* center children horizontally */
        justify-content: center;
        /* optional: vertical centering if tall */
        gap: .5rem;
        /* tighter spacing on mobile */
    }

    .foot .brand {
        justify-content: center;
        /* center the logo row */
    }

    .foot nav {
        text-align: center;
        /* center links inside nav */
    }

    .foot nav .tiny,
    .foot nav a {
        display: inline-block;
        margin: 0 .25rem;
        /* even spacing for links and dots */
    }

    /* --- Mobile menu: close button inside dropdown --- */
    .menu-close-li {
        display: flex;
        justify-content: flex-end;
        /* right-align the button */
        margin-bottom: .25rem;
    }

    .menu-close {
        appearance: none;
        border: 1px solid #e5eef0;
        background: #fff;
        border-radius: 10px;
        width: 36px;
        height: 36px;
        line-height: 1;
        font-size: 1.6rem;
        /* large, easy-to-tap × */
        color: #0b1f24;
        cursor: pointer;
        box-shadow: var(--shadow);
    }

    .menu-close:hover {
        border-color: var(--brand-2);
        color: var(--brand-2);
    }

    /* Hide the close row when the menu is not open */
    nav ul:not(.open) .menu-close-li {
        display: none;
    }
}

/* ------------------------------------------------------------
   Mobile (≤640px) - Reduce Hero Banner Height
   ------------------------------------------------------------ */
@media (max-width:640px) {
    .hero {
        min-height: 200px;
        /* smaller fixed height for phones */
        padding: 4rem 0 2rem;
        /* less top/bottom padding */
    }
}

/* Laptop & up (≥1024px)
   - Ensure hero section has a taller presence
   - Vertically center hero content
*/
@media (min-width:1024px) {
    .hero {
        min-height: 50vh;
        /* set hero height (tweak as needed) */
        padding: 8rem 0 6rem;
        /* add generous top/bottom spacing */
    }

    .hero .wrap {
        display: grid;
        /* grid ensures content aligns nicely */
        align-items: center;
        /* vertical center */
        min-height: inherit;
        /* inherit hero’s height */
    }
}

/* Reduced motion preference
   - Stop slider animation for accessibility
*/
@media (prefers-reduced-motion: reduce) {
    .hero .slider img {
        animation: none;
        /* disable animation */
        opacity: 1;
        /* show all images (first visible) */
    }
}