/* =========================================================
   WEBQUAKRS
   RESPONSIVE CSS
   Tablet + Mobile
========================================================= */


/* =========================================================
   1. LARGE TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1100px) {

    .site-header .container {
        gap: 20px;
    }

    .main-nav ul {
        gap: 20px;
    }

    .site-header .logo {
        font-size: 1.55rem;
    }

    .main-nav ul li a {
        font-size: 0.86rem;
    }

    .site-header .btn {
        padding: 0 16px;
        font-size: 0.81rem;
    }
}


/* =========================================================
   2. TABLET
========================================================= */

@media (max-width: 900px) {

    .site-header .container {
        min-height: 70px;
        gap: 16px;
    }

    .main-nav ul {
        gap: 15px;
    }

    .main-nav ul li a {
        font-size: 0.82rem;
    }

    .site-header .btn {
        min-height: 44px;
        padding: 0 14px;
        font-size: 0.78rem;
    }
}


/* =========================================================
   3. MOBILE HEADER
========================================================= */

@media (max-width: 768px) {

    /* -----------------------------------------
       HEADER CONTAINER
    ----------------------------------------- */

    .site-header .container {
        width: 92%;
        min-height: 68px;

        display: flex;
        flex-wrap: wrap;

        align-items: center;

        gap: 0;

        padding-top: 12px;
        padding-bottom: 12px;
    }


    /* -----------------------------------------
       LOGO
    ----------------------------------------- */

    .site-header .logo {
        display: inline-flex;

        flex-shrink: 0;

        font-size: 1.4rem;

        justify-self: auto;
    }


    /* -----------------------------------------
       HAMBURGER BUTTON
    ----------------------------------------- */

    .menu-toggle {
        width: 44px;
        height: 44px;

        margin-left: auto;

        display: flex;

        align-items: center;
        justify-content: center;

        flex-direction: column;

        gap: 5px;

        padding: 0;

        border: 1px solid rgba(56, 189, 248, 0.16);
        border-radius: 10px;

        background: rgba(17, 28, 51, 0.9);

        cursor: pointer;

        flex-shrink: 0;

        transition:
            background 0.3s ease,
            border-color 0.3s ease,
            transform 0.3s ease;
    }


    .menu-toggle:hover {
        background: #16213a;

        border-color: rgba(56, 189, 248, 0.35);

        transform: translateY(-1px);
    }


    .menu-toggle span {
        width: 20px;
        height: 2px;

        display: block;

        border-radius: 10px;

        background-color: #ffffff;

        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }


    /* -----------------------------------------
       DESKTOP NAV HIDDEN
    ----------------------------------------- */

    .main-nav {
        display: none;

        order: 10;

        width: 100%;

        margin: 0;

        padding: 14px 0 8px;
    }


    /* -----------------------------------------
       OPEN NAVIGATION
    ----------------------------------------- */

    .site-header.menu-open .main-nav {
        display: block;
    }


    /* -----------------------------------------
       MOBILE NAVIGATION LIST
    ----------------------------------------- */

    .main-nav ul {
        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 0;

        margin: 0;
        padding: 0;
    }


    .main-nav ul li {
        width: 100%;

        margin: 0;
        padding: 0;
    }


    /* -----------------------------------------
       MOBILE NAV LINKS
    ----------------------------------------- */

    .main-nav ul li a {
        width: 100%;

        display: flex;

        align-items: center;

        padding: 14px 4px;

        color: #cbd5e1;

        font-size: 0.95rem;
        font-weight: 600;

        border-bottom: 1px solid rgba(203, 213, 225, 0.08);

        transition:
            color 0.25s ease,
            padding-left 0.25s ease,
            background 0.25s ease;
    }


    .main-nav ul li a:hover {
        color: #38bdf8;

        padding-left: 10px;

        background: rgba(56, 189, 248, 0.03);
    }


    /* Remove desktop underline */

    .main-nav ul li a::after {
        display: none;
    }


    /* -----------------------------------------
       ACTIVE MOBILE LINK
    ----------------------------------------- */

    .main-nav ul li a.active {
        color: #38bdf8;
    }


    /* -----------------------------------------
       DESKTOP CTA HIDDEN ON MOBILE
    ----------------------------------------- */

    .site-header > .container > .btn {
        display: none;
    }


    /* -----------------------------------------
       MOBILE CTA WHEN MENU IS OPEN
    ----------------------------------------- */

    .site-header.menu-open > .container > .btn {
        display: inline-flex;

        order: 20;

        width: 100%;

        margin: 14px 0 4px;

        min-height: 48px;

        justify-content: center;
    }


    /* -----------------------------------------
       HAMBURGER → X
    ----------------------------------------- */

    .site-header.menu-open .menu-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }


    .site-header.menu-open .menu-toggle span:nth-child(2) {
        opacity: 0;
    }


    .site-header.menu-open .menu-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


    /* -----------------------------------------
       MOBILE HEADER OPEN STATE
    ----------------------------------------- */

    .site-header.menu-open {
        background: rgba(15, 23, 42, 0.98);

        border-bottom-color: rgba(56, 189, 248, 0.12);
    }
}


/* =========================================================
   4. SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .site-header .container {
        width: 92%;

        min-height: 64px;

        padding-top: 10px;
        padding-bottom: 10px;
    }


    .site-header .logo {
        font-size: 1.3rem;
    }


    .menu-toggle {
        width: 42px;
        height: 42px;
    }


    .menu-toggle span {
        width: 19px;
    }


    .main-nav {
        padding-top: 12px;
    }


    .main-nav ul li a {
        padding: 13px 4px;

        font-size: 0.9rem;
    }


    .site-header.menu-open > .container > .btn {
        min-height: 46px;

        font-size: 0.85rem;
    }
}


/* =========================================================
   5. VERY SMALL DEVICES
========================================================= */

@media (max-width: 380px) {

    .site-header .logo {
        font-size: 1.2rem;
    }

    .menu-toggle {
        width: 40px;
        height: 40px;
    }

    .main-nav ul li a {
        font-size: 0.86rem;
    }
}


/* =========================================================
   WEBQUAKRS HERO - RESPONSIVE
========================================================= */


/* =========================================================
   1. TABLET
========================================================= */

@media (max-width: 1100px) {

    .hero {
        min-height: auto;
        padding: 80px 0 90px;
    }

    .hero .container {
        grid-template-columns: 1fr 1fr;
        gap: 45px;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero h1 {
        font-size: clamp(2.7rem, 5vw, 4rem);
    }

    .hero-content > p {
        max-width: 100%;
    }

    .hero-visual {
        min-height: 430px;
    }

    .growth-dashboard {
        max-width: 460px;
    }

    .floating-growth-card {
        right: -5px;
    }

    .floating-lead-card {
        left: -8px;
    }
}


/* =========================================================
   2. TABLET / LARGE MOBILE
========================================================= */

@media (max-width: 900px) {

    .hero {
        padding: 70px 0 80px;
    }

    .hero .container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .hero-content {
        max-width: 760px;
    }

    .hero h1 {
        max-width: 700px;
        font-size: clamp(2.8rem, 7vw, 4.2rem);
    }

    .hero-content > p {
        max-width: 650px;
    }

    .hero-visual {
        width: 100%;
        min-height: 460px;
    }

    .growth-dashboard {
        max-width: 520px;
    }
}


/* =========================================================
   3. MOBILE
========================================================= */

@media (max-width: 768px) {

    .hero {
        min-height: auto;

        padding: 55px 0 70px;
    }


    /* -----------------------------------------
       HERO CONTAINER
    ----------------------------------------- */

    .hero .container {
        width: 92%;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 50px;
    }


    /* -----------------------------------------
       HERO CONTENT
    ----------------------------------------- */

    .hero-content {
        width: 100%;
        max-width: 100%;
    }


    /* -----------------------------------------
       HERO LABEL
    ----------------------------------------- */

    .hero-label {
        max-width: 100%;

        margin-bottom: 20px;

        padding: 8px 12px;

        font-size: 0.68rem;

        letter-spacing: 0.06em;

        white-space: normal;

        line-height: 1.4;
    }


    /* -----------------------------------------
       HERO HEADING
    ----------------------------------------- */

    .hero h1 {
        width: 100%;
        max-width: 100%;

        margin-bottom: 20px;

        font-size: clamp(2.45rem, 10vw, 3.7rem);

        line-height: 1.03;

        letter-spacing: -0.05em;
    }


    /* -----------------------------------------
       HERO DESCRIPTION
    ----------------------------------------- */

    .hero-content > p {
        width: 100%;
        max-width: 100%;

        margin-bottom: 28px;

        font-size: 0.98rem;

        line-height: 1.7;
    }


    /* -----------------------------------------
       HERO BUTTONS
    ----------------------------------------- */

    .hero-buttons {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 12px;
    }


    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 100%;

        min-height: 50px;

        justify-content: center;

        text-align: center;
    }


    /* -----------------------------------------
       HERO VISUAL
    ----------------------------------------- */

    .hero-visual {
        width: 100%;

        min-height: 400px;

        display: flex;

        align-items: center;
        justify-content: center;
    }


    /* -----------------------------------------
       DASHBOARD
    ----------------------------------------- */

    .growth-dashboard {
        width: 100%;
        max-width: 100%;

        min-height: 360px;

        padding: 18px;

        border-radius: 18px;

        transform: none;
    }


    /* -----------------------------------------
       DASHBOARD CONTENT
    ----------------------------------------- */

    .dashboard-content {
        padding-top: 20px;
    }


    .dashboard-content h3 {
        max-width: 100%;

        font-size: 1.55rem;
    }


    .dashboard-content > p {
        max-width: 100%;

        font-size: 0.76rem;
    }


    /* -----------------------------------------
       CHART
    ----------------------------------------- */

    .growth-chart {
        padding: 13px;
    }


    .chart-area {
        height: 105px;
    }


    /* -----------------------------------------
       METRICS
    ----------------------------------------- */

    .dashboard-metrics {
        gap: 7px;
    }


    .metric-card {
        min-height: 70px;

        padding: 9px;
    }


    .metric-title {
        font-size: 0.58rem;
    }


    .metric-card strong {
        font-size: 0.9rem;
    }


    .metric-card small {
        font-size: 0.54rem;
    }


    /* -----------------------------------------
       FLOATING GROWTH CARD
    ----------------------------------------- */

    .floating-growth-card {
        right: -5px;
        top: 35px;

        min-width: 155px;

        padding: 10px 12px;
    }


    .floating-content span {
        font-size: 0.58rem;
    }


    .floating-content strong {
        font-size: 0.8rem;
    }


    /* -----------------------------------------
       FLOATING LEAD CARD
    ----------------------------------------- */

    .floating-lead-card {
        left: -5px;
        bottom: 30px;

        padding: 9px 11px;
    }
}


/* =========================================================
   4. SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .hero {
        padding: 45px 0 60px;
    }


    .hero .container {
        gap: 42px;
    }


    .hero-label {
        font-size: 0.62rem;

        padding: 7px 10px;
    }


    .hero h1 {
        font-size: clamp(2.25rem, 11vw, 3.2rem);

        line-height: 1.04;

        letter-spacing: -0.045em;
    }


    .hero-content > p {
        font-size: 0.93rem;

        line-height: 1.65;
    }


    .hero-visual {
        min-height: 350px;
    }


    .growth-dashboard {
        min-height: 330px;

        padding: 15px;

        border-radius: 16px;
    }


    .dashboard-header {
        padding-bottom: 14px;
    }


    .dashboard-brand {
        font-size: 0.8rem;
    }


    .dashboard-status {
        font-size: 0.62rem;
    }


    .dashboard-label {
        font-size: 0.6rem;
    }


    .dashboard-content h3 {
        font-size: 1.35rem;
    }


    .dashboard-content > p {
        font-size: 0.7rem;

        margin-bottom: 14px;
    }


    .growth-chart {
        padding: 10px;
    }


    .chart-area {
        height: 85px;
    }


    .dashboard-metrics {
        grid-template-columns: repeat(3, 1fr);

        gap: 5px;

        margin-top: 8px;
    }


    .metric-card {
        min-height: 62px;

        padding: 7px;

        border-radius: 9px;
    }


    .metric-card strong {
        font-size: 0.8rem;
    }


    .metric-card small {
        font-size: 0.5rem;
    }


    .floating-growth-card {
        right: -3px;
        top: 24px;

        min-width: 138px;

        padding: 8px 10px;

        border-radius: 11px;
    }


    .floating-icon {
        width: 29px;
        height: 29px;

        border-radius: 8px;
    }


    .floating-lead-card {
        left: -3px;
        bottom: 22px;

        padding: 8px 10px;

        border-radius: 11px;
    }
}


/* =========================================================
   5. VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .hero h1 {
        font-size: 2.15rem;
    }


    .hero-visual {
        min-height: 320px;
    }


    .growth-dashboard {
        min-height: 305px;
    }


    .floating-growth-card {
        min-width: 128px;
    }


    .floating-lead-card {
        left: 0;
    }
}

/* =========================================================
   VALUE / WHY WEBQUAKRS — RESPONSIVE
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .value-section {
        padding: 90px 0;
    }

    .value-section .section-heading {
        max-width: 760px;
        margin-bottom: 45px;
    }

    .value-section .section-heading h2 {
        font-size: clamp(2.4rem, 4.5vw, 3.3rem);
    }

    .value-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .value-card {
        min-height: 225px;
        padding: 28px;
    }
}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 900px) {

    .value-section {
        padding: 80px 0;
    }

    .value-section .section-heading {
        max-width: 700px;
        margin-bottom: 40px;
    }

    .value-section .section-heading h2 {
        font-size: clamp(2.3rem, 5vw, 3.1rem);
        line-height: 1.1;
        letter-spacing: -0.04em;
    }

    .value-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .value-card {
        min-height: 215px;
        padding: 26px;
    }

    .value-card h3 {
        margin-top: 22px;
    }

    .value-card p {
        max-width: 100%;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .value-section {
        padding: 70px 0;
    }

    .value-section .section-heading {
        width: 100%;
        max-width: 100%;
        margin-bottom: 35px;
    }

    .value-section .section-label {
        margin-bottom: 13px;
        font-size: 0.7rem;
    }

    .value-section .section-heading h2 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(2.15rem, 8vw, 3rem);

        line-height: 1.08;
        letter-spacing: -0.038em;
        word-spacing: 0;
    }

    .value-grid {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 14px;
    }

    .value-card {
        width: 100%;

        min-height: auto;

        padding: 26px 24px;

        border-radius: 16px;
    }

    .value-card h3 {
        margin: 22px 0 10px;

        font-size: 1.15rem;

        line-height: 1.25;
    }

    .value-card p {
        max-width: 100%;

        font-size: 0.9rem;

        line-height: 1.7;
    }

    .value-icon {
        width: 50px;
        height: 50px;

        border-radius: 13px;
    }

    .value-icon span {
        font-size: 1.25rem;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .value-section {
        padding: 60px 0;
    }

    .value-section .section-heading {
        margin-bottom: 30px;
    }

    .value-section .section-label {
        font-size: 0.64rem;
        letter-spacing: 0.08em;
    }

    .value-section .section-heading h2 {
        font-size: clamp(2rem, 9.5vw, 2.6rem);
        line-height: 1.08;
        letter-spacing: -0.035em;
    }

    .value-grid {
        gap: 12px;
    }

    .value-card {
        padding: 24px 20px;
    }

    .value-card h3 {
        margin-top: 20px;
        font-size: 1.08rem;
    }

    .value-card p {
        font-size: 0.87rem;
        line-height: 1.65;
    }

    .value-icon {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }

    .value-icon span {
        font-size: 1.15rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .value-section {
        padding: 52px 0;
    }

    .value-section .section-heading h2 {
        font-size: 1.9rem;
    }

    .value-card {
        padding: 22px 18px;
    }
}

/* =========================================================
   PROBLEM / CHALLENGE — RESPONSIVE
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .problem-section {
        padding: 90px 0;
    }

    .problem-section .section-heading {
        max-width: 760px;
        margin-bottom: 45px;
    }

    .problem-section .section-heading h2 {
        font-size: clamp(2.4rem, 4.5vw, 3.3rem);
    }

    .problem-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .problem-card {
        min-height: 220px;
        padding: 26px;
    }

    .problem-cta {
        padding: 22px 24px;
    }
}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 900px) {

    .problem-section {
        padding: 80px 0;
    }

    .problem-section .section-heading {
        max-width: 700px;
        margin-bottom: 40px;
    }

    .problem-section .section-heading h2 {
        font-size: clamp(2.3rem, 5vw, 3.1rem);
        line-height: 1.1;
        letter-spacing: -0.04em;
    }

    .problem-section .section-heading p {
        max-width: 620px;
    }

    .problem-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .problem-card {
        min-height: 215px;
        padding: 24px;
    }

    .problem-card h3 {
        font-size: 1.05rem;
    }

    .problem-card p {
        max-width: 100%;
        font-size: 0.86rem;
    }

    .problem-cta {
        gap: 22px;
        margin-top: 38px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .problem-section {
        padding: 70px 0;
    }

    .problem-section .section-heading {
        width: 100%;
        max-width: 100%;
        margin-bottom: 35px;
    }

    .problem-section .section-label {
        margin-bottom: 13px;
        font-size: 0.7rem;
    }

    .problem-section .section-heading h2 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(2.15rem, 8vw, 3rem);

        line-height: 1.08;
        letter-spacing: -0.038em;
    }

    .problem-section .section-heading p {
        width: 100%;
        max-width: 100%;

        font-size: 0.92rem;
        line-height: 1.7;
    }


    /* -----------------------------------------
       PROBLEM GRID
    ----------------------------------------- */

    .problem-grid {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 12px;
    }


    /* -----------------------------------------
       PROBLEM CARD
    ----------------------------------------- */

    .problem-card {
        width: 100%;

        min-height: auto;

        padding: 24px 22px;

        border-radius: 15px;
    }

    .problem-number {
        top: 21px;
        right: 22px;

        font-size: 0.68rem;
    }

    .problem-icon {
        width: 46px;
        height: 46px;

        margin-bottom: 18px;

        border-radius: 12px;
    }

    .problem-icon span {
        font-size: 1.12rem;
    }

    .problem-card h3 {
        margin-bottom: 9px;

        font-size: 1.05rem;
        line-height: 1.3;
    }

    .problem-card p {
        max-width: 100%;

        font-size: 0.86rem;
        line-height: 1.65;
    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .problem-cta {
        display: flex;

        flex-direction: column;

        align-items: stretch;
        justify-content: center;

        gap: 16px;

        margin-top: 30px;

        padding: 20px;
    }

    .problem-cta p {
        text-align: center;

        font-size: 0.88rem;

        line-height: 1.6;
    }

    .problem-cta .btn-primary {
        width: 100%;

        min-height: 48px;

        justify-content: center;

        text-align: center;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .problem-section {
        padding: 60px 0;
    }

    .problem-section .section-heading {
        margin-bottom: 30px;
    }

    .problem-section .section-label {
        font-size: 0.64rem;
        letter-spacing: 0.08em;
    }

    .problem-section .section-heading h2 {
        font-size: clamp(2rem, 9.5vw, 2.6rem);

        line-height: 1.08;
        letter-spacing: -0.035em;
    }

    .problem-section .section-heading p {
        font-size: 0.88rem;
        line-height: 1.65;
    }

    .problem-card {
        padding: 22px 20px;
    }

    .problem-card h3 {
        font-size: 1rem;
    }

    .problem-card p {
        font-size: 0.84rem;
    }

    .problem-number {
        top: 19px;
        right: 20px;
    }

    .problem-icon {
        width: 44px;
        height: 44px;
    }

    .problem-cta {
        margin-top: 26px;

        padding: 18px;
    }

    .problem-cta p {
        font-size: 0.84rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .problem-section {
        padding: 52px 0;
    }

    .problem-section .section-heading h2 {
        font-size: 1.9rem;
    }

    .problem-card {
        padding: 20px 18px;
    }

    .problem-cta {
        padding: 16px;
    }
}

/* =========================================================
   SERVICES / WHAT WE DO — RESPONSIVE
========================================================= */


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .services-section {
        padding: 90px 0;
    }

    .services-section .section-heading {
        max-width: 760px;
        margin-bottom: 55px;
    }

    .services-section .section-heading h2 {
        font-size: clamp(2.4rem, 4.5vw, 3.3rem);
    }

    .service-item {
        grid-template-columns: 65px minmax(0, 1fr) 280px;

        gap: 25px;

        min-height: 300px;

        padding: 30px;
    }

    .service-number {
        font-size: 0.98rem;
    }

    .service-content h3 {
        font-size: clamp(1.5rem, 2.5vw, 2rem);
    }

    .service-content > p {
        font-size: 0.88rem;
    }

    .service-features {
        gap: 8px 15px;
    }

    .service-visual {
        min-height: 200px;
    }

    .service-visual-card {
        max-width: 270px;
        min-height: 175px;

        padding: 24px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .services-section {
        padding: 80px 0;
    }

    .services-section .section-heading {
        max-width: 700px;
        margin-bottom: 45px;
    }

    .services-section .section-heading h2 {
        font-size: clamp(2.3rem, 5vw, 3.1rem);
        line-height: 1.1;
        letter-spacing: -0.04em;
    }

    .services-section .section-heading p {
        max-width: 620px;
    }


    /* -----------------------------------------
       SERVICE ITEM
    ----------------------------------------- */

    .service-item {
        grid-template-columns: 55px minmax(0, 1fr) 235px;

        gap: 20px;

        min-height: 285px;

        padding: 26px;
    }


    .service-number {
        font-size: 0.92rem;
    }


    .service-category {
        margin-bottom: 10px;

        font-size: 0.64rem;
    }


    .service-content h3 {
        margin-bottom: 11px;

        font-size: 1.5rem;
    }


    .service-content > p {
        margin-bottom: 18px;

        font-size: 0.84rem;
        line-height: 1.7;
    }


    .service-features {
        gap: 8px 12px;

        margin-bottom: 20px;
    }


    .service-features li {
        font-size: 0.72rem;
    }


    .service-link {
        font-size: 0.79rem;
    }


    /* -----------------------------------------
       SERVICE VISUAL
    ----------------------------------------- */

    .service-visual {
        min-height: 190px;
    }


    .service-visual-card {
        max-width: 220px;

        min-height: 160px;

        padding: 20px;
    }


    .service-visual-card strong {
        font-size: 1.15rem;
    }


    .service-visual-card small {
        font-size: 0.66rem;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .services-section {
        padding: 70px 0;
    }


    /* -----------------------------------------
       SECTION HEADING
    ----------------------------------------- */

    .services-section .section-heading {
        width: 100%;
        max-width: 100%;

        margin-bottom: 38px;
    }


    .services-section .section-label {
        margin-bottom: 13px;

        font-size: 0.7rem;
    }


    .services-section .section-heading h2 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(2.15rem, 8vw, 3rem);

        line-height: 1.08;

        letter-spacing: -0.038em;
    }


    .services-section .section-heading p {
        width: 100%;
        max-width: 100%;

        font-size: 0.9rem;

        line-height: 1.7;
    }


    /* -----------------------------------------
       SERVICES LIST
    ----------------------------------------- */

    .services-list {
        gap: 14px;
    }


    /* -----------------------------------------
       SERVICE ITEM
    ----------------------------------------- */

    .service-item {

        display: grid;

        grid-template-columns: 1fr;

        gap: 0;

        min-height: auto;

        padding: 24px 22px;

        border-radius: 16px;
    }


    /* -----------------------------------------
       SERVICE NUMBER
    ----------------------------------------- */

    .service-number {
        margin-bottom: 18px;

        padding: 0;

        font-size: 0.82rem;
    }


    /* -----------------------------------------
       SERVICE CONTENT
    ----------------------------------------- */

    .service-content {
        width: 100%;
        max-width: 100%;
    }


    .service-category {
        margin-bottom: 9px;

        font-size: 0.62rem;
    }


    .service-content h3 {
        width: 100%;
        max-width: 100%;

        margin-bottom: 12px;

        font-size: 1.45rem;

        line-height: 1.18;
    }


    .service-content > p {
        width: 100%;
        max-width: 100%;

        margin-bottom: 18px;

        font-size: 0.84rem;

        line-height: 1.68;
    }


    /* -----------------------------------------
       FEATURES
    ----------------------------------------- */

    .service-features {
        width: 100%;
        max-width: 100%;

        grid-template-columns: 1fr;

        gap: 8px;

        margin-bottom: 20px;
    }


    .service-features li {
        font-size: 0.73rem;
    }


    /* -----------------------------------------
       SERVICE LINK
    ----------------------------------------- */

    .service-link {
        font-size: 0.8rem;
    }


    /* -----------------------------------------
       SERVICE VISUAL
    ----------------------------------------- */

    .service-visual {
        width: 100%;

        min-height: 190px;

        margin-top: 26px;
    }


    .service-visual-card {
        width: 100%;
        max-width: 100%;

        min-height: 165px;

        padding: 22px;

        transform: none;
    }


    .service-item:hover .service-visual-card {
        transform: translateY(-3px);
    }


    .service-visual-card strong {
        font-size: 1.18rem;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .services-section {
        padding: 60px 0;
    }


    .services-section .section-heading {
        margin-bottom: 30px;
    }


    .services-section .section-label {
        font-size: 0.64rem;

        letter-spacing: 0.08em;
    }


    .services-section .section-heading h2 {
        font-size: clamp(2rem, 9.5vw, 2.6rem);

        line-height: 1.08;

        letter-spacing: -0.035em;
    }


    .services-section .section-heading p {
        font-size: 0.86rem;

        line-height: 1.65;
    }


    .services-list {
        gap: 12px;
    }


    .service-item {
        padding: 22px 20px;

        border-radius: 15px;
    }


    .service-number {
        margin-bottom: 16px;

        font-size: 0.76rem;
    }


    .service-category {
        font-size: 0.59rem;
    }


    .service-content h3 {
        font-size: 1.3rem;

        line-height: 1.2;
    }


    .service-content > p {
        font-size: 0.81rem;

        line-height: 1.65;
    }


    .service-features {
        gap: 7px;

        margin-bottom: 18px;
    }


    .service-features li {
        padding-left: 15px;

        font-size: 0.69rem;
    }


    .service-link {
        font-size: 0.77rem;
    }


    .service-visual {
        min-height: 165px;

        margin-top: 22px;
    }


    .service-visual-card {
        min-height: 150px;

        padding: 20px;
    }


    .service-visual-card span {
        margin-bottom: 10px;

        font-size: 0.6rem;
    }


    .service-visual-card strong {
        font-size: 1.08rem;
    }


    .service-visual-card small {
        font-size: 0.64rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .services-section {
        padding: 52px 0;
    }


    .services-section .section-heading h2 {
        font-size: 1.9rem;
    }


    .service-item {
        padding: 20px 18px;
    }


    .service-content h3 {
        font-size: 1.22rem;
    }


    .service-content > p {
        font-size: 0.78rem;
    }


    .service-visual {
        min-height: 150px;
    }


    .service-visual-card {
        min-height: 140px;
    }
}

/* =========================================================
   SOLUTIONS / BUSINESS STAGES — RESPONSIVE
========================================================= */


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .solutions-section {
        padding: 90px 0;
    }

    .solutions-section .section-heading {
        max-width: 760px;
        margin-bottom: 50px;
    }

    .solutions-section .section-heading h2 {
        font-size: clamp(2.4rem, 4.5vw, 3.3rem);
    }

    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .solution-card {
        min-height: 470px;
        padding: 28px;
    }

    .solution-card h3 {
        font-size: 1.45rem;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .solutions-section {
        padding: 80px 0;
    }

    .solutions-section .section-heading {
        max-width: 700px;
        margin-bottom: 42px;
    }

    .solutions-section .section-heading h2 {
        font-size: clamp(2.3rem, 5vw, 3.1rem);

        line-height: 1.1;
        letter-spacing: -0.04em;
    }

    .solutions-section .section-heading p {
        max-width: 620px;
    }

    .solutions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .solution-card {
        min-height: 450px;
        padding: 25px;
    }

    .solution-top {
        margin-bottom: 27px;
    }

    .solution-icon {
        width: 51px;
        height: 51px;

        margin-bottom: 21px;
    }

    .solution-card h3 {
        font-size: 1.38rem;
    }

    .solution-card > p {
        font-size: 0.84rem;
    }

    .solution-features {
        gap: 9px;
    }

    .solution-features li {
        font-size: 0.74rem;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .solutions-section {
        padding: 70px 0;
    }


    /* -----------------------------------------
       SECTION HEADING
    ----------------------------------------- */

    .solutions-section .section-heading {
        width: 100%;
        max-width: 100%;

        margin-bottom: 35px;
    }

    .solutions-section .section-label {
        margin-bottom: 13px;

        font-size: 0.7rem;
    }

    .solutions-section .section-heading h2 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(2.15rem, 8vw, 3rem);

        line-height: 1.08;

        letter-spacing: -0.038em;
    }

    .solutions-section .section-heading p {
        width: 100%;
        max-width: 100%;

        font-size: 0.9rem;

        line-height: 1.7;
    }


    /* -----------------------------------------
       GRID
    ----------------------------------------- */

    .solutions-grid {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 14px;
    }


    /* -----------------------------------------
       SOLUTION CARD
    ----------------------------------------- */

    .solution-card {
        width: 100%;

        min-height: auto;

        padding: 25px 22px;

        border-radius: 16px;
    }


    .solution-card.featured {
        transform: none;
    }


    .solution-card:hover {
        transform: translateY(-4px);
    }


    /* -----------------------------------------
       TOP
    ----------------------------------------- */

    .solution-top {
        margin-bottom: 24px;
    }

    .solution-number {
        font-size: 0.78rem;
    }

    .solution-status {
        padding: 6px 9px;

        font-size: 0.58rem;
    }


    /* -----------------------------------------
       ICON
    ----------------------------------------- */

    .solution-icon {
        width: 48px;
        height: 48px;

        margin-bottom: 20px;

        border-radius: 13px;
    }

    .solution-icon span {
        font-size: 1.2rem;
    }


    /* -----------------------------------------
       TITLE
    ----------------------------------------- */

    .solution-card h3 {
        width: 100%;
        max-width: 100%;

        margin-bottom: 11px;

        font-size: 1.35rem;

        line-height: 1.2;
    }


    /* -----------------------------------------
       DESCRIPTION
    ----------------------------------------- */

    .solution-card > p {
        width: 100%;
        max-width: 100%;

        margin-bottom: 20px;

        font-size: 0.84rem;

        line-height: 1.68;
    }


    /* -----------------------------------------
       FEATURES
    ----------------------------------------- */

    .solution-features {
        gap: 9px;

        margin-bottom: 24px;
    }

    .solution-features li {
        padding-left: 18px;

        font-size: 0.74rem;

        line-height: 1.45;
    }


    /* -----------------------------------------
       LINK
    ----------------------------------------- */

    .solution-link {
        font-size: 0.8rem;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .solutions-section {
        padding: 60px 0;
    }

    .solutions-section .section-heading {
        margin-bottom: 30px;
    }

    .solutions-section .section-label {
        font-size: 0.64rem;

        letter-spacing: 0.08em;
    }

    .solutions-section .section-heading h2 {
        font-size: clamp(2rem, 9.5vw, 2.6rem);

        line-height: 1.08;

        letter-spacing: -0.035em;
    }

    .solutions-section .section-heading p {
        font-size: 0.86rem;

        line-height: 1.65;
    }


    .solutions-grid {
        gap: 12px;
    }


    .solution-card {
        padding: 22px 20px;

        border-radius: 15px;
    }


    .solution-top {
        margin-bottom: 21px;
    }


    .solution-number {
        font-size: 0.74rem;
    }


    .solution-status {
        padding: 5px 8px;

        font-size: 0.55rem;
    }


    .solution-icon {
        width: 45px;
        height: 45px;

        margin-bottom: 18px;

        border-radius: 12px;
    }


    .solution-icon span {
        font-size: 1.1rem;
    }


    .solution-card h3 {
        font-size: 1.25rem;

        line-height: 1.2;
    }


    .solution-card > p {
        font-size: 0.81rem;

        line-height: 1.65;
    }


    .solution-features {
        gap: 8px;

        margin-bottom: 21px;
    }


    .solution-features li {
        padding-left: 16px;

        font-size: 0.69rem;
    }


    .solution-link {
        font-size: 0.76rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .solutions-section {
        padding: 52px 0;
    }

    .solutions-section .section-heading h2 {
        font-size: 1.9rem;
    }

    .solution-card {
        padding: 20px 18px;
    }

    .solution-card h3 {
        font-size: 1.2rem;
    }

    .solution-card > p {
        font-size: 0.78rem;
    }

    .solution-features li {
        font-size: 0.66rem;
    }
}

/* =========================================================
   WHY CHOOSE WEBQUAKRS — RESPONSIVE
========================================================= */


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .why-section {
        padding: 90px 0;
    }

    .why-section .section-heading {
        max-width: 760px;
        margin-bottom: 50px;
    }

    .why-section .section-heading h2 {
        font-size: clamp(2.4rem, 4.5vw, 3.3rem);
    }

    .why-feature {
        grid-template-columns: 50px 56px minmax(0, 1fr) 36px;

        column-gap: 20px;

        min-height: 135px;
    }

    .why-feature-content h3 {
        font-size: 1.25rem;
    }

    .why-feature-content p {
        font-size: 0.84rem;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .why-section {
        padding: 80px 0;
    }

    .why-section .section-heading {
        max-width: 700px;
        margin-bottom: 42px;
    }

    .why-section .section-heading h2 {
        font-size: clamp(2.3rem, 5vw, 3.1rem);

        line-height: 1.1;
        letter-spacing: -0.04em;
    }

    .why-section .section-heading p {
        max-width: 620px;
    }

    .why-feature {
        grid-template-columns: 42px 52px minmax(0, 1fr) 34px;

        column-gap: 18px;

        min-height: 128px;

        padding: 20px 6px;
    }

    .why-feature:hover {
        padding-left: 12px;
        padding-right: 12px;
    }

    .why-feature-number {
        font-size: 0.7rem;
    }

    .why-feature-icon {
        width: 48px;
        height: 48px;

        border-radius: 13px;
    }

    .why-feature-icon span {
        font-size: 1.1rem;
    }

    .why-feature-content h3 {
        font-size: 1.18rem;
    }

    .why-feature-content p {
        font-size: 0.81rem;
        line-height: 1.65;
    }

    .why-feature-arrow {
        width: 32px;
        height: 32px;

        font-size: 0.92rem;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .why-section {
        padding: 70px 0;
    }


    /* -----------------------------------------
       SECTION HEADING
    ----------------------------------------- */

    .why-section .section-heading {
        width: 100%;
        max-width: 100%;

        margin-bottom: 35px;
    }

    .why-section .section-label {
        margin-bottom: 13px;

        font-size: 0.7rem;
    }

    .why-section .section-heading h2 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(2.15rem, 8vw, 3rem);

        line-height: 1.08;

        letter-spacing: -0.038em;
    }

    .why-section .section-heading p {
        width: 100%;
        max-width: 100%;

        font-size: 0.9rem;

        line-height: 1.7;
    }


    /* -----------------------------------------
       FEATURE ROW
    ----------------------------------------- */

    .why-feature {

        grid-template-columns: 42px 50px minmax(0, 1fr);

        column-gap: 16px;

        min-height: auto;

        padding: 22px 0;

    }


    .why-feature:hover {
        padding-left: 6px;
        padding-right: 6px;
    }


    /* -----------------------------------------
       NUMBER
    ----------------------------------------- */

    .why-feature-number {
        align-self: start;

        padding-top: 6px;

        font-size: 0.68rem;
    }


    /* -----------------------------------------
       ICON
    ----------------------------------------- */

    .why-feature-icon {
        width: 46px;
        height: 46px;

        border-radius: 12px;
    }


    .why-feature-icon span {
        font-size: 1.05rem;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .why-feature-content {
        min-width: 0;

        max-width: 100%;
    }


    .why-feature-content h3 {
        margin: 0 0 7px;

        font-size: 1.05rem;

        line-height: 1.3;
    }


    .why-feature-content p {
        max-width: 100%;

        font-size: 0.82rem;

        line-height: 1.65;
    }


    /* -----------------------------------------
       ARROW
    ----------------------------------------- */

    .why-feature-arrow {
        display: none;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .why-section {
        padding: 60px 0;
    }

    .why-section .section-heading {
        margin-bottom: 30px;
    }

    .why-section .section-label {
        font-size: 0.64rem;

        letter-spacing: 0.08em;
    }

    .why-section .section-heading h2 {
        font-size: clamp(2rem, 9.5vw, 2.6rem);

        line-height: 1.08;

        letter-spacing: -0.035em;
    }

    .why-section .section-heading p {
        font-size: 0.86rem;

        line-height: 1.65;
    }


    .why-feature {
        grid-template-columns: 36px 46px minmax(0, 1fr);

        column-gap: 13px;

        padding: 20px 0;
    }


    .why-feature-number {
        padding-top: 5px;

        font-size: 0.63rem;
    }


    .why-feature-icon {
        width: 43px;
        height: 43px;

        border-radius: 11px;
    }


    .why-feature-icon span {
        font-size: 1rem;
    }


    .why-feature-content h3 {
        font-size: 1rem;

        line-height: 1.28;
    }


    .why-feature-content p {
        font-size: 0.78rem;

        line-height: 1.62;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .why-section {
        padding: 52px 0;
    }

    .why-section .section-heading h2 {
        font-size: 1.9rem;
    }

    .why-feature {
        grid-template-columns: 32px 43px minmax(0, 1fr);

        column-gap: 11px;

        padding: 18px 0;
    }

    .why-feature-icon {
        width: 40px;
        height: 40px;
    }

    .why-feature-content h3 {
        font-size: 0.94rem;
    }

    .why-feature-content p {
        font-size: 0.74rem;
    }
}

/* =========================================================
   PROCESS SECTION — RESPONSIVE
========================================================= */


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .process-section {
        padding: 90px 0;
    }

    .process-section .section-heading {
        max-width: 760px;
        margin-bottom: 55px;
    }

    .process-section .section-heading h2 {
        font-size: clamp(2.4rem, 4.5vw, 3.3rem);
    }

    .process-timeline {
        grid-template-columns:
            minmax(0, 1fr)
            35px
            minmax(0, 1fr)
            35px
            minmax(0, 1fr)
            35px
            minmax(0, 1fr)
            35px
            minmax(0, 1fr);
    }

    .process-step {
        min-height: 235px;
        padding: 22px 18px;
    }

    .process-step-content h3 {
        font-size: 1.1rem;
    }

    .process-step-content p {
        font-size: 0.76rem;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .process-section {
        padding: 80px 0;
    }

    .process-section .section-heading {
        max-width: 700px;
        margin-bottom: 45px;
    }

    .process-section .section-heading h2 {
        font-size: clamp(2.3rem, 5vw, 3.1rem);
        line-height: 1.1;
        letter-spacing: -0.04em;
    }

    .process-section .section-heading p {
        max-width: 620px;
    }

    /*
       At tablet width we switch to 2-column layout.
       Each row contains two process cards.
    */

    .process-timeline {
        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 14px;
    }

    .process-step {
        min-height: 220px;
        padding: 24px 22px;
    }

    .process-step-top {
        margin-bottom: 20px;
    }

    .process-icon {
        width: 46px;
        height: 46px;
    }

    .process-step-content h3 {
        font-size: 1.1rem;
    }

    .process-step-content p {
        max-width: 100%;
        font-size: 0.8rem;
    }

    /*
       Connectors are hidden in the tablet grid.
       The card layout itself communicates the sequence.
    */

    .process-connector {
        display: none;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .process-section {
        padding: 70px 0;
    }


    /* -----------------------------------------
       SECTION HEADING
    ----------------------------------------- */

    .process-section .section-heading {
        width: 100%;
        max-width: 100%;
        margin-bottom: 38px;
    }

    .process-section .section-label {
        margin-bottom: 13px;
        font-size: 0.7rem;
    }

    .process-section .section-heading h2 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(2.15rem, 8vw, 3rem);

        line-height: 1.08;
        letter-spacing: -0.038em;
    }

    .process-section .section-heading p {
        width: 100%;
        max-width: 100%;

        font-size: 0.9rem;
        line-height: 1.7;
    }


    /* -----------------------------------------
       MOBILE TIMELINE
    ----------------------------------------- */

    .process-timeline {
        position: relative;

        display: flex;

        flex-direction: column;

        gap: 12px;

        padding-left: 24px;
    }


    /* -----------------------------------------
       VERTICAL TIMELINE LINE
    ----------------------------------------- */

    .process-timeline::before {
        content: "";

        position: absolute;

        top: 20px;
        bottom: 20px;
        left: 7px;

        width: 1px;

        background:
            linear-gradient(
                180deg,
                rgba(56, 189, 248, 0.28),
                rgba(56, 189, 248, 0.10)
            );
    }


    /* -----------------------------------------
       PROCESS CARD
    ----------------------------------------- */

    .process-step {
        position: relative;

        width: 100%;

        min-height: auto;

        padding: 22px 20px;

        border-radius: 15px;
    }


    /* Timeline dot */

    .process-step::after {
        content: "";

        position: absolute;

        top: 39px;
        left: -27px;

        width: 8px;
        height: 8px;

        border-radius: 50%;

        background: #38bdf8;

        box-shadow:
            0 0 10px rgba(56, 189, 248, 0.55);

        transform: translateX(-50%);
    }


    /* -----------------------------------------
       STEP TOP
    ----------------------------------------- */

    .process-step-top {
        margin-bottom: 18px;
    }


    .process-number {
        font-size: 0.68rem;
    }


    /* -----------------------------------------
       ICON
    ----------------------------------------- */

    .process-icon {
        width: 45px;
        height: 45px;

        border-radius: 12px;
    }


    .process-icon span {
        font-size: 1.05rem;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .process-step-content h3 {
        margin-bottom: 8px;

        font-size: 1.08rem;

        line-height: 1.28;
    }


    .process-step-content p {
        max-width: 100%;

        font-size: 0.81rem;

        line-height: 1.65;
    }


    /* -----------------------------------------
       FEATURED STEP
    ----------------------------------------- */

    .process-step.featured {
        border-color: rgba(56, 189, 248, 0.22);
    }


    /* -----------------------------------------
       CONNECTOR
    ----------------------------------------- */

    .process-connector {
        display: none;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .process-section {
        padding: 60px 0;
    }

    .process-section .section-heading {
        margin-bottom: 30px;
    }

    .process-section .section-label {
        font-size: 0.64rem;
        letter-spacing: 0.08em;
    }

    .process-section .section-heading h2 {
        font-size: clamp(2rem, 9.5vw, 2.6rem);

        line-height: 1.08;
        letter-spacing: -0.035em;
    }

    .process-section .section-heading p {
        font-size: 0.86rem;
        line-height: 1.65;
    }


    .process-timeline {
        gap: 10px;
        padding-left: 21px;
    }


    .process-timeline::before {
        left: 6px;
    }


    .process-step {
        padding: 20px 18px;
        border-radius: 14px;
    }


    .process-step::after {
        top: 36px;
        left: -23px;

        width: 7px;
        height: 7px;
    }


    .process-step-top {
        margin-bottom: 16px;
    }


    .process-icon {
        width: 42px;
        height: 42px;

        border-radius: 11px;
    }


    .process-icon span {
        font-size: 1rem;
    }


    .process-step-content h3 {
        font-size: 1rem;
    }


    .process-step-content p {
        font-size: 0.78rem;
        line-height: 1.62;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .process-section {
        padding: 52px 0;
    }

    .process-section .section-heading h2 {
        font-size: 1.9rem;
    }

    .process-timeline {
        padding-left: 19px;
    }

    .process-timeline::before {
        left: 5px;
    }

    .process-step::after {
        left: -21px;
    }

    .process-step {
        padding: 18px 16px;
    }
}

/* =========================================================
   PORTFOLIO / OUR WORK — RESPONSIVE
========================================================= */


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .portfolio-section {
        padding: 90px 0;
    }

    .portfolio-section .section-heading {
        max-width: 760px;
        margin-bottom: 50px;
    }

    .portfolio-section .section-heading h2 {
        font-size: clamp(2.4rem, 4.5vw, 3.3rem);
    }

    .portfolio-showcase {
        gap: 50px;
    }

    .portfolio-visual {
        min-height: 460px;
    }

    .portfolio-window {
        max-width: 520px;
    }

    .portfolio-content h3 {
        font-size: clamp(1.9rem, 3vw, 2.7rem);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .portfolio-section {
        padding: 80px 0;
    }

    .portfolio-section .section-heading {
        max-width: 700px;
        margin-bottom: 45px;
    }

    .portfolio-section .section-heading h2 {
        font-size: clamp(2.3rem, 5vw, 3.1rem);
        line-height: 1.1;
        letter-spacing: -0.04em;
    }

    .portfolio-section .section-heading p {
        max-width: 620px;
    }

    .portfolio-showcase {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .portfolio-visual {
        min-height: 450px;
    }

    .portfolio-window {
        max-width: 600px;
    }

    .portfolio-content {
        max-width: 700px;
    }

    .portfolio-content h3 {
        max-width: 650px;
        font-size: clamp(2rem, 4vw, 2.8rem);
    }

    .portfolio-content > p {
        max-width: 650px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .portfolio-section {
        padding: 70px 0;
    }


    /* -----------------------------------------
       SECTION HEADING
    ----------------------------------------- */

    .portfolio-section .section-heading {
        width: 100%;
        max-width: 100%;
        margin-bottom: 38px;
    }

    .portfolio-section .section-label {
        margin-bottom: 13px;
        font-size: 0.7rem;
    }

    .portfolio-section .section-heading h2 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(2.15rem, 8vw, 3rem);

        line-height: 1.08;
        letter-spacing: -0.038em;
    }

    .portfolio-section .section-heading p {
        width: 100%;
        max-width: 100%;

        font-size: 0.9rem;
        line-height: 1.7;
    }


    /* -----------------------------------------
       SHOWCASE
    ----------------------------------------- */

    .portfolio-showcase {
        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 45px;
    }


    /* -----------------------------------------
       VISUAL
    ----------------------------------------- */

    .portfolio-visual {
        width: 100%;
        min-height: 390px;

        display: flex;
        align-items: center;
        justify-content: center;
    }


    .portfolio-window {
        width: 100%;
        max-width: 100%;

        min-height: 350px;

        border-radius: 18px;

        transform: none;
    }


    .portfolio-window:hover {
        transform: translateY(-3px);
    }


    /* -----------------------------------------
       WINDOW HEADER
    ----------------------------------------- */

    .portfolio-window-header {
        min-height: 50px;

        padding: 0 16px;
    }


    .window-dots {
        gap: 6px;
    }

    .window-dots span {
        width: 7px;
        height: 7px;
    }

    .window-label {
        font-size: 0.56rem;
    }


    /* -----------------------------------------
       WINDOW CONTENT
    ----------------------------------------- */

    .portfolio-window-content {
        min-height: 300px;

        padding: 30px 24px;
    }


    .portfolio-mini-label {
        margin-bottom: 12px;

        font-size: 0.6rem;
    }


    .portfolio-window-content h3 {
        max-width: 100%;

        margin-bottom: 12px;

        font-size: clamp(1.7rem, 7vw, 2.4rem);

        line-height: 1.06;
        letter-spacing: -0.04em;
    }


    .portfolio-window-content > p {
        max-width: 100%;

        margin-bottom: 22px;

        font-size: 0.76rem;

        line-height: 1.65;
    }


    /* -----------------------------------------
       MINI CARDS
    ----------------------------------------- */

    .portfolio-mini-grid {
        width: 100%;
        max-width: 100%;

        gap: 7px;
    }


    .portfolio-mini-card {
        min-height: 65px;

        padding: 9px;

        border-radius: 9px;
    }


    .portfolio-mini-card span {
        font-size: 0.5rem;
    }


    .portfolio-mini-card strong {
        font-size: 0.64rem;
    }


    /* -----------------------------------------
       FLOATING BADGE
    ----------------------------------------- */

    .portfolio-floating-badge {
        left: -3px;
        bottom: 18px;

        padding: 9px 12px;

        font-size: 0.6rem;
    }


    .badge-dot {
        width: 7px;
        height: 7px;
    }


    /* -----------------------------------------
       CONTENT
    ----------------------------------------- */

    .portfolio-content {
        width: 100%;
        max-width: 100%;
    }


    .portfolio-status {
        margin-bottom: 14px;

        padding: 6px 9px;

        font-size: 0.59rem;
    }


    .portfolio-content h3 {
        width: 100%;
        max-width: 100%;

        margin-bottom: 14px;

        font-size: clamp(1.9rem, 7.5vw, 2.7rem);

        line-height: 1.06;
        letter-spacing: -0.04em;
    }


    .portfolio-content > p {
        width: 100%;
        max-width: 100%;

        margin-bottom: 25px;

        font-size: 0.86rem;

        line-height: 1.68;
    }


    /* -----------------------------------------
       POINTS
    ----------------------------------------- */

    .portfolio-points {
        gap: 14px;

        margin-bottom: 28px;
    }


    .portfolio-point {
        grid-template-columns: 28px minmax(0, 1fr);

        gap: 10px;
    }


    .portfolio-point-icon {
        width: 26px;
        height: 26px;

        border-radius: 8px;

        font-size: 0.62rem;
    }


    .portfolio-point strong {
        font-size: 0.8rem;
    }


    .portfolio-point p {
        font-size: 0.72rem;

        line-height: 1.55;
    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .portfolio-content .btn-primary {
        width: 100%;

        min-height: 48px;

        justify-content: center;

        text-align: center;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .portfolio-section {
        padding: 60px 0;
    }


    .portfolio-section .section-heading {
        margin-bottom: 30px;
    }


    .portfolio-section .section-label {
        font-size: 0.64rem;

        letter-spacing: 0.08em;
    }


    .portfolio-section .section-heading h2 {
        font-size: clamp(2rem, 9.5vw, 2.6rem);

        line-height: 1.08;
        letter-spacing: -0.035em;
    }


    .portfolio-section .section-heading p {
        font-size: 0.86rem;

        line-height: 1.65;
    }


    .portfolio-showcase {
        gap: 38px;
    }


    .portfolio-visual {
        min-height: 340px;
    }


    .portfolio-window {
        min-height: 310px;

        border-radius: 15px;
    }


    .portfolio-window-header {
        min-height: 46px;

        padding: 0 13px;
    }


    .portfolio-window-content {
        min-height: 264px;

        padding: 25px 19px;
    }


    .portfolio-mini-label {
        font-size: 0.56rem;
    }


    .portfolio-window-content h3 {
        font-size: clamp(1.55rem, 7.5vw, 2.15rem);
    }


    .portfolio-window-content > p {
        font-size: 0.71rem;

        line-height: 1.6;
    }


    .portfolio-mini-grid {
        gap: 5px;
    }


    .portfolio-mini-card {
        min-height: 58px;

        padding: 8px;

        border-radius: 8px;
    }


    .portfolio-mini-card strong {
        font-size: 0.59rem;
    }


    .portfolio-floating-badge {
        bottom: 12px;

        padding: 8px 10px;

        font-size: 0.55rem;
    }


    .portfolio-content h3 {
        font-size: clamp(1.75rem, 8.5vw, 2.35rem);
    }


    .portfolio-content > p {
        font-size: 0.82rem;
    }


    .portfolio-point strong {
        font-size: 0.76rem;
    }


    .portfolio-point p {
        font-size: 0.68rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .portfolio-section {
        padding: 52px 0;
    }


    .portfolio-section .section-heading h2 {
        font-size: 1.9rem;
    }


    .portfolio-visual {
        min-height: 315px;
    }


    .portfolio-window {
        min-height: 290px;
    }


    .portfolio-window-content {
        min-height: 244px;

        padding: 22px 17px;
    }


    .portfolio-window-content h3 {
        font-size: 1.45rem;
    }


    .portfolio-window-content > p {
        font-size: 0.67rem;
    }


    .portfolio-mini-card {
        min-height: 54px;
    }


    .portfolio-mini-card strong {
        font-size: 0.54rem;
    }


    .portfolio-content h3 {
        font-size: 1.65rem;
    }


    .portfolio-content > p {
        font-size: 0.77rem;
    }


    .portfolio-point p {
        font-size: 0.64rem;
    }
}

/* =========================================================
   TESTIMONIALS — RESPONSIVE
========================================================= */


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .testimonials-section {
        padding: 90px 0;
    }

    .testimonials-section .section-heading {
        max-width: 760px;
        margin-bottom: 50px;
    }

    .testimonials-section .section-heading h2 {
        font-size: clamp(2.4rem, 4.5vw, 3.3rem);
    }

    .testimonials-coming-soon {
        gap: 50px;
    }

    .testimonial-visual {
        min-height: 390px;
        padding: 45px 40px;
    }

    .testimonial-coming-content h3 {
        font-size: clamp(1.9rem, 3vw, 2.7rem);
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .testimonials-section {
        padding: 80px 0;
    }

    .testimonials-section .section-heading {
        max-width: 700px;
        margin-bottom: 45px;
    }

    .testimonials-section .section-heading h2 {
        font-size: clamp(2.3rem, 5vw, 3.1rem);
        line-height: 1.1;
        letter-spacing: -0.04em;
    }

    .testimonials-section .section-heading p {
        max-width: 620px;
    }

    .testimonials-coming-soon {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .testimonial-visual {
        min-height: 400px;
    }

    .testimonial-coming-content {
        max-width: 700px;
    }

    .testimonial-coming-content h3 {
        max-width: 650px;
        font-size: clamp(2rem, 4vw, 2.8rem);
    }

    .testimonial-coming-content > p {
        max-width: 650px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .testimonials-section {
        padding: 70px 0;
    }


    /* -----------------------------------------
       SECTION HEADING
    ----------------------------------------- */

    .testimonials-section .section-heading {
        width: 100%;
        max-width: 100%;
        margin-bottom: 38px;
    }

    .testimonials-section .section-label {
        margin-bottom: 13px;
        font-size: 0.7rem;
    }

    .testimonials-section .section-heading h2 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(2.15rem, 8vw, 3rem);

        line-height: 1.08;
        letter-spacing: -0.038em;
    }

    .testimonials-section .section-heading p {
        width: 100%;
        max-width: 100%;

        font-size: 0.9rem;
        line-height: 1.7;
    }


    /* -----------------------------------------
       SHOWCASE
    ----------------------------------------- */

    .testimonials-coming-soon {
        width: 100%;

        display: flex;
        flex-direction: column;

        gap: 42px;
    }


    /* -----------------------------------------
       VISUAL
    ----------------------------------------- */

    .testimonial-visual {
        width: 100%;

        min-height: 340px;

        padding: 35px 24px;

        border-radius: 18px;
    }


    .testimonial-visual::after {
        left: 24px;
        width: 85px;
    }


    /* -----------------------------------------
       QUOTE
    ----------------------------------------- */

    .testimonial-quote-mark {
        top: 22px;
        right: 24px;

        font-size: 5rem;
    }


    /* -----------------------------------------
       VISUAL CONTENT
    ----------------------------------------- */

    .testimonial-visual-content {
        width: 100%;
        max-width: 100%;
    }

    .testimonial-visual-content > span {
        margin-bottom: 13px;

        font-size: 0.6rem;
    }

    .testimonial-visual-content > strong {
        max-width: 100%;

        margin-bottom: 13px;

        font-size: clamp(1.8rem, 7vw, 2.4rem);

        line-height: 1.06;
    }

    .testimonial-visual-content > p {
        max-width: 100%;

        font-size: 0.77rem;

        line-height: 1.65;
    }


    /* -----------------------------------------
       RIGHT CONTENT
    ----------------------------------------- */

    .testimonial-coming-content {
        width: 100%;
        max-width: 100%;
    }


    .testimonial-status {
        margin-bottom: 14px;

        padding: 6px 9px;

        font-size: 0.59rem;
    }


    .testimonial-coming-content h3 {
        width: 100%;
        max-width: 100%;

        margin-bottom: 14px;

        font-size: clamp(1.9rem, 7.5vw, 2.7rem);

        line-height: 1.06;
        letter-spacing: -0.04em;
    }


    .testimonial-coming-content > p {
        width: 100%;
        max-width: 100%;

        margin-bottom: 25px;

        font-size: 0.86rem;

        line-height: 1.68;
    }


    /* -----------------------------------------
       TRUST POINTS
    ----------------------------------------- */

    .testimonial-trust-points {
        gap: 13px;

        margin-bottom: 28px;
    }


    .testimonial-trust-point {
        grid-template-columns: 28px minmax(0, 1fr);

        gap: 10px;
    }


    .testimonial-trust-point > span {
        width: 26px;
        height: 26px;

        border-radius: 8px;

        font-size: 0.62rem;
    }


    .testimonial-trust-point p {
        font-size: 0.78rem;

        line-height: 1.5;
    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .testimonial-coming-content .btn-primary {
        width: 100%;

        min-height: 48px;

        justify-content: center;

        text-align: center;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .testimonials-section {
        padding: 60px 0;
    }


    .testimonials-section .section-heading {
        margin-bottom: 30px;
    }


    .testimonials-section .section-label {
        font-size: 0.64rem;

        letter-spacing: 0.08em;
    }


    .testimonials-section .section-heading h2 {
        font-size: clamp(2rem, 9.5vw, 2.6rem);

        line-height: 1.08;
        letter-spacing: -0.035em;
    }


    .testimonials-section .section-heading p {
        font-size: 0.86rem;

        line-height: 1.65;
    }


    .testimonials-coming-soon {
        gap: 34px;
    }


    .testimonial-visual {
        min-height: 300px;

        padding: 28px 20px;

        border-radius: 15px;
    }


    .testimonial-visual::after {
        left: 20px;
        width: 75px;
    }


    .testimonial-quote-mark {
        top: 18px;
        right: 20px;

        font-size: 4.5rem;
    }


    .testimonial-visual-content > span {
        font-size: 0.56rem;
    }


    .testimonial-visual-content > strong {
        font-size: clamp(1.55rem, 8vw, 2.1rem);
    }


    .testimonial-visual-content > p {
        font-size: 0.71rem;

        line-height: 1.6;
    }


    .testimonial-status {
        font-size: 0.56rem;
    }


    .testimonial-coming-content h3 {
        font-size: clamp(1.75rem, 8.5vw, 2.35rem);
    }


    .testimonial-coming-content > p {
        font-size: 0.82rem;
    }


    .testimonial-trust-points {
        gap: 12px;

        margin-bottom: 25px;
    }


    .testimonial-trust-point > span {
        width: 24px;
        height: 24px;
    }


    .testimonial-trust-point p {
        font-size: 0.74rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .testimonials-section {
        padding: 52px 0;
    }


    .testimonials-section .section-heading h2 {
        font-size: 1.9rem;
    }


    .testimonial-visual {
        min-height: 285px;

        padding: 24px 18px;
    }


    .testimonial-visual::after {
        left: 18px;
    }


    .testimonial-visual-content > strong {
        font-size: 1.5rem;
    }


    .testimonial-visual-content > p {
        font-size: 0.67rem;
    }


    .testimonial-coming-content h3 {
        font-size: 1.65rem;
    }


    .testimonial-coming-content > p {
        font-size: 0.77rem;
    }


    .testimonial-trust-point p {
        font-size: 0.69rem;
    }
}

/* =========================================================
   PRICING SECTION — RESPONSIVE
========================================================= */


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .pricing-section {
        padding: 90px 0;
    }

    .pricing-section .section-heading {
        max-width: 760px;
        margin-bottom: 50px;
    }

    .pricing-section .section-heading h2 {
        font-size: clamp(2.4rem, 4.5vw, 3.3rem);
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .pricing-card {
        min-height: 480px;
        padding: 28px;
    }

    .pricing-card.featured {
        order: -1;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .pricing-section {
        padding: 80px 0;
    }

    .pricing-section .section-heading {
        max-width: 700px;
        margin-bottom: 42px;
    }

    .pricing-section .section-heading h2 {
        font-size: clamp(2.3rem, 5vw, 3.1rem);
        line-height: 1.1;
        letter-spacing: -0.04em;
    }

    .pricing-section .section-heading p {
        max-width: 620px;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .pricing-card {
        min-height: 460px;
        padding: 25px;
    }

    .pricing-top {
        margin-bottom: 25px;
    }

    .pricing-card h3 {
        font-size: 1.42rem;
    }

    .pricing-description {
        font-size: 0.82rem;
    }

    .pricing-price strong {
        font-size: 1.3rem;
    }

    .pricing-features {
        gap: 9px;
    }

    .pricing-features li {
        font-size: 0.73rem;
    }

    .pricing-note {
        flex-wrap: wrap;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .pricing-section {
        padding: 70px 0;
    }


    /* -----------------------------------------
       SECTION HEADING
    ----------------------------------------- */

    .pricing-section .section-heading {
        width: 100%;
        max-width: 100%;
        margin-bottom: 35px;
    }

    .pricing-section .section-label {
        margin-bottom: 13px;
        font-size: 0.7rem;
    }

    .pricing-section .section-heading h2 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(2.15rem, 8vw, 3rem);

        line-height: 1.08;
        letter-spacing: -0.038em;
    }

    .pricing-section .section-heading p {
        width: 100%;
        max-width: 100%;

        font-size: 0.9rem;
        line-height: 1.7;
    }


    /* -----------------------------------------
       PRICING GRID
    ----------------------------------------- */

    .pricing-grid {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 14px;
    }


    /* -----------------------------------------
       PRICING CARD
    ----------------------------------------- */

    .pricing-card {
        width: 100%;

        min-height: auto;

        padding: 25px 22px;

        border-radius: 16px;
    }


    .pricing-card.featured {
        order: 0;
    }


    .pricing-card:hover {
        transform: translateY(-4px);
    }


    /* -----------------------------------------
       TOP
    ----------------------------------------- */

    .pricing-top {
        margin-bottom: 22px;
    }

    .pricing-number {
        font-size: 0.72rem;
    }

    .pricing-label {
        padding: 6px 8px;

        font-size: 0.56rem;
    }


    /* -----------------------------------------
       BADGE
    ----------------------------------------- */

    .pricing-badge {
        margin-bottom: 11px;

        padding: 6px 8px;

        font-size: 0.56rem;
    }


    /* -----------------------------------------
       TITLE
    ----------------------------------------- */

    .pricing-card h3 {
        width: 100%;
        max-width: 100%;

        margin-bottom: 11px;

        font-size: 1.3rem;

        line-height: 1.2;
    }


    /* -----------------------------------------
       DESCRIPTION
    ----------------------------------------- */

    .pricing-description {
        width: 100%;
        max-width: 100%;

        margin-bottom: 20px;

        font-size: 0.82rem;

        line-height: 1.65;
    }


    /* -----------------------------------------
       PRICE
    ----------------------------------------- */

    .pricing-price {
        margin-bottom: 22px;

        padding-bottom: 20px;
    }

    .pricing-price span {
        font-size: 0.62rem;
    }

    .pricing-price strong {
        font-size: 1.28rem;
    }


    /* -----------------------------------------
       FEATURES
    ----------------------------------------- */

    .pricing-features {
        gap: 9px;

        margin-bottom: 24px;
    }

    .pricing-features li {
        padding-left: 18px;

        font-size: 0.73rem;

        line-height: 1.45;
    }


    /* -----------------------------------------
       PRICING LINK
    ----------------------------------------- */

    .pricing-link {
        width: 100%;

        min-height: 46px;

        justify-content: center;

        text-align: center;

        font-size: 0.78rem;
    }


    /* -----------------------------------------
       NOTE
    ----------------------------------------- */

    .pricing-note {
        display: flex;

        flex-direction: column;

        gap: 7px;

        margin-top: 24px;

        text-align: center;
    }

    .pricing-note p,
    .pricing-note a {
        font-size: 0.72rem;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .pricing-section {
        padding: 60px 0;
    }

    .pricing-section .section-heading {
        margin-bottom: 30px;
    }

    .pricing-section .section-label {
        font-size: 0.64rem;

        letter-spacing: 0.08em;
    }

    .pricing-section .section-heading h2 {
        font-size: clamp(2rem, 9.5vw, 2.6rem);

        line-height: 1.08;
        letter-spacing: -0.035em;
    }

    .pricing-section .section-heading p {
        font-size: 0.86rem;
        line-height: 1.65;
    }


    .pricing-grid {
        gap: 12px;
    }


    .pricing-card {
        padding: 22px 20px;

        border-radius: 15px;
    }


    .pricing-top {
        margin-bottom: 20px;
    }


    .pricing-number {
        font-size: 0.68rem;
    }


    .pricing-label {
        font-size: 0.53rem;
    }


    .pricing-badge {
        font-size: 0.53rem;
    }


    .pricing-card h3 {
        font-size: 1.22rem;
    }


    .pricing-description {
        font-size: 0.79rem;
    }


    .pricing-price {
        margin-bottom: 20px;
        padding-bottom: 18px;
    }


    .pricing-price strong {
        font-size: 1.2rem;
    }


    .pricing-features {
        gap: 8px;

        margin-bottom: 21px;
    }


    .pricing-features li {
        font-size: 0.69rem;
    }


    .pricing-link {
        min-height: 45px;

        font-size: 0.75rem;
    }


    .pricing-note {
        margin-top: 22px;
    }


    .pricing-note p,
    .pricing-note a {
        font-size: 0.68rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .pricing-section {
        padding: 52px 0;
    }

    .pricing-section .section-heading h2 {
        font-size: 1.9rem;
    }

    .pricing-card {
        padding: 20px 18px;
    }

    .pricing-card h3 {
        font-size: 1.18rem;
    }

    .pricing-description {
        font-size: 0.76rem;
    }

    .pricing-features li {
        font-size: 0.66rem;
    }

    .pricing-price strong {
        font-size: 1.15rem;
    }
}

/* =========================================================
   FAQ SECTION — RESPONSIVE
========================================================= */


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .faq-section {
        padding: 90px 0;
    }

    .faq-section .section-heading {
        max-width: 760px;
        margin-bottom: 50px;
    }

    .faq-section .section-heading h2 {
        font-size: clamp(2.4rem, 4.5vw, 3.3rem);
    }

    .faq-list {
        max-width: 850px;
    }

    .faq-question {
        min-height: 78px;
        font-size: 0.96rem;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .faq-section {
        padding: 80px 0;
    }

    .faq-section .section-heading {
        max-width: 700px;
        margin-bottom: 42px;
    }

    .faq-section .section-heading h2 {
        font-size: clamp(2.3rem, 5vw, 3.1rem);

        line-height: 1.1;
        letter-spacing: -0.04em;
    }

    .faq-section .section-heading p {
        max-width: 620px;
    }

    .faq-list {
        max-width: 760px;
    }

    .faq-question {
        min-height: 76px;

        padding: 20px 3px;

        font-size: 0.92rem;
    }

    .faq-icon {
        width: 34px;
        height: 34px;

        font-size: 1.05rem;
    }

    .faq-answer p {
        padding: 0 55px 22px 3px;

        font-size: 0.86rem;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .faq-section {
        padding: 70px 0;
    }


    /* -----------------------------------------
       SECTION HEADING
    ----------------------------------------- */

    .faq-section .section-heading {
        width: 100%;
        max-width: 100%;
        margin-bottom: 35px;
    }

    .faq-section .section-label {
        margin-bottom: 13px;

        font-size: 0.7rem;
    }

    .faq-section .section-heading h2 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(2.15rem, 8vw, 3rem);

        line-height: 1.08;
        letter-spacing: -0.038em;
    }

    .faq-section .section-heading p {
        width: 100%;
        max-width: 100%;

        font-size: 0.9rem;

        line-height: 1.7;
    }


    /* -----------------------------------------
       FAQ LIST
    ----------------------------------------- */

    .faq-list {
        width: 100%;
        max-width: 100%;
    }


    /* -----------------------------------------
       QUESTION
    ----------------------------------------- */

    .faq-question {
        min-height: 72px;

        gap: 15px;

        padding: 18px 0;

        font-size: 0.88rem;

        line-height: 1.45;
    }

    .faq-question > span:first-child {
        max-width: calc(100% - 50px);
    }


    /* -----------------------------------------
       ICON
    ----------------------------------------- */

    .faq-icon {
        width: 32px;
        height: 32px;

        font-size: 1rem;
    }


    /* -----------------------------------------
       ANSWER
    ----------------------------------------- */

    .faq-answer p {
        max-width: 100%;

        padding: 0 44px 20px 0;

        font-size: 0.82rem;

        line-height: 1.68;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .faq-section {
        padding: 60px 0;
    }

    .faq-section .section-heading {
        margin-bottom: 30px;
    }

    .faq-section .section-label {
        font-size: 0.64rem;

        letter-spacing: 0.08em;
    }

    .faq-section .section-heading h2 {
        font-size: clamp(2rem, 9.5vw, 2.6rem);

        line-height: 1.08;
        letter-spacing: -0.035em;
    }

    .faq-section .section-heading p {
        font-size: 0.86rem;

        line-height: 1.65;
    }


    .faq-question {
        min-height: 68px;

        gap: 12px;

        padding: 17px 0;

        font-size: 0.82rem;
    }


    .faq-question > span:first-child {
        max-width: calc(100% - 45px);
    }


    .faq-icon {
        width: 30px;
        height: 30px;

        font-size: 0.95rem;
    }


    .faq-answer p {
        padding: 0 38px 18px 0;

        font-size: 0.77rem;

        line-height: 1.65;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .faq-section {
        padding: 52px 0;
    }

    .faq-section .section-heading h2 {
        font-size: 1.9rem;
    }

    .faq-question {
        min-height: 64px;

        font-size: 0.77rem;
    }

    .faq-icon {
        width: 28px;
        height: 28px;

        font-size: 0.9rem;
    }

    .faq-answer p {
        font-size: 0.72rem;
    }
}

/* =========================================================
   FINAL CTA SECTION — RESPONSIVE
========================================================= */


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .final-cta-section {
        padding: 90px 0;
    }

    .final-cta-content {
        max-width: 760px;

        padding: 55px 45px;
    }

    .final-cta-content h2 {
        font-size: clamp(2.5rem, 5vw, 4rem);
    }

    .final-cta-content > p {
        max-width: 600px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .final-cta-section {
        padding: 80px 0;
    }

    .final-cta-content {
        max-width: 700px;

        padding: 50px 38px;

        border-radius: 21px;
    }

    .final-cta-content .section-label {
        margin-bottom: 15px;

        font-size: 0.72rem;
    }

    .final-cta-content h2 {
        font-size: clamp(2.3rem, 5.5vw, 3.6rem);

        line-height: 1.07;

        letter-spacing: -0.04em;
    }

    .final-cta-content > p {
        max-width: 580px;

        font-size: 0.92rem;

        line-height: 1.7;
    }

    .final-cta-buttons {
        gap: 11px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .final-cta-section {
        padding: 70px 0;
    }


    /* -----------------------------------------
       CTA CONTAINER
    ----------------------------------------- */

    .final-cta-content {
        width: 100%;
        max-width: 100%;

        padding: 45px 24px;

        border-radius: 18px;
    }


    /* -----------------------------------------
       LABEL
    ----------------------------------------- */

    .final-cta-content .section-label {
        margin-bottom: 14px;

        font-size: 0.68rem;

        letter-spacing: 0.08em;
    }


    /* -----------------------------------------
       HEADING
    ----------------------------------------- */

    .final-cta-content h2 {
        width: 100%;
        max-width: 100%;

        margin-bottom: 18px;

        font-size: clamp(2.15rem, 8vw, 3rem);

        line-height: 1.07;

        letter-spacing: -0.038em;
    }


    /* -----------------------------------------
       DESCRIPTION
    ----------------------------------------- */

    .final-cta-content > p {
        width: 100%;
        max-width: 100%;

        margin-bottom: 28px;

        font-size: 0.88rem;

        line-height: 1.68;
    }


    /* -----------------------------------------
       BUTTONS
    ----------------------------------------- */

    .final-cta-buttons {
        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 10px;
    }


    .final-cta-buttons .btn-primary,
    .final-cta-buttons .btn-secondary {
        width: 100%;

        min-height: 48px;

        display: inline-flex;

        align-items: center;
        justify-content: center;

        padding: 0 20px;

        text-align: center;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .final-cta-section {
        padding: 60px 0;
    }

    .final-cta-content {
        padding: 38px 20px;

        border-radius: 16px;
    }

    .final-cta-content .section-label {
        font-size: 0.62rem;
    }

    .final-cta-content h2 {
        font-size: clamp(2rem, 9.5vw, 2.6rem);

        line-height: 1.08;

        letter-spacing: -0.035em;
    }

    .final-cta-content > p {
        font-size: 0.83rem;

        line-height: 1.65;
    }

    .final-cta-buttons .btn-primary,
    .final-cta-buttons .btn-secondary {
        min-height: 46px;

        font-size: 0.78rem;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .final-cta-section {
        padding: 52px 0;
    }

    .final-cta-content {
        padding: 32px 17px;
    }

    .final-cta-content h2 {
        font-size: 1.9rem;
    }

    .final-cta-content > p {
        font-size: 0.77rem;
    }

    .final-cta-buttons .btn-primary,
    .final-cta-buttons .btn-secondary {
        min-height: 45px;

        font-size: 0.74rem;
    }
}

/* =========================================================
   WEBQUAKRS
   MODERN 4-COLUMN FOOTER — RESPONSIVE
========================================================= */


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .site-footer {
        padding-top: 72px;
    }


    /* -----------------------------------------
       FOOTER TOP
    ----------------------------------------- */

    .footer-top {
        grid-template-columns: 0.9fr 1.1fr;

        gap: 42px;

        padding-bottom: 50px;
    }


    .footer-brand {
        max-width: 380px;
    }


    .footer-brand > p {
        max-width: 360px;

        font-size: 0.94rem;
    }


    .footer-cta {
        padding-left: 24px;
    }


    .footer-cta h2 {
        max-width: 560px;

        font-size: clamp(2.8rem, 5vw, 4.2rem);
    }


    /* -----------------------------------------
       FOOTER LINKS
    ----------------------------------------- */

    .footer-links {
        grid-template-columns:
            1fr
            1fr
            1.2fr
            1fr;

        gap: 24px;

        padding: 38px 0;
    }


    .footer-column a,
    .footer-column li > span {
        font-size: 0.94rem;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .site-footer {
        padding-top: 65px;
    }


    /* -----------------------------------------
       TOP
    ----------------------------------------- */

    .footer-top {
        grid-template-columns: 1fr;

        gap: 38px;

        padding-bottom: 48px;
    }


    .footer-brand {
        max-width: 600px;
    }


    .footer-brand > p {
        max-width: 520px;
    }


    .footer-cta {
        padding-left: 22px;
    }


    .footer-cta h2 {
        max-width: 680px;

        font-size: clamp(2.7rem, 6vw, 4rem);
    }


    /* -----------------------------------------
       FOUR COLUMNS
    ----------------------------------------- */

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

        gap: 32px 35px;

        padding: 42px 0;
    }


    .footer-column h3 {
        margin-bottom: 16px;

        font-size: 0.78rem;
    }


    .footer-column ul {
        gap: 10px;
    }


    .footer-column a,
    .footer-column li > span {
        font-size: 0.9rem;
    }


    /* -----------------------------------------
       BOTTOM
    ----------------------------------------- */

    .footer-bottom {
        min-height: 65px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .site-footer {
        padding-top: 55px;
    }


    /* -----------------------------------------
       FOOTER TOP
    ----------------------------------------- */

    .footer-top {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 32px;

        padding-bottom: 40px;
    }


    /* -----------------------------------------
       BRAND
    ----------------------------------------- */

    .footer-brand {
        width: 100%;
        max-width: 100%;
    }


    .footer-logo {
        margin-bottom: 14px;

        font-size: 1.7rem;
    }


    .footer-brand > p {
        width: 100%;
        max-width: 100%;

        font-size: 0.88rem;

        line-height: 1.65;
    }


    /* -----------------------------------------
       CTA
    ----------------------------------------- */

    .footer-cta {
        width: 100%;

        padding-left: 18px;
    }


    .footer-cta > span {
        margin-bottom: 8px;

        font-size: 0.64rem;
    }


    .footer-cta h2 {
        width: 100%;
        max-width: 100%;

        margin-bottom: 15px;

        font-size: clamp(2.35rem, 10vw, 3.3rem);

        line-height: 0.98;

        letter-spacing: -0.055em;
    }


    .footer-cta-link {
        font-size: 0.8rem;
    }


    /* -----------------------------------------
       FOOTER LINKS
    ----------------------------------------- */

    .footer-links {
        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 28px 22px;

        padding: 34px 0;
    }


    .footer-column h3 {
        margin-bottom: 14px;

        font-size: 0.70rem;
    }


    .footer-column ul {
        gap: 9px;
    }


    .footer-column a,
    .footer-column li > span {
        font-size: 0.84rem;

        line-height: 1.5;
    }


    /* -----------------------------------------
       SOCIAL
    ----------------------------------------- */

    .footer-social-column ul {
        gap: 9px;
    }


    .footer-social-column a {
        gap: 8px;

        font-size: 0.84rem;
    }


    .footer-social-column a::before {
        width: 5px;
        height: 5px;
    }


    /* -----------------------------------------
       CONTACT
    ----------------------------------------- */

    .footer-connect ul {
        gap: 10px;
    }


}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 560px) {

    .site-footer {
        padding-top: 48px;
    }


    /* -----------------------------------------
       TOP
    ----------------------------------------- */

    .footer-top {
        gap: 28px;

        padding-bottom: 34px;
    }


    .footer-logo {
        font-size: 1.55rem;
    }


    .footer-brand > p {
        font-size: 0.82rem;

        line-height: 1.62;
    }


    .footer-cta {
        padding-left: 16px;
    }


    .footer-cta > span {
        font-size: 0.60rem;

        letter-spacing: 0.10em;
    }


    .footer-cta h2 {
        font-size: clamp(2.15rem, 11vw, 2.9rem);

        line-height: 0.98;
    }


    .footer-cta-link {
        font-size: 0.76rem;
    }


    /* -----------------------------------------
       LINKS
    ----------------------------------------- */

    .footer-links {
        grid-template-columns: 1fr;

        gap: 25px;

        padding: 30px 0;
    }


    .footer-column h3 {
        margin-bottom: 12px;

        font-size: 0.66rem;
    }


    .footer-column ul {
        gap: 8px;
    }


    .footer-column a,
    .footer-column li > span {
        font-size: 0.80rem;

        line-height: 1.5;
    }


    .footer-social-column a {
        font-size: 0.80rem;
    }


}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .site-footer {
        padding-top: 42px;
    }


    .footer-logo {
        font-size: 1.45rem;
    }


    .footer-brand > p {
        font-size: 0.76rem;
    }


    .footer-cta {
        padding-left: 14px;
    }


    .footer-cta h2 {
        font-size: 2rem;
    }


    .footer-cta-link {
        font-size: 0.72rem;
    }


    .footer-links {
        gap: 22px;

        padding: 27px 0;
    }


    .footer-column a,
    .footer-column li > span {
        font-size: 0.74rem;
    }


    .footer-social-column a {
        font-size: 0.74rem;
    }


}


@media (max-width: 768px) {

    .main-nav {
        display: none;
    }

    .main-nav.menu-open {
        display: block !important;
    }

    .main-nav ul {
        display: flex;
        flex-direction: column;
    }

    .header-cta {
        display: none;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;

        width: 42px;
        height: 42px;

        padding: 0;

        background: transparent;
        border: 1px solid rgba(56, 189, 248, 0.25);
        border-radius: 10px;

        cursor: pointer;
    }

    .menu-toggle span {
        width: 20px;
        height: 2px;

        background: #ffffff;

        transition: 0.25s ease;
    }

    .menu-toggle.menu-open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .menu-toggle.menu-open span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.menu-open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
}


@media (min-width: 769px) {

    .menu-toggle {
        display: none;
    }

    .main-nav {
        display: block;
    }

}

/* =========================================================
   SERVICES PAGE — RESPONSIVE
   ========================================================= */


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .services-hero h1 {
        font-size: 3.4rem;
    }

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

    .service-detail-content {
        gap: 50px;
    }

    .service-detail-text h2 {
        font-size: 2.4rem;
    }

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

    .why-item:nth-child(2) {
        border-right: none;
    }

    .why-item:nth-child(1),
    .why-item:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .process-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .process-item:nth-child(3) {
        border-right: none;
    }

    .process-item:nth-child(1),
    .process-item:nth-child(2),
    .process-item:nth-child(3) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    /* Hero */

    .services-hero {
        padding: 90px 0 75px;
    }

    .services-hero h1 {
        font-size: 2.6rem;
        line-height: 1.12;
    }

    .services-hero p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-actions .btn {
        width: 100%;
    }


    /* Common sections */

    .services-overview,
    .service-detail,
    .services-why,
    .services-process {
        padding: 80px 0;
    }

    .section-heading {
        margin-bottom: 40px;
    }

    .section-heading h2 {
        font-size: 2.2rem;
    }

    .section-heading p {
        font-size: 0.95rem;
    }


    /* Service overview cards */

    .services-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .service-card {
        min-height: auto;
        padding: 28px 24px;
    }

    .service-card a {
        position: static;
        display: inline-block;
        margin-top: 4px;
    }


    /* Service detail */

    .service-detail-content {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .service-detail-text {
        max-width: none;
    }

    .service-detail-text h2 {
        font-size: 2.2rem;
    }

    .service-detail-text p {
        font-size: 0.96rem;
        line-height: 1.75;
    }

    .service-detail-visual {
        min-height: auto;
        order: 2;
    }

    .service-detail-text {
        order: 1;
    }

    .service-detail-alt .service-detail-text {
        order: 1;
    }

    .service-detail-alt .service-detail-visual {
        order: 2;
    }


    /* Service features */

    .service-features {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    /* Visual card */

    .service-visual-card {
        min-height: 300px;
        padding: 28px;
    }

    .service-visual-card strong {
        font-size: 1.6rem;
    }


    /* Why WebQuakrs */

    .why-grid {
        grid-template-columns: 1fr;
    }

    .why-item {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .why-item:last-child {
        border-bottom: none;
    }


    /* Process */

    .process-grid {
        grid-template-columns: 1fr;
    }

    .process-item,
    .process-item:nth-child(1),
    .process-item:nth-child(2),
    .process-item:nth-child(3) {
        min-height: auto;

        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .process-item:last-child {
        border-bottom: none;
    }

    .process-item {
        padding: 28px 22px;
    }

}

/* =========================================================
   SOLUTIONS PAGE — RESPONSIVE CSS
   ========================================================= */


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    /* Hero */

    .solutions-hero h1 {
        font-size: 3.4rem;
    }


    /* Business Stages */

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

    .stage-card:last-child {
        grid-column: 1 / -1;
    }


    /* Solution Details */

    .solution-detail-content {
        gap: 50px;
    }

    .solution-detail-text h2 {
        font-size: 2.4rem;
    }


    /* Benefits */

    .solutions-benefits {
        grid-template-columns: repeat(2, 1fr);
    }

    .solutions-benefit:nth-child(2) {
        border-right: none;
    }

    .solutions-benefit:nth-child(1),
    .solutions-benefit:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }


    /* How We Help */

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

    .help-item:nth-child(2) {
        border-right: none;
    }

    .help-item:nth-child(1),
    .help-item:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .solutions-hero {
        padding: 90px 0 75px;
    }

    .solutions-hero h1 {
        font-size: 2.6rem;
        line-height: 1.12;
    }

    .solutions-hero p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .solutions-hero .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .solutions-hero .hero-actions .btn {
        width: 100%;
    }


    /* -----------------------------------------------------
       SECTION COMMON
       ----------------------------------------------------- */

    .business-stages,
    .solution-detail,
    .solutions-why,
    .solutions-help {
        padding: 80px 0;
    }

    .section-heading {
        margin-bottom: 40px;
    }

    .section-heading h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .section-heading p {
        font-size: 0.95rem;
    }


    /* -----------------------------------------------------
       BUSINESS STAGES
       ----------------------------------------------------- */

    .stages-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .stage-card:last-child {
        grid-column: auto;
    }

    .stage-card {
        min-height: auto;
        padding: 28px 24px;
    }

    .stage-card h3 {
        font-size: 1.35rem;
    }

    .stage-badge {
        top: 24px;
        right: 22px;
    }


    /* -----------------------------------------------------
       SOLUTION DETAILS
       ----------------------------------------------------- */

    .solution-detail-content {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .solution-detail-text {
        max-width: none;
    }

    .solution-detail-text h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .solution-detail-text > p {
        font-size: 0.96rem;
        line-height: 1.75;
    }

    .solution-detail-visual {
        min-height: auto;
    }


    /* -----------------------------------------------------
       SOLUTION VISUAL
       ----------------------------------------------------- */

    .solution-visual-card {
        min-height: 300px;
        padding: 28px;
    }

    .solution-visual-card strong {
        font-size: 1.7rem;
    }

    .solution-visual-card small {
        font-size: 0.78rem;
    }


    /* -----------------------------------------------------
       SOLUTION POINTS
       ----------------------------------------------------- */

    .solution-points {
        gap: 16px;
    }

    .solution-point {
        gap: 13px;
    }

    .solution-point > span {
        width: 34px;
        height: 34px;
    }


    /* -----------------------------------------------------
       WHY THIS APPROACH
       ----------------------------------------------------- */

    .solutions-benefits {
        grid-template-columns: 1fr;
    }

    .solutions-benefit,
    .solutions-benefit:nth-child(1),
    .solutions-benefit:nth-child(2) {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .solutions-benefit:last-child {
        border-bottom: none;
    }

    .solutions-benefit {
        padding: 30px 24px;
    }


    /* -----------------------------------------------------
       HOW WE HELP
       ----------------------------------------------------- */

    .help-grid {
        grid-template-columns: 1fr;
    }

    .help-item,
    .help-item:nth-child(1),
    .help-item:nth-child(2) {
        min-height: auto;

        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .help-item:last-child {
        border-bottom: none;
    }

    .help-item {
        padding: 28px 24px;
    }

}

/* =========================================================
   OUR WORK PAGE — RESPONSIVE
   ========================================================= */


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    /* Hero */

    .work-hero h1 {
        font-size: 3.4rem;
    }


    /* Work Cards */

    .work-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .work-card-visual {
        min-height: 300px;
    }


    /* Portfolio Progress */

    .portfolio-progress-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }


    /* Approach */

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

    .approach-item:nth-child(2) {
        border-right: none;
    }

    .approach-item:nth-child(1),
    .approach-item:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .work-hero {
        padding: 90px 0 75px;
    }

    .work-hero h1 {
        font-size: 2.6rem;
        line-height: 1.12;
    }

    .work-hero p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .work-hero .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .work-hero .hero-actions .btn {
        width: 100%;
    }


    /* -----------------------------------------------------
       COMMON SECTIONS
       ----------------------------------------------------- */

    .work-showcase,
    .portfolio-progress,
    .work-approach {
        padding: 80px 0;
    }

    .section-heading {
        margin-bottom: 40px;
    }

    .section-heading h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .section-heading p {
        font-size: 0.95rem;
    }


    /* -----------------------------------------------------
       WORK GRID
       ----------------------------------------------------- */

    .work-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }


    /* -----------------------------------------------------
       WORK CARD
       ----------------------------------------------------- */

    .work-card {
        border-radius: 16px;
    }

    .work-card-visual {
        min-height: 270px;
        padding: 22px;
    }

    .work-project-number {
        top: 22px;
        left: 22px;
    }

    .work-project-type {
        top: 23px;
        right: 22px;
        font-size: 0.6rem;
    }


    /* Website Mockup */

    .work-mockup {
        width: 86%;
        height: 205px;
        bottom: -30px;
    }

    .mockup-content {
        padding: 22px 18px;
    }


    /* Card Content */

    .work-card-content {
        padding: 26px 22px 28px;
    }

    .work-card-content h3 {
        font-size: 1.3rem;
    }

    .work-card-content p {
        font-size: 0.9rem;
        line-height: 1.7;
    }


    /* -----------------------------------------------------
       PORTFOLIO PROGRESS
       ----------------------------------------------------- */

    .portfolio-progress-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .portfolio-progress-text {
        max-width: none;
    }

    .portfolio-progress-text h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .portfolio-progress-text p {
        font-size: 0.96rem;
        line-height: 1.75;
    }


    /* Portfolio Card */

    .portfolio-progress-card {
        min-height: 300px;
        padding: 28px;
    }

    .portfolio-progress-card strong {
        font-size: 1.7rem;
    }


    /* -----------------------------------------------------
       APPROACH
       ----------------------------------------------------- */

    .approach-grid {
        grid-template-columns: 1fr;
    }

    .approach-item,
    .approach-item:nth-child(1),
    .approach-item:nth-child(2) {
        min-height: auto;

        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .approach-item:last-child {
        border-bottom: none;
    }

    .approach-item {
        padding: 28px 24px;
    }

}

/* =========================================================
   ABOUT PAGE — RESPONSIVE CSS
   ========================================================= */


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    /* Hero */

    .about-hero h1 {
        font-size: 3.4rem;
    }


    /* Our Story */

    .about-story-content {
        gap: 50px;
    }

    .about-story-text h2 {
        font-size: 2.4rem;
    }


    /* Approach */

    .approach-cards {
        grid-template-columns: repeat(2, 1fr);
    }


    /* Why WebQuakrs */

    .about-why-content {
        gap: 55px;
    }

    .about-why-intro h2 {
        font-size: 2.4rem;
    }


    /* Process */

    .about-process-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .about-process-item:nth-child(3) {
        border-right: none;
    }

    .about-process-item:nth-child(1),
    .about-process-item:nth-child(2),
    .about-process-item:nth-child(3) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .about-hero {
        padding: 90px 0 75px;
    }

    .about-hero h1 {
        font-size: 2.6rem;
        line-height: 1.12;
    }

    .about-hero p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .about-hero .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .about-hero .hero-actions .btn {
        width: 100%;
    }


    /* -----------------------------------------------------
       COMMON SECTIONS
       ----------------------------------------------------- */

    .our-story,
    .about-approach,
    .about-beliefs,
    .about-why,
    .about-process {
        padding: 80px 0;
    }

    .section-heading {
        margin-bottom: 40px;
    }

    .section-heading h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .section-heading p {
        font-size: 0.95rem;
    }


    /* -----------------------------------------------------
       OUR STORY
       ----------------------------------------------------- */

    .about-story-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-story-text {
        max-width: none;
    }

    .about-story-text h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .about-story-text p {
        font-size: 0.96rem;
        line-height: 1.75;
    }

    .about-story-card {
        min-height: 300px;
        padding: 28px;
    }

    .about-story-card strong {
        font-size: 1.7rem;
    }


    /* -----------------------------------------------------
       OUR APPROACH
       ----------------------------------------------------- */

    .approach-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .about-approach-card {
        min-height: auto;
        padding: 28px 24px;
    }


    /* -----------------------------------------------------
       WHAT WE BELIEVE
       ----------------------------------------------------- */

    .beliefs-grid {
        grid-template-columns: 1fr;
    }

    .belief-item,
    .belief-item:nth-child(2n),
    .belief-item:nth-last-child(-n + 2) {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .belief-item:last-child {
        border-bottom: none;
    }

    .belief-item {
        padding: 28px 24px;
        gap: 16px;
    }


    /* -----------------------------------------------------
       WHY WEBQUAKRS
       ----------------------------------------------------- */

    .about-why-content {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .about-why-intro {
        max-width: none;
    }

    .about-why-intro h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .about-why-intro p {
        font-size: 0.96rem;
        line-height: 1.75;
    }

    .about-why-item {
        gap: 16px;
        padding: 24px 0;
    }


    /* -----------------------------------------------------
       PROCESS
       ----------------------------------------------------- */

    .about-process-grid {
        grid-template-columns: 1fr;
    }

    .about-process-item,
    .about-process-item:nth-child(1),
    .about-process-item:nth-child(2),
    .about-process-item:nth-child(3) {
        min-height: auto;

        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .about-process-item:last-child {
        border-bottom: none;
    }

    .about-process-item {
        padding: 28px 24px;
    }

}


/* =========================================================
   RESOURCES PAGE — RESPONSIVE CSS
   ========================================================= */


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    /* Hero */

    .resources-hero h1 {
        font-size: 3.4rem;
    }


    /* Resource Cards */

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


    /* Resource Topics */

    .resource-topic-content {
        gap: 50px;
    }

    .resource-topic-text h2 {
        font-size: 2.4rem;
    }


    /* Quick Tips */

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

    .tip-item:nth-child(2) {
        border-right: none;
    }

    .tip-item:nth-child(1),
    .tip-item:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .resources-hero {
        padding: 90px 0 75px;
    }

    .resources-hero h1 {
        font-size: 2.6rem;
        line-height: 1.12;
    }

    .resources-hero p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .resources-hero .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .resources-hero .hero-actions .btn {
        width: 100%;
    }


    /* -----------------------------------------------------
       COMMON SECTIONS
       ----------------------------------------------------- */

    .resource-library,
    .resource-topic,
    .resource-tips {
        padding: 80px 0;
    }

    .section-heading {
        margin-bottom: 40px;
    }

    .section-heading h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .section-heading p {
        font-size: 0.95rem;
    }


    /* -----------------------------------------------------
       RESOURCE LIBRARY
       ----------------------------------------------------- */

    .resources-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .resource-card {
        min-height: auto;
        padding: 26px 22px;
    }

    .resource-card h3 {
        font-size: 1.15rem;
    }


    /* -----------------------------------------------------
       RESOURCE TOPICS
       ----------------------------------------------------- */

    .resource-topic-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .resource-topic-text {
        max-width: none;
    }

    .resource-topic-text h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .resource-topic-text > p {
        font-size: 0.96rem;
        line-height: 1.75;
    }


    /* -----------------------------------------------------
       RESOURCE VISUAL
       ----------------------------------------------------- */

    .resource-topic-visual {
        min-height: auto;
    }

    .resource-visual-card {
        min-height: 300px;
        padding: 28px;
    }

    .resource-visual-card strong {
        font-size: 1.7rem;
    }

    .resource-visual-card small {
        font-size: 0.78rem;
    }


    /* -----------------------------------------------------
       RESOURCE POINTS
       ----------------------------------------------------- */

    .resource-points {
        gap: 16px;
    }

    .resource-point {
        gap: 13px;
    }

    .resource-point > span {
        width: 34px;
        height: 34px;
    }


    /* -----------------------------------------------------
       QUICK TIPS
       ----------------------------------------------------- */

    .tips-grid {
        grid-template-columns: 1fr;
    }

    .tip-item,
    .tip-item:nth-child(1),
    .tip-item:nth-child(2) {
        min-height: auto;

        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .tip-item:last-child {
        border-bottom: none;
    }

    .tip-item {
        padding: 28px 24px;
    }

}

/* =========================================================
   CONTACT PAGE — RESPONSIVE CSS
   ========================================================= */


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    /* Hero */

    .contact-hero h1 {
        font-size: 3.4rem;
    }


    /* Main Contact Area */

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .contact-info {
        max-width: 720px;
    }


    /* Contact Benefits */

    .contact-benefits {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact-benefit:nth-child(2) {
        border-right: none;
    }

    .contact-benefit:nth-child(1),
    .contact-benefit:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }


    /* What Happens Next */

    .contact-next-content {
        grid-template-columns: 1fr;
        gap: 55px;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    /* -----------------------------------------------------
       HERO
       ----------------------------------------------------- */

    .contact-hero {
        padding: 90px 0 75px;
    }

    .contact-hero h1 {
        font-size: 2.6rem;
        line-height: 1.12;
    }

    .contact-hero p {
        font-size: 1rem;
        line-height: 1.7;
    }


    /* -----------------------------------------------------
       MAIN CONTACT
       ----------------------------------------------------- */

    .contact-main {
        padding: 80px 0;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .contact-info {
        max-width: none;
    }

    .contact-info h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .contact-info > p {
        font-size: 0.96rem;
        line-height: 1.75;
    }


    /* -----------------------------------------------------
       CONTACT DETAILS
       ----------------------------------------------------- */

    .contact-details {
        gap: 20px;
    }

    .contact-detail-icon {
        width: 40px;
        height: 40px;
    }

    .contact-detail a,
    .contact-detail p {
        font-size: 0.92rem;
    }


    /* -----------------------------------------------------
       CONTACT NOTE
       ----------------------------------------------------- */

    .contact-note {
        margin-top: 30px;
        padding: 20px;
    }


    /* -----------------------------------------------------
       CONTACT FORM
       ----------------------------------------------------- */

    .contact-form-wrapper {
        padding: 24px 20px;
        border-radius: 15px;
    }

    .contact-form-header {
        margin-bottom: 26px;
    }

    .contact-form-header h2 {
        font-size: 1.7rem;
    }

    .contact-form-header p {
        font-size: 0.88rem;
    }

    .contact-form {
        gap: 19px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 13px 14px;
        font-size: 0.9rem;
    }

    .form-group textarea {
        min-height: 140px;
    }

    .form-submit {
        min-height: 48px;
    }


    /* -----------------------------------------------------
       COMMON SECTIONS
       ----------------------------------------------------- */

    .contact-why,
    .contact-next {
        padding: 80px 0;
    }

    .section-heading {
        margin-bottom: 40px;
    }

    .section-heading h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .section-heading p {
        font-size: 0.95rem;
    }


    /* -----------------------------------------------------
       CONTACT BENEFITS
       ----------------------------------------------------- */

    .contact-benefits {
        grid-template-columns: 1fr;
    }

    .contact-benefit,
    .contact-benefit:nth-child(1),
    .contact-benefit:nth-child(2) {
        min-height: auto;

        padding: 28px 24px;

        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .contact-benefit:last-child {
        border-bottom: none;
    }


    /* -----------------------------------------------------
       WHAT HAPPENS NEXT
       ----------------------------------------------------- */

    .contact-next-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-next-text {
        max-width: none;
    }

    .contact-next-text h2 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .contact-next-text p {
        font-size: 0.96rem;
        line-height: 1.75;
    }


    /* -----------------------------------------------------
       NEXT STEPS
       ----------------------------------------------------- */

    .contact-next-step {
        gap: 15px;
        padding: 22px 0;
    }

    .contact-next-step > span {
        width: 36px;
        height: 36px;
    }

}

@media (max-width: 768px) {

    .resources-hero .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .resources-hero .hero-actions .btn {
        width: 100%;
    }

    .resource-topic-text .btn {
        width: 100%;
    }

}

@media (max-width: 768px) {

    .solutions-hero .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .solutions-hero .hero-actions .btn {
        width: 100%;
    }

    .solution-detail-text .btn {
        width: 100%;
    }

}

@media (max-width: 768px) {

    .services-hero .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .services-hero .hero-actions .btn,
    .service-detail-text .btn {
        width: 100%;
    }

}


/* =========================================================
   FOOTER BOTTOM — RESPONSIVE
========================================================= */

@media (max-width: 768px) {

    .site-footer .footer-bottom {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 20px 0;
        margin-top: 30px;
        text-align: center;
    }

    .site-footer .footer-bottom > p {
        width: auto;
        max-width: 100%;
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
        white-space: normal;
        text-align: center;
    }

    .site-footer .footer-legal {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 20px;
        width: auto;
        margin: 0;
    }

    .site-footer .footer-legal a {
        font-size: 13px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {

    .site-footer .footer-bottom {
        gap: 10px;
        padding: 18px 0;
        margin-top: 25px;
    }

    .site-footer .footer-bottom > p {
        font-size: 12px;
    }

    .site-footer .footer-legal {
        gap: 8px 16px;
    }

    .site-footer .footer-legal a {
        font-size: 12px;
    }
}

/* =========================================================
   LEGAL PAGES — RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .legal-page {
        padding: 85px 0 70px;
    }

    .legal-container {
        width: min(100% - 32px, 700px);
    }

    .legal-header {
        margin-bottom: 42px;
    }

    .legal-header h1 {
        font-size: 42px;
    }

    .legal-section {
        padding: 28px 0;
    }

    .legal-section h2 {
        font-size: 22px;
    }

    .legal-section p,
    .legal-section li {
        font-size: 14px;
        line-height: 1.8;
    }
}


@media (max-width: 480px) {

    .legal-page {
        padding: 70px 0 55px;
    }

    .legal-container {
        width: calc(100% - 28px);
    }

    .legal-header {
        margin-bottom: 35px;
    }

    .legal-label {
        font-size: 11px;
        letter-spacing: 0.1em;
    }

    .legal-header h1 {
        margin-bottom: 14px;
        font-size: 34px;
    }

    .legal-header p {
        font-size: 14px;
        line-height: 1.75;
    }

    .legal-section {
        padding: 25px 0;
    }

    .legal-section h2 {
        margin-bottom: 14px;
        font-size: 20px;
    }

    .legal-section h3 {
        font-size: 17px;
    }

    .legal-section p,
    .legal-section li {
        font-size: 14px;
        line-height: 1.75;
    }

    .legal-section ul,
    .legal-section ol {
        padding-left: 20px;
    }

    .legal-contact {
        padding: 20px;
    }

    .legal-note {
        padding: 16px 18px;
    }
}