/* ================================================================
   WOODBOX WEBSITE
   MAIN STYLESHEET
================================================================ */


/* =================================================================
   01. CSS VARIABLES / GLOBAL SETTINGS
================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {

    /* ---------------- COLORS ---------------- */

    --color-black: #050505;
    --color-white: #ffffff;
    --color-text: #111111;
    --color-gray: #222222;


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

    --container-width: 1300px;
 


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

    --header-height:90px;


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

    --hero-height: 575px;


    /* ---------------- TRANSITIONS ---------------- */

    --transition-fast: 0.25s ease;

    --transition-normal: 0.5s ease;

    --transition-slow: 1s ease;


    /* ---------------- SLIDER ---------------- */

    --slider-duration: 6500ms;

}

.pb-50 {padding-bottom: 50px!important;}

section {
    padding: 80px 0;
}

@media (max-width: 768px) {
    section {
        padding: 55px 0 ;
    }
}

/* =================================================================
   02. UNIVERSAL RESET
================================================================= */

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


html {
    scroll-behavior: smooth;
}


body {
    width: 100%;
    min-height: 100vh;

    font-family: "Inter", Arial, sans-serif;

    color: var(--color-text);

    background: var(--color-white);

    overflow-x: hidden;
}


img {
    display: block;
    max-width: 100%;
}


button,
input,
textarea,
select {
    font-family: inherit;
}


button {
    cursor: pointer;
}


a {
    color: inherit;
    text-decoration: none;
}


ul,
ol {
    list-style: none;
}


/* =================================================================
   03. UNIVERSAL CONTAINER
================================================================= */

.container {

    width: 100%;

    max-width: var(--container-width);

    margin-left: auto;
    margin-right: auto;

    padding-left: var(--container-padding);
    padding-right: var(--container-padding);

}


/* =================================================================
   04. UNIVERSAL BUTTON
================================================================= */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    text-decoration: none;

    border: 0;

    cursor: pointer;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);

}


.btn i {
    flex-shrink: 0;
}


/* ================================================================
   GLOBAL TYPOGRAPHY
================================================================ */

 

/* Heading Typography */

h1,
h2,
h3,
h4,
h5,
h6 {
     font-family: "Montserrat", sans-serif;
}


/* =================================================================
   05. HEADER
================================================================= */

.site-header {

    position: relative;

    z-index: 100;

    width: 100%;

    height: var(--header-height);

    background: linear-gradient(135deg, #12090b 0%, #351015 52%, #641c27 100%);

    color: var(--color-white);

    border-bottom: 1px solid #171717;

}


.header-inner {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* =================================================================
   06. HEADER LOGO
================================================================= */

.logo {

    display: flex;

    align-items: center;

    gap: 18px;

    flex-shrink: 0;

}


.logo-mark {

    display: inline-block;

    font-size: 58px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: -7px;

    font-style: italic;

}


.logo-text {

    font-size: 30px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: -1.5px;

}


/* =================================================================
   07. HEADER NAVIGATION
================================================================= */

.main-nav {

    display: flex;

    align-items: center;

    gap: 68px;

    margin-left: auto;

    margin-right: 68px;

}


.main-nav a {

    position: relative;
 

    font-size: 16px;

    font-weight: 500;

    white-space: nowrap;

    transition:
        opacity var(--transition-fast);

}


.main-nav a:hover {

    opacity: 0.6;

}


/* =================================================================
   08. HEADER CTA BUTTON
================================================================= */

.btn-header {

    min-width: 284px;

    height: 57px;

    padding: 0 24px;

    color: var(--color-white);

    background: transparent;

    border: 2px solid var(--color-white);

    border-radius: 7px;

    font-size: 16px;

    font-weight: 600;

}


.btn-header i {

    font-size: 16px;

}


.btn-header:hover {

    color: var(--color-black);

    background: var(--color-white);

    transform: translateY(-2px);

}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    width: 100%;
    position: fixed;
    z-index: 1000;
}

.header-inner {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    display: block;
    width: auto;
    max-width:100px;
    height: auto;
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 42px;
}

.main-nav a {
    color: #ffffff;
    text-decoration: none;
     font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.main-nav a:hover {
    color: #d6ad55;
}


/* =========================================================
   HEADER CTA
   ========================================================= */

.btn-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 54px;
    padding: 0 28px;

    border: 1px solid rgba(214, 173, 85, 0.65);
    border-radius: 9px;

    background: linear-gradient(
        135deg,
        #17130d 0%,
        #5b431d 55%,
        #8b6729 100%
    );

    color: #ffffff;
     font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

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

.btn-header i {
    color: #f0c967;
    font-size: 18px;
}

.btn-header:hover {
    transform: translateY(-2px);

    border-color: #e8c66b;

    box-shadow:
        0 10px 30px rgba(214, 173, 85, 0.22);
}


/* =========================================================
   STRATEGY MODAL
   ========================================================= */

.strategy-modal {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

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

    padding: 25px;

    z-index: 99999;

    visibility: hidden;
    opacity: 0;

    pointer-events: none;

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


/* =========================================================
   MODAL ACTIVE STATE
   ========================================================= */

.strategy-modal.active {
    visibility: visible;
    opacity: 1;

    pointer-events: auto;
}


/* =========================================================
   MODAL BACKDROP
   ========================================================= */

.strategy-modal-backdrop {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(0, 0, 0, 0.78);

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}


/* =========================================================
   MODAL BOX
   ========================================================= */

.strategy-modal-box {
    position: relative;

    width: min(100%, 760px);
    max-height: calc(100vh - 50px);

    overflow-y: auto;

    background:
        linear-gradient(
            145deg,
            #06244d 0%,
            #0b3b73 55%,
            #082d5a 100%
        );

    border: 1px solid rgba(214, 169, 77, 0.42);

    border-radius: 22px;

    box-shadow:
        0 30px 100px rgba(0, 0, 0, 0.65),
        0 0 50px rgba(214, 173, 85, 0.08);

    color: #ffffff;

    z-index: 2;

    transform:
        translateY(25px)
        scale(0.97);

    transition:
        transform 0.35s ease;
}


/* =========================================================
   MODAL BOX ACTIVE ANIMATION
   ========================================================= */

.strategy-modal.active .strategy-modal-box {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   MODAL SCROLLBAR
   ========================================================= */

.strategy-modal-box::-webkit-scrollbar {
    width: 7px;
}

.strategy-modal-box::-webkit-scrollbar-track {
    background: #111111;
}

.strategy-modal-box::-webkit-scrollbar-thumb {
    background: #806126;
    border-radius: 20px;
}

.strategy-modal-box::-webkit-scrollbar-thumb:hover {
    background: #b18a3c;
}


/* =========================================================
   MODAL CONTENT
   ========================================================= */

.strategy-modal-content {
    position: relative;

    padding: 42px;
}


/* =========================================================
   MODAL CLOSE BUTTON
   ========================================================= */

.modal-close {
    position: absolute;

    top: 22px;
    right: 22px;

    width: 42px;
    height: 42px;

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

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);

    color: #ffffff;

    font-size: 16px;

    cursor: pointer;

    z-index: 5;

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

.modal-close:hover {
    background: rgba(214, 173, 85, 0.15);

    border-color: rgba(214, 173, 85, 0.6);

    color: #e4bd62;

    transform: rotate(90deg);
}


/* =========================================================
   MODAL ICON
   ========================================================= */

.modal-icon {
    width: 64px;
    height: 64px;

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

    margin-bottom: 22px;

    border: 1px solid rgba(214, 173, 85, 0.45);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(214, 173, 85, 0.18),
            rgba(214, 173, 85, 0.04)
        );

    color: #e5bd61;

    font-size: 27px;
}


/* =========================================================
   MODAL HEADING
   ========================================================= */

.modal-heading {
    padding-right: 50px;
    margin-bottom: 30px;
}

.modal-eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #d9b35b;

     font-family: "Montserrat", sans-serif;
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
}

.modal-heading h2 {
    margin: 0 0 12px;

    color: #ffffff;

     font-family: "Montserrat", sans-serif;
    font-size: 32px;
    font-weight: 700;

    line-height: 1.15;
}

.modal-heading p {
    margin: 0;

    max-width: 600px;

    color: rgba(255, 255, 255, 0.65);

     font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.65;
}


/* =========================================================
   FORM
   ========================================================= */

.strategy-form {
    width: 100%;
}


/* =========================================================
   FORM GRID — 2 COLUMNS
   ========================================================= */

.form-grid {
    display: grid;

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

    gap: 20px 18px;
}


/* =========================================================
   FORM GROUP
   ========================================================= */

.form-group {
    width: 100%;
}

.form-group-full {
    grid-column: 1 / -1;
}


/* =========================================================
   FORM LABEL
   ========================================================= */

.form-group label {
    display: block;

    margin-bottom: 8px;

    color: #ffffff;

     font-family: "Montserrat", sans-serif;
    font-size: 14px;
    font-weight: 700;
}

.form-group label span {
    color: rgba(255, 255, 255, 0.42);

    font-weight: 500;
}


/* =========================================================
   INPUT WRAPPER
   ========================================================= */

.input-wrap {
    position: relative;

    width: 100%;
}

.input-wrap > i {
    position: absolute;

    left: 16px;
    top: 50%;

    transform: translateY(-50%);

    color: #b8954b;

    font-size: 16px;

    pointer-events: none;

    z-index: 2;
}


/* =========================================================
   INPUTS
   ========================================================= */

.input-wrap input,
.input-wrap textarea {
    width: 100%;

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 10px;

    outline: none;

    background:
        rgba(255, 255, 255, 0.055);

    color: #ffffff;

     font-family: "Inter", sans-serif;
    font-size: 15px;

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

.input-wrap input {
    height: 52px;

    padding:
        0 16px 0 46px;
}

.input-wrap textarea {
    min-height: 120px;

    resize: vertical;

    padding:
        15px 16px 15px 46px;

    line-height: 1.5;
}


/* =========================================================
   TEXTAREA ICON
   ========================================================= */

.textarea-wrap > i {
    top: 19px;

    transform: none;
}


/* =========================================================
   INPUT PLACEHOLDER
   ========================================================= */

.input-wrap input::placeholder,
.input-wrap textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}


/* =========================================================
   INPUT FOCUS
   ========================================================= */

.input-wrap input:focus,
.input-wrap textarea:focus {
    border-color:
        rgba(214, 173, 85, 0.7);

    background:
        rgba(214, 173, 85, 0.055);

    box-shadow:
        0 0 0 3px rgba(214, 173, 85, 0.08);
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.strategy-submit {
    width: 100%;

    min-height: 56px;

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

    gap: 12px;

    margin-top: 24px;

    padding: 0 24px;

    border: 1px solid #103b93;

    border-radius: 10px;

    background:
       linear-gradient(135deg, #894307 0%, #fe9c03 58%, #9f6002 100% 100%);

    color: #ffffff;

     font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.strategy-submit i {
    color: #f0cc71;

    font-size: 18px;
}

.strategy-submit:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(214, 173, 85, 0.2);
}


/* =========================================================
   TRUST TEXT
   ========================================================= */

.form-trust {
    display: flex;

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

    gap: 15px;

    margin-top: 18px;

    color: rgba(255, 255, 255, 0.5);

     font-family: "Inter", sans-serif;
    font-size: 12px;
}

.form-trust span {
    display: flex;
    align-items: center;

    gap: 6px;
}

.form-trust i {
    color: #d6b45d;
}


/* =========================================================
   SUCCESS MESSAGE
   ========================================================= */

.form-success-message {
    position: fixed;

    top: 50%;
    left: 50%;

    width: min(90%, 420px);

    padding: 38px 30px;

    transform:
        translate(-50%, -50%)
        scale(0.9);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    z-index: 100000;

    text-align: center;

    border: 1px solid rgba(214, 173, 85, 0.45);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #151515,
            #0c0c0c
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.7);

    color: #ffffff;

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


/* =========================================================
   SUCCESS ACTIVE
   ========================================================= */

.form-success-message.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translate(-50%, -50%)
        scale(1);
}


/* =========================================================
   SUCCESS ICON
   ========================================================= */

.success-icon {
    width: 62px;
    height: 62px;

    margin: 0 auto 18px;

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

    border-radius: 50%;

    background:
        rgba(214, 173, 85, 0.12);

    border: 1px solid rgba(214, 173, 85, 0.45);

    color: #dfbb61;

    font-size: 25px;
}


/* =========================================================
   SUCCESS HEADING
   ========================================================= */

.form-success-message h3 {
    margin: 0 0 10px;

     font-family: "Montserrat", sans-serif;
    font-size: 25px;
}

.form-success-message p {
    margin: 0 0 22px;

    color: rgba(255, 255, 255, 0.6);

     font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.6;
}


/* =========================================================
   SUCCESS CLOSE
   ========================================================= */

.success-close {
    min-height: 44px;

    padding: 0 25px;

    border: 1px solid rgba(214, 173, 85, 0.55);

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #17120a,
            #765821
        );

    color: #ffffff;

     font-family: "Montserrat", sans-serif;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.success-close:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(214, 173, 85, 0.18);
}


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

@media (max-width: 991px) {

    .header-inner {
        min-height: 82px;
    }

    .main-nav {
        gap: 20px;
    }

    .main-nav a {
        font-size: 14px;
    }

    .btn-header {
        padding: 0 20px;
        min-height: 48px;
        font-size: 14px;
    }

    .strategy-modal {
        padding: 15px;
    }

    .strategy-modal-box {
        max-height: calc(100vh - 30px);
        border-radius: 18px;
    }

    .strategy-modal-content {
        padding: 32px 24px;
    }

}


@media (max-width: 767px) {

    .header-inner {
        gap: 15px;
    }

    .logo img {
        max-width: 150px;
    }

    .main-nav {
        display: none;
    }

    .btn-header {
        min-height: 44px;

        padding: 0 14px;

        font-size: 13px;
    }

    .btn-header span {
        
    }

    .btn-header i {
        margin: 0;
        font-size: 18px;
    }

    .strategy-modal {
        padding: 10px;
    }

    .strategy-modal-box {
        width: 100%;

        max-height:
            calc(100vh - 20px);

        border-radius: 16px;
    }

    .strategy-modal-content {
        padding: 28px 18px;
    }

    .modal-close {
        top: 15px;
        right: 15px;

        width: 36px;
        height: 36px;
    }

    .modal-icon {
        width: 54px;
        height: 54px;

        margin-bottom: 18px;
    }

    .modal-heading {
        padding-right: 40px;
        margin-bottom: 24px;
    }

    .modal-heading h2 {
        font-size: 26px;
    }

    .modal-heading p {
        font-size: 14px;
    }

    .form-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .form-group-full {
        grid-column: auto;
    }

    .form-trust {
        align-items: flex-start;
        flex-direction: column;
    }

}


@media (max-width: 480px) {

    .btn-header {
        width: 44px;
        padding: 0;
    }

    .strategy-modal-content {
        padding: 24px 15px;
    }

    .modal-heading h2 {
        font-size: 23px;
    }

    .strategy-submit {
        min-height: 52px;
        font-size: 14px;
    }

}


/* =================================================================
   09. HERO SLIDER - MAIN CONTAINER
================================================================= */

.hero-slider {

    position: relative;

    width: 100%;

    height: var(--hero-height);

    overflow: hidden;

    background: var(--color-black);


}


/* =================================================================
   10. HERO SLIDE
================================================================= */

.slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    visibility: hidden;

    overflow: hidden;

    transition:
        opacity var(--transition-slow),
        visibility var(--transition-slow);

}


.slide.active {

    opacity: 1;

    visibility: visible;

}


/* =================================================================
   11. HERO SLIDE BACKGROUND IMAGE
================================================================= */

.slide-background {

    position: absolute;

    /*
        Extending the background outside the slider prevents
        empty edges from appearing during zoom.
    */

    inset: -6%;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center center;

    transform: scale(1);

    transition:
        transform 6.5s cubic-bezier(0.2, 0.65, 0.2, 1);

    will-change: transform;

}


/* =================================================================
   12. HERO ZOOM EFFECT
================================================================= */

.slide.active .slide-background {

    /*
        Initial scale:
        1.00

        Active scale:
        1.12

        This creates the slow cinematic zoom effect.
    */

    transform: scale(1.12);

}


/* =================================================================
   13. SLIDE 1 BACKGROUND
================================================================= */

.slide-1 .slide-background {

    background-image:
        url(
            "../images/slider1.webp"
        );

}


/* =================================================================
   14. SLIDE 2 BACKGROUND
================================================================= */

.slide-2 .slide-background {

    background-image:
        url(
            "../images/slider2.webp"
        );

}


/* =================================================================
   15. SLIDE 3 BACKGROUND
================================================================= */

.slide-3 .slide-background {

    background-image:
        url(
            "../images/slider3.webp"
        );

}


/* =================================================================
   16. HERO DARK OVERLAY
================================================================= */

.slide-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.67) 0%,
            rgba(0, 0, 0, 0.40) 50%,
            rgba(0, 0, 0, 0.67) 100%
        );

}


/* =================================================================
   17. HERO BOTTOM OVERLAY
================================================================= */

.slide-overlay::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.10),
            rgba(0, 0, 0, 0.20) 55%,
            rgba(0, 0, 0, 0.45) 100%
        );

}


/* =================================================================
   18. HERO CONTENT
================================================================= */

.hero-content {

    position: relative;

    z-index: 5;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: var(--color-white);

    padding-top: 5px;

}


/* =================================================================
   19. HERO EYEBROW
================================================================= */

.hero-eyebrow {

    display: block;

    margin-bottom: 17px;

    font-size: 18px;

    line-height: 1.3;

    font-weight: 400;

    letter-spacing: -0.2px;

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 0.7s ease 0.15s,
        transform 0.7s ease 0.15s;

}


/* =================================================================
   20. HERO TITLE
================================================================= */

.hero-title {

    max-width: 900px;

    margin-bottom: 20px;

    font-size: clamp(25px, 2.1vw, 25px);

    line-height: 1.14;

    font-weight: 700;

    letter-spacing: 0;

    color: var(--color-white);

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.8s ease 0.25s,
        transform 0.8s ease 0.25s;

}


/* =================================================================
   21. HERO DESCRIPTION
================================================================= */

.hero-description {

    max-width: 680px;

    margin-bottom: 27px;

    font-size: 18px;

    line-height: 1.55;

    font-weight: 400;

    color: var(--color-white);

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.8s ease 0.35s,
        transform 0.8s ease 0.35s;

}


/* =================================================================
   22. HERO CONTENT ANIMATION
================================================================= */

.slide.active .hero-eyebrow,
.slide.active .hero-title,
.slide.active .hero-description,
.slide.active .btn-hero,
.slide.active .hero-note {

    opacity: 1;

    transform: translateY(0);

}


/* =================================================================
   23. HERO CTA BUTTON
================================================================= */

.btn-hero {

    min-width: 334px;

    height: 58px;

    padding: 0 28px;

    color: var(--color-text);

    background: var(--color-white);

    border-radius: 7px;

    font-size: 18px;

    font-weight: 700;

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.20);

    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.8s ease 0.45s,
        transform 0.8s ease 0.45s,
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);

}


.btn-hero i {

    font-size: 23px;

}


.btn-hero:hover {

    background: #eeeeee;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.35);

}


/* =================================================================
   24. HERO SMALL NOTE
================================================================= */

.hero-note {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 11px;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 400;

    color: var(--color-white);

    opacity: 0;

    transform: translateY(20px);

    transition:
        opacity 0.8s ease 0.55s,
        transform 0.8s ease 0.55s;

}


.hero-note i {

    font-size: 16px;

}


/* =================================================================
   25. SLIDER ARROWS
================================================================= */

.slider-arrow {

    position: absolute;

    top: 50%;

    z-index: 20;

    width: 62px;

    height: 62px;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 0;

    color: var(--color-white);

    background: transparent;

    transform: translateY(-50%);

    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);

}


.slider-arrow i {

    font-size: 48px;

    line-height: 1;

    font-weight: 300;

}


.slider-arrow:hover {

    background: rgba(255, 255, 255, 0.08);

}


.slider-arrow-prev {

    left: 42px;

}


.slider-arrow-next {

    right: 42px;

}


.slider-arrow-prev:hover {

    transform:
        translate(-5px, -50%);

}


.slider-arrow-next:hover {

    transform:
        translate(5px, -50%);

}


/* =================================================================
   26. SLIDER DOTS
================================================================= */

.slider-dots {

    position: absolute;

    left: 50%;

    bottom: 23px;

    z-index: 30;

    display: flex;

    align-items: center;

    gap: 20px;

    transform: translateX(-50%);

}


.slider-dot {

    width: 17px;

    height: 17px;

    padding: 0;

    border: 2px solid var(--color-white);

    border-radius: 50%;

    background: transparent;

    transition:
        background-color var(--transition-fast),
        transform var(--transition-fast);

}


.slider-dot:hover {

    transform: scale(1.15);

}


.slider-dot.active {

    background: var(--color-white);

    transform: scale(1.05);

}





/* =================================================================
   28. TESTIMONIAL QUOTE ICON
================================================================= */

.quote-icon {

    color: #000;

    font-size: 100px;

    line-height: 0.8;

    font-weight: 700;

    letter-spacing: -18px;

    padding-top: 4px;

}


/* =================================================================
   29. TESTIMONIAL CONTENT
================================================================= */

.quote-content {

    padding-top: 3px;

}


.quote-text {

    margin-bottom: 20px;

    color: var(--color-text);

    font-size: 24px;

    line-height: 1.45;

    font-weight: 700;

    letter-spacing: -0.7px;

}


.quote-author {

    color: var(--color-gray);

    font-size: 15px;

    line-height: 1.5;

    font-weight: 400;

}


/* =================================================================
   30. TABLET RESPONSIVE
================================================================= */

@media (max-width: 1200px) {

    :root {

        --container-padding: 35px;

    }


    .main-nav {

        gap: 35px;

        margin-right: 35px;

    }


    .main-nav a {

        font-size: 16px;

    }


    .btn-header {

        min-width: 235px;

        font-size: 16px;

    }


    .slider-arrow-prev {

        left: 15px;

    }


    .slider-arrow-next {

        right: 15px;

    }

}


/* =================================================================
   31. SMALL DESKTOP / TABLET
================================================================= */

@media (max-width: 900px) {

        .wb-faq-cta {
            text-align: center;        flex-wrap: wrap;
        gap: 13px;
        margin-top: 18px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
    }

    header .btn-header {min-width:auto;}
header .btn-header span{display:none;}

    :root {

        --header-height: 85px;

        --hero-height: 600px;

        --container-padding: 25px;

    }


    .logo-mark {

        font-size: 43px;

    }


    .logo-text {

        font-size: 23px;

    }


    .main-nav {

        display: none;

    }


    .btn-header {

        
        height: 48px;

        padding: 0 16px;

        font-size: 14px;

    }


    .btn-header i {

        font-size: 19px;

    }


    .hero-title {

        font-size: clamp(35px, 5vw, 35px);

        letter-spacing: -1.8px;

    }


    .hero-description {

        font-size: 16px;

        max-width: 600px;

    }


    .slider-arrow {

        width: 45px;

        height: 55px;

    }


    .slider-arrow i {

        font-size: 40px;

    }


    .slider-arrow-prev {

        left: 5px;

    }


    .slider-arrow-next {

        right: 5px;

    }


    .testimonial-inner {

        grid-template-columns: 80px 1fr;

        gap: 20px;

    }


    .quote-icon {

        font-size: 75px;

    }


    .quote-text {

        font-size: 21px;

    }

}


/* =================================================================
   32. MOBILE
================================================================= */

@media (max-width: 600px) {

    :root {

        --header-height: 75px;

        --hero-height: 620px;

        --container-padding: 20px;

    }


    /* ---------------- MOBILE HEADER ---------------- */

    .header-inner {

        padding-left: 15px;

        padding-right: 15px;

    }


    .logo {

        gap: 10px;

    }


    .logo-mark {

        font-size: 36px;

    }


    .logo-text {

        font-size: 20px;

    }


    .btn-header {

        height: 43px;

        padding: 0 12px;

        gap: 8px;

        font-size: 12px;

    }


    .btn-header i {

        font-size: 16px;

    }


    /* ---------------- MOBILE HERO ---------------- */

    .hero-content {

        padding-left: 55px;

        padding-right: 55px;

    }


    .hero-eyebrow {

        font-size: 13px;

        margin-bottom: 15px;

    }


    .hero-title {

        font-size: 37px;

        line-height: 1.14;

        letter-spacing: -1.4px;

        margin-bottom: 18px;

    }


    .hero-description {

        font-size: 15px;

        line-height: 1.55;

        margin-bottom: 24px;

    }


    .btn-hero {

        width: 100%;

        min-width: 0;

        height: 55px;

        padding: 0 15px;

        font-size: 14px;

    }


    .hero-note {

        font-size: 13px;

    }


    /* ---------------- MOBILE ARROWS ---------------- */

    .slider-arrow {

        width: 35px;

        height: 50px;

    }


    .slider-arrow i {

        font-size: 32px;

    }


    .slider-arrow-prev {

        left: 0;

    }


    .slider-arrow-next {

        right: 0;

    }


    /* ---------------- MOBILE DOTS ---------------- */

    .slider-dots {

        bottom: 20px;

        gap: 13px;

    }


    .slider-dot {

        width: 13px;

        height: 13px;

    }


    /* ---------------- MOBILE TESTIMONIAL ---------------- */

    .testimonial-section {

        padding-top: 55px;

        padding-bottom: 55px;

    }


    .testimonial-inner {

        display: block;

    }


    .quote-icon {

        margin-bottom: 15px;

        font-size: 65px;

    }


    .quote-text {

        font-size: 18px;

        line-height: 1.5;

    }


    .quote-author {

        font-size: 13px;

    }

}


/* =================================================================
   33. REDUCED MOTION ACCESSIBILITY
================================================================= */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;

    }


    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

    }

}


/* =========================================================
   AADI KIRAN SOLAR ENERGY
   ABOUT + SOLAR ENQUIRY SECTION
   ========================================================= */

.marketing-section {
    position: relative;
    width: 100%;
    padding: 60px 20px;
    background: #ffffff;
    overflow: hidden;
}

.marketing-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(400px, 0.75fr);
    gap: 80px;
    align-items: center;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.marketing-content {
    width: 100%;
}

.marketing-eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;

    padding-left: 34px;
    margin-bottom: 20px;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #2f6b43;
}

.marketing-eyebrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 23px;
    height: 3px;

    background: #d6a94d;
    transform: translateY(-50%);
    border-radius: 3px;
}


/* =========================================================
   MAIN HEADING
   ========================================================= */

.marketing-title {
    max-width: 750px;
    margin: 0 0 24px;

    font-size: clamp(32px, 4.2vw, 35px);
    line-height: 1.08;
    font-weight: 700;
    letter-spacing: -1px;

    color: #101813;
}

.marketing-title span {
    display: inline;
    color: #d6a94d;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.marketing-description {
    max-width: 650px;
    margin: 0 0 30px;
    text-align: justify;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;

    color: #000;
}


/* =========================================================
   KEY POINTS
   ========================================================= */

.marketing-points {
    display: flex;
    flex-direction: column;
    gap: 15px;

    max-width: 620px;
    margin-bottom: 38px;
}

.marketing-point {
    display: flex;
    align-items: center;
    gap: 13px;
}

.marketing-point p {
    margin: 0;

    font-size: 15px;
    line-height: 1.5;
    color: #26352d;
    font-weight: 500;
}

.marketing-check {
    flex: 0 0 25px;

    width: 25px;
    height: 25px;

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

    border-radius: 50%;

    background: #2f6b43;
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    box-shadow: 0 5px 12px rgba(47, 107, 67, 0.18);
}


/* =========================================================
   SOLAR FOCUS
   ========================================================= */

.marketing-recognized {
    padding-top: 25px;

    border-top: 1px solid #e7e7e7;
}

.marketing-recognized-title {
    margin: 0 0 17px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;

    color: #66736b;
}

.marketing-ratings {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.marketing-rating {
    min-height: 58px;

    display: flex;
    align-items: center;
    gap: 8px;

    padding: 12px 17px;

    border: 1px solid #e7e8e3;
    border-radius: 9px;

    background: #ffffff;

    box-shadow: 0 5px 20px rgba(15, 35, 24, 0.05);
}

.marketing-rating-name {
    font-size: 16px;
    font-weight: 700;
    color: #000;
}

.marketing-rating-number {
    font-size: 16px;
    color: #000;
}

.marketing-brand {
    padding: 10px 14px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;

    color: #2f6b43;

    border-left: 2px solid #d6a94d;
}


/* =========================================================
   RIGHT ENQUIRY CARD
   ========================================================= */

.marketing-form-card {
    position: relative;

    width: 100%;
    padding: 38px 34px 30px;

    background: #ffffff;

    border: 1px solid #e3dfd4;
    border-radius: 20px;

    box-shadow:
        0 20px 55px rgba(23, 48, 32, 0.10),
        0 4px 15px rgba(23, 48, 32, 0.04);

    overflow: hidden;
}


/* GOLD TOP LINE */

.marketing-form-card::before {
    content: "";
    position: absolute;

    top: 0;
    left: 34px;
    right: 34px;

    height: 4px;

    background: linear-gradient(
        90deg,
        #58255c,
        #2f2c64,
        #fd8a02
    );

    border-radius: 0 0 5px 5px;
}


/* =========================================================
   FORM HEADING
   ========================================================= */

.marketing-form-heading {
    margin-bottom: 27px;
}

.marketing-form-heading h3 {
    margin: 0 0 9px;

    font-size: 24px;
    line-height: 1.25;
    font-weight: 700;

    color: #101813;
}

.marketing-form-heading p {
    margin: 0;

    font-size: 14px;
    line-height: 1.6;

    color: #747c76;
}


/* =========================================================
   FORM
   ========================================================= */

.marketing-form {
    width: 100%;
}

.marketing-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;

    margin-bottom: 14px;
}

.marketing-field {
    width: 100%;
}

.marketing-field input,
.marketing-field textarea {
    width: 100%;

    display: block;

    padding: 15px 16px;

    border: 1px solid #dedfd9;
    border-radius: 9px;

    background: #ffffff;

    color: #1c2720;

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.marketing-field input {
    height: 52px;
}

.marketing-field textarea {
    min-height: 105px;
    resize: vertical;
    line-height: 1.55;
}

.marketing-field input::placeholder,
.marketing-field textarea::placeholder {
    color: #9aa19c;
}

.marketing-field input:focus,
.marketing-field textarea:focus {
    border-color: #2f6b43;

    background: #fbfdfb;

    box-shadow:
        0 0 0 3px rgba(47, 107, 67, 0.08);
}

.marketing-requirement {
    margin-bottom: 16px;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.marketing-primary-cta:hover {
   background:linear-gradient(135deg,#245d3b,#3f7d4b);}

.marketing-primary-cta {
    width: 100%;
    min-height: 56px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 14px 20px;

    border: 0;
    border-radius: 9px;

    background: linear-gradient(135deg, #894307 0%, #fe9c03 58%, #9f6002 100% 100%);

  

    color: #ffffff;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(47, 107, 67, 0.20);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.marketing-primary-cta:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 30px rgba(47, 107, 67, 0.28);
}

.marketing-primary-cta i {
    font-size: 18px;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.marketing-divider {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 18px 0;
}

.marketing-divider span {
    flex: 1;
    height: 1px;

    background: #e5e5e1;
}

.marketing-divider small {
    font-size: 11px;
    font-weight: 600;

    color: #9a9e99;
}

 

 

/* =========================================================
   TRUST MESSAGE
   ========================================================= */

.marketing-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 19px;
    padding-top: 17px;

    border-top: 1px solid #eeeeeb;

    text-align: center;
}

.marketing-trust i {
    color: #2f6b43;
    font-size: 15px;
}

.marketing-trust span {
    font-size: 11px;
    line-height: 1.5;

    color: #858c87;
}


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

@media (max-width: 1000px) {

    .marketing-section {
        padding: 75px 20px;
    }

    .marketing-container {
        grid-template-columns: 1fr;
        gap: 55px;
        max-width: 760px;
    }

    .marketing-content {
        text-align: left;
    }

    .marketing-title {
        max-width: 700px;
        font-size: clamp(40px, 7vw, 56px);
    }

    .marketing-description {
        max-width: 700px;
    }

    .marketing-form-card {
        max-width: 650px;
        margin: 0 auto;
    }
}


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

@media (max-width: 767px) {

    .marketing-section {
        padding: 60px 16px;
    }

    .marketing-container {
        gap: 40px;
    }

    .marketing-eyebrow {
        font-size: 12px;
        letter-spacing: 1.2px;
        margin-bottom: 15px;
    }

    .marketing-title {
        font-size: 38px;
        line-height: 1.08;
        letter-spacing: -1.3px;
        margin-bottom: 20px;
    }

    .marketing-description {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 25px;
    }

    .marketing-points {
        gap: 13px;
        margin-bottom: 30px;
    }

    .marketing-point {
        align-items: flex-start;
    }

    .marketing-point p {
        font-size: 14px;
    }

    .marketing-check {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
        margin-top: 1px;
    }

    .marketing-ratings {
        gap: 8px;
    }

    .marketing-rating {
        min-height: 52px;
        padding: 10px 13px;
    }

    .marketing-brand {
        padding: 8px 10px;
    }

    .marketing-form-card {
        padding: 32px 20px 25px;
        border-radius: 16px;
    }

    .marketing-form-card::before {
        left: 20px;
        right: 20px;
    }

    .marketing-form-heading h3 {
        font-size: 24px;
    }

    .marketing-form-heading p {
        font-size: 13px;
    }

    .marketing-form-row {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 12px;
    }

    .marketing-field input {
        height: 50px;
    }

    .marketing-field textarea {
        min-height: 110px;
    }

    .marketing-primary-cta,
    .marketing-secondary-cta {
        min-height: 52px;
        font-size: 13px;
    }
}


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

@media (max-width: 480px) {

    .marketing-section {
        padding: 50px 14px;
    }

    .marketing-title {
        font-size: 32px;
    }

    .marketing-description {
        font-size: 14px;
    }

    .marketing-form-card {
        padding: 30px 16px 22px;
    }

    .marketing-form-card::before {
        left: 16px;
        right: 16px;
    }

    .marketing-form-heading h3 {
        font-size: 22px;
    }

    .marketing-rating {
        width: 100%;
        justify-content: space-between;
    }

    .marketing-brand {
        width: 100%;
        text-align: center;
        border-left: 0;
        border-top: 1px solid #e4e5df;
        padding-top: 12px;
    }

    .marketing-trust {
        align-items: flex-start;
    }

    .marketing-trust span {
        text-align: left;
    }
}


/* =========================================================
   AADI KIRAN SOLAR FEATURE RIBBON
   ========================================================= */

.solar-feature-ribbon {
    width: 100%;
    overflow: hidden;

    background: #f4d83f;

    border-top: 1px solid rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);

    padding: 18px 0;

    position: relative;
    z-index: 5;
}

.solar-ribbon-track {
    width: max-content;

    display: flex;
    align-items: center;

    animation: solarRibbonMove 28s linear infinite;
}

.solar-ribbon-item {
    display: flex;
    align-items: center;
    gap: 35px;

    padding: 0 38px;

    white-space: nowrap;

    color: #17251c;

    font-size: clamp(20px, 2vw, 28px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.5px;
}

.solar-ribbon-item i {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 25px;

    color: #17251c;

    transform: rotate(15deg);
}

.solar-ribbon-item::after {
    content: "✦";

    margin-left: 8px;

    font-size: 22px;
    color: #17251c;
}

@keyframes solarRibbonMove {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


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

@media (max-width: 767px) {

    .solar-feature-ribbon {
        padding: 15px 0;
    }

    .solar-ribbon-item {
        gap: 22px;
        padding: 0 24px;

        font-size: 18px;
    }

    .solar-ribbon-item i {
        font-size: 19px;
    }

    .solar-ribbon-item::after {
        font-size: 16px;
    }

}


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

@media (max-width: 480px) {

    .solar-feature-ribbon {
        padding: 13px 0;
    }

    .solar-ribbon-item {
        gap: 16px;
        padding: 0 20px;

        font-size: 16px;
    }

    .solar-ribbon-item i {
        font-size: 16px;
    }

}


/* =========================================================
   PRIMARY CTA
   ========================================================= */

.marketing-primary-cta {
    width: 100%;
    min-height: 51px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-top: 3px;
    padding: 13px 18px;

    border: 0;
    border-radius: 8px;

    color: #ffffff;

  
    

   
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(117, 82, 20, 0.20);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.marketing-primary-cta:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 26px rgba(117, 82, 20, 0.28);
}


.marketing-primary-cta i {
    font-size: 16px;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.marketing-divider {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 11px 0;
}


.marketing-divider span {
    flex: 1;

    height: 1px;

    background: #e7e1d8;
}


.marketing-divider small {
    color: #888888;

   
    font-size: 10px;
    font-weight: 700;
}


/* =========================================================
   SECONDARY CTA
   ========================================================= */

 
.marketing-secondary-cta {
    width: 100%;
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 12px 18px;

    border: 1px solid #06376f;
    border-radius: 8px;

    color: #01356f;
    background: #ffffff;

   
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}


.marketing-secondary-cta:hover {
    color: #ffffff;

  border: 1px solid #06376f;  background-color: #01356f;

    transform: translateY(-2px);
}

.text-white {color: #fff!important;}


/* =========================================================
   TRUST MESSAGE
   ========================================================= */

.marketing-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: 14px;
    padding-top: 13px;

    border-top: 1px solid #eee9e0;

    color: #777777;

   
    font-size: 10px;
    line-height: 1.4;

    text-align: center;
}


.marketing-trust i {
    color: #ad8231;
    font-size: 14px;
}


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

@media (max-width: 1000px) {

    .marketing-section {
        padding: 65px 0;
    }

    .marketing-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }
.marketing-title{text-align:left;}
    .marketing-content {
        max-width: 750px;
        margin: 0 auto;
        text-align: justify;
    }

    .marketing-description {
        margin-left: auto;
        margin-right: auto;
    }

    .marketing-points {
        width: fit-content;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;

        text-align: left;
    }

    .marketing-recognized {
        text-align: center;
    }

    .marketing-ratings {
        justify-content: center;
    }

    .marketing-form-card {
        max-width: 620px;
        margin: 0 auto;
    }
}


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

@media (max-width: 600px) {

    .marketing-section {
        padding: 50px 0 60px;
    }

    .marketing-container {
        width: min(100% - 30px, 1180px);
        gap: 32px;
    }

    .marketing-eyebrow {
        font-size: 12px;
    }

    .marketing-title {
        font-size: 36px;
        line-height: 1.08;
        letter-spacing: -0.8px;
    }

    .marketing-description {
        margin-top: 18px;

        font-size: 15px;
        line-height: 1.6;
    }

    .marketing-points {
        gap: 10px;
    }

    .marketing-point p {
        font-size: 14px;
    }

    .marketing-ratings {
        gap: 8px;
    }

    .marketing-rating {
        padding: 7px 9px;
    }

    .marketing-brand {
        padding: 6px 8px;

        border: 1px solid #e5dfd5;
        border-radius: 6px;

        font-size: 10px;
    }

    .marketing-form-card {
        padding: 25px 18px;
        border-radius: 14px;
    }

    .marketing-form-heading h3 {
        font-size: 23px;
    }

    .marketing-field input {
        height: 45px;
    }

    .marketing-field textarea {
        min-height: 80px;
    }
}


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

@media (max-width: 380px) {

    .marketing-title {
        font-size: 32px;
    }

    .marketing-form-card {
        padding: 22px 15px;
    }

    .marketing-ratings {
        flex-direction: column;
        align-items: stretch;
    }

    .marketing-rating,
    .marketing-brand {
        justify-content: center;
    }

}

/* =================================================================
   =================================================================
   SECTION 02B
   DARK TESTIMONIAL STRIP
   =================================================================
   ================================================================= */


/* =================================================================
   02B.01 - TESTIMONIAL SECTION
================================================================= */
.dark-testimonial-section {

    width: 100%;

    min-height: 140px;

    display: flex;

    align-items: center;

  background:linear-gradient(135deg, #050505 0%, #111111 52%, #b0823b 100%);

    color: #fff;

}


/* =================================================================
   02B.02 - TESTIMONIAL CONTAINER
================================================================= */

.dark-testimonial-inner {   
    display: grid;
    grid-template-columns: 120px minmax(0, 100%);
    column-gap: 25px;
    align-items: center;
    border-radius: 12px;
    padding: 50px;

}


/* =================================================================
   02B.03 - LARGE QUOTE MARK
================================================================= */

.dark-quote-mark {

    color: #fff;

    font-size: 96px;

    line-height: 0.7;

    font-weight: 700;

    letter-spacing: -18px;

}


/* =================================================================
   02B.04 - TESTIMONIAL TEXT
================================================================= */

.dark-testimonial-text {

    margin: 0 0 8px;

    color: #fff;

    font-size: 25px;

    line-height: 1.42;

    font-weight: 500;

}


/* =================================================================
   02B.05 - TESTIMONIAL CAPTION
================================================================= */

.dark-testimonial-caption {

    margin: 0;

    color: #ddd;

    font-size:15px;

    line-height: 1.2;

    font-weight: 400;

}


/* =================================================================
   =================================================================
   SECTION 02
   TABLET RESPONSIVE
   =================================================================
   ================================================================= */

@media (max-width: 1100px) {


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

    .market-intelligence-container {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(370px, 0.85fr);

        column-gap: 40px;

    }


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

    .market-intelligence-title {

        font-size: clamp(35px, 2.2vw, 35px);

    }


    /* -------------------------------------------------------------
       FORM CARD
    ------------------------------------------------------------- */

    .market-form-card {

        padding-left: 20px;

        padding-right: 20px;

    }


}


/* =================================================================
   =================================================================
   SECTION 02
   TABLET / SMALL LAPTOP
   =================================================================
   ================================================================= */

@media (max-width: 900px) {


    .market-intelligence-section {

        padding-top: 50px;

        padding-bottom: 35px;

    }


    /* -------------------------------------------------------------
       CHANGE TO SINGLE COLUMN
    ------------------------------------------------------------- */

    .market-intelligence-container {

        grid-template-columns: 1fr;

        row-gap: 40px;

    }


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

    .market-intelligence-content {

        max-width: 720px;

        margin-left: auto;

        margin-right: auto;

    }


    /* -------------------------------------------------------------
       FORM
    ------------------------------------------------------------- */

    .market-form-wrapper {

        justify-content: center;

    }


    .market-form-card {

        max-width: 600px;

    }


    /* -------------------------------------------------------------
       TESTIMONIAL
    ------------------------------------------------------------- */

    .dark-testimonial-section {

        min-height: 155px;

    }


    .dark-testimonial-inner {

        grid-template-columns: 80px minmax(0, 650px);

        column-gap: 20px;

    }


    .dark-quote-mark {

        font-size: 75px;

    }


}


/* =================================================================
   =================================================================
   SECTION 02
   MOBILE RESPONSIVE
   =================================================================
   ================================================================= */

@media (max-width: 600px) {


    /* -------------------------------------------------------------
       MAIN SECTION
    ------------------------------------------------------------- */

    .market-intelligence-section {

        padding-top: 42px;

        padding-bottom: 28px;

    }


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

    .market-intelligence-container {

        row-gap: 32px;

    }


    /* -------------------------------------------------------------
       EYEBROW
    ------------------------------------------------------------- */

    .section-eyebrow {

        margin-bottom: 7px;

        font-size: 16px;

    }


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

    .market-intelligence-title {

        margin-bottom: 13px;

        font-size: clamp(31px, 9vw, 35px);

        line-height: 1.08;

        letter-spacing:0;

    }


    /* -------------------------------------------------------------
       REMOVE DESKTOP BREAK
    ------------------------------------------------------------- */

    .desktop-break {

        display: none;

    }


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

    .market-intelligence-description {

        margin-bottom: 20px;

        font-size: 16px;

        line-height: 1.5;

    }


    /* -------------------------------------------------------------
       BENEFITS
    ------------------------------------------------------------- */

    .benefits-list {

        gap: 13px;

    }


    .benefit-item {

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

        column-gap: 9px;

    }


    .benefit-icon {

        width: 17px;

        height: 17px;

    }


    .benefit-icon i {

        font-size: 16px;

    }


    .benefit-text {

        font-size: 16px;

        line-height: 1.2;

    }


    /* -------------------------------------------------------------
       RECOGNIZED
    ------------------------------------------------------------- */

    .recognized-section {

        margin-top: 26px;

    }


    .recognized-logos {

        gap: 12px 17px;

    }


    /* -------------------------------------------------------------
       FORM CARD
    ------------------------------------------------------------- */

    .market-form-card {

        max-width: 100%;

        padding: 20px 17px;

        border-radius: 7px;

    }


    /* -------------------------------------------------------------
       FORM HEADING
    ------------------------------------------------------------- */

    .market-form-title {

        font-size: 25px;

        line-height: 1.2;

    }


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

    .market-form-description {

        font-size: 16px;

        line-height: 1.5;

    }


    /* -------------------------------------------------------------
       FIRST / LAST NAME
    ------------------------------------------------------------- */

    .form-row-name {

        grid-template-columns: 1fr;

        gap: 0;

    }


    /* -------------------------------------------------------------
       INPUTS
    ------------------------------------------------------------- */

    .market-form input {

        height: 38px;

        font-size: 16px;

        padding-left: 11px;

        padding-right: 11px;

    }


    /* -------------------------------------------------------------
       FORM BUTTON
    ------------------------------------------------------------- */

    .form-submit-button {

        min-height: 40px;

        font-size: 16px;

        padding-left: 8px;

        padding-right: 8px;

    }


    /* -------------------------------------------------------------
       BOOK CALL
    ------------------------------------------------------------- */

    .form-book-call {

        min-height: 40px;

        font-size: 16px;

    }


    /* -------------------------------------------------------------
       FORM FOOTER
    ------------------------------------------------------------- */

    .form-footer-text {

        font-size: 15px;

    }


    .form-trust {

        font-size: 15px;

    }


    /* -------------------------------------------------------------
       DARK TESTIMONIAL
    ------------------------------------------------------------- */

    .dark-testimonial-section {

        min-height: auto;

        padding-top: 35px;

        padding-bottom: 35px;

    }


    .dark-testimonial-inner {

        display: grid;

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

        column-gap: 12px;

        align-items: start;

    }


    .dark-quote-mark {

        font-size: 62px;

        letter-spacing: -12px;

        padding-top: 2px;

    }


    .dark-testimonial-text {

        font-size: 20px;

        line-height: 1.5;

    }


    .dark-testimonial-caption {

        font-size: 15px;
        line-height: 1.45;

    }

}


/* =================================================================
   =================================================================
   SECTION 02
   EXTRA SMALL MOBILE
   =================================================================
   ================================================================= */

@media (max-width: 380px) {


    .market-intelligence-title {

        font-size: 29px;

    }


    .market-intelligence-description {

        font-size: 13px;

    }


    .benefit-text {

        font-size: 12px;

    }


    .recognized-logos {

        gap: 10px 13px;

    }


    .market-form-title {

        font-size: 18px;

    }


    .dark-testimonial-inner {

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

        column-gap: 9px;

    }


    .dark-quote-mark {

        font-size: 52px;

    }


    .dark-testimonial-text {

        font-size: 12px;

    }

}

/* =================================================================
   =================================================================
   SECTION 03
   WHY SPECIALIZATION CHANGES EVERYTHING
   =================================================================
   ================================================================= */


/* =================================================================
   03.01 - MAIN SECTION
================================================================= */

.specialization-section {

    width: 100%;

    padding: 42px 0 48px;

    background: #f5f5f5;

    overflow: hidden;

}


/* =================================================================
   03.02 - MAIN CONTAINER
================================================================= */

.specialization-container {

    width: 100%;

  

    margin: 0 auto;

}


/* =================================================================
   03.03 - SECTION HEADER
================================================================= */

.specialization-header {

    width: 100%;

    text-align: center;

    margin: 0 auto 15px;

}


/* =================================================================
   03.04 - EYEBROW
================================================================= */

.specialization-eyebrow {

    display: block;

    margin-bottom: 7px;

    color: #111;

     font-family: "Inter", sans-serif;

    font-size: 16px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: 0.35px;

}


/* =================================================================
   03.05 - MAIN TITLE
================================================================= */

.specialization-title {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 15px;

    margin-bottom: 50px;

    color: #111;

     font-family: "Montserrat", sans-serif;

    font-size: 35px;

    line-height: 1.08;

  

    font-weight: 700;

}


/* =================================================================
   03.06 - VS BADGE
================================================================= */

.specialization-vs {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width:50px;

    height: 50px;

    border-radius: 50%;

    background: #fff;

    color: #111;

     font-family: "Montserrat", sans-serif;

    font-size: 25px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08);

}


/* =================================================================
   03.07 - SUBTITLE
================================================================= */

.specialization-subtitle {

    max-width: 700px;

    margin: 8px auto 0;

    color: #333;

     font-family: "Inter", sans-serif;

    font-size: 15px;

    line-height: 1.45;

    font-weight: 400;

}


/* =================================================================
   =================================================================
   03.08 - COMPARISON AREA
   =================================================================
   ================================================================= */

.specialization-comparison {

    width: 100%;

    display: grid;

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

    gap: 24px;

    align-items: stretch;

}


/* =================================================================
   03.09 - GENERIC COMPARISON CARD
================================================================= */

.comparison-card {

    width: 100%;

    min-width: 0;

    padding: 20px 22px 18px;

    border-radius: 7px;

    overflow: hidden;

}


/* =================================================================
   03.10 - GENERAL AGENCY CARD
================================================================= */

.comparison-card-general {

    background: #fff;

    border: 1px solid #e8e8e8;

    box-shadow:
        0 3px 15px rgba(0, 0, 0, 0.05);

}


/* =================================================================
   03.11 - WOODBOX CARD
================================================================= */

.comparison-card-woodbox {

    /*
     * Premium red/burgundy gradient replacing
     * the black background from the reference.
     */

    background:
        var(--theme-gradient);

    border: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 8px 25px rgba(61, 15, 24, 0.18);

    color: #fff;

}


/* =================================================================
   03.12 - CARD HEADER
================================================================= */

.comparison-card-header {

    display: grid;

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

    column-gap: 16px;

    align-items: center;

    min-height: 62px;

}


/* =================================================================
   03.13 - COMPARISON ICON
================================================================= */

.comparison-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    flex-shrink: 0;

}


/* =================================================================
   03.14 - GENERAL AGENCY ICON
================================================================= */

.general-icon {

    border: 1px solid #e3e3e3;

    background: #f5f5f5;

    color: #111;

}


.general-icon i {

    font-size: 28px;

    line-height: 1;

}


/* =================================================================
   03.15 - WOODBOX ICON
================================================================= */

.woodbox-icon {

    border: 1px solid rgba(255, 255, 255, 0.5);

    background:
        rgba(0, 0, 0, 0.14);

    color: #fff;

}


/* =================================================================
   03.16 - WOODBOX SHIELD
================================================================= */

.woodbox-shield {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 35px;

    height: 39px;

    color: #fff;

     font-family: "Montserrat", sans-serif;

    font-size: 16px;

    font-weight: 700;

    line-height: 1;
 

    transform: scaleX(0.85);

}


/* =================================================================
   03.17 - CARD LABEL
================================================================= */

.comparison-label {

    display: block;

    margin-bottom: 6px;

     font-family: "Inter", sans-serif;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 600;

    letter-spacing: 0.15px;

}


/* =================================================================
   03.18 - GENERAL CARD HEADING
================================================================= */

.comparison-card-general h3 {

    margin: 0;

    color: #111;

     font-family: "Montserrat", sans-serif;

    font-size: 22px;

    line-height: 1.35;

    font-weight: 700;

    letter-spacing: -0.25px;

}


/* =================================================================
   03.19 - WOODBOX CARD HEADING
================================================================= */

.comparison-card-woodbox h3 {

    margin: 0;

    color: #fff;

     font-family: "Montserrat", sans-serif;

    font-size:22px;

    line-height: 1.35;

    font-weight: 700;

    letter-spacing: -0.25px;

}


/* =================================================================
   =================================================================
   03.20 - CARD DIVIDER
   =================================================================
   ================================================================= */

.comparison-divider {

    width: 100%;

    height: 1px;

    margin: 15px 0 3px;

    background: #e4e4e4;

}


.comparison-card-woodbox .comparison-divider {

    background:
        rgba(255, 255, 255, 0.18);

}


/* =================================================================
   03.21 - COMPARISON LIST
================================================================= */

.comparison-list {

    width: 100%;

    display: flex;

    flex-direction: column;

    margin: 0;

    padding: 0;

}


/* =================================================================
   03.22 - LIST ITEM
================================================================= */

.comparison-list-item {

    width: 100%;
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
    min-height: 55px;
    padding: 8px 0;
    border-bottom: 1px solid #e5e5e5;
    color: #171717;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;

}


.comparison-list-item:last-child {

    border-bottom: 0;

}


/* =================================================================
   03.23 - WOODBOX LIST ITEMS
================================================================= */

.comparison-card-woodbox .comparison-list-item {

    color: rgba(255, 255, 255, 0.96);

    border-bottom-color:
        rgba(255, 255, 255, 0.17);

}


/* =================================================================
   03.24 - STATUS ICON
================================================================= */

.comparison-status {

    width: 19px;

    height: 19px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    flex-shrink: 0;

}


/* =================================================================
   03.25 - NEGATIVE STATUS
================================================================= */

.status-negative {

    background: #efefef;

    color: #111;

}


.status-negative i {

    font-size: 12px;

    font-weight: 700;

}


/* =================================================================
   03.26 - POSITIVE STATUS
================================================================= */

.status-positive {

    border: 1px solid rgba(255, 255, 255, 0.65);

    background:
        rgba(255, 255, 255, 0.06);

    color: #fff;

}


.status-positive i {

    font-size: 16px;

    font-weight: 700;

}


/* =================================================================
   03.27 - SUBTLE WOODBOX GLOW
================================================================= */

.comparison-card-woodbox {

    position: relative;

    isolation: isolate;

}


.comparison-card-woodbox::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    top: -170px;

    right: -100px;

    border-radius: 50%;

    background:
        rgba(255, 70, 80, 0.12);

    filter: blur(45px);

    pointer-events: none;

    z-index: -1;

}


/* =================================================================
   =================================================================
   SECTION 03
   HOVER EFFECTS
   =================================================================
   ================================================================= */

@media (hover: hover) {

    .comparison-card-general {

        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;

    }


    .comparison-card-general:hover {

        transform: translateY(-3px);

        box-shadow:
            0 10px 28px rgba(0, 0, 0, 0.08);

    }


    .comparison-card-woodbox {

        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease;

    }


    .comparison-card-woodbox:hover {

        transform: translateY(-3px);

        box-shadow:
            0 13px 32px rgba(61, 15, 24, 0.28);

    }

}


/* =================================================================
   =================================================================
   SECTION 03
   LARGE TABLET
   =================================================================
   ================================================================= */

@media (max-width: 1000px) {


    .specialization-container {

        padding-left: 24px;

        padding-right: 24px;

    }


    .specialization-comparison {

        gap: 18px;

    }


    .comparison-card {

        padding: 19px 18px 17px;

    }


    .comparison-card-header {

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

        column-gap: 13px;

    }


    .comparison-icon {

        width: 52px;

        height: 52px;

    }


    .comparison-list-item {

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

        column-gap: 8px;

        font-size: 16px;

    }

}


/* =================================================================
   =================================================================
   SECTION 03
   TABLET
   =================================================================
   ================================================================= */

@media (max-width: 768px) {


    .specialization-section {

        padding-top: 38px;

        padding-bottom: 40px;

    }


    .specialization-header {

        margin-bottom: 22px;

    }


    .specialization-title {

        gap: 10px;

        font-size: clamp(30px, 6vw, 40px);

    }


    .specialization-vs {

        width: 38px;

        height: 38px;

        font-size: 16px;

    }


    .specialization-subtitle {

        max-width: 600px;

        font-size: 16px;

    }


    .specialization-comparison {

        grid-template-columns: 1fr;

        gap: 18px;

        max-width: 620px;

        margin: 0 auto;

    }


    .comparison-card {

        padding: 21px;

    }


    .comparison-list-item {

        min-height: 52px;

        font-size: 16px;

    }

}


/* =================================================================
   =================================================================
   SECTION 03
   MOBILE
   =================================================================
   ================================================================= */

@media (max-width: 600px) {


    .specialization-section {

        padding-top: 34px;

        padding-bottom: 34px;

    }


    .specialization-container {

        padding-left: 16px;

        padding-right: 16px;

    }


    /* -------------------------------------------------------------
       EYEBROW
    ------------------------------------------------------------- */

    .specialization-eyebrow {

        margin-bottom: 8px;

        font-size: 16px;

    }


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

    .specialization-title {

        gap: 8px;

        font-size: clamp(28px, 9vw, 36px);

        line-height: 1.1;

        

    }


    .specialization-vs {

        width: 34px;

        height: 34px;

        font-size: 16px;

    }


    /* -------------------------------------------------------------
       SUBTITLE
    ------------------------------------------------------------- */

    .specialization-subtitle {

        margin-top: 10px;

        font-size: 16px;

        line-height: 1.5;

    }


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

    .specialization-comparison {

        gap: 14px;

    }


    .comparison-card {

        padding: 18px 16px 14px;

        border-radius: 7px;

    }


    /* -------------------------------------------------------------
       CARD HEADER
    ------------------------------------------------------------- */

    .comparison-card-header {

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

        column-gap: 12px;

        min-height: 52px;

    }


    .comparison-icon {

        width: 47px;

        height: 47px;

    }


    .general-icon i {

        font-size: 23px;

    }


    .woodbox-shield {

        width: 30px;

        height: 34px;

        font-size: 13px;

    }


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

    .comparison-label {

        margin-bottom: 4px;

        font-size: 15px;

    }


    /* -------------------------------------------------------------
       CARD HEADING
    ------------------------------------------------------------- */

    .comparison-card-general h3,
    .comparison-card-woodbox h3 {

        font-size: 25px;

        line-height: 1.32;

    }


    /* -------------------------------------------------------------
       DIVIDER
    ------------------------------------------------------------- */

    .comparison-divider {

        margin-top: 13px;

    }


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

    .comparison-list-item {

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

        column-gap: 8px;

        min-height: 48px;

        padding: 8px 0;

        font-size: 16px;

        line-height: 1.45;

    }


    .comparison-status {

        width: 18px;

        height: 18px;

    }

}


/* =================================================================
   =================================================================
   SECTION 03
   EXTRA SMALL MOBILE
   =================================================================
   ================================================================= */

@media (max-width: 380px) {


    .specialization-container {

        padding-left: 13px;

        padding-right: 13px;

    }


    .specialization-title {

        font-size: 27px;

    }


    .specialization-vs {

        width: 31px;

        height: 31px;

    }


    .specialization-subtitle {

        font-size: 16px;

    }


    .comparison-card {

        padding-left: 14px;

        padding-right: 14px;

    }


    .comparison-card-header {

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

        column-gap: 10px;

    }


    .comparison-icon {

        width: 43px;

        height: 43px;

    }


    .comparison-card-general h3,
    .comparison-card-woodbox h3 {

        font-size: 14px;

    }


    .comparison-list-item {

        font-size: 16px;

    }

}


/* =================================================================
   =================================================================
   SECTION 03
   REDUCED MOTION
   =================================================================
   ================================================================= */

@media (prefers-reduced-motion: reduce) {

    .comparison-card-general,
    .comparison-card-woodbox {

        transition: none;

    }

}


/* =================================================================
   =================================================================
   SECTION 04
   DIGITAL MARKETING SERVICES
   =================================================================
   ================================================================= */


/* =================================================================
   04.01 - MAIN SECTION
================================================================= */

.services-section {

    position: relative;

    width: 100%;

    padding: 70px 0 70px;

    overflow: hidden;

    /*
     * Premium burgundy/red background
     */

    background:
        var(--theme-gradient);

    color: #ffffff;

}


/* =================================================================
   04.02 - BACKGROUND LIGHT EFFECT
================================================================= */

.services-section::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    top: -240px;

    right: -100px;

    border-radius: 50%;

    background:
        rgba(255, 75, 90, 0.10);

    filter: blur(70px);

    pointer-events: none;

}


.services-section::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    bottom: -240px;

    left: -100px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.035);

    filter: blur(65px);

    pointer-events: none;

}


/* =================================================================
   04.03 - CONTAINER
================================================================= */

.services-container {

    position: relative;

    z-index: 2;

        width: 100%;
    margin: 0 auto;
    

}


/* =================================================================
   =================================================================
   04.04 - SECTION HEADER
   =================================================================
   ================================================================= */

.services-header {

    width: 100%;

    text-align: center;

    margin-bottom: 25px;

}


/* =================================================================
   04.05 - HEADER DECORATIVE LINE
================================================================= */

.services-heading-line {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-bottom: 10px;

}


.services-line {

    display: block;

    width: 70px;

    height: 1px;

    background:
        rgba(255, 255, 255, 0.38);

}


/* =================================================================
   04.06 - EYEBROW
================================================================= */

.services-eyebrow {

    color: #ffffff;

     font-family: "Inter", sans-serif;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.6px;

    white-space: nowrap;

}


/* =================================================================
   04.07 - MAIN HEADING
================================================================= */

.services-title {

    margin-bottom: 50px;
    color: #ffffff;

     font-family: "Montserrat", sans-serif;

    font-size: clamp(29px, 3.5vw, 35px);

    line-height: 1.12;

    font-weight: 700;

   

}


/* =================================================================
   04.08 - SUBTITLE
================================================================= */

.services-subtitle {

    margin: 7px auto 0;

    color:
        rgba(255, 255, 255, 0.86);

     font-family: "Inter", sans-serif;

    font-size: 15px;

    line-height: 1.45;

    font-weight: 400;

}


/* =================================================================
   =================================================================
   04.09 - SERVICES GRID
   =================================================================
   ================================================================= */

.services-grid {

    width: 100%;

    display: grid;

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

    gap: 10px;

}


/* =================================================================
   =================================================================
   04.10 - SERVICE CARD
   =================================================================
   ================================================================= */

.service-card {

    position: relative;

    min-width: 0;

    min-height: 260px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 10px 12px 18px;

    border: 1px solid
        rgba(255, 255, 255, 0.22);

    border-radius: 7px;

    background:
        rgba(0, 0, 0, 0.12);

    backdrop-filter: blur(5px);

    -webkit-backdrop-filter: blur(5px);

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

}


/* =================================================================
   04.11 - SERVICE CARD HOVER
================================================================= */

@media (hover: hover) {

    .service-card:hover {

        transform: translateY(-5px);

        border-color:
            rgba(255, 255, 255, 0.46);

        background:
            rgba(0, 0, 0, 0.22);

    }

}


/* =================================================================
   =================================================================
   04.12 - SERVICE ICON
   =================================================================
   ================================================================= */

.service-icon {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 17px;

    border: 1px solid
        rgba(255, 255, 255, 0.30);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.035);

    box-shadow:
        inset 0 0 0 1px
        rgba(0, 0, 0, 0.16);

    color: #ffffff;

    flex-shrink: 0;

}


/* =================================================================
   04.13 - SERVICE SVG
================================================================= */

.service-svg {

    width: 34px;

    height: 34px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =================================================================
   =================================================================
   04.14 - SERVICE TITLE
   =================================================================
   ================================================================= */

.service-card .service-title {

    min-height: 50px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0 0 11px;
    color: #ffffff;
     font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 1.28;
    font-weight: 500;
    letter-spacing: 0;

}


/* =================================================================
   =================================================================
   04.15 - SERVICE DESCRIPTION
   =================================================================
   ================================================================= */

.service-description {

    max-width: 150px;

    

    color:
        rgba(255, 255, 255, 0.76);

     font-family: "Inter", sans-serif;

    font-size: 14px;

    line-height: 1.6;

    font-weight: 400;

}


/* =================================================================
   =================================================================
   04.16 - TABLET
   =================================================================
   ================================================================= */

@media (max-width: 1050px) {

    .services-container {

        padding-left: 24px;

        padding-right: 24px;

    }


    .services-grid {

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

        gap: 12px;

    }


    .service-card {

        min-height: 235px;

        padding-left: 16px;

        padding-right: 16px;

    }


    .service-description {

        max-width: 230px;

        font-size: 16px;

    }

}


/* =================================================================
   =================================================================
   04.17 - SMALL TABLET
   =================================================================
   ================================================================= */

@media (max-width: 768px) {

    .services-section {

        padding-top: 45px;

        padding-bottom: 48px;

    }


    .services-header {

        margin-bottom: 23px;

    }


    .services-title {

        font-size: clamp(27px, 5vw, 35px);

    }


    .services-subtitle {

        font-size: 16px;

    }


    .services-grid {

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

        gap: 12px;

        max-width: 650px;

        margin: 0 auto;

    }


    .service-card {

        min-height: 225px;

    }


    .service-card .service-title {

        font-size: 14px;

    }


    .service-description {

        max-width: 260px;

        font-size: 16px;

    }

}


/* =================================================================
   =================================================================
   04.18 - MOBILE
   =================================================================
   ================================================================= */

@media (max-width: 600px) {

    .services-section {

        padding-top: 38px;

        padding-bottom: 40px;

    }


    .services-container {

        padding-left: 15px;

        padding-right: 15px;

    }


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

    .services-heading-line {

        gap: 10px;

        margin-bottom: 9px;

    }


    .services-line {

        width: 42px;

    }


    .services-eyebrow {

        font-size:16px;

        letter-spacing: 0.45px;

    }


    .services-title {

        font-size: clamp(25px, 7.5vw, 32px);

        line-height: 1.12;

      

    }


    .services-subtitle {

        max-width: 310px;

        margin-top: 8px;

        font-size: 15px;

        line-height: 1.5;

    }


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

    .services-grid {

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

        gap: 10px;

    }


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

    .service-card {

        min-height: 215px;

        padding: 14px 10px 15px;

        border-radius: 6px;

    }


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

    .service-icon {

        width: 52px;

        height: 52px;

        margin-bottom: 13px;

    }


    .service-svg {

        width: 30px;

        height: 30px;

    }


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

    .service-card .service-title {

        min-height: 35px;

        margin-bottom: 9px;

        font-size: 18px;

        line-height: 1.3;

    }


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

    .service-description {

        max-width: 145px;

        font-size: 16px;

        line-height: 1.48;

    }

}


/* =================================================================
   =================================================================
   04.19 - EXTRA SMALL MOBILE
   =================================================================
   ================================================================= */

@media (max-width: 380px) {

    .services-container {

        padding-left: 11px;

        padding-right: 11px;

    }


    .services-grid {

        gap: 8px;

    }


    .service-card {

        min-height: 205px;

        padding-left: 8px;

        padding-right: 8px;

    }


    .service-icon {

        width: 48px;

        height: 48px;

        margin-bottom: 12px;

    }


    .service-svg {

        width: 27px;

        height: 27px;

    }


    .service-card .service-title {

        font-size: 11px;

    }


    .service-description {

        max-width: 135px;

        font-size: 8px;

    }

}


/* =================================================================
   =================================================================
   04.20 - REDUCED MOTION
   =================================================================
   ================================================================= */

@media (prefers-reduced-motion: reduce) {

    .service-card {

        transition: none;

    }

}

/* =========================================================
   GLOBAL CTA ANIMATION
   GOLD SHINE + SUBTLE GLOW
   ========================================================= */

.btn,
button,
.marketing-primary-cta,
.marketing-secondary-cta,
.btn-header,
.cta-button,
.hero-cta,
.section-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   MOVING GOLD SHINE
   ========================================================= */

.btn::before,
button::before,
.marketing-primary-cta::before,
.marketing-secondary-cta::before,
.btn-header::before,
.cta-button::before,
.hero-cta::before,
.section-cta::before {

    content: "";

    position: absolute;

    top: 0;
    left: -130%;

    width: 65%;
    height: 100%;

    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 30%,
        rgba(255, 255, 255, 0.32) 50%,
        rgba(255, 255, 255, 0.04) 70%,
        transparent 100%
    );

    transform: skewX(-20deg);

    animation: globalCtaShine 3.5s ease-in-out infinite;

    pointer-events: none;
    z-index: -1;
}


@keyframes globalCtaShine {

    0% {
        left: -130%;
    }

    45%,
    100% {
        left: 150%;
    }

}


/* =========================================================
   SUBTLE GOLD GLOW
   ========================================================= */

.btn,
button,
.marketing-primary-cta,
.marketing-secondary-cta,
.btn-header,
.cta-button,
.hero-cta,
.section-cta {

    animation:
        globalCtaGlow 3.5s ease-in-out infinite;
}


@keyframes globalCtaGlow {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.08);
    }

}


/* =========================================================
   HOVER
   ========================================================= */

.btn:hover,
button:hover,
.marketing-primary-cta:hover,
.marketing-secondary-cta:hover,
.btn-header:hover,
.cta-button:hover,
.hero-cta:hover,
.section-cta:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 28px rgba(180, 135, 50, 0.28);

    animation-play-state: paused;
}


/* =========================================================
   ACTIVE / CLICK
   ========================================================= */

.btn:active,
button:active,
.marketing-primary-cta:active,
.marketing-secondary-cta:active,
.btn-header:active,
.cta-button:active,
.hero-cta:active,
.section-cta:active {

    transform: translateY(0);
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .btn,
    button,
    .marketing-primary-cta,
    .marketing-secondary-cta,
    .btn-header,
    .cta-button,
    .hero-cta,
    .section-cta,

    .btn::before,
    button::before,
    .marketing-primary-cta::before,
    .marketing-secondary-cta::before,
    .btn-header::before,
    .cta-button::before,
    .hero-cta::before,
    .section-cta::before {

        animation: none !important;
    }

}

.marketing-primary-cta {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

/* Animated light sweep */
.marketing-primary-cta::before {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 35%,
        rgba(255, 255, 255, 0.30) 50%,
        rgba(255, 255, 255, 0.04) 65%,
        transparent 100%
    );

    transform: skewX(-20deg);

    animation: ctaShine 3.2s ease-in-out infinite;

    pointer-events: none;
    z-index: -1;
}

@keyframes ctaShine {

    0% {
        left: -120%;
    }

    45%,
    100% {
        left: 150%;
    }
}


/* Subtle breathing effect */
.marketing-primary-cta {
    animation: ctaPulse 3.2s ease-in-out infinite;
}

@keyframes ctaPulse {

    0%,
    100% {
        box-shadow:
            0 8px 20px rgba(117, 82, 20, 0.18);
    }

    50% {
        box-shadow:
            0 10px 28px rgba(117, 82, 20, 0.32);
    }
}


/* Hover */
.marketing-primary-cta:hover {
    transform: translateY(-2px);

    box-shadow:
        0 14px 32px rgba(117, 82, 20, 0.35);

    animation-play-state: paused;
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {

    .marketing-primary-cta,
    .marketing-primary-cta::before {
        animation: none;
    }
}


/* =================================================================
   =================================================================
   SECTION 06
   PROVEN RESULTS / REAL NUMBERS
   =================================================================
   ================================================================= */


/* =================================================================
   06.01 - OUTER SECTION
================================================================= */

.results-section {

    position: relative;

    width: 100%;
    padding: 0px  0px !important;
 

    overflow: hidden;

    background: #ffffff;

}


/* =================================================================
   06.02 - MAIN CONTAINER
================================================================= */

.results-container {

    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1300px;

    margin: 0 auto;

    

}


/* =================================================================
   =================================================================
   06.03 - DARK RESULTS PANEL
   =================================================================
   ================================================================= */

.results-panel {

    position: relative;

    width: 100%;

    min-height: 418px;

    padding: 80px 52px 80px;

    overflow: hidden;

    border-radius: 14px;

    background:
     var(--theme-gradient);
    color: #ffffff;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.12);

}


/* =================================================================
   06.04 - PANEL TOP EDGE
================================================================= */

.results-panel::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(236, 57, 129, 0.65),
            transparent
        );

    opacity: 0.65;

}


/* =================================================================
   =================================================================
   06.05 - BACKGROUND GLOW
   =================================================================
   ================================================================= */

.results-glow {

    position: absolute;

    pointer-events: none;

    border-radius: 50%;

    filter: blur(70px);

}


/* -----------------------------------------------------------------
   LEFT GLOW
----------------------------------------------------------------- */

.results-glow-left {

    width: 260px;

    height: 260px;

    left: -160px;

    bottom: -160px;

    background:
        rgba(125, 224, 38, 0.12);

}


/* -----------------------------------------------------------------
   RIGHT GLOW
----------------------------------------------------------------- */

.results-glow-right {

    width: 330px;

    height: 330px;

    right: -150px;

    bottom: -160px;

    background:
        rgba(95, 178, 34, 0.16);

}


/* =================================================================
   =================================================================
   06.06 - DOT PATTERN
   =================================================================
   ================================================================= */

.results-dots {

    position: absolute;

    width: 105px;

    height: 105px;

    opacity: 0.55;

    pointer-events: none;

    background-image:
        radial-gradient(rgb(235 84 144) 1px, transparent 1px);

    background-size: 10px 10px;

}


/* -----------------------------------------------------------------
   LEFT DOTS
----------------------------------------------------------------- */

.results-dots-left {

    left: 30px;

    top: 28px;

    mask-image:
        linear-gradient(
            135deg,
            #000 0%,
            transparent 75%
        );

    -webkit-mask-image:
        linear-gradient(
            135deg,
            #000 0%,
            transparent 75%
        );

}


/* -----------------------------------------------------------------
   RIGHT DOTS
----------------------------------------------------------------- */

.results-dots-right {

    right: 16px;

    bottom: 20px;

    mask-image:
        linear-gradient(
            315deg,
            #000 0%,
            transparent 75%
        );

    -webkit-mask-image:
        linear-gradient(
            315deg,
            #000 0%,
            transparent 75%
        );

}


/* =================================================================
   =================================================================
   06.07 - DECORATIVE CURVED LINES
   =================================================================
   ================================================================= */

.results-rings {

    position: absolute;

    width: 270px;

    height: 270px;

    top: -90px;

    right: -75px;

    opacity: 0.25;

    pointer-events: none;

    transform: rotate(18deg);

}


/* -----------------------------------------------------------------
   RINGS
----------------------------------------------------------------- */

.results-rings span {

    position: absolute;

    left: 50%;

    top: 50%;

    border: 1px solid
        rgba(169, 225, 93, 0.55);

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-18deg);

}


.results-rings span:nth-child(1) {

    width: 110px;

    height: 110px;

}


.results-rings span:nth-child(2) {

    width: 155px;

    height: 155px;

}


.results-rings span:nth-child(3) {

    width: 200px;

    height: 200px;

}


.results-rings span:nth-child(4) {

    width: 245px;

    height: 245px;

}


/* =================================================================
   =================================================================
   06.08 - HEADER
   =================================================================
   ================================================================= */

.results-header {

    position: relative;

    z-index: 5;

    text-align: center;

    margin-bottom: 33px;

}


/* =================================================================
   06.09 - EYEBROW ROW
================================================================= */

.results-eyebrow-row {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-bottom: 10px;

}


/* =================================================================
   06.10 - EYEBROW LINES
================================================================= */

.results-line {

    width: 61px;

    height: 1px;

    background:
       linear-gradient(90deg, transparent, rgb(255 173 186));

}


.results-line:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(255 173 186, 0.8),
            transparent
        );

}


/* =================================================================
   06.11 - EYEBROW
================================================================= */

.results-eyebrow {

    color: #bebebe;

     font-family: "Inter", sans-serif;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 1.5px;

}


/* =================================================================
   =================================================================
   06.12 - MAIN TITLE
   =================================================================
   ================================================================= */

.results-title {

    margin: 0;

    color: #ffffff;

     font-family: "Montserrat", sans-serif;

    font-size: 35px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.5px;

}


.results-title span {

    color: #d79a72;

}


/* =================================================================
   =================================================================
   06.13 - SUBTITLE
   =================================================================
   ================================================================= */

.results-subtitle {

    max-width: 700px;

    margin: 9px auto 0;

    color:
        rgba(255, 255, 255, 0.70);

     font-family: "Inter", sans-serif;

    font-size: 16px;

    line-height: 1.45;

    font-weight: 400;

}


/* =================================================================
   =================================================================
   06.14 - RESULTS GRID
   =================================================================
   ================================================================= */

.results-grid {

    position: relative;

    z-index: 5;

    display: grid;

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

    gap: 18px;

}


/* =================================================================
   =================================================================
   06.15 - RESULT CARD
   =================================================================
   ================================================================= */

.result-card {

    position: relative;

    min-height: 210px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    padding: 54px 22px 19px;

    border: 1px solid
        rgba(255, 255, 255, 0.32);

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.045),
            rgba(255, 255, 255, 0.015)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025);

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;

}


/* =================================================================
   06.16 - CARD BOTTOM GREEN EDGE
================================================================= */
.result-card::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -1px;

    height: 3px;

    border-radius: 0 0 7px 7px;

    background: linear-gradient(
        90deg,
        #9B7737,
        #C9A45C,
        #E0C27A,
        #C9A45C,
        #9B7737
    );

    opacity: 0.85;

}

/* =================================================================
   06.17 - CARD HOVER
================================================================= */

@media (hover: hover) {

    .result-card:hover {

        transform: translateY(-5px);

        border-color:
    rgba(201, 164, 92, 0.45);

        box-shadow:
            0 14px 28px rgba(0, 0, 0, 0.22);

    }

}
/* =================================================================
   =================================================================
   06.18 - RESULT ICON
   =================================================================
   ================================================================= */

.result-icon {

    position: absolute;

    top: -24px;

    width: 56px;

    height: 56px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(201, 164, 92, 0.73);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #3A2B17 0%,
            #211A12 62%,
            #111111 100%
        );

    box-shadow:
        0 0 0 7px rgba(201, 164, 92, 0.06),
        0 0 22px rgba(201, 164, 92, 0.18);

    color: #C9A45C;

}


/* =================================================================
   =================================================================
   06.19 - ICON SVG
   =================================================================
   ================================================================= */

.result-icon svg {

    width: 28px;

    height: 28px;

    fill: none;

    stroke: #C9A45C;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =================================================================
   =================================================================
   06.20 - RESULT NUMBER
   =================================================================
   ================================================================= */

.result-number {

    margin-top: 0;

    color: #E0C27A;

     font-family: "Montserrat", sans-serif;

    font-size: 38px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: -1.5px;

    text-shadow:
        0 0 18px rgba(201, 164, 92, 0.12);

}


/* =================================================================
   =================================================================
   06.21 - RESULT DESCRIPTION
   =================================================================
   ================================================================= */

.result-description {

    max-width: 220px;

    margin: 8px auto 0;

    color:
        rgba(255, 255, 255, 0.78);

     font-family: "Inter", sans-serif;

    font-size: 16px;

    line-height: 1.42;

    font-weight: 400;

}


/* =================================================================
   =================================================================
   06.22 - RESULT DIVIDER
   =================================================================
   ================================================================= */

.result-divider {

    width: 43px;

    height: 1px;

    margin: auto auto 13px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #C9A45C,
            transparent
        );

}


/* =================================================================
   =================================================================
   06.23 - LOCATION
   =================================================================
   ================================================================= */

.result-location {

    min-height: 25px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

}


/* =================================================================
   =================================================================
   06.24 - LOCATION ICON
   =================================================================
   ================================================================= */

.location-icon {

    width: 16px;

    height: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    color: #C9A45C;

}


.location-icon svg {

    width: 16px;

    height: 16px;

    fill: none;

    stroke: #C9A45C;

    stroke-width: 2;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =================================================================
   =================================================================
   06.25 - LOCATION TEXT
   =================================================================
   ================================================================= */

.location-text {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: left;

     font-family: "Inter", sans-serif;

    font-size: 16px;

    line-height: 1.35;

    letter-spacing: 0.45px;

}


.location-text strong {

    color:
        rgba(255, 255, 255, 0.86);

    font-size: 14px;

    font-weight: 700;

}


.location-text span {

    color: #C9A45C;

    font-size: 14px;

    font-weight: 700;

}


/* =================================================================
   =================================================================
   06.26 - LARGE TABLET
   =================================================================
   ================================================================= */

@media (max-width: 1000px) {

    .results-container {

        padding: 0 18px;

    }


    .results-panel {

        padding-left: 35px;

        padding-right: 35px;

    }


    .results-grid {

        gap: 13px;

    }


    .result-card {

        padding-left: 15px;

        padding-right: 15px;

    }

}


/* =================================================================
   =================================================================
   06.27 - TABLET
   =================================================================
   ================================================================= */

@media (max-width: 800px) {

    .results-section {

        padding-top: 40px;

        padding-bottom: 48px;

    }


    .results-panel {

        padding:
            38px 28px 40px;

    }


    .results-grid {

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

        row-gap: 28px;

        max-width: 650px;

        margin: 0 auto;

    }


    .result-card {

        min-height: 215px;

    }


    .result-card:last-child {

        grid-column: 1 / -1;

        width: calc(50% - 6px);

        justify-self: center;

    }

}


/* =================================================================
   =================================================================
   06.28 - MOBILE
   =================================================================
   ================================================================= */

@media (max-width: 600px) {

    .results-section {

        padding:
            32px 0 0px;

    }


    .results-container {

        padding:
            0 12px;

    }


    .results-panel {

        min-height: auto;

        padding:
            34px 14px 38px;

        border-radius: 11px;

    }


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

    .results-header {

        margin-bottom: 30px;

    }


    .results-eyebrow-row {

        gap: 8px;

        margin-bottom: 9px;

    }


    .results-line {

        width: 35px;

    }


    .results-eyebrow {

        font-size: 15px;

        letter-spacing: 1px;

    }


    .results-title {

        font-size: 25px;

    }


    .results-subtitle {

        max-width: 310px;

        margin-top: 9px;

        font-size: 16px;

        line-height: 1.45;

    }


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

    .results-grid {

        grid-template-columns: 1fr;

        gap: 32px;

        max-width: 360px;

    }


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

    .result-card {

        width: 100%;

        min-height: 205px;

        padding:
            53px 18px 18px;

    }


    .result-card:last-child {

        grid-column: auto;

        width: 100%;

    }


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

    .result-number {

        font-size: 38px;

    }


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

    .result-description {

        max-width: 260px;

        font-size: 16px;

    }


    /* -------------------------------------------------------------
       DECORATION
    ------------------------------------------------------------- */

    .results-rings {

        width: 190px;

        height: 190px;

        right: -90px;

        top: -50px;

    }


    .results-dots-left {

        left: 12px;

        top: 25px;

    }


    .results-dots-right {

        right: 5px;

        bottom: 15px;

    }

}


/* =================================================================
   =================================================================
   06.29 - EXTRA SMALL MOBILE
   =================================================================
   ================================================================= */

@media (max-width: 380px) {

    .results-container {

        padding-left: 9px;

        padding-right: 9px;

    }


    .results-panel {

        padding-left: 11px;

        padding-right: 11px;

    }


    .results-title {

        font-size: 24px;

    }


    .result-card {

        padding-left: 14px;

        padding-right: 14px;

    }


    .result-number {

        font-size: 36px;

    }


    .result-description {

        font-size: 15px;

    }

}


/* =================================================================
   =================================================================
   06.30 - REDUCED MOTION
   =================================================================
   ================================================================= */

@media (prefers-reduced-motion: reduce) {

    .result-card {

        transition: none;

    }

}

/* =================================================================
   =================================================================
   SECTION 05
   PREFERRED PROVIDER / WEBSITE SHOWCASE
   =================================================================
   ================================================================= */


/* =================================================================
   05.01 - OUTER SECTION
================================================================= */

.provider-section {

    position: relative;

    width: 100%;

    padding: 42px 0;

    overflow: hidden;

    background: #ffffff;

}


/* =================================================================
   05.02 - MAIN WRAPPER
================================================================= */

.provider-wrapper {

    width: 100%;

    max-width: 1300px;

    margin: 0 auto;

   

}


/* =================================================================
   =================================================================
   05.03 - MAIN DARK CARD
   =================================================================
   ================================================================= */

.provider-card {

    position: relative;

    width: 100%;

    min-height: 335px;

    display: grid;

    grid-template-columns:
        0.88fr
        1.12fr;

    align-items: center;

    gap: 25px;

    padding: 80px 52px 80px;

    overflow: hidden;

    border-radius: 15px;

    background:
      #000;

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.15);

}


/* =================================================================
   05.04 - SUBTLE GREEN LIGHT
================================================================= */

.provider-card::before {

    content: "";

    position: absolute;

    width: 280px;

    height: 280px;

    left: -130px;

    bottom: -190px;

    border-radius: 50%;

    background:
       rgb(255 0 0 / 33%);

    filter: blur(55px);

    pointer-events: none;

}


/* =================================================================
   05.05 - RIGHT LIGHT
================================================================= */

.provider-card::after {

    content: "";

    position: absolute;

    width: 230px;

    height: 230px;

    right: -120px;

    top: -100px;

    border-radius: 50%;

    background:
        rgb(141 90 90 / 69%);

    filter: blur(55px);

    pointer-events: none;

}


/* =================================================================
   =================================================================
   05.06 - DECORATIVE DOTS
   =================================================================
   ================================================================= */

.provider-dots {

    position: absolute;

    width: 90px;

    height: 110px;

    opacity: 0.65;

    pointer-events: none;

    background-image:
        radial-gradient(
            rgba(255, 255, 255, 0.75) 1px,
            transparent 1px
        );

    background-size: 10px 10px;

}


/* =================================================================
   05.07 - LEFT DOTS
================================================================= */

.provider-dots-left {

    left: 14px;

    top: 14px;

    mask-image:
        linear-gradient(
            135deg,
            #000 10%,
            transparent 78%
        );

    -webkit-mask-image:
        linear-gradient(
            135deg,
            #000 10%,
            transparent 78%
        );

}


/* =================================================================
   05.08 - RIGHT DOTS
================================================================= */

.provider-dots-right {

    right: 5px;

    bottom: 7px;

    mask-image:
        linear-gradient(
            315deg,
            #000 5%,
            transparent 75%
        );

    -webkit-mask-image:
        linear-gradient(
            315deg,
            #ffffff 5%,
            transparent 75%
        );

}


/* =================================================================
   =================================================================
   05.09 - LEFT CONTENT
   =================================================================
   ================================================================= */

.provider-content {

    position: relative;

    z-index: 5;

    max-width: 700px;

}


/* =================================================================
   05.10 - TITLE
================================================================= */

.provider-title {

    margin: 0;
    color: #ffffff;
    font-size: 2rem;
    line-height: 1.4;
    font-weight: 700;
  

}


.provider-title span {

    display: inline;
    font-family: "Montserrat", sans-serif;
    color: #fff;
    background:var(--theme-gradient);

}


/* =================================================================
   05.11 - DESCRIPTION
================================================================= */

.provider-description {

    max-width: 420px;
    margin: 17px 0 19px;
    color: rgba(255, 255, 255, 0.73);
    font-family: "Inter", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;

}


/* =================================================================
   =================================================================
   05.12 - ACTIONS
   =================================================================
   ================================================================= */

.provider-actions {

    display: flex;

    align-items: center;

    gap: 14px;

}


/* =================================================================
   =================================================================
   05.13 - CTA
   =================================================================
   ================================================================= */

.provider-cta {

    min-width: 255px;

    min-height: 51px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 6px 10px 6px 7px;

    border: 0;

    border-radius: 6px;

    background:
        linear-gradient(201deg, #000000, #c94f62);

    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0 6px 15px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


/* =================================================================
   05.14 - CTA HOVER
================================================================= */

@media (hover: hover) {

    .provider-cta:hover {

        transform: translateY(-2px);

        box-shadow:
            0 9px 20px rgba(0, 0, 0, 0.32);

    }

}


/* =================================================================
   05.15 - CTA ICON
================================================================= */

.provider-cta-icon {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        rgba(0, 0, 0, 0.35);

    color: #ffffff;

}


.provider-cta-icon i {

    font-size: 12px;

}


/* =================================================================
   05.16 - CTA TEXT
================================================================= */

.provider-cta-content {

    display: flex;

    flex-direction: column;

    flex: 1;

}


.provider-cta-content strong {

    color: #ffffff;

     font-family: "Inter", sans-serif;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 700;

}


.provider-cta-content span {

    color:
        rgba(255, 255, 255, 0.95);

     font-family: "Inter", sans-serif;

    font-size: 14px;

    line-height: 1.25;

    font-weight: 500;

}


/* =================================================================
   05.17 - CTA ARROW
================================================================= */

.provider-cta-arrow {

    color: #ffffff;

     font-family: "Inter", sans-serif;

    font-size: 18px;

    line-height: 1;

}


/* =================================================================
   =================================================================
   05.18 - GUARANTEE
   =================================================================
   ================================================================= */

.provider-guarantee {

    display: flex;

    align-items: center;

    gap: 6px;

    color:
        rgba(255, 255, 255, 0.70);

     font-family: "Inter", sans-serif;

font-size: 15px;

    line-height: 1.2;

}


/* =================================================================
   05.19 - GUARANTEE ICON
================================================================= */

.provider-guarantee-icon {

    width:40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    border: 1px solid
        rgba(255, 255, 255, 0.6);

    border-radius: 50%;

    color: #ffffff;

}


.provider-guarantee-icon i {

    font-size: 16px;

}


/* =================================================================
   =================================================================
   05.20 - WEBSITE VISUAL
   =================================================================
   ================================================================= */

.provider-visual {

    position: relative;

    z-index: 5;

    width: 100%;

    height: 265px;

}


/* =================================================================
   =================================================================
   05.21 - DESKTOP WEBSITE
   =================================================================
   ================================================================= */

.provider-desktop {

    position: relative;

    z-index: 2;

    top: -80px;

    right: 0;

    width: 100%;

    overflow: hidden;

  

    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.35);

}


/* =================================================================
   05.22 - BROWSER HEADER
================================================================= */

.browser-top {

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 10px;

    background: #ffffff;

}


/* =================================================================
   05.23 - BROWSER LOGO
================================================================= */

.browser-logo {

    display: flex;

    align-items: center;

    gap: 3px;

    color: #344537;

     font-family: "Inter", sans-serif;

    font-size: 8px;

    font-weight: 900;

}


.browser-leaf {

    color: #5e9c67;

font-size: 16px;

}


/* =================================================================
   05.24 - BROWSER NAV
================================================================= */

.browser-nav {

    display: flex;

    align-items: center;

    gap: 8px;

}


.browser-nav span {

    color: #3d443f;

     font-family: "Inter", sans-serif;

    font-size: 4px;

    font-weight: 600;

}


.browser-nav b {

    padding: 4px 6px;

    border-radius: 2px;

    background: #cba13d;

    color: #ffffff;

     font-family: "Inter", sans-serif;

    font-size: 3.5px;

    font-weight: 700;

}


/* =================================================================
   =================================================================
   05.25 - WEBSITE HERO
   =================================================================
   ================================================================= */

.website-hero {

    position: relative;

    height: 143px;

    overflow: hidden;

}


/* =================================================================
   05.26 - WEBSITE HERO BACKGROUND
================================================================= */

.website-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(18, 43, 23, 0.28),
            rgba(18, 50, 23, 0.02)
        ),
        linear-gradient(
            135deg,
            #77a765 0%,
            #5a914f 35%,
            #2d572e 70%,
            #18331e 100%
        );

}


/* =================================================================
   05.27 - WEBSITE PEOPLE
================================================================= */

.website-people {

    position: absolute;

    inset: 0;

}


/* =================================================================
   05.28 - PERSON BASE
================================================================= */

.website-person {

    position: absolute;

    bottom: -15px;

    border-radius:
        48% 48% 0 0;

}


/* =================================================================
   05.29 - LEFT PERSON
================================================================= */

.person-left {

    right: 29%;

    width: 68px;

    height: 102px;

    background:
        radial-gradient(
            circle at 50% 23%,
            #7c4b31 0 17%,
            transparent 18%
        ),
        linear-gradient(
            90deg,
            #192019 0 34%,
            #a76845 35% 61%,
            #222a22 62%
        );

}


/* =================================================================
   05.30 - RIGHT PERSON
================================================================= */

.person-right {

    right: 8%;

    width: 75px;

    height: 111px;

    background:
        radial-gradient(
            circle at 50% 21%,
            #7e543d 0 18%,
            transparent 19%
        ),
        linear-gradient(
            90deg,
            #1c241d 0 30%,
            #a86f4e 31% 60%,
            #262b27 61%
        );

}


/* =================================================================
   =================================================================
   05.31 - WEBSITE HERO CONTENT
   =================================================================
   ================================================================= */

.website-hero-content {

    position: absolute;

    z-index: 4;

    top: 32px;

    left: 7%;

    width: 55%;

    color: #ffffff;

    text-align: left;

}


/* =================================================================
   05.32 - HERO SMALL TEXT
================================================================= */

.website-hero-content small {

    display: block;

    margin-bottom: 4px;

     font-family: "Inter", sans-serif;

    font-size: 4px;

    font-weight: 700;

    letter-spacing: 0.2px;

}


/* =================================================================
   05.33 - HERO HEADING
================================================================= */

.website-hero-content h3 {

    margin: 0;

     font-family: "Montserrat", sans-serif;

    font-size: 16px;

    line-height: 1.05;

    font-weight: 700;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.25);

}


/* =================================================================
   05.34 - WEBSITE BUTTON
================================================================= */

.website-hero-content button {

    margin-top: 8px;

    padding: 5px 9px;

    border: 0;

    border-radius: 2px;

    background: #c9a03a;

    color: #ffffff;

     font-family: "Inter", sans-serif;

    font-size: 4px;

    font-weight: 700;

}


/* =================================================================
   =================================================================
   05.35 - WEBSITE BOTTOM
   =================================================================
   ================================================================= */

.website-bottom {

    height: 43px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 5px 10px;

    background: #ffffff;

}


.website-bottom strong {

    width: 55%;

    color: #344136;

     font-family: "Montserrat", sans-serif;

    font-size: 6px;

    line-height: 1.3;

}


/* =================================================================
   05.36 - BOTTOM IMAGE STRIPS
================================================================= */

.website-mini-images {

    width: 37%;

    display: flex;

    gap: 3px;

}


.website-mini-images span {

    flex: 1;

    height: 25px;

    border-radius: 2px;

    background:
        linear-gradient(
            135deg,
            #d1d8c9,
            #73916f
        );

}


.website-mini-images span:nth-child(2) {

    background:
        linear-gradient(
            135deg,
            #8eae82,
            #385b39
        );

}


.website-mini-images span:nth-child(3) {

    background:
        linear-gradient(
            135deg,
            #d8d2bd,
            #79836c
        );

}


/* =================================================================
   =================================================================
   05.37 - PHONE
   =================================================================
   ================================================================= */

.provider-phone {

    position: absolute;

    z-index: 6;

    left: 0;

    bottom: 2px;

    width: 100px;

    padding: 4px;

    border-radius: 11px;

    background: #101415;

    box-shadow:
        0 14px 27px rgba(0, 0, 0, 0.40);

}


/* =================================================================
   05.38 - PHONE SPEAKER
================================================================= */

.phone-speaker {

    width: 24px;

    height: 3px;

    margin: 2px auto 4px;

    border-radius: 20px;

    background: #343b3d;

}


/* =================================================================
   05.39 - PHONE SCREEN
================================================================= */

.phone-screen {

    overflow: hidden;

    border-radius: 7px;

    background: #ffffff;

}


/* =================================================================
   05.40 - PHONE HEADER
================================================================= */

.phone-header {

    height: 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 6px;

    color: #26362a;

}


.phone-header strong {

     font-family: "Inter", sans-serif;

    font-size: 4px;

    font-weight: 900;

}


.phone-header strong span {

    color: #5e9962;

}


.phone-header i {

    font-size: 8px;

}


/* =================================================================
   =================================================================
   05.41 - PHONE HERO
   =================================================================
   ================================================================= */

.phone-hero {

    position: relative;

    height: 123px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #79a96b,
            #3c6d40 60%,
            #1c3b22
        );

}


/* =================================================================
   05.42 - PHONE PERSON
================================================================= */

.phone-person {

    position: absolute;

    right: 4px;

    bottom: -8px;

    width: 58px;

    height: 92px;

    border-radius:
        48% 48% 0 0;

    background:
        radial-gradient(
            circle at 50% 20%,
            #9a6042 0 18%,
            transparent 19%
        ),
        linear-gradient(
            90deg,
            #202b21 0 30%,
            #a36b49 31% 61%,
            #263226 62%
        );

}


/* =================================================================
   05.43 - PHONE HERO CONTENT
================================================================= */

.phone-hero-content {

    position: absolute;

    z-index: 3;

    top: 31px;

    left: 8px;

    width: 62%;

    color: #ffffff;

}


.phone-hero-content small {

    display: block;

    margin-bottom: 3px;

     font-family: "Inter", sans-serif;

    font-size: 3px;

}


.phone-hero-content strong {

    display: block;

     font-family: "Montserrat", sans-serif;

    font-size: 8px;

    line-height: 1.05;

}


.phone-hero-content button {

    margin-top: 6px;

    padding: 3px 5px;

    border: 0;

    border-radius: 2px;

    background: #c8a03c;

    color: #ffffff;

     font-family: "Inter", sans-serif;

    font-size: 3px;

}


/* =================================================================
   05.44 - PHONE BOTTOM
================================================================= */

.phone-bottom {

    padding: 6px;

    color: #364036;

     font-family: "Montserrat", sans-serif;

    font-size: 4px;

    line-height: 1.25;

    font-weight: 700;

}


/* =================================================================
   05.45 - PHONE IMAGES
================================================================= */

.phone-images {

    display: flex;

    gap: 2px;

    padding: 0 6px 6px;

}


.phone-images span {

    flex: 1;

    height: 18px;

    border-radius: 2px;

    background:
        linear-gradient(
            135deg,
            #bdcdb7,
            #668663
        );

}


/* =================================================================
   =================================================================
   05.46 - SLANTED GREEN BOTTOM
   =================================================================
   ================================================================= */

.provider-bottom-angle {

    position: absolute;

    z-index: 10;

    left: -2%;

    right: -2%;

    bottom: -1px;

    height: 18px;

    background: linear-gradient(135deg, #a2a2a2 0%, #bb2e41 52%, #a12a3c 100%);

    clip-path:
        polygon(
            0 35%,
            100% 70%,
            100% 100%,
            0 100%
        );

}


/* =================================================================
   =================================================================
   05.47 - TABLET
   =================================================================
   ================================================================= */

@media (max-width: 1000px) {

    .provider-wrapper {

        padding: 0 16px;

    }


    .provider-card {

        grid-template-columns:
            0.85fr
            1.15fr;

        padding-left: 35px;

        padding-right: 35px;

        gap: 15px;

    }


    .provider-desktop {

        width: 92%;

    }


    .provider-phone {

        width: 90px;

    }


    .provider-title {

        font-size: 25px;

    }

}


/* =================================================================
   =================================================================
   05.48 - SMALL TABLET
   =================================================================
   ================================================================= */

@media (max-width: 800px) {

    .provider-section {

        padding: 35px 0;

    }


    .provider-card {

        grid-template-columns: 1fr;

        gap: 25px;

        padding:
            38px 30px 55px;

    }


    .provider-content {

        max-width: 700px;

        margin: 0 auto;

        text-align: center;

    }


    .provider-description {

        margin-left: auto;

        margin-right: auto;

    }


    .provider-actions {

        justify-content: center;

    }


    .provider-visual {

        max-width: 650px;

        height: 275px;

        margin: 0 auto;

    }


    .provider-desktop {

        right: 0;

        width: 82%;

    }


    .provider-phone {

        left: 3%;

    }

}


/* =================================================================
   =================================================================
   05.49 - MOBILE
   =================================================================
   ================================================================= */

@media (max-width: 600px) {

    .provider-section {

        padding: 25px 0;

    }


    .provider-wrapper {

        padding:
            0 10px;

    }


    .provider-card {

        min-height: auto;

        display: block;

        padding:
            32px 17px 48px;

        border-radius: 12px;

    }


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

    .provider-content {

        text-align: left;

    }


    .provider-title {

        font-size: 25px;

        line-height: 1.18;

    }


    .provider-title span {

        display: block;

    }


    .provider-description {

        margin-top: 14px;

        margin-bottom: 18px;

        font-size: 16px;

        line-height: 1.48;

    }


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

    .provider-actions {

        align-items: flex-start;

        flex-direction: column;

        gap: 11px;

    }


    .provider-cta {

        width: 285px;

        max-width: 100%;

    }


    .provider-guarantee {

        margin-left: 5px;

    }


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

    .provider-visual {

        height: 225px;

        margin-top: 10px;

    }


    .provider-desktop {

         top: 10px;
        right: 0;
        width: 100%;
        height: 230px;
       

    }


    .browser-top {

        height: 22px;

        padding: 0 7px;

    }


    .browser-nav {

        gap: 4px;

    }


    .browser-nav span {

        font-size: 3px;

    }


    .browser-nav b {

        font-size: 2.8px;

        padding: 3px 4px;

    }


    .website-hero {

        height: 119px;

    }


    .website-hero-content {

        top: 27px;

    }


    .website-hero-content h3 {

        font-size: 13px;

    }


    .website-bottom {

        height: 38px;

    }


    .provider-phone {

        width: 76px;

        left: 0;

        bottom: 0;

    }


    .phone-speaker {

        width: 18px;

        height: 2px;

    }


    .phone-hero {

        height: 101px;

    }


    .phone-person {

        width: 46px;

        height: 76px;

    }


    .phone-hero-content {

        top: 25px;

    }


    .phone-hero-content strong {

        font-size: 6px;

    }


    .phone-bottom {

        font-size: 3.3px;

    }


    /* -------------------------------------------------------------
       ANGLE
    ------------------------------------------------------------- */

    .provider-bottom-angle {

        height: 15px;

    }

}


/* =================================================================
   =================================================================
   05.50 - EXTRA SMALL MOBILE
   =================================================================
   ================================================================= */

@media (max-width: 380px) {

    .provider-wrapper {

        padding: 0 7px;

    }


    .provider-card {

        padding:
            28px 13px 43px;

    }


    .provider-title {

        font-size: 24px;

    }


    .provider-description {

        font-size: 15px;

    }


    .provider-visual {

        height: 200px;

    }


    .provider-desktop {

        width: 80%;

        height: 165px;

    }


    .website-hero {

        height: 105px;

    }


    .provider-phone {

        width: 69px;

    }

}


/* =================================================================
   =================================================================
   05.51 - REDUCED MOTION
   =================================================================
   ================================================================= */

@media (prefers-reduced-motion: reduce) {

    .provider-cta {

        transition: none;

    }

}


/* =================================================================
   =================================================================
   SECTION: MARKET INTELLIGENCE REPORT PROCESS
   =================================================================
   Light Theme / Three Step Process
   =================================================================
   ================================================================= */


/* =================================================================
   01. SECTION WRAPPER
================================================================= */

.report-process-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 70px 20px 75px;

    background: #ffffff;

}


/* =================================================================
   02. MAIN CONTAINER
================================================================= */

.report-process-container {

    position: relative;

    z-index: 2;

    width: 100%;
 

    margin: 0 auto;

}


/* =================================================================
   03. DECORATIVE BACKGROUND
================================================================= */

.report-process-decoration {

    position: absolute;

    pointer-events: none;

    z-index: 0;

}


/* =================================================================
   04. LEFT DECORATION
================================================================= */

.report-decoration-left {

    width: 145px;

    height: 145px;

    left: -75px;

    top: 5px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(100, 28, 39, 0.09) 0%,
            rgba(53, 16, 21, 0.045) 42%,
            transparent 72%
        );

}


/* =================================================================
   05. RIGHT DECORATION
================================================================= */

.report-decoration-right {

    width: 230px;

    height: 230px;

    right: -105px;

    top: 40px;

    border-radius: 50%;

    border: 1px solid rgba(100, 28, 39, 0.08);

    box-shadow:
        0 0 0 18px rgba(100, 28, 39, 0.025),
        0 0 0 38px rgba(100, 28, 39, 0.018),
        0 0 0 58px rgba(100, 28, 39, 0.012);

}


/* =================================================================
   06. SMALL DECORATIVE DOT PATTERN
================================================================= */

.report-process-section::before {

    content: "";

    position: absolute;

    width: 165px;

    height: 165px;

    top: 36px;

    left: 28px;

    opacity: 0.38;

    background-image:
        radial-gradient(
            #641c27 1px,
            transparent 1px
        );

    background-size: 9px 9px;

    mask-image:
        linear-gradient(
            135deg,
            #000,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            135deg,
            #000,
            transparent
        );

}


/* =================================================================
   =================================================================
   07. SECTION HEADER
   =================================================================
   ================================================================= */

.report-process-header {

    position: relative;

    z-index: 2;

    max-width: 900px;

    margin: 0 auto 48px;

    text-align: center;

}


/* =================================================================
   08. EYEBROW
================================================================= */

.report-process-eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 10px;

    color: #641c27;

     font-family: "Inter", sans-serif;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 1.5px;

}


/* =================================================================
   09. EYEBROW SIDE LINES
================================================================= */

.report-process-eyebrow::before,
.report-process-eyebrow::after {

    content: "";

    width: 45px;

    height: 1px;

    margin: 0 12px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #641c27
        );

}


.report-process-eyebrow::after {

    background:
        linear-gradient(
            90deg,
            #641c27,
            transparent
        );

}


/* =================================================================
   =================================================================
   10. MAIN TITLE
   =================================================================
   ================================================================= */

.report-process-title {

    margin: 0;

    color: #0e0e0f;

     font-family: "Montserrat", sans-serif;

    font-size: 35px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0px;

}


/* =================================================================
   11. GRADIENT TITLE WORD
================================================================= */

.report-process-title span {

    display: block;

    margin-top: 2px;

    background:
        var(--theme-gradient);

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: #641c27;
     font-weight: 700;
    font-family: "Montserrat";
    line-height: 1.2;

}


/* =================================================================
   12. INTRO PARAGRAPH
================================================================= */

.report-process-intro {

    margin: 11px 0 0;

    color: #38383a;

     font-family: "Inter", sans-serif;

    font-size: 16px;

    line-height: 1.5;

    font-weight: 400;

}


/* =================================================================
   13. INTRO STRONG TEXT
================================================================= */

.report-process-intro strong {

    color: #641c27;

    font-weight: 700;

}


/* =================================================================
   =================================================================
   14. PROCESS GRID
   =================================================================
   ================================================================= */

.report-process-grid {

    position: relative;

    display: grid;

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

    gap: 28px;

    align-items: stretch;

}


/* =================================================================
   =================================================================
   15. PROCESS CARD
   =================================================================
   ================================================================= */

.report-process-card {

    position: relative;

    min-height: 335px;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding: 66px 30px 34px;

    border: 1px solid #e8e8e8;

    border-radius: 14px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fdfdfd 100%
        );

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.045);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;

}


/* =================================================================
   16. CARD HOVER
================================================================= */

@media (hover: hover) {

    .report-process-card:hover {

        transform: translateY(-5px);

        border-color:
            rgba(100, 28, 39, 0.20);

        box-shadow:
            0 15px 32px rgba(53, 16, 21, 0.09);

    }

}


/* =================================================================
   =================================================================
   17. NUMBER CIRCLE
   =================================================================
   ================================================================= */

.report-step-number {

    position: absolute;

    z-index: 5;

    top: -29px;

    left: 50%;

    width: 64px;

    height: 64px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: translateX(-50%);

    border: 5px solid #ffffff;

    border-radius: 50%;

    background:
        var(--theme-gradient);

    box-shadow:
        0 3px 0 #dddddd,
        0 7px 15px rgba(0, 0, 0, 0.10);

}


/* =================================================================
   18. NUMBER INNER RING
================================================================= */

.report-step-number::before {

    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border: 1px solid
        rgba(100, 28, 39, 0.40);

}


/* =================================================================
   19. NUMBER
================================================================= */

.report-step-number span {

    color: #ffffff;

     font-family: "Montserrat", sans-serif;

    font-size: 28px;

    line-height: 1;

    font-weight: 700;

}


/* =================================================================
   =================================================================
   20. CONNECTING LINE
   =================================================================
   ================================================================= */

.report-step-line {

    position: absolute;

    z-index: 1;

    top: -1px;

    left: calc(100% + 1px);

    width: 28px;

    height: 2px;

    transform: translateY(-50%);

    background:
        linear-gradient(
            90deg,
            #641c27,
            rgba(100, 28, 39, 0.18)
        );

}


/* =================================================================
   21. CONNECTING LINE DOT
================================================================= */

.report-step-line::after {

    content: "";

    position: absolute;

    right: -3px;

    top: 50%;

    width: 7px;

    height: 7px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #641c27;

}


/* =================================================================
   22. REMOVE LINE FROM LAST CARD
================================================================= */

.report-process-card:last-child .report-step-line {

    display: none;

}


/* =================================================================
   =================================================================
   23. STEP ICON
   =================================================================
   ================================================================= */

.report-step-icon {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 18px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(100, 28, 39, 0.08),
            rgba(53, 16, 21, 0.035)
        );

    color: #641c27;

    font-size: 25px;

}


/* =================================================================
   24. STEP ICON INNER BORDER
================================================================= */

.report-step-icon::after {

    content: "";

    position: absolute;

}


/* =================================================================
   =================================================================
   25. STEP CONTENT
   =================================================================
   ================================================================= */

.report-step-content {

    width: 100%;

    text-align: center;

}


/* =================================================================
   26. STEP TITLE
================================================================= */

.report-step-content h3 {

    min-height: 43px;

    margin: 0;

    color: #101012;

     font-family: "Montserrat", sans-serif;

    font-size:20px;

    line-height: 1.25;

    font-weight: 700;

}


/* =================================================================
   27. STEP DIVIDER
================================================================= */

.report-step-divider {

    width: 34px;

    height: 2px;

    margin: 14px auto 15px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #12090b,
            #641c27
        );

}


/* =================================================================
   =================================================================
   28. STEP PARAGRAPH
   =================================================================
   ================================================================= */

.report-step-content p {

    margin: 0;

    color: #414144;

     font-family: "Inter", sans-serif;

    font-size: 16px;

    line-height: 1.58;

    font-weight: 400;

}


/* =================================================================
   =================================================================
   29. CARD BOTTOM GRADIENT
   =================================================================
   ================================================================= */

.report-process-card::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    height: 5px;

    border-radius:
        0 0 14px 14px;

    background:
        var(--theme-gradient);

}


/* =================================================================
   =================================================================
   30. TABLET
   =================================================================
   ================================================================= */

@media (max-width: 900px) {

    .report-process-section {

        padding:
            62px 18px 65px;

    }


    .report-process-header {

        margin-bottom: 43px;

    }


    .report-process-grid {

        gap: 18px;

    }


    .report-process-card {

        min-height: 350px;

        padding:
            64px 20px 32px;

    }


    .report-process-content h3,
    .report-step-content h3 {

        font-size: 16px;

    }


    .report-step-content p {

        font-size: 15px;

        line-height: 1.55;

    }


    .report-step-line {

        width: 18px;

    }

}


/* =================================================================
   =================================================================
   31. MOBILE TABLET
   =================================================================
   ================================================================= */

@media (max-width: 700px) {

    .report-process-section {

        padding:
            55px 15px 60px;

    }


    .report-process-header {

        margin-bottom: 60px;

    }


    .report-process-title {

        font-size: 25px;

    }


    .report-process-grid {

        grid-template-columns: 1fr;

        gap: 52px;

    }


    .report-process-card {

        min-height: auto;

        padding:
            62px 28px 38px;

    }


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

    .report-step-line {

        top: calc(100% + 26px);

        left: 50%;

        width: 2px;

        height: 27px;

        transform:
            translateX(-50%);

        background:
            linear-gradient(
                180deg,
                #641c27,
                rgba(100, 28, 39, 0.15)
            );

    }


    .report-step-line::after {

        right: auto;

        top: auto;

        bottom: -3px;

        left: 50%;

        width: 7px;

        height: 7px;

        transform:
            translateX(-50%);

    }


    .report-process-card:last-child .report-step-line {

        display: block;

    }


    .report-process-card:nth-child(2) .report-step-line {

        display: block;

    }


    .report-process-card:last-child {

        margin-bottom: 0;

    }


    /* -------------------------------------------------------------
       MOBILE CARD TEXT
    ------------------------------------------------------------- */

    .report-step-content p {

        max-width: 520px;

        margin-left: auto;

        margin-right: auto;

    }

}


/* =================================================================
   =================================================================
   32. MOBILE
   =================================================================
   ================================================================= */

@media (max-width: 480px) {

    .report-process-section {

        padding:
            48px 12px 52px;

    }


    .report-process-section::before {

        left: 8px;

        top: 25px;

        width: 50px;

        height: 50px;

    }


    .report-decoration-right {

        width: 170px;

        height: 170px;

        right: -110px;

        top: 80px;

    }


    .report-process-header {

        margin-bottom: 58px;

    }


    .report-process-eyebrow {

        font-size: 15px;

        letter-spacing: 1px;

    }


    .report-process-eyebrow::before,
    .report-process-eyebrow::after {

        width: 25px;

        margin-left: 8px;

        margin-right: 8px;

    }


    .report-process-title {

        font-size: 25px;

        line-height: 1.18;

    }


    .report-process-intro {

        margin-top: 13px;

        font-size: 16px;

        line-height: 1.5;

    }


    .report-process-grid {

        gap: 48px;

    }


    .report-process-card {

        padding:
            60px 20px 38px;

        border-radius: 12px;

    }


    .report-step-number {

        width: 62px;

        height: 62px;

        top: -29px;

    }


    .report-step-number span {

        font-size: 27px;

    }


    .report-step-icon {

        width: 53px;

        height: 53px;

        margin-bottom: 17px;

        font-size: 23px;

    }


    .report-step-content h3 {

        min-height: auto;

        font-size: 20px;

        line-height: 1.3;

    }


    .report-step-divider {

        margin:
            13px auto 15px;

    }


    .report-step-content p {

        font-size: 16px;

        line-height: 1.58;

    }


    .desktop-break {

        display: none;

    }

}


/* =================================================================
   =================================================================
   33. EXTRA SMALL MOBILE
   =================================================================
   ================================================================= */

@media (max-width: 360px) {

    .report-process-section {

        padding-left: 9px;

        padding-right: 9px;

    }


    .report-process-title {

        font-size: 24px;

    }


    .report-process-intro {

        font-size: 15px;

    }


    .report-process-card {

        padding-left: 17px;

        padding-right: 17px;

    }


    .report-step-content p {

        font-size: 15px;

    }

}


/* =================================================================
   =================================================================
   34. REDUCED MOTION
   =================================================================
   ================================================================= */

@media (prefers-reduced-motion: reduce) {

    .report-process-card {

        transition: none;

    }

}

/* =================================================================
   =================================================================
   WOODBOX — PROVEN IMPACT SECTION
   STATIC VERSION — NO SLIDER
   Unique Prefix: wb-impact
   =================================================================
   ================================================================= */


/* =================================================================
   01. SECTION
================================================================= */

.wb-impact-section {

    position: relative;

    width: 100%;

    

    overflow: hidden;

    background: #ffffff;

}


/* =================================================================
   02. DARK MAIN PANEL
================================================================= */

.wb-impact-section::after {

    content: "";

    position: absolute;

    z-index: 0;

    top: 0;

    left: 50%;

    width: min(94%, 1300px);

    height: 100%;

    transform: translateX(-50%);

    border-radius: 16px;

    background:
        var(--theme-gradient);

    box-shadow:
        0 15px 35px rgba(18, 9, 11, 0.18);

}


/* =================================================================
   03. CONTAINER
================================================================= */

.wb-impact-container {

    position: relative;
    z-index: 3;
    width: 75%;
    margin: 0 auto;
    /* padding: 90px 50px 90px; */

}


/* =================================================================
   04. LEFT DOT DECORATION
================================================================= */

.wb-impact-decor-left {

        position: absolute;
    z-index: 1;
    top: 35px;
    left: 43px;
    width: 146px;
    height: 145px;
    opacity: 0.4;
    pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.25) 1px, transparent 1px);
    background-size: 9px 9px;
    mask-image: linear-gradient(135deg, #000, transparent);
    -webkit-mask-image: linear-gradient(135deg, #fcfcfc);

}


/* =================================================================
   05. RIGHT CIRCULAR DECORATION
================================================================= */

.wb-impact-decor-right {

    position: absolute;

    z-index: 1;

    top: -50px;

    right: -95px;

    width: 300px;

    height: 300px;

    border: 1px solid
        rgba(255,255,255,0.07);

    border-radius: 50%;

    pointer-events: none;

    box-shadow:

        0 0 0 20px
        rgba(255,255,255,0.018),

        0 0 0 42px
        rgba(255,255,255,0.012),

        0 0 0 68px
        rgba(255,255,255,0.008);

}


/* =================================================================
   06. HEADER
================================================================= */

.wb-impact-header {

    position: relative;

    z-index: 5;

    max-width: 900px;

    margin: 0 auto 28px;

    text-align: center;

}


/* =================================================================
   07. EYEBROW
================================================================= */

.wb-impact-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    margin-bottom: 10px;

    color:
        rgba(255,255,255,0.78);

    font-family:
        "Inter",
        sans-serif;

    font-size: 15px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1.5px;

}


/* =================================================================
   08. EYEBROW DOT
================================================================= */

.wb-impact-eyebrow-dot {

    width: 5px;

    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background: #d79a72;

    box-shadow:
        0 0 8px
        rgba(215,154,114,0.7);

}


/* =================================================================
   09. MAIN TITLE
================================================================= */

.wb-impact-title {

    margin: 0;

    color: #ffffff;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 35px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0;

}


/* =================================================================
   10. TITLE ACCENT
================================================================= */

.wb-impact-title span {

    color: #d79a72;

}


/* =================================================================
   11. SUBTITLE
================================================================= */

.wb-impact-subtitle {

    margin: 8px 0 0;

    color:
        rgba(255,255,255,0.68);

    font-family:
        "Inter",
        sans-serif;

    font-size: 16px;

    line-height: 1.5;

    font-weight: 400;

}


/* =================================================================
   12. RESULTS CARD
================================================================= */

.wb-impact-results {

    position: relative;

    z-index: 5;

    display: grid;

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

    width: 100%;

    min-height: 174px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,0.045);

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.035),
            rgba(0,0,0,0.17)
        );

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,0.025);

}


/* =================================================================
   13. STAT ITEM
================================================================= */

.wb-impact-stat {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 0;

    padding: 20px 18px;

    text-align: center;

}


/* =================================================================
   14. STAT DIVIDER
================================================================= */

.wb-impact-stat:not(:last-child)::after {

    content: "";

    position: absolute;

    top: 50%;

    right: 0;

    width: 1px;

    height: 72%;

    transform: translateY(-50%);

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255,255,255,0.17),
            transparent
        );

}


/* =================================================================
   15. ICON CIRCLE
================================================================= */

.wb-impact-icon {

    width: 47px;

    height: 47px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 10px;

    border:
        1px solid
        rgba(215,154,114,0.32);

    border-radius: 50%;

    color: #d79a72;

    background:
        radial-gradient(
            circle,
            rgba(100,28,39,0.35),
            rgba(18,9,11,0.55)
        );

    box-shadow:
        inset 0 0 14px
        rgba(100,28,39,0.18);

}


/* =================================================================
   16. ICON
================================================================= */

.wb-impact-icon span {

    display: block;

    font-family:
        "Inter",
        sans-serif;

    font-size: 21px;

    line-height: 1;

    font-weight: 700;

}


/* =================================================================
   17. NUMBER
================================================================= */

.wb-impact-number {

    color: #d79a72;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 32px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: -0.6px;

}


/* =================================================================
   18. NUMBER STAR
================================================================= */

.wb-impact-number span {

    margin-left: 2px;

    font-size: 25px;

}


/* =================================================================
   19. DESCRIPTION
================================================================= */

.wb-impact-description {

    margin: 8px 0 0;

    color:
        rgba(255,255,255,0.72);

    font-family:
        "Inter",
        sans-serif;

    font-size: 14px;

    line-height: 1.2;

    font-weight: 400;

}


/* =================================================================
   20. BOTTOM GLOW
================================================================= */

.wb-impact-section::before {

    content: "";

    position: absolute;

    z-index: 2;

    left: 50%;

    bottom: 5px;

    width: min(55%, 600px);

    height: 7px;

    transform: translateX(-50%);

    border-radius: 50%;

    background: #d79a72;

    filter: blur(12px);

    opacity: 0.4;

}


/* =================================================================
   21. TABLET
================================================================= */

@media (max-width: 900px) {

    .wb-impact-section {

        padding:
            50px 18px;

    }


    .wb-impact-section::after {

        width:
            calc(100% - 30px);

    }


    .wb-impact-container {

        max-width: 760px;

    }


    .wb-impact-results {

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

    }


    .wb-impact-stat:nth-child(2)::after {

        display: none;

    }


    .wb-impact-stat:nth-child(1)::before,
    .wb-impact-stat:nth-child(2)::before {

        content: "";

        position: absolute;

        left: 15%;

        right: 15%;

        bottom: 0;

        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,0.12),
                transparent
            );

    }

}


/* =================================================================
   22. MOBILE
================================================================= */

@media (max-width: 600px) {

    .wb-impact-section {

        padding:
            44px 12px;

    }


    .wb-impact-section::after {

        width:
            calc(100% - 18px);

        border-radius: 13px;

    }


    .wb-impact-header {

        margin-bottom: 22px;

        padding: 0 20px;

    }


    .wb-impact-title {

        font-size: 25px;

    }


    .wb-impact-subtitle {

        font-size: 16px;

    }


    .wb-impact-results {

        grid-template-columns: 1fr;

        min-height: auto;

        border-radius: 12px;

    }


    .wb-impact-stat {

        min-height: 115px;

        padding: 17px 20px;

    }


    .wb-impact-stat:not(:last-child)::after {

        top: auto;

        right: 12%;

        bottom: 0;

        width: 76%;

        height: 1px;

        transform: none;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,0.13),
                transparent
            );

    }


    .wb-impact-stat:nth-child(1)::before,
    .wb-impact-stat:nth-child(2)::before {

        display: none;

    }


    .wb-impact-icon {

        width: 40px;

        height: 40px;

        margin-bottom: 6px;

    }


    .wb-impact-icon span {

        font-size: 18px;

    }


    .wb-impact-number {

        font-size: 28px;

    }


    .wb-impact-number span {

        font-size: 21px;

    }


    .wb-impact-description {

        margin-top: 5px;

        font-size: 13px;

        line-height: 1.3;

    }


    .wb-impact-decor-left {

        left: 15px;

        top: 28px;

        width: 50px;

        height: 65px;

    }


    .wb-impact-decor-right {

        width: 180px;

        height: 180px;

        right: -100px;

        top: -35px;

    }

}


/* =================================================================
   23. SMALL MOBILE
================================================================= */

@media (max-width: 380px) {

    .wb-impact-section {

        padding-left: 9px;

        padding-right: 9px;

    }


    .wb-impact-section::after {

        width:
            calc(100% - 10px);

    }


    .wb-impact-header {

        padding:
            0 15px;

    }


    .wb-impact-title {

        font-size: 24px;

    }


    .wb-impact-stat {

        min-height: 108px;

    }

}

/* =================================================================
   =================================================================
   WOODBOX — FAQ SECTION
   FULL WIDTH VERSION
   Unique Prefix: wb-faq
   =================================================================
   ================================================================= */


/* =================================================================
   01. FAQ SECTION
================================================================= */

.wb-faq-section {

    position: relative;

    width: 100%;

    padding: 75px 0px 80px;

    overflow: hidden;

    background: #ffffff;

}


/* =================================================================
   02. MAIN CONTAINER
================================================================= */

.wb-faq-container {

    position: relative;

    z-index: 3;

    width: 100%;

   

    margin: 0 auto;

}


/* =================================================================
   03. DECORATIVE LEFT DOTS
================================================================= */

.wb-faq-decor-left {

    position: absolute;

    z-index: 1;

    top: 35px;

    left: 25px;

    width: 70px;

    height: 90px;

    opacity: 0.35;

    pointer-events: none;

    background-image:
        radial-gradient(
            #641c27 1px,
            transparent 1px
        );

    background-size: 9px 9px;

    mask-image:
        linear-gradient(
            135deg,
            #000,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            135deg,
            #000,
            transparent
        );

}


/* =================================================================
   04. RIGHT DECORATION
================================================================= */

.wb-faq-decor-right {

    position: absolute;

    z-index: 1;

    top: -110px;

    right: -100px;

    width: 340px;

    height: 340px;

    border:
        1px solid
        rgba(100,28,39,0.07);

    border-radius: 50%;

    pointer-events: none;

    box-shadow:

        0 0 0 25px
        rgba(100,28,39,0.018),

        0 0 0 55px
        rgba(100,28,39,0.012),

        0 0 0 90px
        rgba(100,28,39,0.008);

}


/* =================================================================
   05. HEADER
================================================================= */

.wb-faq-header {

    position: relative;

    z-index: 4;

    margin-bottom: 35px;

    text-align: center;

}


/* =================================================================
   06. EYEBROW
================================================================= */

.wb-faq-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-bottom: 9px;

    color: #641c27;

    font-family:
        "Inter",
        sans-serif;

    font-size: 15px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1.3px;

}


/* =================================================================
   07. EYEBROW LINES
================================================================= */

.wb-faq-eyebrow-line {

    width: 34px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #b9785b
        );

}


.wb-faq-eyebrow-line:last-child {

    background:
        linear-gradient(
            90deg,
            #b9785b,
            transparent
        );

}


/* =================================================================
   08. MAIN TITLE
================================================================= */

.wb-faq-title {

    margin: 0;

    color: #111111;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 35px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0;

}


/* =================================================================
   09. TITLE ACCENT
================================================================= */

.wb-faq-title span {

    color: #641c27;
     font-weight: 700;
    font-family: "Montserrat";
    line-height: 1.2;
}


/* =================================================================
   10. TITLE UNDERLINE
================================================================= */

.wb-faq-title-line {

    width: 43px;

    height: 2px;

    margin: 14px auto 0;

    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            #351015,
            #b9785b
        );

}


/* =================================================================
   11. FAQ LIST
================================================================= */

.wb-faq-list {

    position: relative;

    z-index: 4;

    display: flex;

    flex-direction: column;

    gap: 12px;

    width: 100%;

}


/* =================================================================
   12. FAQ ITEM
================================================================= */

.wb-faq-item {

    width: 100%;

    overflow: hidden;

    border:
        1px solid
        rgba(18,9,11,0.09);

    border-radius: 13px;

    background: #ffffff;

    box-shadow:
        0 5px 20px
        rgba(18,9,11,0.045);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;

}


/* =================================================================
   13. FAQ ITEM HOVER
================================================================= */

.wb-faq-item:hover {

    border-color:
        rgba(100,28,39,0.22);

    box-shadow:
        0 9px 28px
        rgba(18,9,11,0.08);

    transform: translateY(-1px);

}


/* =================================================================
   14. QUESTION BUTTON
================================================================= */

.wb-faq-question {

    width: 100%;

    min-height: 74px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 12px 25px;

    border: 0;

    outline: none;

    color: #151515;

    background: #ffffff;

    cursor: pointer;

    text-align: left;

    font-family:
        "Inter",
        sans-serif;

}


/* =================================================================
   15. QUESTION LEFT
================================================================= */

.wb-faq-question-left {

    display: flex;

    align-items: center;

    min-width: 0;

    gap: 17px;

}


/* =================================================================
   16. FAQ ICON
================================================================= */

.wb-faq-icon {

    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(100,28,39,0.14);

    border-radius: 50%;

    color: #641c27;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf4f2 100%
        );

    box-shadow:
        inset 0 0 12px
        rgba(100,28,39,0.035);

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;

}


/* =================================================================
   17. ICON SYMBOL
================================================================= */

.wb-faq-icon span {

    font-size: 20px;

    line-height: 1;

    font-weight: 600;

}


/* =================================================================
   18. QUESTION TEXT
================================================================= */

.wb-faq-question-text {

    display: block;

    color: #151515;

    font-family:
        "Inter",
        sans-serif;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 700;

}


/* =================================================================
   19. PLUS BUTTON
================================================================= */

.wb-faq-plus {

    width: 30px;

    height: 30px;

    flex: 0 0 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #641c27;

    font-family:
        "Inter",
        sans-serif;

    font-size: 25px;

    line-height: 1;

    font-weight: 400;

    transition:
        transform 0.3s ease,
        color 0.25s ease;

}


/* =================================================================
   20. OPEN ITEM
================================================================= */

.wb-faq-item.wb-faq-open {

    border-color:
        rgba(100,28,39,0.20);

}


/* =================================================================
   21. OPEN ICON
================================================================= */

.wb-faq-item.wb-faq-open .wb-faq-icon {

    color: #ffffff;

    background:
        var(--theme-gradient);

    transform: scale(1.03);

}


/* =================================================================
   22. OPEN PLUS
================================================================= */

.wb-faq-item.wb-faq-open .wb-faq-plus {

    transform: rotate(45deg);

    color: #641c27;

}


/* =================================================================
   23. ANSWER
================================================================= */

.wb-faq-answer {

    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows 0.35s ease;

}


/* =================================================================
   24. OPEN ANSWER
================================================================= */

.wb-faq-item.wb-faq-open .wb-faq-answer {

    grid-template-rows: 1fr;

}


/* =================================================================
   25. ANSWER INNER
================================================================= */

.wb-faq-answer-inner {

    min-height: 0;

    overflow: hidden;

    padding:
        0 25px 0 90px;

    color:
        #555555;

    font-family:
        "Inter",
        sans-serif;

    font-size: 16px;

    line-height: 1.65;

    font-weight: 400;

}


/* =================================================================
   26. OPEN ANSWER INNER
================================================================= */

.wb-faq-item.wb-faq-open
.wb-faq-answer-inner {

    padding-bottom: 22px;

}


/* =================================================================
   27. BOTTOM CTA
================================================================= */

.wb-faq-cta {

    position: relative;

    z-index: 4;

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 82px;

    margin-top: 24px;

    padding: 14px 25px;

    border:
        1px solid
        rgba(100,28,39,0.07);

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #faf6f4 100%
        );

    box-shadow:
        0 7px 25px
        rgba(18,9,11,0.055);

}


/* =================================================================
   28. CTA ICON
================================================================= */

.wb-faq-cta-icon {

    width: 50px;

    height: 50px;

    flex: 0 0 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 15px;

    border-radius: 50%;

    color: #ffffff;

    background:
        var(--theme-gradient);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 23px;

    font-weight: 700;

    box-shadow:
        0 5px 15px
        rgba(100,28,39,0.20);

}


/* =================================================================
   29. CTA CONTENT
================================================================= */

.wb-faq-cta-content {

    flex: 1;

}


/* =================================================================
   30. CTA HEADING
================================================================= */

.wb-faq-cta-content strong {

    display: block;

    color: #641c27;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 700;

}


/* =================================================================
   31. CTA TEXT
================================================================= */

.wb-faq-cta-content p {

    margin: 4px 0 0;

    color: #555555;

    font-family:
        "Inter",
        sans-serif;

    font-size: 16px;

    line-height: 1.35;

}


/* =================================================================
   32. CTA BUTTON
================================================================= */

.wb-faq-cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 45px;

    padding: 0 22px;

    border-radius: 9px;

    color: #ffffff;

    background:
        linear-gradient(
            201deg,
            #000000,
            #830e27
        );

    text-decoration: none;

    font-family:
        "Inter",
        sans-serif;

    font-size: 15px;

    line-height: 1;

    font-weight: 700;

    white-space: nowrap;

    box-shadow:
        0 5px 14px
        rgba(2,181,75,0.18);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


/* =================================================================
   33. CTA BUTTON HOVER
================================================================= */

.wb-faq-cta-button:hover {

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(2,181,75,0.25);

}


/* =================================================================
   34. CTA ARROW
================================================================= */

.wb-faq-cta-button span {

    font-size: 18px;

    transition:
        transform 0.25s ease;

}


.wb-faq-cta-button:hover span {

    transform: translateX(3px);

}


/* =================================================================
   35. TABLET
================================================================= */

@media (max-width: 900px) {

    .wb-faq-section {

        padding:
            60px 18px 65px;

    }


    .wb-faq-container {

        max-width: 760px;

    }


    .wb-faq-question {

        min-height: 70px;

        padding:
            11px 20px;

    }


    .wb-faq-answer-inner {

        padding-left: 85px;

    }


    .wb-faq-cta {

        padding:
            14px 20px;

    }

}


/* =================================================================
   36. MOBILE
================================================================= */

@media (max-width: 600px) {

    .wb-faq-section {

        padding:
            50px 13px 55px;

    }


    .wb-faq-decor-left {

        top: 25px;

        left: 12px;

        width: 50px;

        height: 65px;

    }


    .wb-faq-decor-right {

        width: 190px;

        height: 190px;

        right: -100px;

        top: -45px;

    }


    .wb-faq-header {

        margin-bottom: 25px;

        padding: 0 10px;

    }


    .wb-faq-eyebrow {

        font-size: 15px;

        letter-spacing: 1px;

    }


    .wb-faq-title {

        font-size: 25px;

        line-height: 1.22;

    }


    .wb-faq-title-line {

        margin-top: 11px;

    }


    .wb-faq-list {

        gap: 9px;

    }


    .wb-faq-question {

        min-height: 68px;

        gap: 10px;

        padding:
            10px 13px;

    }


    .wb-faq-question-left {

        gap: 11px;

    }


    .wb-faq-icon {

        width: 40px;

        height: 40px;

        flex-basis: 40px;

    }


    .wb-faq-icon span {

        font-size: 16px;

    }


    .wb-faq-question-text {

        font-size: 16px;

        line-height: 1.35;

    }


    .wb-faq-plus {

        width: 26px;

        height: 26px;

        flex-basis: 26px;

        font-size: 23px;

    }


    .wb-faq-answer-inner {

        padding:
            0 15px 0 64px;

        font-size: 16px;

        line-height: 1.55;

    }


    .wb-faq-item.wb-faq-open
    .wb-faq-answer-inner {

        padding-bottom: 17px;

    }


    .wb-faq-cta {

        flex-wrap: wrap;

        gap: 13px;

        margin-top: 18px;

        padding:
            16px;

    }


    .wb-faq-cta-icon {

        width: 43px;

        height: 43px;

        flex-basis: 43px;

        margin-right: 0;

    }


    .wb-faq-cta-content {

        min-width: 0;

        flex: 1;

    }


    .wb-faq-cta-content strong {

        font-size: 16px;

    }


    .wb-faq-cta-content p {

        font-size: 16px;

    }


    .wb-faq-cta-button {

        width: 100%;

        min-height: 46px;

    }

}


/* =================================================================
   37. SMALL MOBILE
================================================================= */

@media (max-width: 380px) {

    .wb-faq-section {

        padding-left: 9px;

        padding-right: 9px;

    }


    .wb-faq-title {

        font-size: 24px;

    }


    .wb-faq-question {

        padding:
            10px 10px;

    }


    .wb-faq-question-left {

        gap: 9px;

    }


    .wb-faq-icon {

        width: 37px;

        height: 37px;

        flex-basis: 37px;

    }


    .wb-faq-question-text {

        font-size: 15px;

    }


    .wb-faq-answer-inner {

        padding-left: 56px;

    }

}

/* =================================================================
   =================================================================
   WOODBOX — FINAL CTA SECTION
   Compact CTA / Market Intelligence Report
   Unique Prefix: wb-final-cta
   =================================================================
   ================================================================= */


/* =================================================================
   01. SECTION
================================================================= */

.wb-final-cta-section {

    position: relative;

    width: 100%;

         padding: 0 0 60px 0;

    overflow: hidden;

    background: #ffffff;

}


/* =================================================================
   02. MAIN CONTAINER
================================================================= */

.wb-final-cta-container {

    
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: 430px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.82fr);
    align-items: center;
    gap: 55px;
    padding: 48px 0px 50px;
    border: 1px solid rgba(100, 28, 39, 0.09);
    border-radius: 25px;
    background: linear-gradient(135deg, #fffefe 0%, #fcf8f7 52%, #f7efed 100%);
    box-shadow: 0 18px 55px rgba(18, 9, 11, 0.08);
    padding: 80px 50px 80px;

}


/* =================================================================
   03. DECORATIVE DOTS
================================================================= */

.wb-final-cta-dots {

    position: absolute;

    z-index: 1;

    width: 75px;

    height: 100px;

    opacity: 0.28;

    pointer-events: none;

    background-image:
        radial-gradient(
            #641c27 1px,
            transparent 1px
        );

    background-size: 9px 9px;

}


/* =================================================================
   04. LEFT DOTS
================================================================= */

.wb-final-cta-dots-left {

    left: 22px;

    top: 28px;

}


/* =================================================================
   05. RIGHT DOTS
================================================================= */

.wb-final-cta-dots-right {

    right: 20px;

    bottom: 20px;

}


/* =================================================================
   06. LEFT CONTENT
================================================================= */

.wb-final-cta-content {

    position: relative;

    z-index: 4;

}


/* =================================================================
   07. LABEL
================================================================= */

.wb-final-cta-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 7px 13px;

    margin-bottom: 13px;

    border:
        1px solid
        rgba(100, 28, 39, 0.16);

    border-radius: 30px;

    color: #641c27;

    background:
        rgba(100, 28, 39, 0.045);

    font-family:
        "Inter",
        sans-serif;

    font-size: 12px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1px;

}


.wb-final-cta-label b {

    font-size: 16px;

    line-height: 10px;

}


/* =================================================================
   08. TITLE
================================================================= */

.wb-final-cta-title {

    max-width: 590px;

    margin: 0;

    color: #111111;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 35px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.7px;

}


.wb-final-cta-title span {

       display: block;
    color: #641c27;
    font-weight: 700;
    font-family: inherit;

}


/* =================================================================
   09. TITLE LINE
================================================================= */

.wb-final-cta-line {

    width: 45px;

    height: 3px;

    margin: 16px 0 14px;

    border-radius: 10px;

    background:
        var(--theme-gradient);

}


/* =================================================================
   10. DESCRIPTION
================================================================= */

.wb-final-cta-description {

    max-width: 535px;

    margin: 0;

    color: #555555;

    font-family:
        "Inter",
        sans-serif;

    font-size: 16px;

    line-height: 1.55;

    font-weight: 400;

}


/* =================================================================
   11. BENEFITS
================================================================= */

.wb-final-cta-benefits {

    display: grid;

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

    max-width: 570px;

    margin-top: 25px;

    padding-top: 20px;

    border-top:
        1px solid
        rgba(18, 9, 11, 0.09);

}


/* =================================================================
   12. BENEFIT ITEM
================================================================= */

.wb-final-cta-benefit {

    display: flex;

    align-items: center;

    gap: 9px;

    padding-right: 12px;

}


.wb-final-cta-benefit + .wb-final-cta-benefit {

    padding-left: 13px;

    border-left:
        1px solid
        rgba(18, 9, 11, 0.09);

}


/* =================================================================
   13. BENEFIT ICON
================================================================= */

.wb-final-cta-benefit-icon {

    width: 29px;

    height: 29px;

    flex: 0 0 29px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        var(--theme-gradient);

    font-family:
        "Inter",
        sans-serif;

    font-size: 13px;

    font-weight: 700;

}


/* =================================================================
   14. BENEFIT TEXT
================================================================= */

.wb-final-cta-benefit strong {

    display: block;

    color: #191919;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 700;

}


.wb-final-cta-benefit span {

    display: block;

    margin-top: 3px;

    color: #777777;

    font-family:
        "Inter",
        sans-serif;

    font-size: 16px;

    line-height: 1.25;

}


/* =================================================================
   15. CTA CARD
================================================================= */

.wb-final-cta-card {

    position: relative;

    z-index: 5;

    width: 100%;

    padding: 25px;

    border:
        1px solid
        rgba(100, 28, 39, 0.13);

    border-radius: 17px;

    background: #ffffff;

    box-shadow:
        0 12px 35px
        rgba(18, 9, 11, 0.10);

}


/* =================================================================
   16. CARD TOP
================================================================= */

.wb-final-cta-card-top {

    display: flex;

    align-items: center;

    gap: 12px;

}


/* =================================================================
   17. CARD ICON
================================================================= */

.wb-final-cta-card-icon {

    width: 42px;

    height: 42px;

    flex: 0 0 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        var(--theme-gradient);

    font-size: 20px;

    font-weight: 700;

}


/* =================================================================
   18. CARD LABEL
================================================================= */

.wb-final-cta-card-top span {

    display: block;

    margin-bottom: 3px;

    color: #641c27;

    font-family:
        "Inter",
        sans-serif;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* =================================================================
   19. CARD HEADING
================================================================= */

.wb-final-cta-card h3 {

    margin: 0;

    color: #111111;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 18px;

    line-height: 1.15;

    font-weight: 700;

}


/* =================================================================
   20. CARD HEADING ACCENT
================================================================= */

.wb-final-cta-card h3 em {
 
    color: #641c27;
    font-style: normal;
     font-family: "Montserrat", sans-serif;
    line-height: 1.4;
}


/* =================================================================
   21. CARD DESCRIPTION
================================================================= */

.wb-final-cta-card-text {

    margin: 12px 0 16px;

    color: #666666;

    font-family:
        "Inter",
        sans-serif;

    font-size: 15px;

    line-height: 1.45;

}


/* =================================================================
   22. FORM
================================================================= */

.wb-final-cta-form {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


/* =================================================================
   23. INPUT ROW
================================================================= */

.wb-final-cta-input-row {

    display: grid;

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

    gap: 10px;

}


/* =================================================================
   24. INPUT GROUP
================================================================= */

.wb-final-cta-input-group {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


/* =================================================================
   25. INPUT LABEL
================================================================= */

.wb-final-cta-input-group label {

    color: #333333;

    font-family:
        "Inter",
        sans-serif;

    font-size: 11px;

    line-height: 1;

    font-weight: 700;

}


/* =================================================================
   26. INPUT
================================================================= */

.wb-final-cta-input-group input {

    width: 100%;

    height: 42px;

    padding: 0 12px;

    border:
        1px solid
        #dddddd;

    border-radius: 7px;

    outline: none;

    color: #222222;

    background: #ffffff;

    font-family:
        "Inter",
        sans-serif;

    font-size: 14px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.wb-final-cta-input-group textarea {

    width: 100%;

    height: 92px;

    padding: 10px 12px;

    border:
        1px solid
        #dddddd;

    border-radius: 7px;

    outline: none;

    color: #222222;

    background: #ffffff;

    font-family:
        "Inter",
        sans-serif;

    font-size: 14px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.wb-final-cta-input-group input::placeholder {

    color: #a0a0a0;

}


.wb-final-cta-input-group input:focus {

    border-color: #641c27;

    box-shadow:
        0 0 0 3px
        rgba(100, 28, 39, 0.08);

}


/* =================================================================
   27. MAIN CTA BUTTON
================================================================= */

.wb-final-cta-button {

    width: 100%;

    min-height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 3px;

    padding: 0 18px;

    border: 0;

    border-radius: 8px;

    cursor: pointer;

    color: #ffffff;

    background:
        linear-gradient(
            201deg,
            #000000,
            #830e27
        );

    font-family:
        "Inter",
        sans-serif;

    font-size: 14px;

    line-height: 1;

    font-weight: 700;

    box-shadow:
        0 7px 18px
        rgba(2, 181, 75, 0.17);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.wb-final-cta-button:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 24px
        rgba(2, 181, 75, 0.25);

}


.wb-final-cta-button b {

    font-size: 18px;

    transition:
        transform 0.25s ease;

}


.wb-final-cta-button:hover b {

    transform: translateX(4px);

}


/* =================================================================
   28. CARD NOTE
================================================================= */

.wb-final-cta-note {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    margin-top: 12px;

    color: #777777;

    font-family:
        "Inter",
        sans-serif;

    font-size: 15px;

    line-height: 1.3;

    text-align: center;

}


.wb-final-cta-note span {

    color: #641c27;

    font-size: 13px;

    font-weight: 700;

}


/* =================================================================
   29. TABLET
================================================================= */

@media (max-width: 900px) {

    .wb-final-cta-section {

        padding:
            45px 18px;

    }


    .wb-final-cta-container {

        grid-template-columns:
            1fr;

        gap: 35px;

        max-width: 720px;

        padding:
            40px;

    }


    .wb-final-cta-content {

        text-align: center;

    }


    .wb-final-cta-label {

        margin-bottom: 12px;

    }


    .wb-final-cta-title {

        max-width: 650px;

        margin-left: auto;

        margin-right: auto;

    }


    .wb-final-cta-line {

        margin-left: auto;

        margin-right: auto;

    }


    .wb-final-cta-description {

        margin-left: auto;

        margin-right: auto;

    }


    .wb-final-cta-benefits {

        max-width: 650px;

        margin-left: auto;

        margin-right: auto;

        text-align: left;

    }


    .wb-final-cta-card {

        max-width: 560px;

        margin: 0 auto;

    }

}


/* =================================================================
   30. MOBILE
================================================================= */

@media (max-width: 600px) {

    .wb-final-cta-section {

        padding:
            35px 12px;

    }


    .wb-final-cta-container {

        min-height: auto;

        gap: 28px;

        padding:
            30px 18px;

        border-radius: 18px;

    }


    .wb-final-cta-title {

        font-size: 35px;

        line-height: 1.2;

        letter-spacing: 0;

    }


    .wb-final-cta-description {

        font-size: 16px;

        line-height: 1.5;

    }


    .wb-final-cta-benefits {

        grid-template-columns: 1fr;

        gap: 13px;

        margin-top: 20px;

        padding-top: 17px;

    }


    .wb-final-cta-benefit {

        padding:
            0 0 12px;

        border-bottom:
            1px solid
            rgba(18, 9, 11, 0.08);

    }


    .wb-final-cta-benefit + .wb-final-cta-benefit {

        padding-left: 0;

        border-left: 0;

    }


    .wb-final-cta-benefit:last-child {

        padding-bottom: 0;

        border-bottom: 0;

    }


    .wb-final-cta-card {

        padding: 20px 16px;

        border-radius: 14px;

    }


    .wb-final-cta-card h3 {

        font-size: 19px;

    }


    .wb-final-cta-input-row {

        grid-template-columns: 1fr;

    }


    .wb-final-cta-input-group input {

        height: 44px;

    }


    .wb-final-cta-button {

        min-height: 48px;

    }

}


/* =================================================================
   31. SMALL MOBILE
================================================================= */

@media (max-width: 380px) {

    .wb-final-cta-section {

        padding:
            28px 9px;

    }


    .wb-final-cta-container {

        padding:
            25px 14px;

    }


    .wb-final-cta-title {

        font-size: 23px;

    }


    .wb-final-cta-card-top {

        align-items: flex-start;

    }


    .wb-final-cta-card-icon {

        width: 38px;

        height: 38px;

        flex-basis: 38px;

    }

}

/* =================================================================
   =================================================================
   WOODBOX — LEGAL PPC DIFFERENT SECTION
   Dark Strategic PPC Section
   Unique Namespace: wb-ppc-
   =================================================================
   ================================================================= */


/* =================================================================
   01. SECTION
================================================================= */

.wb-ppc-section {

    position: relative;

    width: 100%;

    padding: 70px 22px;

    overflow: hidden;

    background:
        var(--theme-gradient);

    color: #ffffff;

}


/* =================================================================
   02. CONTAINER
================================================================= */

.wb-ppc-container {

    position: relative;

    z-index: 3;

    width: 100%;

    margin: 0 auto;

}


/* =================================================================
   03. DECORATIVE ELEMENTS
================================================================= */

.wb-ppc-decoration {

    position: absolute;

    z-index: 1;

    pointer-events: none;

    opacity: 0.35;

}


/* =================================================================
   04. LEFT DECORATION
================================================================= */

.wb-ppc-decoration-left {

    top: -40px;

    left: -45px;

    width: 150px;

    height: 150px;

    border-radius: 50%;

    border:
        1px solid
        rgba(213, 138, 150, 0.16);

    box-shadow:
        0 0 0 25px rgba(213, 138, 150, 0.025),
        0 0 0 50px rgba(213, 138, 150, 0.02);

}


/* =================================================================
   05. RIGHT DECORATION
================================================================= */

.wb-ppc-decoration-right {

    top: 20px;

    right: 30px;

    width: 70px;

    height: 90px;

    opacity: 0.3;

    background-image:
        radial-gradient(
            rgba(213, 138, 150, 0.65) 1px,
            transparent 1px
        );

    background-size: 9px 9px;

}


/* =================================================================
   06. HEADER
================================================================= */

.wb-ppc-header {

    text-align: center;

    max-width: 850px;

    margin:
        0 auto 28px;

}


/* =================================================================
   07. EYEBROW
================================================================= */

.wb-ppc-eyebrow {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 6px 13px;

    margin-bottom: 12px;

    border:
        1px solid
        rgba(213, 138, 150, 0.4);

    border-radius: 30px;

    

    background:
        rgba(100, 28, 39, 0.25);

    font-family:
        "Inter",
        sans-serif;

    font-size: 11px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1.2px;

}


.wb-ppc-eyebrow span {

    

    font-size: 12px;

}


/* =================================================================
   08. MAIN TITLE
================================================================= */

.wb-ppc-title {

    margin-bottom: 60px;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-size: 35px;
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: 0;

}


.wb-ppc-title span {

    font-weight: 700;
    font-family: "Montserrat";
    line-height: 1.2;
 
  

}


/* =================================================================
   09. SUBTITLE
================================================================= */

.wb-ppc-subtitle {

    max-width: 700px;

    margin:
        12px auto 0;

    color:
        rgba(255, 255, 255, 0.72);

    font-family:
        "Inter",
        sans-serif;

    font-size: 16px;

    line-height: 1.5;

    font-weight: 400;

}


.wb-ppc-subtitle strong {

    

    font-weight: 700;

}


/* =================================================================
   10. APPROACH LABEL
================================================================= */

.wb-ppc-approach-label {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin:
        30px 0 10px;

    

    font-family:
        "Inter",
        sans-serif;

    font-size: 15px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 2px;

}


.wb-ppc-approach-label span {

    width: 80px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(213, 138, 150, 0.65)
        );

}


.wb-ppc-approach-label span:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(213, 138, 150, 0.65),
            transparent
        );

}


/* =================================================================
   11. CARDS GRID
================================================================= */

.wb-ppc-grid {

    display: grid;

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

    gap: 9px;

}


/* =================================================================
   12. PPC CARD
================================================================= */

.wb-ppc-card {

    position: relative;

    min-height: 145px;

    padding:
        18px 17px;

    display: grid;

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

    gap: 12px;

    align-items: start;

    overflow: hidden;

    border:
        1px solid
        rgba(213, 138, 150, 0.24);

    border-radius: 10px;

    background:
        rgba(18, 9, 11, 0.55);

    box-shadow:
        inset 0 0 20px
        rgba(255, 255, 255, 0.012);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;

}


/* =================================================================
   13. CARD HOVER
================================================================= */

.wb-ppc-card:hover {

    transform: translateY(-3px);

    border-color:
        rgba(213, 138, 150, 0.58);

    background:
        rgba(53, 46, 16, 0.645);

    box-shadow:
        0 12px 30px
        rgba(18, 9, 11, 0.25),
        inset 0 -2px 0
        rgba(213, 138, 150, 0.45);

}


/* =================================================================
   14. CARD NUMBER
================================================================= */

.wb-ppc-card-number {

    position: absolute;

    top: 8px;

    right: 10px;

    color:
        rgba(213, 138, 150, 0.08);

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 27px;

    line-height: 1;

    font-weight: 700;

    pointer-events: none;

}


/* =================================================================
   15. CARD ICON
================================================================= */

.wb-ppc-icon {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(213, 138, 150, 0.6);

    border-radius: 50%;

    

    background:
        rgba(18, 9, 11, 0.7);

    box-shadow:
        0 0 0 5px
        rgba(213, 138, 150, 0.035);

    font-size: 18px;

    

}


/* =================================================================
   16. CARD CONTENT
================================================================= */

.wb-ppc-card-content {

    min-width: 0;

    padding-top: 3px;

}


/* =================================================================
   17. CARD HEADING
================================================================= */

.wb-ppc-card h3 {

    margin: 0 0 10px;
    color: #ffffff;
     font-family: "Montserrat", sans-serif;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: 0;

}


/* =================================================================
   18. CARD LIST
================================================================= */

.wb-ppc-card ul {

    display: flex;

    flex-direction: column;

    gap: 5px;

    margin: 0;

    padding: 0;

    list-style: none;

}


/* =================================================================
   19. CARD LIST ITEM
================================================================= */

.wb-ppc-card li {

    position: relative;

    padding-left: 10px;

    color:
        rgba(255, 255, 255, 0.68);

    font-family:
        "Inter",
        sans-serif;

    font-size: 15px;

    line-height: 1.35;

    font-weight: 400;

}


/* =================================================================
   20. LIST BULLET
================================================================= */

.wb-ppc-card li::before {

    content: "";

    position: absolute;

    left: 0;

    top: 6px;

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background: #d58a96;

}


/* =================================================================
   21. BOTTOM CTA
================================================================= */

.wb-ppc-bottom {

    min-height: 72px;

    display: grid;

    grid-template-columns:
        50px minmax(260px, 1fr)
        1px minmax(170px, 0.55fr)
        auto;

    align-items: center;

    gap: 17px;

    margin-top: 17px;

    padding:
        12px 18px;

    border:
        1px solid
        rgba(213, 138, 150, 0.23);

    border-radius: 11px;

    background:
        rgba(18, 9, 11, 0.52);

}


/* =================================================================
   22. BOTTOM ICON
================================================================= */

.wb-ppc-bottom-icon {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        var(--theme-gradient);

    border:
        1px solid
        rgba(213, 138, 150, 0.55);

    font-size: 18px;

}


/* =================================================================
   23. BOTTOM TEXT
================================================================= */

.wb-ppc-bottom-text h3 {

    margin: 0 0 3px;

    color: #ffffff;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 500;

}


.wb-ppc-bottom-text p {

    margin: 0;

    

    font-family:
        "Inter",
        sans-serif;

    font-size: 13px;

    line-height: 1.3;

    font-weight: 600;

}


/* =================================================================
   24. CTA DIVIDER
================================================================= */

.wb-ppc-bottom-divider {

    width: 1px;

    height: 32px;

    background:
        rgba(255, 255, 255, 0.12);

}


/* =================================================================
   25. BOTTOM MESSAGE
================================================================= */

.wb-ppc-bottom-message p {

    margin: 0;

    color:
        rgba(255, 255, 255, 0.6);

    font-family:
        "Inter",
        sans-serif;

    font-size: 14px;

    line-height: 1.35;

}


/* =================================================================
   26. CTA BUTTON
================================================================= */

.wb-ppc-button {

    min-height: 36px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding:
        0 16px;

    border:
        1px solid
        #d58a96;

    border-radius: 30px;

    color: #ffffff;

    background:
        var(--theme-gradient);

    text-decoration: none;

    font-family:
        "Inter",
        sans-serif;

    font-size: 14px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: 0.4px;

    white-space: nowrap;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


.wb-ppc-button:hover {

    transform: translateY(-2px);

    border-color: #ffffff;

    box-shadow:
        0 7px 20px
        rgba(100, 28, 39, 0.4);

}


.wb-ppc-button b {

    

    font-size: 16px;

    transition:
        transform 0.25s ease;

}


.wb-ppc-button:hover b {

    transform: translateX(3px);

}


/* =================================================================
   27. TABLET
================================================================= */

@media (max-width: 900px) {

    .wb-ppc-section {

        padding:
            55px 18px;

    }


    .wb-ppc-grid {

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

    }


    .wb-ppc-bottom {

        grid-template-columns:
            45px 1fr auto;

    }


    .wb-ppc-bottom-divider,
    .wb-ppc-bottom-message {

        display: none;

    }

}


/* =================================================================
   28. MOBILE
================================================================= */

@media (max-width: 600px) {

    .wb-ppc-section {

        padding:
            45px 13px;

    }


    .wb-ppc-title {

        font-size: 25px;

        line-height: 1.2;

    }


    .wb-ppc-subtitle {

        font-size: 16px;

    }


    .wb-ppc-approach-label {

        font-size: 12px;

        letter-spacing: 1.4px;

    }


    .wb-ppc-approach-label span {

        width: 35px;

    }


    .wb-ppc-grid {

        grid-template-columns: 1fr;

        gap: 8px;

    }


    .wb-ppc-card {

        min-height: 135px;

    }


    .wb-ppc-bottom {

        display: grid;

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

        gap: 12px;

        padding:
            16px;

    }


    .wb-ppc-bottom-text h3 {

        font-size: 15px;

    }


    .wb-ppc-bottom-text p {

        font-size: 12px;

    }


    .wb-ppc-button {

        grid-column:
            1 / -1;

        width: 100%;

        min-height: 43px;

    }

}


/* =================================================================
   29. SMALL MOBILE
================================================================= */

@media (max-width: 380px) {

    .wb-ppc-section {

        padding:
            38px 10px;

    }


    .wb-ppc-title {

        font-size: 23px;

    }


    .wb-ppc-card {

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

        padding:
            16px 13px;

    }


    .wb-ppc-icon {

        width: 42px;

        height: 42px;

        font-size: 18px;

    }

}


/* ================================================================
   WOODBOX — PROVEN RESULTS
   LIGHT VERSION
   Pure White Background
================================================================ */


/* ================================================================
   01. SECTION
================================================================ */

.wb-results-light-section {

    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 70px 20px 65px;

    background: #ffffff;

    color: #12090b;

}


/* ================================================================
   02. CONTAINER
================================================================ */

.wb-results-light-container {

    position: relative;

    z-index: 2;

    width: 100%;
 

    margin: 0 auto;

}


/* ================================================================
   03. DECORATIVE DOTS
================================================================ */

.wb-results-light-dots {

    position: absolute;

    width: 65px;

    height: 80px;

    pointer-events: none;

    opacity: 0.35;

    background-image:
        radial-gradient(
            #641c27 1px,
            transparent 1px
        );

    background-size: 9px 9px;

}


.wb-results-light-dots-left {

    top: 5px;

    left: -5px;

}


.wb-results-light-dots-right {

    right: -5px;

    bottom: 25px;

    opacity: 0.16;

}


/* ================================================================
   04. HEADER
================================================================ */

.wb-results-light-header {

    text-align: center;

    margin-bottom: 48px;

}


/* ================================================================
   05. EYEBROW
================================================================ */

.wb-results-light-eyebrow {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    margin-bottom: 9px;

}


.wb-results-light-eyebrow span {

    width: 35px;

    height: 1px;

    background: #641c27;

}


.wb-results-light-eyebrow strong {

    color: #641c27;

    font-family:
        "Inter",
        sans-serif;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 1.1px;

}


/* ================================================================
   06. TITLE
================================================================ */

.wb-results-light-title {

    margin: 0;

    color: #12090b;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 35px;

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -1.2px;

}


.wb-results-light-title em {

    color: #641c27;

    font-style: normal;

}


/* ================================================================
   07. SUBTITLE
================================================================ */

.wb-results-light-subtitle {

    margin: 10px 0 0;

    color: #6c6364;

    font-family:
        "Inter",
        sans-serif;

    font-size: 16px;

    line-height: 1.5;

}


/* ================================================================
   08. CARDS GRID
================================================================ */

.wb-results-light-grid {

    display: grid;

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

    gap: 22px;

}


/* ================================================================
   09. CARD
================================================================ */

.wb-results-light-card {

    position: relative;

    padding: 34px 20px 21px;

    background: #ffffff;

    border: 1px solid #e9e5e5;

    border-radius: 10px;

    box-shadow:
        0 8px 28px
        rgba(18, 9, 11, 0.055);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;

}


.wb-results-light-card:hover {

    transform: translateY(-4px);

    border-color:
        rgba(100, 28, 39, 0.22);

    box-shadow:
        0 16px 35px
        rgba(100, 28, 39, 0.09);

}


/* ================================================================
   10. CARD ICON
================================================================ */

.wb-results-light-card-icon {

    position: absolute;

    top: -24px;

    left: 50%;

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    transform: translateX(-50%);

    border: 1px solid #e5dadd;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 4px 14px
        rgba(18, 9, 11, 0.08);

}


.wb-results-light-card-icon span {

    width: 34px;

    height: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #641c27;

    background: #faf3f4;

    font-family:
        "Inter",
        sans-serif;

    font-size: 18px;

    font-weight: 700;

}


/* ================================================================
   11. CARD TITLE
================================================================ */

.wb-results-light-card h3 {

    margin: 0 0 10px;

    color: #171112;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 19px;

    line-height: 1.25;

    font-weight: 600;

    text-align: center;

}


/* ================================================================
   12. CHALLENGE TEXT
================================================================ */

.wb-results-light-challenge {

    min-height: 61px;

    margin: 0;

    color: #655d5e;

    font-family:
        "Inter",
        sans-serif;

    font-size: 14px;

    line-height: 1.45;

}


.wb-results-light-challenge b {

    color: #641c27;

    font-weight: 700;

}


/* ================================================================
   13. RESULT HIGHLIGHT
================================================================ */

.wb-results-light-highlight {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    margin-top: 13px;

    padding: 10px;

    background: #fbf8f8;

    border-top: 1px solid #f0ebec;

    border-bottom: 1px solid #f0ebec;
    text-align: center;

}


/* ================================================================
   14. RESULT ICON
================================================================ */

.wb-results-light-highlight-icon {

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        var(--theme-gradient);

    font-family:
        "Inter",
        sans-serif;

    font-size: 16px;

    font-weight: 700;

}


/* ================================================================
   15. RESULT NUMBER
================================================================ */

.wb-results-light-highlight strong {

    display: block;

    color: #641c27;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 29px;

    line-height: 1;

    font-weight: 900;

}


/* ================================================================
   16. RESULT LABEL
================================================================ */

.wb-results-light-highlight small {

    display: block;

    margin-top: 4px;

    color: #756d6e;

    font-family:
        "Inter",
        sans-serif;

    font-size: 14px;

    line-height: 1;

}


/* ================================================================
   17. METRICS
================================================================ */

.wb-results-light-metrics {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    margin-top: 13px;

    border-bottom: 1px solid #eee9ea;

}


.wb-results-light-metrics > div {

    padding: 9px 4px;

    text-align: center;

}


.wb-results-light-metrics > div + div {

    border-left: 1px solid #eee9ea;

}


/* ================================================================
   18. METRIC NUMBER
================================================================ */

.wb-results-light-metrics strong {

    display: block;

    color: #351015;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 25px;

    line-height: 1.1;

    font-weight: 700;

}


/* ================================================================
   19. METRIC LABEL
================================================================ */

.wb-results-light-metrics span {

    display: block;

    margin-top: 4px;

    color: #71696a;

    font-family:
        "Inter",
        sans-serif;

    font-size: 14px;

    line-height: 1.2;

}


/* ================================================================
   20. CARD NOTE
================================================================ */

.wb-results-light-note {

    display: flex;

    align-items: flex-start;

    gap: 7px;

    margin-top: 13px;

}


.wb-results-light-note > span {

    flex: 0 0 auto;

    width: 17px;

    height: 17px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-top: 1px;

    border-radius: 50%;

    color: #ffffff;

    background:
        #641c27;

    font-family:
        "Inter",
        sans-serif;

    font-size: 9px;

    font-weight: 700;

}


.wb-results-light-note p {

    margin: 0;

    color: #696162;

    font-family:
        "Inter",
        sans-serif;

    font-size: 14px;

    line-height: 1.2;

}


/* ================================================================
   21. BOTTOM STRIP
================================================================ */

.wb-results-light-bottom {

    display: grid;

    grid-template-columns:
        minmax(250px, 1.5fr)
        repeat(3, minmax(115px, 0.7fr))
        auto;

    align-items: center;

    margin-top: 17px;

    padding: 10px 13px;

    border: 1px solid #ebe6e7;

    border-radius: 9px;

    background: #ffffff;

    box-shadow:
        0 6px 22px
        rgba(18, 9, 11, 0.045);

}


/* ================================================================
   22. BOTTOM INTRO
================================================================ */

.wb-results-light-bottom-intro {

    display: flex;

    align-items: center;

    gap: 10px;

    padding-right: 14px;

}


.wb-results-light-bottom-icon {

    flex: 0 0 auto;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #ffffff;

    background:
        var(--theme-gradient);

    font-size: 14px;

}


.wb-results-light-bottom-intro strong {

    display: block;

    color: #171112;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 600;

}


.wb-results-light-bottom-intro p {

    margin: 3px 0 0;

    color: #641c27;

    font-family:
        "Inter",
        sans-serif;

    font-size: 14px;

}


/* ================================================================
   23. BOTTOM BENEFITS
================================================================ */

.wb-results-light-benefit {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    min-height: 35px;

    padding: 0 9px;

    border-left: 1px solid #eee9ea;

}


.wb-results-light-benefit span {

    color: #641c27;

    font-size: 16px;

    font-weight: 900;

}


.wb-results-light-benefit strong {

    color: #4b4445;

    font-family:
        "Inter",
        sans-serif;

    font-size: 15px;

    font-weight: 700;

}


/* ================================================================
   24. CTA
================================================================ */

.wb-results-light-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-height: 38px;

    margin-left: 8px;

    padding: 0 17px;

    border-radius: 25px;

    color: #ffffff;

    background:
        var(--theme-gradient);

    text-decoration: none;

    font-family:
        "Inter",
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    white-space: nowrap;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;

}


.wb-results-light-cta:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(100, 28, 39, 0.20);

}


.wb-results-light-cta span {

    font-size: 15px;

}


/* ================================================================
   25. TABLET
================================================================ */

@media (max-width: 950px) {

    .wb-results-light-grid {

        gap: 14px;

    }


    .wb-results-light-bottom {

        grid-template-columns:
            1fr 1fr;

        gap: 5px;

    }


    .wb-results-light-bottom-intro {

        grid-column: 1 / -1;

        padding: 3px 5px 8px;

    }


    .wb-results-light-benefit {

        border-top: 1px solid #eee9ea;

        border-left: none;

    }


    .wb-results-light-cta {

        margin: 0;

    }

}


/* ================================================================
   26. MOBILE
================================================================ */

@media (max-width: 700px) {

    .wb-results-light-section {

        padding:
            55px 15px;

    }


    .wb-results-light-title {

        font-size: 34px;

    }


    .wb-results-light-header {

        margin-bottom: 42px;

    }


    .wb-results-light-grid {

        grid-template-columns: 1fr;

        gap: 29px;

    }


    .wb-results-light-card {

        padding:
            34px 19px 20px;

    }


    .wb-results-light-challenge {

        min-height: auto;

    }


    .wb-results-light-bottom {

        grid-template-columns: 1fr;

        gap: 0;

        padding: 13px;

    }


    .wb-results-light-bottom-intro {

        grid-column: auto;

        padding:
            0 0 10px;

    }


    .wb-results-light-benefit {

        justify-content: flex-start;

        padding: 9px 2px;

    }


    .wb-results-light-cta {

        width: 100%;

        margin-top: 8px;

    }


    .wb-results-light-dots-right {

        display: none;

    }

}


/* ================================================================
   27. SMALL MOBILE
================================================================ */

@media (max-width: 400px) {

    .wb-results-light-section {

        padding:
            48px 12px;

    }


    .wb-results-light-title {

        font-size: 30px;

    }


    .wb-results-light-subtitle {

        font-size: 14px;

    }


    .wb-results-light-eyebrow strong {

        font-size: 13px;

    }


    .wb-results-light-card {

        padding-left: 16px;

        padding-right: 16px;

    }

}

/* ================================================================
   PRACTICE AREAS SECTION
   Light Theme — Unique Classes
   ================================================================ */

.wb-practice-section {
    --wb-practice-theme: #641c27;
    --wb-practice-theme-dark: #351015;
    --wb-practice-theme-deep: #12090b;
    --wb-practice-theme-light: #f9edef;
    --wb-practice-border: rgba(100, 28, 39, 0.16);
    --wb-practice-text: #151515;
    --wb-practice-muted: #666666;

    position: relative;
    width: 100%;
    overflow: hidden;
    background: rgba(100, 28, 39, 0.09);
    padding: 90px 20px 55px;
    isolation: isolate;
}


/* ================================================================
   BACKGROUND DECORATIONS
   ================================================================ */

.wb-practice-dots {
    position: absolute;
    width: 72px;
    height: 72px;
    opacity: 0.55;
    background-image: radial-gradient(
        circle,
        rgba(100, 28, 39, 0.38) 1.3px,
        transparent 1.3px
    );
    background-size: 12px 12px;
    pointer-events: none;
    z-index: -1;
}

.wb-practice-dots-left {
    top: 32px;
    left: 34px;
}

.wb-practice-dots-right {
    right: 35px;
    bottom: 25px;
}

.wb-practice-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -2;
    filter: blur(10px);
}

.wb-practice-glow-top {
    width: 280px;
    height: 280px;
    top: -180px;
    right: -120px;
    background: rgba(100, 28, 39, 0.07);
}

.wb-practice-glow-bottom {
    width: 300px;
    height: 300px;
    bottom: -200px;
    left: -130px;
    background: rgba(100, 28, 39, 0.06);
}


/* ================================================================
   MAIN CONTAINER
   ================================================================ */

.wb-practice-container {
 
    margin: 0 auto;
}


/* ================================================================
   SECTION HEADER
   ================================================================ */

.wb-practice-header {
    text-align: center;
    margin: 0 auto 38px;
}

.wb-practice-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 10px;

    color: var(--wb-practice-theme);

     font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wb-practice-eyebrow-line {
    width: 42px;
    height: 1px;
    background: var(--wb-practice-theme);
    opacity: 0.65;
}

.wb-practice-eyebrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    border: 1.5px solid var(--wb-practice-theme);
    border-radius: 50%;

     font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 900;
}

.wb-practice-title {
    margin: 0;

    color: var(--wb-practice-text);

     font-family: "Montserrat", sans-serif;
    font-size: 35px;
    font-weight: 700;
 
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.wb-practice-title span {
    color: var(--wb-practice-theme);
     font-weight: 700;
    font-family: "Montserrat";
    line-height: 1.2;
}

.wb-practice-description {
    max-width: 620px;
    margin: 13px auto 0;

    color: var(--wb-practice-muted);

     font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.55;
}


/* ================================================================
   PRACTICE AREA GRID
   ================================================================ */

.wb-practice-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px 13px;
}


/* ================================================================
   PRACTICE CARD
   ================================================================ */

.wb-practice-card {
    position: relative;

    min-height: 66px;

    display: flex;
    align-items: center;
    gap: 14px;

    padding: 11px 16px;

    background: rgba(255, 255, 255, 0.95);

    border: 1px solid rgba(100, 28, 39, 0.10);
    border-left: 2px solid rgba(100, 28, 39, 0.45);

    border-radius: 4px;

    box-shadow:
        0 4px 16px rgba(20, 15, 15, 0.045),
        0 1px 3px rgba(20, 15, 15, 0.025);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;

    overflow: hidden;
}

.wb-practice-card::after {
    content: "";

    position: absolute;

    width: 80px;
    height: 80px;

    right: -50px;
    bottom: -50px;

    border-radius: 50%;

    background: rgba(100, 28, 39, 0.045);

    transition: transform 0.3s ease;
}

.wb-practice-card:hover {
    transform: translateY(-3px);

    border-color: rgba(100, 28, 39, 0.24);
    border-left-color: var(--wb-practice-theme);

    background: #ffffff;

    box-shadow:
        0 10px 28px rgba(53, 16, 21, 0.10),
        0 2px 6px rgba(53, 16, 21, 0.04);
}

.wb-practice-card:hover::after {
    transform: scale(1.7);
}


/* ================================================================
   CARD ICON
   ================================================================ */

.wb-practice-icon {
    position: relative;
    z-index: 1;

   flex: 0 0 45px;
    width: 45px;
    height: 45px;

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

    color: var(--wb-practice-theme);

    background: var(--wb-practice-theme-light);

    border-radius: 50%;
}

.wb-practice-icon svg {
    width: 35px;
    height: 35px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wb-practice-card > span {
    position: relative;
    z-index: 1;

    color: #252525;

     font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
}


/* ================================================================
   BOTTOM CTA STRIP
   ================================================================ */

.wb-practice-bottom {
    position: relative;

    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;

    gap: 16px;

    margin-top: 20px;
    padding: 11px 15px;

    background: #ffffff;

    border: 1px solid rgba(100, 28, 39, 0.12);
    border-radius: 7px;

    box-shadow:
        0 7px 22px rgba(20, 15, 15, 0.055),
        0 1px 4px rgba(20, 15, 15, 0.025);
}


/* ================================================================
   BOTTOM ICON
   ================================================================ */

.wb-practice-bottom-icon {
    width: 40px;
    height: 40px;

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

    color: var(--wb-practice-theme);

    background: var(--wb-practice-theme-light);

    border-radius: 50%;
}

.wb-practice-bottom-icon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ================================================================
   BOTTOM COPY
   ================================================================ */

.wb-practice-bottom-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wb-practice-bottom-copy strong {
     color: #202020;
     font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.wb-practice-bottom-copy span {
    color: var(--wb-practice-theme);

     font-family: "Inter", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
}


/* ================================================================
   BOTTOM DIVIDER
   ================================================================ */

.wb-practice-bottom-divider {
    width: 1px;
    height: 35px;

    background: rgba(100, 28, 39, 0.14);
}


/* ================================================================
   BOTTOM ACTION
   ================================================================ */

.wb-practice-bottom-action {
    display: flex;
    align-items: center;
    gap: 12px;

    white-space: nowrap;
}

.wb-practice-bottom-action > span {
    color: #fff;

     font-family: "Inter", sans-serif;
    font-size: 18px;
    font-weight: 600;
        padding: 10px 16px;
}


/* ================================================================
   ARROW BUTTON
   ================================================================ */

.wb-practice-arrow {
    width: 31px;
    height: 31px;

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

    color: #ffffff;
    /* background: linear-gradient(
        135deg,
        #12090b 0%,
        #351015 52%,
        #641c27 100%
    ); */

    border-radius: 50%;

     font-family: "Inter", sans-serif;
    font-size: 19px;
    font-weight: 500;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.wb-practice-arrow:hover {
    transform: translateX(3px);

    box-shadow:
        0 5px 15px rgba(100, 28, 39, 0.30);
}


/* ================================================================
   TABLET — 992px
   ================================================================ */

@media (max-width: 992px) {

    .wb-practice-section {
        padding: 75px 18px 45px;
    }

    .wb-practice-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wb-practice-bottom {
        grid-template-columns: auto 1fr;
    }

    .wb-practice-bottom-divider {
        display: none;
    }

    .wb-practice-bottom-action {
        grid-column: 1 / -1;

        justify-content: space-between;

        padding-top: 9px;

        border-top: 1px solid rgba(100, 28, 39, 0.10);
    }
}


/* ================================================================
   MOBILE — 768px
   ================================================================ */

@media (max-width: 768px) {

    .wb-practice-section {
        padding: 60px 16px 38px;
    }

    .wb-practice-header {
        margin-bottom: 30px;
    }

    .wb-practice-eyebrow {
        font-size: 12px;
        gap: 6px;
    }

    .wb-practice-eyebrow-line {
        width: 27px;
    }

    .wb-practice-title {
        font-size: clamp(29px, 8vw, 39px);
        line-height: 1.1;
    }

    .wb-practice-description {
        max-width: 540px;
        margin-top: 11px;

        font-size: 15px;
        line-height: 1.5;
    }

    .wb-practice-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .wb-practice-card {
        min-height: 62px;
        padding: 9px 11px;
        gap: 10px;
    }

    .wb-practice-icon {
        flex-basis: 27px;
        width: 27px;
        height: 27px;
    }

    .wb-practice-icon svg {
        width: 20px;
        height: 20px;
    }

    .wb-practice-card > span {
        font-size: 12px;
        line-height: 1.3;
    }

    .wb-practice-bottom {
        gap: 11px;
        margin-top: 16px;
        padding: 12px;
    }

    .wb-practice-bottom-icon {
        width: 35px;
        height: 35px;
    }

    .wb-practice-bottom-copy strong {
        font-size: 12px;
    }

    .wb-practice-bottom-copy span {
        font-size: 11px;
    }

    .wb-practice-bottom-action > span {
        font-size: 12px;
    }

    .wb-practice-arrow {
        width: 29px;
        height: 29px;
        font-size: 16px;
    }
}


/* ================================================================
   SMALL MOBILE — 480px
   ================================================================ */

@media (max-width: 480px) {

    .wb-practice-section {
        padding: 50px 12px 30px;
    }

    .wb-practice-dots {
        width: 50px;
        height: 50px;
        background-size: 9px 9px;
    }

    .wb-practice-dots-left {
        top: 20px;
        left: 12px;
    }

    .wb-practice-dots-right {
        right: 10px;
        bottom: 15px;
    }

    .wb-practice-eyebrow {
        font-size: 10px;
        letter-spacing: 0.045em;
    }

    .wb-practice-title {
        font-size: 29px;
    }

    .wb-practice-description {
        font-size: 14px;
    }

    .wb-practice-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .wb-practice-card {
        min-height: 57px;
        padding: 9px 12px;
    }

    .wb-practice-card > span {
        font-size: 13px;
    }

    .wb-practice-bottom {
        grid-template-columns: auto 1fr;
        gap: 9px;
    }

    .wb-practice-bottom-action {
        grid-column: 1 / -1;
    }
}


/* ================================================================
   VERY SMALL DEVICES — 360px
   ================================================================ */

@media (max-width: 360px) {

    .wb-practice-section {
        padding-left: 10px;
        padding-right: 10px;
    }

    .wb-practice-title {
        font-size: 27px;
    }

    .wb-practice-description {
        font-size: 13px;
    }

    .wb-practice-bottom-action > span {
        font-size: 11px;
    }
}


/* ================================================================
   REDUCED MOTION ACCESSIBILITY
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

    .wb-practice-card,
    .wb-practice-card::after,
    .wb-practice-arrow {
        transition: none;
    }
}

/* =========================================================
   WOODBOX FOOTER
   Premium Dark / Red Theme
========================================================= */

.wb-footer {
    padding: 50px 0 0 0px ;
    --wb-footer-bg: #08090a;
    --wb-footer-bg-soft: #101214;
    --wb-footer-border: rgba(255, 255, 255, 0.10);

    /* Current Website Theme */
    --wb-footer-theme:
        var(--theme-gradient);

    /* Theme Accent */
    --wb-footer-accent: #d76572;
    --wb-footer-accent-light: #ef9ba4;

    --wb-footer-white: #ffffff;
    --wb-footer-text: #d5d5d5;
    --wb-footer-muted: #8d8f92;

    position: relative;
    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(100, 28, 39, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(53, 16, 21, 0.30),
            transparent 32%
        ),
        var(--wb-footer-bg);

    color: var(--wb-footer-white);

     font-family: "Inter", sans-serif;
}


/* =========================================================
   FOOTER DECORATIVE GLOW
========================================================= */

.wb-footer-glow {
    position: absolute;
    z-index: -1;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(80px);

    opacity: 0.18;
}

.wb-footer-glow-left {
    left: -180px;
    top: 10%;

    background: #641c27;
}

.wb-footer-glow-right {
    right: -180px;
    bottom: 5%;

    background: #351015;
}


/* =========================================================
   FOOTER CONTAINER
========================================================= */

.wb-footer-container {
    width: min(1380px, calc(100% - 60px));

    margin: 0 auto;
}


/* =========================================================
   FOOTER TOP
========================================================= */

.wb-footer-top {
    display: grid;

    grid-template-columns:
        1.6fr
        1fr
        1fr
        1fr
        1.15fr;

    gap: 55px;

    padding: 80px 0 65px;
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.wb-footer-brand {
    max-width: 390px;
}


/* Logo */

.wb-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    color: #ffffff;

    text-decoration: none;

    margin-bottom: 25px;
}

.wb-footer-logo-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255, 255, 255, 0.30);

    border-radius: 10px;

     font-family: "Montserrat", sans-serif;
    font-size: 19px;
    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.10),
            rgba(100,28,39,0.45)
        );

    box-shadow:
        0 0 25px rgba(100, 28, 39, 0.20);
}

.wb-footer-logo-text {
     font-family: "Montserrat", sans-serif;

    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.5px;
}


/* Description */

.wb-footer-description {
    margin: 0 0 27px;

    max-width: 370px;

    color: var(--wb-footer-text);

    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   FOOTER CTA
========================================================= */

.wb-footer-main-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-height: 48px;

    padding: 0 20px;

    border-radius: 7px;

    background:
        linear-gradient(
            201deg,
            #000000,
            #641c27
        );

    border: 1px solid rgba(255,255,255,0.16);

    color: #ffffff;

    text-decoration: none;

     font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25);

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

.wb-footer-main-cta:hover {
    transform: translateY(-3px);

    border-color: rgba(215, 101, 114, 0.60);

    box-shadow:
        0 15px 35px rgba(100, 28, 39, 0.35);
}

.wb-footer-arrow {
    font-size: 18px;

    transition:
        transform 0.3s ease;
}

.wb-footer-main-cta:hover .wb-footer-arrow {
    transform: translateX(4px);
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.wb-footer-column h3 {
    position: relative;

    margin: 3px 0 24px;

    color: #ffffff;

     font-family: "Montserrat", sans-serif;

    font-size: 16px;
    font-weight: 700;
}

.wb-footer-column h3::after {
    content: "";

    display: block;

    width: 28px;
    height: 2px;

    margin-top: 10px;

    background: var(--wb-footer-theme);

    border-radius: 20px;
}


/* Lists */

.wb-footer-column ul {
    display: flex;

    flex-direction: column;

    gap: 12px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.wb-footer-column li {
    margin: 0;
    padding: 0;
}

.wb-footer-column li a {
    display: inline-block;

    color: var(--wb-footer-muted);

    text-decoration: none;

    font-size: 14px;
    line-height: 1.45;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.wb-footer-column li a:hover {
    color: var(--wb-footer-accent-light);

    transform: translateX(4px);
}


/* =========================================================
   CONTACT COLUMN
========================================================= */

.wb-footer-contact-text {
    margin: 0 0 18px;

    color: var(--wb-footer-muted);

    font-size: 14px;

    line-height: 1.6;
}


/* Contact item */

.wb-footer-contact-item {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 13px;

    color: #ffffff;

    text-decoration: none;
}

.wb-footer-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(215, 101, 114, 0.30);

    border-radius: 50%;

    color: var(--wb-footer-accent-light);

    background:
        rgba(100, 28, 39, 0.15);

    font-size: 14px;
}

.wb-footer-contact-item span:last-child {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.wb-footer-contact-item small {
    color: var(--wb-footer-muted);

    font-size: 11px;
}

.wb-footer-contact-item strong {
    color: #ffffff;

    font-size: 13px;
    font-weight: 700;
}

.wb-footer-contact-item:hover strong {
    color: var(--wb-footer-accent-light);
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.wb-footer-socials {
    display: flex;

    gap: 8px;

    margin-top: 22px;
}

.wb-footer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    border: 1px solid rgba(255,255,255,0.13);

    border-radius: 50%;

    color: #ffffff;

    background: rgba(255,255,255,0.035);

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    transition:
        all 0.25s ease;
}

.wb-footer-socials a:hover {
    border-color: var(--wb-footer-accent);

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #12090b,
            #641c27
        );

    transform: translateY(-3px);
}


/* =========================================================
   TRUST BAR
========================================================= */

.wb-footer-trust {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top: 1px solid var(--wb-footer-border);
    border-bottom: 1px solid var(--wb-footer-border);

    padding: 25px 0;
}

.wb-footer-trust-item {
    display: flex;
    align-items: center;

    gap: 13px;

    min-width: 0;

    padding: 0 25px;

    border-right: 1px solid var(--wb-footer-border);
}

.wb-footer-trust-item:first-child {
    padding-left: 0;
}

.wb-footer-trust-item:last-child {
    padding-right: 0;
    border-right: none;
}


/* Trust Icon */

.wb-footer-trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 36px;
    height: 36px;

    border: 1px solid rgba(215, 101, 114, 0.40);

    border-radius: 50%;

    color: var(--wb-footer-accent-light);

    background:
        rgba(100, 28, 39, 0.15);

    font-size: 20px;
}


/* Trust text */

.wb-footer-trust-item div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}

.wb-footer-trust-item strong {
    color: #eeeeee;

    font-size: 16px;
    font-weight: 700;
}

.wb-footer-trust-item small {
    color: #777a7d;

    font-size: 15px;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.wb-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;

    min-height: 72px;
}

.wb-footer-copyright {
    margin: 0;
    color: #c0bfbf;
    font-size: 14px;
}


/* Bottom links */

.wb-footer-bottom-links {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 25px;
}

.wb-footer-bottom-links a {
    color: #c0bfbf;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.25s ease;
}

.logo {width: 200px;}

.wb-footer-bottom-links a:hover {
    color: var(--wb-footer-accent-light);
}


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

@media (max-width: 1100px) {

    .wb-footer-container {
        width: min(100% - 40px, 950px);
    }

    .wb-footer-top {
        grid-template-columns:
            1.5fr
            1fr
            1fr;

        gap: 45px;
    }

    .wb-footer-brand {
        grid-column: span 3;

        max-width: 600px;
    }

    .wb-footer-trust {
        grid-template-columns:
            repeat(2, 1fr);

        row-gap: 22px;
    }

    .wb-footer-trust-item:nth-child(2) {
        border-right: none;
    }

    .wb-footer-trust-item:nth-child(3) {
        padding-left: 0;
    }
}


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

@media (max-width: 700px) {

    .wb-footer-container {
        width: calc(100% - 32px);
    }

    .wb-footer-top {
        grid-template-columns: 1fr;

        gap: 35px;

        padding: 55px 0 40px;
    }

    .wb-footer-brand {
        grid-column: auto;

        max-width: 100%;
    }

    .wb-footer-logo {
        margin-bottom: 20px;
    }

    .wb-footer-description {
        max-width: 100%;

        font-size: 14px;

        line-height: 1.7;
    }

    .wb-footer-column h3 {
        margin-bottom: 17px;
    }

    .wb-footer-column ul {
        gap: 10px;
    }

    .wb-footer-trust {
        grid-template-columns: 1fr;

        padding: 25px 0;
    }

    .wb-footer-trust-item,
    .wb-footer-trust-item:first-child,
    .wb-footer-trust-item:last-child {
        padding: 0;

        border-right: none;
    }

    .wb-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        gap: 15px;

        padding: 22px 0;
    }

    .wb-footer-bottom-links {
        justify-content: flex-start;

        gap: 13px 20px;
    }

    .wb-footer-glow {
        width: 240px;
        height: 240px;

        filter: blur(65px);
    }
}


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

@media (max-width: 420px) {

    .wb-footer-container {
        width: calc(100% - 26px);
    }

    .wb-footer-top {
        padding-top: 45px;
    }

    .wb-footer-logo-mark {
        width: 43px;
        height: 43px;

        font-size: 16px;
    }

    .wb-footer-logo-text {
        font-size: 22px;
    }

    .wb-footer-main-cta {
        width: 100%;
    }

    .wb-footer-bottom-links {
        display: grid;

        grid-template-columns: 1fr 1fr;

        width: 100%;
    }
}


/* ================================================================
   ================================================================
   WOODBOX GLOBAL COLOR THEME OVERRIDE
   GOLD + BLACK
   ================================================================
   IMPORTANT:
   ONLY COLORS ARE OVERRIDDEN HERE.
   FONT / FONT SIZE / SPACING / LAYOUT / RESPONSIVE
   ARE NOT CHANGED.
   ================================================================
================================================================ */


/* ================================================================
   01. GLOBAL COLOR VARIABLES
================================================================ */

:root {

    /* ---------------- BASIC COLORS ---------------- */

    --color-black: #050505;
    --color-black-soft: #111111;
    --color-black-card: #171717;

    --color-white: #ffffff;

    --color-text: #111111;
    --color-gray: #666666;


    /* ---------------- GOLD ---------------- */

    --color-gold: #C9A45C;
    --color-gold-light: #E0C27A;
    --color-gold-dark: #9B7737;

    --color-gold-soft: #F7F0E2;


    /* ---------------- GOLD ALPHA ---------------- */

    --gold-05: rgba(201, 164, 92, 0.05);
    --gold-08: rgba(201, 164, 92, 0.08);
    --gold-10: rgba(201, 164, 92, 0.10);
    --gold-12: rgba(201, 164, 92, 0.12);
    --gold-15: rgba(201, 164, 92, 0.15);
    --gold-20: rgba(201, 164, 92, 0.20);
    --gold-25: rgba(201, 164, 92, 0.25);
    --gold-30: rgba(201, 164, 92, 0.30);
    --gold-35: rgba(201, 164, 92, 0.35);
    --gold-40: rgba(201, 164, 92, 0.40);
    --gold-50: rgba(201, 164, 92, 0.50);
    --gold-60: rgba(201, 164, 92, 0.60);


    /* ---------------- GLOBAL GRADIENT ---------------- */

    --theme-gradient:
        linear-gradient(
            135deg,
            #050505 0%,
            #17120B 55%,
            #9B7737 100%
        );


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

    --cta-gradient:
        linear-gradient(
            201deg,
            #050505 0%,
            #16120B 55%,
            #C9A45C 100%
        );


    /* ---------------- GOLD GRADIENT ---------------- */

    --gold-gradient:
        linear-gradient(
            135deg,
            #9B7737 0%,
            #C9A45C 50%,
            #E0C27A 100%
        );

}


/* ================================================================
   02. HEADER
================================================================ */




/* ================================================================
   03. HEADER CTA
================================================================ */

.btn-header:hover {

    color: #050505;

    background: var(--color-gold);

}


/* ================================================================
   04. HERO
================================================================ */

.hero-slider {

    background: #050505;

}


/* ================================================================
   05. HERO CTA
================================================================ */

.btn-hero {

    background:
       
         var(--gold-gradient) !important;

    border-color:
        var(--color-gold);

    color:
        #ffffff;

    box-shadow:
        0 10px 28px rgba(201, 164, 92, 0.18);

}

.btn-hero:hover {

    background:
         var(--cta-gradient) !important;

    color:
        #fff;

}


/* ================================================================
   06. HERO SLIDER DOTS
================================================================ */

.slider-dot {

    background:
        rgba(255, 255, 255, 0.35);

}

.slider-dot.active {

    background:
        var(--color-gold);

}


/* ================================================================
   07. TESTIMONIAL
================================================================ */

.testimonial-section {

    background:
        #050505;

}

.quote-icon {

    color:
        var(--color-gold);

}


/* ================================================================
   08. MARKET INTELLIGENCE
================================================================ */

.market-intelligence-section {

    background:
        #ffffff;

}

.section-eyebrow {

    color:
        var(--color-gold);

}

.market-intelligence-title span {

    color:
        var(--color-gold);

}

.benefit-icon {

    background:
        var(--color-gold);

}

.recognized-title {

    color:
        #111111;

}


/* ================================================================
   09. MARKET FORM
================================================================ */

.market-form-card {

    border-color:
        rgba(201, 164, 92, 0.20);

}

.form-submit-button {

    background:
        var(--cta-gradient) !important;

    color:
        #ffffff;

}

.form-submit-button:hover {

    background:
        var(--gold-gradient) !important;

    color:
        #050505;

}

.form-book-call {

    border-color:
        var(--color-gold);

    color:
        var(--color-gold);

}

.form-book-call:hover {

    background:
        var(--color-gold);

    color:
        #050505;

}


/* ================================================================
   10. SPECIALIZATION
================================================================ */

.specialization-section {

    background:
        #ffffff;

}

.specialization-title span,
.specialization-highlight {

    color:
        var(--color-gold);

}

.specialization-icon {

    color:
        var(--color-gold);

}

.specialization-card:hover {

    border-color:
        var(--color-gold);

}


/* ================================================================
   11. DIGITAL MARKETING SERVICES
================================================================ */

.services-section {

    background:
        var(--theme-gradient);

    color:
        #ffffff;

}

.services-section::before {

    background:
        rgba(201, 164, 92, 0.12);

}

.services-line {

    background:
        rgba(201, 164, 92, 0.55);

}

.services-eyebrow {

    color:
        var(--color-gold-light);

}

.services-title span {

    color:
        var(--color-gold-light);

}

.service-card {

    border-color:
        rgba(201, 164, 92, 0.16);

}

.service-card:hover {

    border-color:
        rgba(201, 164, 92, 0.45);

}

.service-icon {

    color:
        var(--color-gold-light);

    background:
        rgba(201, 164, 92, 0.10);

    border-color:
        rgba(201, 164, 92, 0.25);

}


/* ================================================================
   12. PROVIDER / DARK CARD
================================================================ */

.provider-card {

    background:
        #050505;

    border-color:
        rgba(201, 164, 92, 0.15);

}

.provider-card::before {

    background:
        rgba(201, 164, 92, 0.18);

}

.provider-card::after {

    background:
        rgba(201, 164, 92, 0.16);

}

.provider-title span {

    color:
        var(--color-gold-light);

}

.provider-cta {

    background: var(--gold-gradient) !important;
       

    border-color:
        var(--color-gold);

    color:
        #ffffff;

}

.provider-cta:hover {

    background:
        var(--cta-gradient) !important;

    color:
        #fff;

}


/* ================================================================
   13. PROVIDER MOCKUP
================================================================ */

.website-hero {

    background:
        linear-gradient(
            135deg,
            #9B7737,
            #C9A45C 60%,
            #E0C27A
        );

}

.phone-hero {

    background:
        linear-gradient(
            135deg,
            #9B7737,
            #C9A45C 60%,
            #E0C27A
        );

}

.phone-hero-content button {

    background:
        var(--color-gold);

    color:
        #050505;

}

.phone-images span {

    background:
        linear-gradient(
            135deg,
            #D8C08B,
            #9B7737
        );

}

.provider-bottom-angle {

    background:
        linear-gradient(
            135deg,
            #050505 0%,
            #C9A45C 52%,
            #9B7737 100%
        );

}


/* ================================================================
   14. REPORT PROCESS — LIGHT SECTION
================================================================ */

.report-process-section {

    background:
        #ffffff;

}

.report-decoration-left {

    background:
        radial-gradient(
            circle,
            rgba(201, 164, 92, 0.10) 0%,
            rgba(201, 164, 92, 0.045) 42%,
            transparent 72%
        );

}

.report-decoration-right {

    border-color:
        rgba(201, 164, 92, 0.10);

    box-shadow:
        0 0 0 18px rgba(201, 164, 92, 0.025),
        0 0 0 38px rgba(201, 164, 92, 0.018),
        0 0 0 58px rgba(201, 164, 92, 0.012);

}

.report-process-section::before {

    background-image:
        radial-gradient(
            var(--color-gold) 1px,
            transparent 1px
        );

}

.report-process-eyebrow {

    color:
        var(--color-gold);

}

.report-process-eyebrow::before {

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-gold)
        );

}

.report-process-eyebrow::after {

    background:
        linear-gradient(
            90deg,
            var(--color-gold),
            transparent
        );

}

.report-process-title span {

    background:
        var(--gold-gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color:
        var(--color-gold);

}

.report-process-intro strong {

    color:
        var(--color-gold);

}

.report-process-card:hover {

    border-color:
        rgba(201, 164, 92, 0.22);

    box-shadow:
        0 15px 32px rgba(155, 119, 55, 0.09);

}

.report-step-number {

    background:
        var(--theme-gradient);

}

.report-step-icon {

    color:
        var(--color-gold);

    border-color:
        rgba(201, 164, 92, 0.25);

    background:
        var(--color-gold-soft);

}

.report-step-divider {

    background:
        var(--color-gold);

}


/* ================================================================
   15. PROVEN RESULTS — LIGHT
================================================================ */

.wb-results-light-section {

    background:
        #ffffff;

}

.wb-results-light-dots {

    background-image:
        radial-gradient(
            var(--color-gold) 1px,
            transparent 1px
        );

}

.wb-results-light-eyebrow span {

    background:
        var(--color-gold);

}

.wb-results-light-eyebrow strong {

    color:
        var(--color-gold);

}

.wb-results-light-title em {

    color:
        var(--color-gold);

}

.wb-results-light-card {

    border-color:
        rgba(201, 164, 92, 0.16);

}

.wb-results-light-card:hover {

    border-color:
        rgba(201, 164, 92, 0.38);

}

.wb-results-light-card-icon {

    border-color:
        rgba(201, 164, 92, 0.25);

}

.wb-results-light-card-icon span {

    color:
        var(--color-gold);

    background:
        var(--color-gold-soft);

}

.wb-results-light-challenge b {

    color:
        var(--color-gold);

}

.wb-results-light-highlight-icon {

    background:
        var(--theme-gradient);

}

.wb-results-light-highlight strong {

    color:
        var(--color-gold-dark);

}

.wb-results-light-note > span {

    background:
        var(--color-gold);

}

.wb-results-light-bottom-icon {

    background:
        var(--theme-gradient);

}

.wb-results-light-bottom-intro p {

    color:
        var(--color-gold-dark);

}


/* ================================================================
   16. PROVEN IMPACT — DARK PANEL
================================================================ */

.wb-impact-section {

    background:
        #ffffff;

}

.wb-impact-section::after {

    background:
        var(--theme-gradient);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.18);

}

.wb-impact-icon {

    color:
        var(--color-gold-light);

}

.wb-impact-number {

    color:
        #ffffff;

}

.wb-impact-number span {

    color:
        var(--color-gold-light);

}


/* ================================================================
   17. PPC SECTION
================================================================ */

.wb-ppc-section {

    background:
        var(--theme-gradient);

    color:
        #ffffff;

}

.wb-ppc-decoration-left {

    border-color:
        rgba(201, 164, 92, 0.18);

    box-shadow:
        0 0 0 25px rgba(201, 164, 92, 0.025),
        0 0 0 50px rgba(201, 164, 92, 0.02);

}

.wb-ppc-decoration-right {

    background-image:
        radial-gradient(
            rgba(201, 164, 92, 0.65) 1px,
            transparent 1px
        );

}

.wb-ppc-eyebrow {

    border-color:
        rgba(201, 164, 92, 0.40);

    color:
        var(--color-gold-light);

    background:
        rgba(201, 164, 92, 0.10);

}

.wb-ppc-eyebrow span {

    color:
        var(--color-gold-light);

}

.wb-ppc-title span {

    color:
        var(--color-gold-light);

}

.wb-ppc-icon {

    color:
        var(--color-gold-light);

    border-color:
        rgba(201, 164, 92, 0.28);

    background:
        rgba(201, 164, 92, 0.08);

}

.wb-ppc-card {

    border-color:
        rgba(201, 164, 92, 0.18);

}

.wb-ppc-card:hover {

    border-color:
        rgba(201, 164, 92, 0.42);

}

.wb-ppc-card-icon {

    color:
        var(--color-gold);

    background:
        var(--color-gold-soft);

}


/* ================================================================
   18. PRACTICE AREAS — LIGHT
================================================================ */

.wb-practice-section {

    --wb-practice-theme:
        #C9A45C;

    --wb-practice-theme-dark:
        #9B7737;

    --wb-practice-theme-deep:
        #050505;

    --wb-practice-theme-light:
        #F7F0E2;

    --wb-practice-border:
        rgba(201, 164, 92, 0.16);

    --wb-practice-text:
        #151515;

    --wb-practice-muted:
        #666666;

    background:
        rgba(201, 164, 92, 0.06);

}

.wb-practice-dots {

    background-image:
        radial-gradient(
            rgba(201, 164, 92, 0.38) 1.3px,
            transparent 1.3px
        );

}

.wb-practice-glow-top {

    background:
        rgba(201, 164, 92, 0.07);

}

.wb-practice-glow-bottom {

    background:
        rgba(201, 164, 92, 0.06);

}

.wb-practice-eyebrow {

    color:
        var(--wb-practice-theme);

}

.wb-practice-eyebrow-line {

    background:
        var(--wb-practice-theme);

}

.wb-practice-eyebrow-icon {

    color:
        var(--wb-practice-theme);

}

.wb-practice-title span {

    color:
        var(--wb-practice-theme);

}

.wb-practice-card {

    border-color:
        var(--wb-practice-border);

}

.wb-practice-card::after {

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--color-gold),
            transparent
        );

}

.wb-practice-card:hover {

    border-color:
        rgba(201, 164, 92, 0.40);

    box-shadow:
        0 12px 28px rgba(155, 119, 55, 0.10);

}

.wb-practice-card > span:first-child {

    color:
        var(--wb-practice-theme);

}

.wb-practice-arrow {

    color:
        var(--wb-practice-theme);

}

.wb-practice-bottom-action {

    background: var(--gold-gradient);
       

    color:
        #ffffff;

        border-radius: 10px;
}

.wb-practice-bottom-action:hover {

    background:
        var(--cta-gradient);

    color:
        #050505;

}


/* ================================================================
   19. FAQ — LIGHT
================================================================ */

.wb-faq-section {

    background:
        #ffffff;

}

.wb-faq-decor-left {

    background-image:
        radial-gradient(
            var(--color-gold) 1px,
            transparent 1px
        );

}

.wb-faq-decor-right {

    border-color:
        rgba(201, 164, 92, 0.08);

    box-shadow:
        0 0 0 25px rgba(201, 164, 92, 0.018),
        0 0 0 55px rgba(201, 164, 92, 0.012),
        0 0 0 90px rgba(201, 164, 92, 0.008);

}

.wb-faq-eyebrow {

    color:
        var(--color-gold);

}

.wb-faq-eyebrow::before,
.wb-faq-eyebrow::after {

    background:
        var(--color-gold);

}

.wb-faq-title span {

    color:
        var(--color-gold);

}

.wb-faq-item {

    border-color:
        rgba(201, 164, 92, 0.16);

}

.wb-faq-item.wb-faq-open {

    border-color:
        rgba(201, 164, 92, 0.35);

}

.wb-faq-icon {

    color:
        var(--color-gold);

    border-color:
        rgba(201, 164, 92, 0.25);

    background:
        var(--color-gold-soft);

}

.wb-faq-plus {

    color:
        var(--color-gold);

}

.wb-faq-cta {

    border-color:
        rgba(201, 164, 92, 0.18);

    background:
        #ffffff;

}

.wb-faq-cta-icon {

    background:
        var(--theme-gradient);

}

.wb-faq-cta-button {

    background:
        var(--cta-gradient);

    color:
        #ffffff;

}

.wb-faq-cta-button:hover {

    background:
        var(--gold-gradient);

    color:
        #050505;

}


/* ================================================================
   20. FINAL CTA — LIGHT
================================================================ */

.wb-final-cta-section {

    background:
        #ffffff;

}

.wb-final-cta-container {

    border-color:
        rgba(201, 164, 92, 0.15);

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #FDFBF7 52%,
            #F7F0E2 100%
        );

    box-shadow:
        0 18px 55px rgba(0, 0, 0, 0.08);

}

.wb-final-cta-title span {

    color:
        var(--color-gold-dark);

}

.wb-final-cta-line {

    background:
        var(--gold-gradient);

}

.wb-final-cta-benefit-icon {

    background:
        var(--theme-gradient);

}

.wb-final-cta-card {

    border-color:
        rgba(201, 164, 92, 0.14);

}

.wb-final-cta-card-icon {

    background:
        var(--theme-gradient);

}

.wb-final-cta-card-top span {

    color:
        var(--color-gold-dark);

}

.center-flex {    display: flex;
    justify-content: center;    padding: 48px 0 0 0px;}
.wb-results-light-card-icon {font-size: 25px;
    color: #7d563b;}
.wb-final-cta-button {

       background: #c9a45c;

    color:
        #ffffff;

    border-color:
        var(--color-gold);

}

.wb-final-cta-button:hover {

    background:
        var(--gold-gradient) !important;

    color:
        #050505;

}


/* ================================================================
   21. FOOTER
================================================================ */

.wb-footer {

    --wb-footer-bg:
        #050505;

    --wb-footer-bg-soft:
        #111111;

    --wb-footer-border:
        rgba(255, 255, 255, 0.10);

    --wb-footer-theme:
        var(--theme-gradient);

    --wb-footer-accent:
        var(--color-gold);

    --wb-footer-accent-light:
        var(--color-gold-light);

    --wb-footer-white:
        #ffffff;

    --wb-footer-text:
        #d5d5d5;

    --wb-footer-muted:
        #8d8d8d;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(201, 164, 92, 0.10),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(155, 119, 55, 0.10),
            transparent 32%
        ),
        #050505;

}

.wb-footer-glow-left {

    background:
        var(--color-gold-dark);

}

.wb-footer-glow-right {

    background:
        var(--color-gold);

}

.wb-footer-logo-mark {

    border-color:
        rgba(201, 164, 92, 0.35);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.06),
            rgba(201,164,92,0.16)
        );

}

.wb-footer-main-cta {

    background:
        var(--cta-gradient);

    border-color:
        rgba(201, 164, 92, 0.35);

}

.wb-footer-main-cta:hover {

    border-color:
        var(--color-gold);

    box-shadow:
        0 15px 35px rgba(201, 164, 92, 0.20);

}

.wb-footer-column h3::after {

    background:
        var(--gold-gradient);

}

.wb-footer-column li a:hover {

    color:
        var(--color-gold-light);

}

.wb-footer-contact-icon {

    border-color:
        rgba(201, 164, 92, 0.30);

    color:
        var(--color-gold-light);

    background:
        rgba(201, 164, 92, 0.08);

}

.wb-footer-contact-item:hover strong {

    color:
        var(--color-gold-light);

}

.wb-footer-socials a:hover {

    border-color:
        var(--color-gold);

    background:
        var(--theme-gradient);

}

.wb-footer-trust-icon {

    border-color:
        rgba(201, 164, 92, 0.40);

    color:
        var(--color-gold-light);

    background:
        rgba(201, 164, 92, 0.08);

}

.wb-footer-bottom-links a:hover {

    color:
        var(--color-gold-light);

}


/* ================================================================
   22. GLOBAL CTA FALLBACK
   Any CTA using these common classes gets Gold + Black
================================================================ */

.btn-primary,
.btn-cta,
.cta-button,
.primary-button {

    background:
        var(--cta-gradient);

    color:
        #ffffff;

    border-color:
        var(--color-gold);

}

.btn-primary:hover,
.btn-cta:hover,
.cta-button:hover,
.primary-button:hover {

    background:
        var(--gold-gradient);

    color:
        #050505;

}


/* ================================================================
   23. GLOBAL GOLD UTILITY
================================================================ */

.text-gold,
.gold-text,
.highlight-gold {

    color:
        var(--color-gold);

}

.bg-gold {

    background:
        var(--color-gold);

}

.bg-theme {

    background:
        var(--theme-gradient);

}

.border-gold {

    border-color:
        var(--color-gold);

}


/* ================================================================
   24. GLOBAL FORM FOCUS
================================================================ */

input:focus,
textarea:focus,
select:focus {

    border-color:
        var(--color-gold);

    outline-color:
        var(--color-gold);

}


/* ================================================================
   25. GLOBAL SELECTION
================================================================ */

::selection {

    color:
        #050505;

    background:
        var(--color-gold);

}

.p0 {padding: 0!important;}

/* =========================================================
   PRIVACY & TERMS CONSENT POPUP
========================================================= */

.wb-consent-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;

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

    padding: 20px;

    background: rgba(0, 0, 0, 0.68);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);

    opacity: 0;
    visibility: hidden;

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


/* Popup visible */

.wb-consent-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   MODAL
========================================================= */

.wb-consent-modal {
    width: min(480px, 100%);

    padding: 34px 34px 30px;

    background: #ffffff;

    border: 1px solid rgba(184, 137, 52, 0.25);
    border-radius: 18px;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.28),
        0 8px 30px rgba(0, 0, 0, 0.12);

    transform: translateY(20px) scale(0.97);

    transition:
        transform 0.35s cubic-bezier(.2,.8,.2,1);

    position: relative;
}


.wb-consent-overlay.is-visible .wb-consent-modal {
    transform: translateY(0) scale(1);
}


/* =========================================================
   ICON
========================================================= */

.wb-consent-icon {
    width: 52px;
    height: 52px;

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

    margin-bottom: 18px;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #d5ae60,
        #9f7225
    );

    color: #ffffff;

    font-size: 23px;

    box-shadow:
        0 8px 20px rgba(164, 119, 38, 0.25);
}


/* =========================================================
   HEADING
========================================================= */

.wb-consent-modal h2 {
    margin: 0 0 10px;

    color: #111111;

    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;
}


/* =========================================================
   TEXT
========================================================= */

.wb-consent-text {
    margin: 0 0 22px;

    color: #555555;

    font-size: 15px;
    line-height: 1.65;
}


.wb-consent-text a,
.wb-consent-check a {
    color: #a97928;

    font-weight: 600;

    text-decoration: underline;
    text-underline-offset: 2px;

    transition: color 0.2s ease;
}


.wb-consent-text a:hover,
.wb-consent-check a:hover {
    color: #7f5819;
}


/* =========================================================
   CHECKBOX
========================================================= */

.wb-consent-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin-bottom: 22px;

    color: #333333;

    font-size: 14px;
    line-height: 1.55;

    cursor: pointer;
}


/* Hide native checkbox */

.wb-consent-check input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}


/* Custom checkbox */

.wb-consent-custom-check {
    width: 21px;
    height: 21px;

    flex: 0 0 21px;

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

    margin-top: 1px;

    border: 1.5px solid #c8a15b;
    border-radius: 5px;

    background: #ffffff;

    color: #ffffff;

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


.wb-consent-custom-check i {
    font-size: 14px;

    opacity: 0;

    transform: scale(0.5);

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


/* Checked */

.wb-consent-check input:checked + .wb-consent-custom-check {
    background: #b48635;
    border-color: #b48635;
}


.wb-consent-check input:checked + .wb-consent-custom-check i {
    opacity: 1;
    transform: scale(1);
}


/* =========================================================
   ACCEPT BUTTON
========================================================= */

.wb-consent-button {
    width: 100%;
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    padding: 13px 20px;

    border: 0;
    border-radius: 8px;

    background: linear-gradient(
        100deg,
        #b88937 0%,
        #d6ae61 48%,
        #a57729 100%
    );

    color: #ffffff;

    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(170, 124, 43, 0.22);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}


.wb-consent-button i {
    font-size: 18px;

    transition: transform 0.2s ease;
}


/* Disabled */

.wb-consent-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;

    box-shadow: none;
}


/* Enabled hover */

.wb-consent-button:not(:disabled):hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 24px rgba(170, 124, 43, 0.30);
}


.wb-consent-button:not(:disabled):hover i {
    transform: translateX(4px);
}


.wb-consent-button:not(:disabled):active {
    transform: translateY(0);
}


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

@media (max-width: 600px) {

    .wb-consent-overlay {
        padding: 16px;
    }

    .wb-consent-modal {
        padding: 28px 22px 24px;

        border-radius: 15px;
    }

    .wb-consent-icon {
        width: 46px;
        height: 46px;

        font-size: 20px;
    }

    .wb-consent-modal h2 {
        font-size: 23px;
    }

    .wb-consent-text {
        font-size: 14px;
    }

    .wb-consent-check {
        font-size: 13px;
    }

    .wb-consent-button {
        min-height: 50px;
    }
}


/* =========================================================
   FLOATING CHAT & CALL BUTTONS
========================================================= */

.wb-floating-actions {
    position: fixed;

    right: 22px;
    bottom: 22px;

    z-index: 9990;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}


/* =========================================================
   COMMON BUTTON
========================================================= */

.wb-floating-btn {
    width: 54px;
    height: 54px;

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

    border-radius: 50%;

    color: #ffffff;

    text-decoration: none;

    font-size: 21px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.22);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.wb-floating-btn:hover {
    transform: translateY(-4px) scale(1.04);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   CHAT
========================================================= */

.wb-floating-chat {
    background: linear-gradient(
        135deg,
        #c49a4a,
        #8f651f
    );
}


/* =========================================================
   CALL
========================================================= */

.wb-floating-call {
    background: #30389b;

    border: 1px solid rgba(255, 255, 255, 0.16);
}


.wb-floating-call:hover {
    background: #1d1d1d;
}


/* =========================================================
   SUBTLE PULSE
========================================================= */

.wb-floating-call::before {
    content: "";

    position: absolute;

    width: 54px;
    height: 54px;

    border-radius: 50%;

    border: 1px solid rgba(196, 154, 74, 0.45);

    animation: wbCallPulse 2.2s ease-out infinite;

    pointer-events: none;
}


@keyframes wbCallPulse {

    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    70% {
        transform: scale(1.45);
        opacity: 0;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }

}


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

@media (max-width: 600px) {

    .wb-floating-actions {
        right: 14px;
        bottom: 16px;

        gap: 9px;
    }

    .wb-floating-btn {
        width: 48px;
        height: 48px;

        font-size: 18px;
    }

    .wb-floating-call::before {
        width: 48px;
        height: 48px;
    }

}

/* ================================================================
   END — GOLD + BLACK GLOBAL THEME
================================================================ */





/* ================================================================
   AADI KIRAN SOLAR — FINAL BRAND OVERRIDES
   Keeps the existing layout; updates only branding, navigation,
   hero alignment and responsive behavior.
================================================================ */
:root{
    --color-black:#07130d;
    --color-white:#ffffff;
    --color-text:#17301f;
    --color-gray:#52645a;
    --solar-deep:#0d2f20;
    --solar-green:#2f6b43;
    --solar-green-2:#4d8b58;
    --solar-gold:#ff7204;
    --solar-gold-light:#f0cc72;
    --solar-cream:#f6f2e8;
}

/* Header — green/gold solar identity */
.site-header{
   background: linear-gradient(135deg, #FFFFFF 30%, #01356f 25%, #5d245b 100%);
}
.main-nav{gap:30px !important;margin-left:auto !important;margin-right:28px !important;}
.main-nav a{ font-size:14px !important;font-weight:600 !important;}
.main-nav a:hover{color:var(--solar-gold-light) !important;opacity:1 !important;}
.btn-header{
    min-width:205px !important;
    border:1px solid rgba(240,204,114,.7) !important;
    background:linear-gradient(135deg, #894307 0%, #fe9c03 58%, #9f6002 100% 100%) !important;
    color:#fff !important;
}
.btn-header i{color:var(--solar-gold-light) !important;}
.btn-header:hover{background:linear-gradient(135deg,#245d3b,#3f7d4b) !important;box-shadow:0 10px 30px rgba(214,169,77,.22) !important;}

/* Mobile menu */
.mobile-menu-toggle,.mobile-nav{display:none;}
.mobile-menu-toggle{
    width:44px;height:44px;border:1px solid rgba(240,204,114,.6);border-radius:9px;
    background:rgba(255,255,255,.06);color:#fff;font-size:24px;align-items:center;justify-content:center;
}
.mobile-nav{
    position:absolute;top:100%;left:0;right:0;padding:12px 20px 18px;
    background:#0d2f20;border-top:1px solid rgba(214,169,77,.35);
    box-shadow:0 18px 35px rgba(0,0,0,.25);z-index:9999;
}
.mobile-nav a{display:block;padding:13px 8px;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);font-weight:600;}
.mobile-nav a:hover{color:var(--solar-gold-light);}
.mobile-nav.is-open{display:block;}

/* Hero — preserve slider but move copy to left and add solar visual right */
.hero-content{
    align-items:flex-start !important;
    justify-content:center !important;
    text-align:left !important;
    padding-top:25px !important;
    padding-right:48% !important;
}
.hero-eyebrow{
    color:var(--solar-gold-light) !important;
    font-weight:700 !important;
    letter-spacing:1.4px !important;
    font-size:14px !important;
}
.hero-title{
    max-width:700px !important;
    font-size:clamp(38px,4.3vw,35px) !important;
    line-height:1.06 !important;
    letter-spacing:-1px !important;
    text-shadow:0 4px 25px rgba(0,0,0,.3);
}
.hero-title span{color:var(--solar-gold-light);}
.hero-description{
    max-width:650px !important;
    font-size:17px !important;
    line-height:1.65 !important;
    color:rgba(255,255,255,.88) !important;
    margin-bottom:25px !important;
}
.hero-content .btn-header{
    min-width:245px !important;height:54px !important;
    font-size:15px !important;
}
.hero-note{color:rgba(255,255,255,.82) !important;}
.hero-note i{color:var(--solar-gold-light) !important;}

.hero-solar-visual{
    position: absolute;
    z-index: 3;
    right: 23%;
    top: 58%;
    width: min(22vw, 466px);
    height: min(100%, 483px);
    transform: translateY(-50%);
    border-radius: 22px;
    overflow: hidden;
    
}

.three-slider {
    right: 15%;
    top: 58%;
    width: min(37vw, 466px) !important;
    height: min(100%, 483px);
}

.hero-solar-visual img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-solar-visual::after{
    content:"";position:absolute;inset:0;
    
}
.slide-overlay{background:linear-gradient(90deg,rgba(4,20,12,.82) 0%,rgba(7,29,18,.58) 48%,rgba(5,20,12,.18) 100%) !important;}
.slider-dot.active{background:var(--solar-gold-light) !important;}
.slider-dot:hover{background:rgba(240,204,114,.75) !important;}

/* Give key solar sections the same palette without changing their layout */
.services-section,.specialization-section,.marketing-section{--accent:var(--solar-green);}
.services-eyebrow,.marketing-eyebrow,.specialization-eyebrow{color:var(--solar-green) !important;}
.services-title span,.marketing-title span,.specialization-title span{color:var(--solar-gold) !important;}

/* Responsive header + hero */
@media (max-width:1200px){
    .main-nav{gap:18px !important;margin-right:16px !important;}
    .main-nav a{font-size:13px !important;}
    .btn-header{min-width:175px !important;font-size:13px !important;}
    .hero-content{padding-right:44% !important;}
    .hero-solar-visual{right:4%;width:39vw;}
}

@media (max-width:900px){
    .main-nav{display:none !important;}
    .mobile-menu-toggle{display:flex;}
    .header-inner{position:relative;}
    .header-inner > .btn-header{margin-left:auto;margin-right:8px;}
    .hero-content{padding-left:28px !important;padding-right:43% !important;}
    .hero-title{font-size:clamp(34px,5vw,52px) !important;}
    .hero-solar-visual{width:42vw;height:58%;right:2%;}
}

@media (max-width:767px){

    .site-header {

    background: linear-gradient(135deg, #FFFFFF 46%, #01356f 25%, #5d245b 100%);
   

}


    :root{--hero-height:650px;}
    .header-inner{min-height:76px !important;padding-left:15px !important;padding-right:15px !important;gap:8px !important;}
    .logo img{max-width:125px !important;}
    .header-inner > .btn-header{min-width:0 !important;width:auto !important;min-height:42px !important;padding:0 12px !important;font-size:11px !important;}
    .header-inner > .btn-header span{display:none;}
    .mobile-menu-toggle{width:42px;height:42px;flex-shrink:0;}
    .hero-content{
        height:auto !important;min-height:100%;padding:125px 22px 105px !important;
        justify-content:flex-start !important;align-items:flex-start !important;
        text-align:left !important;
    }
    .hero-eyebrow{font-size:11px !important;letter-spacing:1px !important;margin-bottom:12px !important;}
    .hero-title{font-size:clamp(32px,9.5vw,46px) !important;line-height:1.08 !important;margin-bottom:14px !important;}
    .hero-description{font-size:14px !important;line-height:1.55 !important;max-width:390px !important;margin-bottom:18px !important;}
    .hero-content .btn-header{min-width:205px !important;height:49px !important;font-size:13px !important;}
    .hero-note{font-size:12px !important;margin-top:9px !important;}
    .hero-solar-visual{
        top:auto;bottom:0px;right:22px;width:170px;height:auto;transform:none; 
        
    }

  
    .slide-overlay{background:linear-gradient(180deg,rgba(4,20,12,.84) 0%,rgba(7,29,18,.72) 54%,rgba(5,20,12,.55) 100%) !important;}
    .slider-dots{bottom:10px !important;}
}

@media (max-width:480px){
    .header-inner > .btn-header{padding:0 9px !important;font-size:10px !important;}
    .logo img{max-width:83px !important;}
    .hero-content{padding-top:112px !important;padding-left:18px !important;padding-right:18px !important;}
    .hero-title{font-size:34px !important;}
    .hero-description{max-width:340px !important;}
    
    .mobile-nav{padding-left:14px;padding-right:14px;}
}

.solar-home-anchor{display:block;position:relative;top:-96px;height:0;visibility:hidden;}


/* =========================================================
   AADI KIRAN - ABOUT / STORY SECTION
   ========================================================= */

.aadi-about-story {
    width: 100%;
    background: #ffffff;
    overflow: hidden;
}


/* MAIN CONTENT */
.pb-0 {padding-bottom: 0px!important;}

.aadi-about-story-inner {
    width: min(1280px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);

    gap: 65px;

    padding: 0px 45px 35px;
}


/* LEFT ABOUT US */

.aadi-about-label {
    padding-top: 8px;
}

.aadi-about-label span {
    display: block;

    font-size: 18px;
    font-weight: 700;
    color: #10271c;
}


/* RIGHT AREA */

.aadi-about-main {
    position: relative;
    min-width: 0;
}


/* QUOTE */

.aadi-quote-mark {
    position: absolute;

    left: -55px;
    top: -18px;

    font-family: Georgia, serif;
    font-size: 95px;
    line-height: 1;

    color: #ee8f03;

    z-index: 0;
}


/* CONTENT */

.aadi-about-content {
    position: relative;
    z-index: 1;

    max-width: 1020px;
}


.aadi-about-content h2 {
       margin: 0;
    font-size: clamp(18px, 2vw, 20px);
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: 0;
    color: #101010;
}


.aadi-about-content h2 span {
    color: var(--solar-gold) !important;
}


.aadi-about-content p {
    max-width: 850px;

    margin: 20px 0 0;

    font-size: 16px;
    line-height: 1.75;

    color: #6d6d6d;
}


/* =========================================================
   FUN FACT RIBBON
   ========================================================= */

.aadi-funfacts {
    width: 100%;

    min-height: 105px;

     background: #f4d83f;

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

    padding: 18px 35px;

    box-sizing: border-box;
}


/* FACT */

.aadi-fact {
     display: flex;
    align-items: left;
    gap: 15px;
    white-space: nowrap;
    flex-direction: column;
}


.aadi-fact strong {
    font-size: 34px;
    line-height: 1;

    font-weight: 800;

    color: #10271c;
}


.aadi-fact span {
    font-size: 16px;
    line-height: 1.3;

    font-weight: 600;

    color: #10271c;
}


/* STAR / DIVIDER */

.aadi-fact-icon {
    margin: 0 32px;

    font-size: 23px;

    color: #10271c;

    line-height: 1;
}


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

@media (max-width: 1000px) {

    .aadi-about-story-inner {
        grid-template-columns: 130px minmax(0, 1fr);

        gap: 35px;

        padding: 0px 30px 60px;
    }

    .aadi-about-content h2 {
        font-size: 32px;
    }

    .aadi-quote-mark {
        left: -35px;
        font-size: 75px;
    }

    .aadi-fact-icon {
        margin: 0 18px;
    }

    .aadi-fact strong {
        font-size: 27px;
    }

    .aadi-fact span {
        font-size: 14px;
    }
}


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

@media (max-width: 767px) {

    .aadi-about-story-inner {
        display: block;

        padding: 55px 22px 50px;
    }


    .aadi-about-label {
        padding: 0;
        margin-bottom: 30px;
    }


    .aadi-about-label span {
        font-size: 16px;
    }


    .aadi-about-main {
        padding-left: 0;
    }


    .aadi-quote-mark {
        position: relative;

        left: auto;
        top: auto;

        height: 45px;

        font-size: 65px;

        margin-bottom: 5px;
    }


    .aadi-about-content h2 {
        font-size: 27px;
        line-height: 1.3;

        letter-spacing: -.6px;
    }


    .aadi-about-content p {
        font-size: 15px;
        line-height: 1.65;

        margin-top: 20px;
    }


    /* MOBILE FUN FACTS */

    .aadi-funfacts {
        display: grid;

        grid-template-columns: 1fr 1fr;

        padding: 0;
    }


    .aadi-fact {
        justify-content: center;

        flex-direction: column;

        text-align: center;

        gap: 7px;

        padding: 20px 10px;

        min-height: 90px;

        box-sizing: border-box;
    }


    .aadi-fact strong {
        font-size: 25px;
    }


    .aadi-fact span {
        font-size: 12px;
    }


    .aadi-fact-icon {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .aadi-about-story-inner {
        padding: 45px 18px;
    }

    .aadi-about-content h2 {
        font-size: 24px;
    }

    .aadi-about-content p {
        font-size: 14px;
    }

}


/* =========================================
   WHY CHOOSE AADI KIRAN
========================================= */

.ak-why-ref-section {
    position: relative;
    overflow: hidden;
    padding: 80px 0 80px;
    background: #fff;
    color: #fff;
}

.ak-why-ref-container {
    width: min(1280px, calc(100% - 70px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 85px;

    align-items: center;
}


/* =========================================
   LEFT VISUAL
========================================= */

.ak-why-ref-visual {
    position: relative;
    min-height: 600px;
}

.ak-main-image {
    position: absolute;
    top: 0;
    left: 0;

    width: 76%;
    height: 520px;

    overflow: hidden;
    border-radius: 16px;
}

.ak-main-image img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.ak-main-image:hover img {
    transform: scale(1.04);
}


/* OVERLAPPING IMAGE */

.ak-overlap-image {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 51%;
    height: 340px;

    overflow: hidden;

    border: 7px solid #fff;
    border-radius: 16px;

    z-index: 3;
}

.ak-overlap-image img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
}


/* STAT BOX */

.ak-stat-box {
    position: absolute;

    left: 35px;
    bottom: 55px;

    width: 210px;
    min-height: 170px;

    padding: 25px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background: rgb(46 44 101 / 67%);

    border-radius: 8px;

    z-index: 5;

    backdrop-filter: blur(8px);
}

.ak-stat-box strong {
    display: block;

    margin-bottom: 5px;

    color: #f5d74c;

    font-size: 48px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: -2px;
}

.ak-stat-box span {
    color: rgba(255,255,255,.86);

    font-size: 15px;
    line-height: 1.5;
}


/* =========================================
   RIGHT CONTENT
========================================= */

.ak-why-ref-content {
    padding-top: 5px;
}

.ak-ref-label {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 22px;

    color: #23653e;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ak-ref-label::before {
    content: "";

    width: 28px;
    height: 2px;

    background: #f5d74c;
}


.ak-why-ref-content > h2 {
       margin: 0 0 45px;
    color: #000;
    font-size: clamp(30px, 2.2vw, 35px);
    line-height: 1.02;
    font-weight: 700;
    letter-spacing: 0;
}

.ak-why-ref-content > h2 span {
    color: var(--solar-gold) !important;
}


/* =========================================
   BENEFITS GRID
========================================= */

.ak-benefits-grid {
    display: grid;

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

    column-gap: 55px;
    row-gap: 38px;
}

.ak-benefit {
    position: relative;
}

.ak-benefit h3 {
    margin: 0 0 12px;

    color: #26352d;

    font-size: 21px;
    line-height: 1.3;

    font-weight: 700;
}

.ak-benefit p {
    max-width: 270px;

    margin: 0;

    color:rgb(0 0 0 / 70%);

    font-size: 15px;
    line-height: 1.7;
}


/* SMALL GOLD LINE */

.ak-benefit::before {
    content: "";

    display: block;

    width: 28px;
    height: 2px;

    margin-bottom: 14px;

    background: #f5d74c;
}


/* =========================================
   HOVER
========================================= */

.ak-benefit {
    transition: transform .3s ease;
}

.ak-benefit:hover {
    transform: translateY(-4px);
}

.ak-benefit:hover h3 {
    color: #000;
}


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

@media (max-width: 1050px) {

    .ak-why-ref-container {
        grid-template-columns: 1fr;

        gap: 70px;
    }

    .ak-why-ref-visual {
        min-height: 580px;

        max-width: 700px;
        width: 100%;

        margin: 0 auto;
    }

    .ak-why-ref-content {
        max-width: 850px;
        margin: 0 auto;
    }

    .ak-why-ref-content > h2 {
        font-size: 56px;
    }

}


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

@media (max-width: 650px) {

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

    .ak-why-ref-container {
        width: calc(100% - 30px);

        gap: 55px;
    }


    /* IMAGE */

    .ak-why-ref-visual {
        min-height: 430px;
    }

    .ak-main-image {
        width: 88%;
        height: 350px;

        border-radius: 12px;
    }

    .ak-overlap-image {
        width: 52%;
        height: 210px;

        border-width: 5px;
        border-radius: 12px;
    }

    .ak-stat-box {
        left: 15px;
        bottom: 20px;

        width: 145px;
        min-height: 120px;

        padding: 18px;
    }

    .ak-stat-box strong {
        font-size: 34px;
    }

    .ak-stat-box span {
        font-size: 12px;
    }


    /* CONTENT */

    .ak-ref-label {
        font-size: 11px;
    }

    .ak-why-ref-content > h2 {
        margin-bottom: 38px;

        font-size: 43px;
        letter-spacing: -1.5px;
    }


    /* BENEFITS */

    .ak-benefits-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .ak-benefit p {
        max-width: 100%;

        font-size: 14px;
    }

    .ak-benefit h3 {
        font-size: 19px;
    }

}

/* =========================================
   AADI KIRAN SERVICES
========================================= */

.ak-services-section {
    position: relative;
    overflow: hidden;

    padding:80px 0 80px;

    background: #f7f8f5;
}

.ak-services-container {
    width: min(1280px, calc(100% - 70px));
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.ak-services-heading {
    max-width: 760px;
    margin: 0 auto 55px;

    text-align: center;
}

.ak-services-label {
    display: inline-block;

    margin-bottom: 18px;

    color: #2f6b43;

    font-size: 13px;
    font-weight: 800;

    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.ak-services-heading h2 {
    margin: 0 0 22px;

    color: #101b15;

    font-size: clamp(35px, 2.5vw, 35px);
    line-height: 1.04;

    font-weight: 750;

    letter-spacing:0;
}

.ak-services-heading h2 span {
    color: var(--solar-gold) !important;
}

.ak-services-heading p {
    max-width: 650px;

    margin: 0 auto;

    color: #69726c;

    font-size: 16px;
    line-height: 1.7;
}


/* =========================================
   HORIZONTAL SLIDER
========================================= */

.ak-services-slider {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;

    padding: 5px 2px 25px;

    scrollbar-width: thin;
    scrollbar-color: #d6a94d #e8ebe5;
}


/* CHROME / EDGE */

.ak-services-slider::-webkit-scrollbar {
    height: 7px;
}

.ak-services-slider::-webkit-scrollbar-track {
    background: #e8ebe5;
    border-radius: 20px;
}

.ak-services-slider::-webkit-scrollbar-thumb {
    background: #d6a94d;
    border-radius: 20px;
}

.ak-services-slider::-webkit-scrollbar-thumb:hover {
    background: #b88d32;
}


/* =========================================
   TRACK
========================================= */

.ak-services-track {
    display: flex;

    gap: 20px;

    width: max-content;
}


/* =========================================
   SERVICE CARD
========================================= */

.ak-service-card {
    flex: 0 0 calc((100vw - 150px) / 3.15);

    max-width: 395px;

    scroll-snap-align: start;

    background: transparent;
}


/* =========================================
   IMAGE
========================================= */

.ak-service-image {
    position: relative;

    width: 100%;
    height: 350px;

    overflow: hidden;

    border-radius: 15px;
}

.ak-service-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}

.ak-service-card:hover .ak-service-image img {
    transform: scale(1.05);
}


/* =========================================
   ARROW
========================================= */

.ak-service-arrow {
    position: absolute;

    top: 16px;
    right: 16px;

    width: 52px;
    height: 52px;

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

    color: #15251b;
    background: #f5d74c;

    border-radius: 50%;

    text-decoration: none;

    font-size: 19px;

    transition: all .3s ease;
}

.ak-service-arrow i {
    transition: transform .3s ease;
}

.ak-service-card:hover .ak-service-arrow {
    background: #fff;
}

.ak-service-card:hover .ak-service-arrow i {
    transform: translate(3px, -3px);
}


/* =========================================
   CONTENT BOX
========================================= */

.ak-service-content {
    position: relative;

    width: calc(100% - 38px);

    min-height: 160px;

    margin: -70px auto 0;

    padding: 25px 27px 24px;

    background: #fff;

    border-radius: 13px;

    box-shadow: 0 12px 35px rgba(20, 45, 30, .08);

    z-index: 3;
}

.ak-service-number {
    display: block;

    margin-bottom: 8px;

    color: #d6a94d;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 1.5px;
}

.ak-service-content h3 {
    margin: 0 0 10px;

    color: #132119;

    font-size: 21px;
    line-height: 1.25;

    font-weight: 750;
}

.ak-service-content p {
    margin: 0;

    color: #000;

    font-size: 14px;
    line-height: 1.65;
}


/* =========================================
   BOTTOM
========================================= */

.ak-services-bottom {
    display: flex;

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

    margin-top: 35px;
}


/* SCROLL INDICATOR */

.ak-services-scroll-info {
    display: flex;
    align-items: center;
    gap: 13px;

    color: #69726c;

    font-size: 12px;
    font-weight: 700;
}

.ak-scroll-line {
    position: relative;

    width: 130px;
    height: 2px;

    background: #d8ddd8;
}

.ak-scroll-line span {
    position: absolute;

    left: 0;
    top: -2px;

    width: 42px;
    height: 6px;

    background: #d6a94d;

    border-radius: 10px;
}


/* BUTTON */

.ak-services-btn {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    padding: 14px 22px;

    color: #fff;
    background: #123525;

    border: 1px solid #123525;
    border-radius: 7px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    transition: all .3s ease;
}

.ak-services-btn:hover {
    color: #123525;
    background: #f5d74c;
    border-color: #f5d74c;
}

.ak-services-btn i {
    transition: transform .3s ease;
}

.ak-services-btn:hover i {
    transform: translate(3px, -3px);
}


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

@media (max-width: 1050px) {

    .ak-services-container {
        width: calc(100% - 40px);
    }

    .ak-service-card {
        flex-basis: 410px;
    }

}


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

@media (max-width: 650px) {

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

    .ak-services-container {
        width: calc(100% - 30px);
    }

    .ak-services-heading {
        margin-bottom: 38px;
    }

    .ak-services-heading h2 {
        font-size: 40px;
        letter-spacing: -1.5px;
    }

    .ak-services-heading p {
        font-size: 14px;
    }

    .ak-services-track {
        gap: 15px;
    }

    .ak-service-card {
        flex-basis: calc(100vw - 45px);
        max-width: none;
    }

    .ak-service-image {
        height: 300px;
        border-radius: 12px;
    }

    .ak-service-arrow {
        width: 46px;
        height: 46px;
    }

    .ak-service-content {
        width: calc(100% - 25px);

        margin-top: -55px;

        padding: 22px;
    }

    .ak-service-content h3 {
        font-size: 19px;
    }

    .ak-service-content p {
        font-size: 13.5px;
    }

    .ak-services-bottom {
        margin-top: 25px;
    }

    .ak-services-btn {
        padding: 12px 17px;
        font-size: 13px;
    }

    .ak-scroll-line {
        width: 80px;
    }

}

/* ==========================================
   AADI KIRAN - E MOBILITY
========================================== */

.ak-emobility {
    position: relative;
    overflow: hidden;
    padding: 70px 0 55px;
    background: url(../images/ev_bg.webp);
    font-family: inherit;
    background-size: cover;
}


/* SOFT BACKGROUND CIRCLES */

.ak-emobility::before {
    content: "";
    position: absolute;
    width: 470px;
    height: 470px;
    left: -250px;
    bottom: -260px;
    border-radius: 50%;
    background: #dcefe3;
    z-index: 0;
}

.ak-emobility::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    right: -140px;
    top: -120px;
    border-radius: 50%;
    background: #e4f2e8;
    z-index: 0;
}


/* MAIN WRAPPER */

.ak-emobility-wrapper {
    width: min(1420px, 90%);
    margin: auto;

    display: grid;
    grid-template-columns: 48% 52%;
    align-items: center;

    position: relative;
    z-index: 2;
}


/* ==========================================
   LEFT SIDE
========================================== */

.ak-emobility-left {
    position: relative;
    z-index: 5;
    padding: 20px 30px 35px 40px;
}


/* EYEBROW */

.ak-emobility-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;

    color: #23653e;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;

    margin-bottom: 25px;
}

.ak-emobility-eyebrow span {
    display: block;
    width: 55px;
    height: 3px;
    background: #e5bd28;
}


/* HEADING */

.ak-emobility-left h2 {
max-width: 780px;
    margin: 0 0 25px;
    color: #071218;
    font-size: clamp(35px, 3.3vw, 35px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: 0;
}

.ak-emobility-left h2 strong {
    display: block;
    color: var(--solar-gold) !important;
    font-weight: 700;
}


/* DESCRIPTION */

.ak-emobility-description {
    max-width: 690px;

    margin: 0 0 32px;

    color: #46544d;
    font-size: 16px;
    line-height: 1.55;
}


/* ==========================================
   FEATURE ITEMS
========================================== */

.ak-emobility-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;

    max-width: 730px;
    margin-bottom: 32px;
}

.ak-emobility-feature {
    text-align: center;
}

.ak-feature-icon {
    width: 72px;
    height: 72px;

    margin: 0 auto 10px;

    border-radius: 22px;

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

    background: #e4f2e8;

    color: #126337;
}

.ak-feature-icon svg {
    width: 37px;
    height: 37px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ak-feature-icon span {
    font-size: 34px;
    font-weight: 600;
}

.ak-emobility-feature h4 {
    margin: 0;

    color: #14231c;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}


/* ==========================================
   COMING SOON
========================================== */

.ak-coming-soon {
width: 283px;
    max-width: 100%;
    min-height: 60px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffdc45;
    border-radius: 15px;
    box-sizing: border-box;
}

.ak-coming-calendar {
    width: 48px;
    height: 48px;

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

    flex-shrink: 0;
}

.ak-coming-calendar svg {
    width: 35px;
    height: 35px;

    fill: none;
    stroke: #111;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ak-coming-text strong {
    display: block;

    color: #111;
    font-size: 16px;
    line-height: 1.2;

    margin-bottom: 3px;
}

.ak-coming-text span {
    display: block;

    color: #58614d;
    font-size: 14px;
}

.ak-coming-arrow {
    margin-left: auto;

    color: #111;
    font-size: 32px;
    line-height: 1;
}


/* ==========================================
   RIGHT SIDE IMAGE
========================================== */

.ak-emobility-right {
    position: relative;

    min-height: 590px;

    display: flex;
    align-items: center;

    margin-left: -35px;
}

.ak-emobility-photo {
    width: 100%;
    height: 600px;

    overflow: hidden;

    position: relative;

    border-radius: 0 0 0 0;
}

.ak-emobility-photo::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;

    width: 30%;

    background: linear-gradient(
        90deg,
        #f1f8f4 0%,
        rgba(241,248,244,0.75) 25%,
        transparent 100%
    );

    z-index: 2;
}

.ak-emobility-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: scale(1.02);
}


/* ==========================================
   BOTTOM BAR
========================================== */

.ak-emobility-bottom {
    width: min(1380px, 85%);

    margin: -5px auto 0;

    min-height: 115px;

    padding: 15px 28px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;

    background: rgba(255,255,255,0.94);

    border-radius: 24px;

    box-shadow: 0 15px 40px rgba(31, 73, 47, 0.08);

    position: relative;
    z-index: 10;

    box-sizing: border-box;
}


/* BOTTOM ITEM */

.ak-bottom-item {
    min-height: 60px;

    padding: 0 25px;

    display: flex;
    align-items: center;
    gap: 15px;

    border-right: 1px solid #cddbd2;
}

.ak-bottom-item:last-child {
    border-right: none;
}

.ak-bottom-icon {
    width: 45px;
    min-width: 45px;

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

    color: #126337;

    font-size: 32px;
}

.ak-bottom-icon svg {
    width: 39px;
    height: 39px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ak-bottom-item strong {
    display: block;

    color: #18221d;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}


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

@media (max-width: 1100px) {

    .ak-emobility-wrapper {
        grid-template-columns: 1fr;
    }

    .ak-emobility-left {
        padding: 20px 0 40px;
    }

    .ak-emobility-right {
        margin-left: 0;
        min-height: 500px;
    }

    .ak-emobility-photo {
        height: 500px;
    }

    .ak-emobility-bottom {
        margin-top: 30px;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .ak-bottom-item {
        border-right: none;
        border-bottom: 1px solid #d9e5dd;
        padding: 15px;
    }

    .ak-bottom-item:last-child {
        border-bottom: none;
    }
}


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

@media (max-width: 767px) {

    .ak-emobility {
        padding: 55px 0 35px;
    }

    .ak-emobility-wrapper {
        width: 90%;
    }

    .ak-emobility-eyebrow {
        font-size: 12px;
        margin-bottom: 18px;
    }

    .ak-emobility-eyebrow span {
        width: 38px;
    }

    .ak-emobility-left h2 {
        font-size: 40px;
        line-height: 1.05;
        letter-spacing: -1.5px;
    }

    .ak-emobility-description {
        font-size: 15px;
        line-height: 1.6;
    }

    .ak-emobility-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px 8px;
    }

    .ak-feature-icon {
        width: 60px;
        height: 60px;
        border-radius: 18px;
    }

    .ak-feature-icon svg {
        width: 31px;
        height: 31px;
    }

    .ak-feature-icon span {
        font-size: 28px;
    }

    .ak-emobility-feature h4 {
        font-size: 12px;
    }

    .ak-coming-soon {
        width: 100%;
    }

    .ak-emobility-right {
        min-height: 360px;
    }

    .ak-emobility-photo {
        height: 360px;
    }

    .ak-emobility-photo::before {
        width: 35%;
    }

    .ak-emobility-bottom {
        width: 90%;
        grid-template-columns: 1fr;
        padding: 10px 18px;
        border-radius: 18px;
    }

    .ak-bottom-item {
        min-height: 58px;
        padding: 10px 5px;
    }

    .ak-bottom-item strong {
        font-size: 13px;
    }

    .ak-bottom-icon {
        font-size: 27px;
    }

}

/* =========================================================
   AADI KIRAN ENERGY CTA
========================================================= */

.ak-energy-cta {
    width: 100%;
    padding: 70px 20px;
    background: #f4f8f4;
    overflow: hidden;
}


.ak-energy-wrap {
    width: 100%;
    max-width: 1470px;
    margin: 0 auto;
}


.ak-energy-card {
    position: relative;
    min-height: 620px;

    display: flex;
    align-items: stretch;

    overflow: hidden;

    border-radius: 32px;

    background:
        linear-gradient(
            105deg,
            #fffdf5 0%,
            #ffffff 48%,
            #f4f8f3 100%
        );

    box-shadow:
        0 25px 70px rgba(13, 47, 32, 0.10);
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.ak-energy-content {
    position: relative;
    z-index: 5;

    width: 52%;

    padding:
        82px
        45px
        80px
        78px;
}


.ak-energy-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 24px;

    color: #165b3a;

    font-size: 16px;
    font-weight: 800;

    letter-spacing: 1.3px;
    text-transform: uppercase;
}


.ak-energy-eyebrow span {
    display: inline-block;

    width: 52px;
    height: 3px;

    background: #e4b62c;

    border-radius: 20px;
}


/* =========================================================
   HEADING
========================================================= */

.ak-energy-title {
    max-width: 620px;

    margin: 0;

    color: #082f20;

    font-size: clamp(52px, 5vw, 78px);

    line-height: 0.98;

    font-weight: 800;

    letter-spacing: -3px;
}


.ak-energy-title strong {
    display: block;

    color: #34794f;

    font-weight: 800;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.ak-energy-description {
    max-width: 680px;

    margin:
        34px 0
        38px;

    color: #4c5d55;

    font-size: 18px;

    line-height: 1.75;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.ak-energy-cta-row {
    display: flex;
    align-items: center;
}


.ak-energy-main-btn {
    display: flex;
    align-items: center;

    width: 100%;
    max-width: 520px;

    min-height: 86px;

    padding: 10px 12px 10px 12px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #f9c900,
            #f1a900
        );

    color: #102f20;

    text-decoration: none;

    box-shadow:
        0 14px 30px rgba(218, 167, 20, 0.25);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.ak-energy-main-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 38px rgba(218, 167, 20, 0.35);
}


/* CTA Icon */

.ak-energy-btn-icon {
    width: 62px;
    height: 62px;

    flex: 0 0 62px;

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

    border-radius: 50%;

    background: #ffffff;

    color: #17623e;

    font-size: 25px;
}


/* CTA Text */

.ak-energy-btn-text {
    display: flex;
    flex-direction: column;

    padding-left: 18px;

    flex: 1;
}


.ak-energy-btn-text strong {
    color: #102f20;

    font-size: 20px;
    line-height: 1.25;

    font-weight: 800;
}


.ak-energy-btn-text small {
    margin-top: 5px;

    color: #40533f;

    font-size: 14px;

    font-weight: 500;
}


/* CTA Arrow */

.ak-energy-btn-arrow {
    width: 55px;
    height: 55px;

    flex: 0 0 55px;

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

    border-radius: 50%;

    background: #ffffff;

    color: #123b27;

    font-size: 27px;

    transition:
        transform 0.3s ease;
}


.ak-energy-main-btn:hover .ak-energy-btn-arrow {
    transform: translateX(4px);
}


/* =========================================================
   TRUST POINTS
========================================================= */

.ak-energy-points {
    display: flex;
    align-items: center;

    margin-top: 28px;

    gap: 16px;
}


.ak-energy-point {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #244b38;

    font-size: 14px;
    font-weight: 700;

    white-space: nowrap;
}


.ak-energy-point i {
    color: #337d50;

    font-size: 19px;
}


.ak-energy-divider {
    width: 1px;
    height: 25px;

    background: #c9d5cc;
}


/* =========================================================
   RIGHT IMAGE AREA
========================================================= */

.ak-energy-visual {
    position: relative;

    width: 48%;

    min-height: 620px;

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

    overflow: hidden;
}


/* Soft green image background */

.ak-energy-visual::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 60% 35%,
            rgba(219, 238, 221, 0.95),
            transparent 48%
        );

    z-index: 0;
}


/* Image */

.ak-energy-image-wrap {
    position: absolute;

    right: 20px;
    bottom: 0;

    width: 94%;
    height: 100%;

    z-index: 2;

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


.ak-energy-person {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    mix-blend-mode: multiply;
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.ak-energy-dots {
    position: absolute;

    width: 105px;
    height: 105px;

    z-index: 6;

    opacity: 0.65;

    background-image:
        radial-gradient(
            #dfb849 2px,
            transparent 2px
        );

    background-size: 16px 16px;
}


.ak-energy-dots-left {
    top: 36px;
    left: 34px;
}


.ak-energy-dots-right {
    top: 40px;
    right: 35px;
}


/* =========================================================
   BOTTOM ANGLED SHAPE
========================================================= */

.ak-energy-bottom-shape {
    position: absolute;

    left: 0;
    bottom: -1px;

    width: 74%;

    height: 45px;

    z-index: 7;

    background: #f2c500;

    clip-path:
        polygon(
            0 100%,
            0 70%,
            65% 0,
            100% 0,
            94% 100%
        );
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .ak-energy-content {
        padding:
            65px
            30px
            70px
            55px;
    }

    .ak-energy-title {
        font-size: 55px;
    }

    .ak-energy-description {
        font-size: 16px;
    }

    .ak-energy-point {
        font-size: 12px;
    }

}


@media (max-width: 850px) {

    .ak-energy-cta {
        padding: 40px 15px;
    }

    .ak-energy-card {
        flex-direction: column;

        min-height: auto;

        border-radius: 24px;
    }

    .ak-energy-content {
        width: 100%;

        padding:
            55px
            30px
            35px;
    }

    .ak-energy-title {
        max-width: 650px;

        font-size: clamp(45px, 9vw, 65px);
    }

    .ak-energy-description {
        max-width: 650px;
    }

    .ak-energy-visual {
        width: 100%;

        height: 470px;

        min-height: 470px;
    }

    .ak-energy-image-wrap {
        width: 100%;

        right: 0;
    }

    .ak-energy-person {
        object-position: center top;
    }

    .ak-energy-dots-right {
        top: auto;
        bottom: 25px;
        right: 25px;
    }

    .ak-energy-bottom-shape {
        width: 100%;
    }

}


@media (max-width: 600px) {

    .ak-energy-content {
        padding:
            42px
            22px
            30px;
    }

    .ak-energy-eyebrow {
        font-size: 12px;

        letter-spacing: 0.8px;
    }

    .ak-energy-eyebrow span {
        width: 35px;
    }

    .ak-energy-title {
        font-size: 46px;

        letter-spacing: -2px;
    }

    .ak-energy-description {
        margin: 25px 0 28px;

        font-size: 15px;

        line-height: 1.65;
    }

    .ak-energy-main-btn {
        min-height: 74px;

        border-radius: 15px;
    }

    .ak-energy-btn-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;

        font-size: 20px;
    }

    .ak-energy-btn-text {
        padding-left: 11px;
    }

    .ak-energy-btn-text strong {
        font-size: 15px;
    }

    .ak-energy-btn-text small {
        font-size: 11px;
    }

    .ak-energy-btn-arrow {
        width: 44px;
        height: 44px;

        flex-basis: 44px;

        font-size: 21px;
    }

    .ak-energy-points {
        flex-wrap: wrap;

        gap: 10px;
    }

    .ak-energy-divider {
        display: none;
    }

    .ak-energy-point {
        font-size: 12px;
    }

    .ak-energy-visual {
        height: 380px;
        min-height: 380px;
    }

    .ak-energy-dots {
        width: 70px;
        height: 70px;

        background-size: 12px 12px;
    }

}


 /* =========================================================
   AADI KIRAN — FINAL CTA
   Solar + E-Mobility
========================================================= */

.ak-final-cta {
    width: 100%;
    padding: 80px 5%;
    background: #ffffff;
}

.ak-final-cta-card {
    position: relative;
    max-width: 1420px;
    min-height: 470px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 43% 57%;
    align-items: center;

    overflow: hidden;
    border-radius: 22px;

    background:
    radial-gradient(circle at 85% 20%, rgb(71 40 96), transparent 32%), radial-gradient(circle at 15% 90%, rgba(14, 63, 115, 0.35), transparent 38%), linear-gradient(110deg, #02356f 0%, #17306a 50%, #2a2d65 100%);

    box-shadow:
        0 25px 60px rgba(13, 47, 32, 0.16);

    border: 1px solid rgba(214, 169, 77, 0.15);
}


/* =========================================================
   DECORATIVE DOTS
========================================================= */

.ak-cta-dots {
    position: absolute;
    width: 115px;
    height: 85px;

    background-image: radial-gradient(
        rgba(214, 169, 77, 0.55) 1.5px,
        transparent 1.5px
    );

    background-size: 11px 11px;

    opacity: 0.65;
    pointer-events: none;
}

.ak-cta-dots-left {
    top: 28px;
    left: 25px;
}

.ak-cta-dots-right {
    right: 25px;
    bottom: 25px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.ak-cta-content {
    position: relative;
    z-index: 5;

    padding: 65px 30px 65px 58px;
}

.ak-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 20px;

    color: #ffb803;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ak-cta-eyebrow::before {
    content: "";
    width: 38px;
    height: 2px;
    background: #f3c75f;
}


.ak-cta-title {
    max-width: 520px;
    margin: 0 0 22px;

    color: #ffffff;

    font-size: clamp(30px, 2vw, 35px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: 0;
}

.ak-cta-title span {
    color: #d6a94d;
}


.ak-cta-description {
    max-width: 540px;

    margin: 0 0 30px;

    color: rgba(255, 255, 255, 0.76);

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.ak-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 28px;

    min-width: 330px;

    padding: 13px 14px 13px 20px;

    text-decoration: none;

    border-radius: 7px;

    background: linear-gradient(
        135deg,
        #b77a13,
        #e4a82d 55%,
        #c48718
    );

    color: #ffffff;

    box-shadow:
        0 10px 25px rgba(214, 169, 77, 0.20);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.ak-cta-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(214, 169, 77, 0.32);
}


.ak-cta-button-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ak-cta-button-text strong {
    font-size: 16px;
    line-height: 1.2;
}

.ak-cta-button-text small {
    font-size: 13px;
    opacity: 0.92;
}


.ak-cta-button-arrow {
    margin-left: auto;

    width: 40px;
    height: 40px;

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

    border-radius: 50%;

    background: #ffffff;
    color: #0d2f20;

    font-size: 23px;
    font-weight: 700;

    transition: transform 0.3s ease;
}

.ak-cta-button:hover .ak-cta-button-arrow {
    transform: translateX(4px);
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.ak-cta-visual {
    position: relative;
    height: 100%;

    min-height: 470px;

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

    padding: 35px 45px 35px 10px;
}

.ak-cta-image-frame {
    position: relative;

    width: 100%;
    max-width: 680px;

    overflow: hidden;

    border-radius: 18px;

    border: 1px solid rgba(255, 255, 255, 0.20);

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.35);
}

.ak-cta-image-frame img {
    display: block;

    width: 100%;
    height: 365px;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.ak-final-cta-card:hover
.ak-cta-image-frame img {
    transform: scale(1.025);
}


.ak-cta-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7, 28, 20, 0.05),
            transparent 60%
        );
}


/* =========================================================
   FLOATING BADGE
========================================================= */

.ak-cta-badge {
    position: absolute;

    left: 22px;
    bottom: 20px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 11px 17px;

    border-radius: 9px;

    background: rgb(87 37 93);
    border: 1px solid rgba(214, 169, 77, 0.5);
    backdrop-filter: blur(8px);
    color: #ffffff;
}

.ak-cta-badge-icon {
    width: 39px;
    height: 39px;

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

    border-radius: 50%;

    background: #d6a94d;

    color: #0d2f20;

    font-size: 20px;
}

.ak-cta-badge span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ak-cta-badge strong {
    font-size: 13px;
}

.ak-cta-badge small {
    font-size: 11px;
    color: rgba(255,255,255,0.68);
}


/* =========================================================
   BOTTOM GOLD LINE
========================================================= */

.ak-cta-bottom-line {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(90deg, #26169c, #d64d7b, #7d5bf1, #4e4dd6, #ff6c00);
}


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

@media (max-width: 1000px) {

    .ak-final-cta {
        padding: 60px 4%;
    }

    .ak-final-cta-card {
        grid-template-columns: 1fr;
    }

    .ak-cta-content {
        padding: 55px 45px 25px;
    }

    .ak-cta-visual {
        min-height: auto;
        padding: 25px 45px 55px;
    }

    .ak-cta-image-frame {
        max-width: 720px;
    }

}


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

@media (max-width: 600px) {

    .ak-final-cta {
        padding: 40px 16px;
    }

    .ak-final-cta-card {
        border-radius: 16px;
    }

    .ak-cta-content {
        padding: 45px 25px 20px;
    }

    .ak-cta-title {
        font-size: 36px;
        letter-spacing: -1px;
    }

    .ak-cta-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .ak-cta-button {
        width: 100%;
        min-width: 0;
        gap: 12px;
    }

    .ak-cta-button-text strong {
        font-size: 14px;
    }

    .ak-cta-button-text small {
        font-size: 11px;
    }

    .ak-cta-button-arrow {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .ak-cta-visual {
        padding: 20px 25px 45px;
    }

    .ak-cta-image-frame img {
        height: 270px;
    }

    .ak-cta-badge {
        left: 14px;
        bottom: 12px;
        padding: 8px 12px;
    }

    .ak-cta-badge-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .ak-cta-dots-right {
        display: none;
    }

}



/* =========================================================
   AADI KIRAN - SOLAR SOLUTIONS SECTION
========================================================= */

.ak-solutions-section {
    position: relative;
    padding: 80px 0 80px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(246, 166, 35, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(246, 166, 35, 0.10),
            transparent 25%
        ),
        linear-gradient(
            115deg,
            #031d45 0%,
            #062d63 48%,
            #0b2852 100%
        );
}


/* Subtle solar-panel texture */
.ak-solutions-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.035) 25%,
            transparent 25%
        ),
        linear-gradient(
            315deg,
            rgba(255,255,255,0.025) 25%,
            transparent 25%
        );

    background-size: 90px 90px;
    opacity: 0.35;
    pointer-events: none;
}


/* Golden glow */
.ak-solutions-section::after {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;

    right: -180px;
    top: -170px;

    background: rgba(246, 166, 35, 0.16);
    filter: blur(100px);
    border-radius: 50%;

    pointer-events: none;
}


/* Container */
.ak-solutions-container {
    position: relative;
    z-index: 2;

    width: min(1450px, 85%);
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.ak-solutions-heading {
    text-align: center;
    margin-bottom: 55px;
}


/* Label */
.ak-section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    color: #f6a623;

    font-size: 17px;
    font-weight: 700;
    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: 14px;
}


.ak-section-label span {
    display: block;

    width: 95px;
    height: 2px;

    background: #f6a623;
    opacity: 0.8;
}


/* Main Heading */
.ak-solutions-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(30px, 2vw, 35px);
    line-height: 1.15;

    font-weight: 700;
    letter-spacing: 0;
}


.ak-solutions-heading h2 strong {
    color: #f6a623;
    font-weight: 700;
}


/* =========================================================
   GRID
========================================================= */

.ak-solutions-grid {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 18px;
}


/* =========================================================
   CARD
========================================================= */

.ak-solution-card {
    position: relative;

    min-height: 355px;

    padding: 30px 22px 28px;

    text-align: center;

    border: 1px solid rgba(246, 166, 35, 0.38);

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.025),
            rgba(0,0,0,0.08)
        );

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}


.ak-solution-card:hover {
    transform: translateY(-8px);

    border-color: #f6a623;

    background:
        linear-gradient(
            145deg,
            rgba(246,166,35,0.10),
            rgba(255,255,255,0.025)
        );

    box-shadow:
        0 18px 45px rgba(0,0,0,0.25);
}


/* =========================================================
   ICON
========================================================= */

.ak-solution-icon {
    width: 80px;
    height: 80px;

    margin: 0 auto 25px;

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

    border-radius: 50%;

    border: 1px solid rgba(246, 166, 35, 0.65);

    background:
        radial-gradient(
            circle,
            rgba(246,166,35,0.12),
            rgba(246,166,35,0.02)
        );

    color: #f6a623;

    font-size: 34px;

    transition: all 0.35s ease;
}


.ak-solution-card:hover .ak-solution-icon {
    background: #f6a623;
    color: #062d63;

    transform: scale(1.06);
}


/* =========================================================
   TITLE
========================================================= */

.ak-solution-card h3 {
       margin: 0 0 14px;
    color: #ffffff;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 500;
}


.ak-solution-card h3 span {
    display: block;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.ak-solution-card p {
    margin: 0;

    color: rgba(255,255,255,0.72);

    font-size: 15px;
    line-height: 1.65;

    font-weight: 400;
}


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

@media (max-width: 1200px) {

    .ak-solutions-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .ak-solution-card {
        min-height: 320px;
    }

}


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

@media (max-width: 767px) {

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

    .ak-solutions-container {
        width: 90%;
    }

    .ak-solutions-heading {
        margin-bottom: 38px;
    }

    .ak-section-label {
        font-size: 13px;
        gap: 12px;
    }

    .ak-section-label span {
        width: 45px;
    }

    .ak-solutions-heading h2 {
        font-size: 34px;
        line-height: 1.15;
    }

    .ak-solutions-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ak-solution-card {
        min-height: auto;
        padding: 30px 25px;
    }

    .ak-solution-icon {
        width: 72px;
        height: 72px;
        font-size: 30px;
        margin-bottom: 20px;
    }

    .ak-solution-card h3 {
        font-size: 20px;
    }

    .ak-solution-card p {
        font-size: 15px;
    }

}


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

@media (max-width: 480px) {

    .ak-solutions-heading h2 {
        font-size: 30px;
    }

    .ak-section-label span {
        width: 30px;
    }

}


/* ================================================================
   AADI KIRAN — SOLAR EXPERTISE
   UNIQUE CLASSES — NO WB IMPACT CLASS
================================================================ */

.ak-expertise-section {
    position: relative;
    width: 100%;
    padding: 70px 0;
    overflow: hidden;

    background: #ffffff;
}


/* ================================================================
   MAIN CARD
================================================================ */

.ak-expertise-container {
    position: relative;
    max-width:90%;
    margin: 0 auto;
    padding: 55px 88px 58px;

    border-radius: 22px;

    background:
        radial-gradient(
            circle at 92% 18%,
            rgba(214, 169, 77, 0.22),
            transparent 32%
        ),
        linear-gradient(
            110deg,
            #061d3d 0%,
            #082d5c 52%,
            #0b3d78 100%
        );

    box-shadow: 0 18px 45px rgba(6, 29, 61, 0.15);

    z-index: 2;
}


/* ================================================================
   HEADER
================================================================ */

.ak-expertise-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 38px;
}


.ak-expertise-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: #e1b75b;

    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}


.ak-expertise-dot {
    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background: #e1b75b;
}


.ak-expertise-title {
    margin: 15px 0 12px;

    color: #ffffff;

    font-size: clamp(30px, 2vw, 35px);
    font-weight: 800;
    line-height: 1.08;
}


.ak-expertise-title span {
    color: #e1b75b;
}


.ak-expertise-subtitle {
    max-width: 780px;
    margin: 0 auto;

    color: rgba(255, 255, 255, 0.75);

    font-size: 16px;
    line-height: 1.65;
}


/* ================================================================
   RESULTS BOX
================================================================ */

.ak-expertise-results {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    width: 100%;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.045);

    overflow: hidden;
}


/* ================================================================
   ITEM
================================================================ */

.ak-expertise-item {
    position: relative;

    min-height: 150px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 25px 20px;

    text-align: center;
}


/* vertical divider */

.ak-expertise-item:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 28px;
    right: 0;

    width: 1px;
    height: calc(100% - 56px);

    background: rgba(255, 255, 255, 0.14);
}


/* ================================================================
   MAIN LABEL
================================================================ */

.ak-expertise-number {
    margin-bottom: 10px;

    color: #ffffff;

    font-size: 30px;
    font-weight: 800;
    line-height: 1;
}


/* gold first part / visual accent */

.ak-expertise-item:first-child .ak-expertise-number::first-letter,
.ak-expertise-item:nth-child(2) .ak-expertise-number::first-letter,
.ak-expertise-item:nth-child(3) .ak-expertise-number::first-letter,
.ak-expertise-item:nth-child(4) .ak-expertise-number::first-letter {
    color: #e1b75b;
}


.ak-expertise-item p {
    margin: 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 14px;
    line-height: 1.45;
}


/* ================================================================
   DECORATIVE LEFT DOTS
================================================================ */

.ak-expertise-decor-left {
    position: absolute;

    left: 30px;
    bottom: 35px;

    width: 75px;
    height: 75px;

    opacity: 0.45;

    background-image: radial-gradient(
        rgba(214, 169, 77, 0.55) 1px,
        transparent 1px
    );

    background-size: 8px 8px;
}


/* ================================================================
   DECORATIVE RIGHT CIRCLES
================================================================ */

.ak-expertise-decor-right {
    position: absolute;

    right: 35px;
    top: 15px;

    width: 170px;
    height: 170px;

    border: 1px solid rgba(214, 169, 77, 0.18);

    border-radius: 50%;

    box-shadow:
        0 0 0 22px rgba(214, 169, 77, 0.035),
        0 0 0 44px rgba(214, 169, 77, 0.025);
}


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

@media (max-width: 1100px) {

    .ak-expertise-container {
        margin: 0 30px;
        padding: 50px 40px;
    }

}


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

@media (max-width: 767px) {

    .ak-expertise-section {
        padding: 45px 15px;
    }

    .ak-expertise-container {
        margin: 0;
        padding: 42px 18px;

        border-radius: 18px;
    }

    .ak-expertise-header {
        margin-bottom: 28px;
    }

    .ak-expertise-title {
        font-size: 32px;
    }

    .ak-expertise-subtitle {
        font-size: 14px;
    }

    .ak-expertise-results {
        grid-template-columns: repeat(2, 1fr);
    }

    .ak-expertise-item {
        min-height: 135px;
        padding: 20px 10px;
    }

    .ak-expertise-item:nth-child(1),
    .ak-expertise-item:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    .ak-expertise-item:nth-child(2)::after {
        display: none;
    }

    .ak-expertise-number {
        font-size: 23px;
    }

    .ak-expertise-item p {
        font-size: 12px;
    }

}


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

@media (max-width: 480px) {

    .ak-expertise-title {
        font-size: 28px;
    }

    .ak-expertise-eyebrow {
        font-size: 12px;
    }

    .ak-expertise-results {
        grid-template-columns: 1fr;
    }

    .ak-expertise-item {
        min-height: 115px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    }

    .ak-expertise-item:not(:last-child)::after {
        display: none;
    }

    .ak-expertise-item:last-child {
        border-bottom: none;
    }

}


/* =========================================================
   AADI KIRAN - SMART SOLAR CALCULATORS
========================================================= */

.ak-solar-calculator-section {
    position: relative;
    overflow: hidden;
    padding: 80px 0 80px;
    background:
        /* linear-gradient(
            90deg,
            rgba(248, 251, 255, 0.98) 0%,
            rgba(248, 251, 255, 0.96) 48%,
            rgba(245, 249, 253, 0.82) 100%
        ), */
        url("../images/solar-calculator-bg.webp") center right / cover no-repeat;

    /* isolation: isolate; */
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.ak-calc-dots {
    position: absolute;
    width: 75px;
    height: 75px;

    background-image: radial-gradient(
        #d6a94d 1.3px,
        transparent 1.3px
    );

    background-size: 9px 9px;
    opacity: 0.55;
    z-index: -1;
}

.ak-calc-dots-left {
    left: 0;
    top: 82px;
}

.ak-calc-circle {
    position: absolute;
    right: -100px;
    top: -130px;

    width: 520px;
    height: 520px;

    border: 1px solid rgba(214, 169, 77, 0.16);
    border-radius: 50%;

    box-shadow:
        0 0 0 35px rgba(214, 169, 77, 0.035),
        0 0 0 75px rgba(214, 169, 77, 0.025);

    z-index: -1;
}


/* =========================================================
   CONTAINER
========================================================= */

.ak-calc-container {
    width: min(1450px, calc(90% - 80px));
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.ak-calc-header {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    margin-bottom: 38px;
}

.ak-calc-eyebrow {
    display: inline-block;

    margin-bottom: 16px;

    color: #23653e;

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.ak-calc-title {
    margin: 0;

    color: #000;

    font-size: clamp(30px, 2.5vw, 35px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: 0;
}

.ak-calc-title span {
    color: var(--solar-gold) !important;
}

.ak-calc-subtitle {
    max-width: 850px;

    margin: 15px 0 0;

    color: #58708f;

    font-size: 18px;
    line-height: 1.65;
    font-weight: 500;
}

.ak-calc-title-line {
    width: 58px;
    height: 4px;

    margin-top: 25px;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        #d6a94d,
        #f0c866
    );
}


/* =========================================================
   CALCULATOR GRID
========================================================= */

.ak-calc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}


/* =========================================================
   COMMON CARD
========================================================= */

.ak-calc-card {
    position: relative;
    min-height: auto;

    padding: 30px 35px 34px;

    border-radius: 18px;

    overflow: hidden;

    border: 1px solid rgba(13, 47, 99, 0.08);

    box-shadow:
        0 15px 40px rgba(13, 47, 99, 0.08);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.ak-calc-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 22px 48px rgba(13, 47, 99, 0.14);
}


/* =========================================================
   CARD BACKGROUND COLORS
========================================================= */

.ak-calc-card-simple {
    background:
        linear-gradient(
            135deg,
            rgba(255, 252, 244, 0.97),
            rgba(255, 247, 221, 0.91)
        ), 
        url("../images/solar-panels-card.webp") bottom right / 55% auto
        no-repeat;
}

.ak-calc-card-advanced {
    background:
        linear-gradient(
            135deg,
            rgba(244, 249, 255, 0.97),
            rgba(225, 239, 255, 0.92)
        ),
        url("../images/solar-house-card.webp") bottom right / 58% auto
        no-repeat;
}

.ak-calc-card-emi {
    background:
        linear-gradient(
            135deg,
            rgba(255, 250, 244, 0.98),
            rgba(255, 237, 220, 0.92)
        ),
        url("../images/solar-emi-card.webp") bottom right / 52% auto
        no-repeat;
}


/* =========================================================
   SOFT IMAGE OVERLAY
========================================================= */

.ak-calc-card::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.90) 0%,
        rgba(255,255,255,0.60) 55%,
        rgba(255,255,255,0.08) 100%
    );

    pointer-events: none;
}


/* =========================================================
   ICON
========================================================= */

.ak-calc-icon-box {
    position: relative;
    z-index: 2;

    width: 68px;
    height: 68px;

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

    margin-bottom: 22px;

    border-radius: 18px;

    font-size: 29px;
}

.ak-calc-card-simple .ak-calc-icon-box {
    color: #d49300;
    background: rgba(246, 195, 69, 0.22);
}

.ak-calc-card-advanced .ak-calc-icon-box {
    color: #1162c4;
    background: rgba(55, 135, 235, 0.17);
}

.ak-calc-card-emi .ak-calc-icon-box {
    color: #a65a0c;
    background: rgba(245, 177, 102, 0.20);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.ak-calc-card-content {
    position: relative;
    z-index: 2;
    max-width: 92%;
}

.ak-calc-card h3 {
    margin: 0 0 15px;

    color: #0d2f63;

    font-size: 20px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 0;
}

.ak-calc-card h3 small {
    font-size: 15px;
    font-weight: 600;
    color: #61738c;
    letter-spacing: 0;
}

.ak-calc-card p {
    max-width: 440px;

    margin: 0;

    color: #5d708a;

    font-size: 16px;
    line-height: 1.65;
    font-weight: 500;
}


/* =========================================================
   BUTTON
========================================================= */

.ak-calc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    margin-top: 32px;
    padding: 13px 22px;

    border-radius: 30px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.ak-calc-button b {
    font-size: 21px;
    line-height: 1;
    font-weight: 500;
}

.ak-calc-button:hover {
    transform: translateX(3px);
}


/* Gold */

.ak-calc-button-gold {
    color: #102f60;
    background: #f4bd2e;

    box-shadow:
        0 8px 20px rgba(214, 169, 77, 0.20);
}

.ak-calc-button-gold:hover {
    box-shadow:
        0 12px 25px rgba(214, 169, 77, 0.30);
}


/* Blue */

.ak-calc-button-blue {
    color: #fff;
    background: #1468cf;

    box-shadow:
        0 8px 20px rgba(20, 104, 207, 0.22);
}

.ak-calc-button-blue:hover {
    box-shadow:
        0 12px 25px rgba(20, 104, 207, 0.32);
}


/* Orange / Gold */

.ak-calc-button-orange {
    color: #fff;
    background: #e77e18;

    box-shadow:
        0 8px 20px rgba(231, 126, 24, 0.20);
}

.ak-calc-button-orange:hover {
    box-shadow:
        0 12px 25px rgba(231, 126, 24, 0.30);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .ak-calc-container {
        width: min(94%, 1000px);
    }

    .ak-calc-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .ak-calc-card {
        min-height: 340px;
    }

    .ak-calc-card-content {
        max-width: 65%;
    }

}


@media (max-width: 768px) {

    .ak-solar-calculator-section {
        padding: 60px 0 65px;
    }

    .ak-calc-container {
        width: calc(100% - 32px);
    }

    .ak-calc-header {
        margin-bottom: 30px;
    }

    .ak-calc-title {
        font-size: 42px;
        letter-spacing: -1.5px;
    }

    .ak-calc-subtitle {
        font-size: 16px;
    }

    .ak-calc-card {
        min-height: 370px;
        padding: 26px;
    }

    .ak-calc-card-content {
        max-width: 100%;
    }

    .ak-calc-card h3 {
        font-size: 25px;
    }

    .ak-calc-card p {
        font-size: 15px;
    }

    .ak-calc-card-simple,
    .ak-calc-card-advanced,
    .ak-calc-card-emi {
        background-size: 65% auto;
    }

}


@media (max-width: 480px) {

    .ak-solar-calculator-section {
        padding: 50px 0;
    }

    .ak-calc-title {
        font-size: 35px;
        line-height: 1.08;
    }

    .ak-calc-eyebrow {
        font-size: 13px;
        letter-spacing: 1.8px;
    }

    .ak-calc-card {
        min-height: 390px;
        padding: 23px;
    }

    .ak-calc-icon-box {
        width: 60px;
        height: 60px;
        font-size: 25px;
        border-radius: 15px;
    }

    .ak-calc-card h3 {
        font-size: 23px;
    }

    .ak-calc-button {
        padding: 12px 18px;
        font-size: 14px;
    }

}

/* =========================================================
   WHATSAPP FLOATING BUTTON
========================================================= */

.wb-floating-whatsapp {
    background: #25D366;
    color: #ffffff;
}

.wb-floating-whatsapp:hover {
    background: #1ebe5d;
    color: #ffffff;
    transform: translateY(-3px);
}

/* =========================================================
   AADI KIRAN — PRODUCTS & ADVANCED TECHNOLOGY
========================================================= */

.ak-products-section {
    position: relative;
    width: 100%;
    padding: 80px 0 0px;
    background: #ffffff;
    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.ak-products-container {
    width: min(1425px, calc(90% - 60px));
    margin: 0 auto;
}


/* =========================================================
   HEADER
========================================================= */

.ak-products-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 38px;
}


.ak-products-heading-wrap {
    max-width: 1050px;
}


/* EYEBROW */

.ak-products-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 800;

    letter-spacing: 2px;
    text-transform: uppercase;

    color: #d6a94d;
}


/* TITLE */

.ak-products-heading-wrap h2 strong {
    
    color: var(--solar-gold) !important;
    font-weight: 700;
}

.ak-products-title {
    margin: 0;

    font-family: inherit;
    font-size: clamp(30px, 2vw, 35px);
    line-height: 1.08;
    font-weight: 800;

    letter-spacing: 0;

    color: #0b2852;
}


.ak-products-title span {
    color: #0b2852;
}


/* =========================================================
   VIEW ALL BUTTON
========================================================= */

.ak-products-view-btn {
    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 185px;
    height: 48px;

    padding: 0 22px;

    border: 1px solid #d6a94d;
    border-radius: 30px;

    background: #ffffff;

    color: #0b2852;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

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


.ak-products-view-btn span {
    font-size: 20px;
    line-height: 1;
    color: #d6a94d;

    transition: transform 0.3s ease;
}


.ak-products-view-btn:hover {
    background: #0b2852;
    border-color: #0b2852;
    color: #ffffff;

    transform: translateY(-2px);
}


.ak-products-view-btn:hover span {
    color: #d6a94d;
    transform: translateX(4px);
}


/* =========================================================
   PRODUCTS GRID
========================================================= */

.ak-products-grid {
    display: grid;

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

    gap: 16px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.ak-product-card {
    min-width: 0;

    padding: 15px 15px 22px;

    background: #ffffff;

    border: 1px solid #dfe6ef;
    border-radius: 18px;

    box-shadow:
        0 5px 18px rgba(11, 40, 82, 0.035);

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


.ak-product-card:hover {
    transform: translateY(-6px);

    border-color: rgba(214, 169, 77, 0.65);

    box-shadow:
        0 16px 35px rgba(11, 40, 82, 0.10);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.ak-product-image {
    position: relative;

    width: 100%;
    height: 166px;

    overflow: hidden;

    border-radius: 14px;

    background: #edf3f8;
}


.ak-product-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 65%,
            rgba(5, 25, 50, 0.12)
        );

    pointer-events: none;
}


.ak-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}


.ak-product-card:hover .ak-product-image img {
    transform: scale(1.05);
}


/* =========================================================
   PRODUCT CONTENT
========================================================= */

.ak-product-content {
    padding: 17px 2px 0;
}


.ak-product-content h3 {
    margin: 0 0 9px;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
    color: #0b2852;
}


.ak-product-content p {
    margin: 0;

    font-size: 13px;
    line-height: 1.65;

    color: #61728b;
}


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

@media (max-width: 1200px) {

    .ak-products-container {
        width: min(1100px, calc(100% - 40px));
    }

    .ak-products-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .ak-product-image {
        height: 190px;
    }

}


/* =========================================================
   MOBILE / HORIZONTAL SCROLL
========================================================= */

@media (max-width: 768px) {

    .ak-products-section {
        padding: 70px 0 0px;
    }

    .ak-products-container {
        width: calc(100% - 30px);
    }

    .ak-products-header {
        display: block;
        margin-bottom: 28px;
    }

    .ak-products-eyebrow {
        margin-bottom: 12px;
        font-size: 12px;
    }

    .ak-products-title {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .ak-products-view-btn {
        margin-top: 22px;
    }


    .ak-products-grid {
        display: flex;

        gap: 14px;

        overflow-x: auto;

        padding-bottom: 12px;

        scroll-snap-type: x mandatory;

        scrollbar-width: thin;
        scrollbar-color: #d6a94d transparent;
    }


    .ak-products-grid::-webkit-scrollbar {
        height: 5px;
    }

    .ak-products-grid::-webkit-scrollbar-track {
        background: transparent;
    }

    .ak-products-grid::-webkit-scrollbar-thumb {
        background: #d6a94d;
        border-radius: 10px;
    }


    .ak-product-card {
        flex: 0 0 82%;

        scroll-snap-align: start;
    }


    .ak-product-image {
        height: 190px;
    }

}


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

@media (max-width: 480px) {

    .ak-products-section {
        padding: 60px 0 0px;
    }

    .ak-products-container {
        width: calc(100% - 24px);
    }

    .ak-products-title {
        font-size: 30px;
    }

    .ak-product-card {
        flex-basis: 88%;
    }

    .ak-product-image {
        height: 180px;
    }

}

/* =========================================================
   AADI KIRAN SOLAR ENERGY — FOOTER
========================================================= */

.ak-footer {
    position: relative;
    overflow: hidden;
    background: #061d3a;
    color: #ffffff;
    padding: 80px 0 0;
}

/* ===================== BACKGROUND SHAPES ===================== */

.ak-footer-bg-shape {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0.12;
    border: 1px solid #d6a94d;
}

.ak-footer-bg-left {
    width: 520px;
    height: 520px;
    left: -300px;
    top: 80px;
}

.ak-footer-bg-right {
    width: 620px;
    height: 620px;
    right: -350px;
    top: -120px;
}


/* ===================== CONTAINER ===================== */

.ak-footer-container {
    position: relative;
    z-index: 2;
    width: min(92%, 1420px);
    margin: 0 auto;
}


/* ===================== MAIN FOOTER ===================== */

.ak-footer-main {
    display: grid;
    grid-template-columns: 1.35fr 0.8fr 1fr 1.45fr;
    gap: 65px;
    padding-bottom: 20px;
}


/* ===================== BRAND ===================== */

.ak-footer-brand {
    max-width: 360px;
}

.ak-footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 205px;
    height: 95px;
    background: #ffffff;
    border-radius: 8px;
    padding: 10px 18px;
    margin-bottom: 25px;
}

.ak-footer-logo img {
    display: block;
    width: 100%;
    max-width: 114px;
    height: auto;
    object-fit: contain;
}

.ak-footer-brand-title {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    
}

.ak-footer-tagline {
    margin: 0 0 18px;
    color: #d6a94d;
    font-size: 15px;
    font-weight: 600;
}

.ak-footer-description {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.8;
    max-width: 350px;
}


/* ===================== SOCIAL ICONS ===================== */

.ak-footer-social {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 25px;
}

.ak-footer-social a {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.13);
    color: #ffffff;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ak-footer-social a:hover {
    background: #d6a94d;
    border-color: #d6a94d;
    color: #061d3a;
    transform: translateY(-4px);
}


/* ===================== FOOTER COLUMNS ===================== */

.ak-footer-column {
    min-width: 0;
}

.ak-footer-heading {
    position: relative;
    margin: 5px 0 25px;
    padding-bottom: 12px;
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
}

.ak-footer-heading::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 2px;
    background: #d6a94d;
}


/* ===================== FOOTER LINKS ===================== */

.ak-footer-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ak-footer-links li {
    margin-bottom: 10px;
}

.ak-footer-links a {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ak-footer-links a::before {
    content: "›";
    color: #d6a94d;
    font-size: 18px;
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.ak-footer-links a:hover {
    color: #ffffff;
    transform: translateX(4px);
}

.ak-footer-links a:hover::before {
    transform: translateX(3px);
}


/* ===================== CONTACT ===================== */

.ak-footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 22px;
}

.ak-footer-contact-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(214, 169, 77, 0.13);
    color: #d6a94d;
    font-size: 15px;
}

.ak-footer-contact-item strong {
    display: block;
    margin-bottom: 5px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}

.ak-footer-contact-item p {
    margin: 0;
    color: rgba(255, 255, 255, 0.70);
    font-size: 13px;
    line-height: 1.65;
}

.ak-footer-contact-item a {
    color: rgba(255, 255, 255, 0.75);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ak-footer-contact-item a:hover {
    color: #d6a94d;
}


/* ===================== CTA STRIP ===================== */

.ak-footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 15px 49px;
    margin-bottom:20px;
    border: 1px solid rgba(214, 169, 77, 0.25);
    border-radius: 14px;
    background:
        linear-gradient(
            100deg,
            rgba(214, 169, 77, 0.10),
            rgba(255, 255, 255, 0.035)
        );
}

.ak-footer-cta-label {
    display: block;
    margin-bottom: 7px;
    color: #d6a94d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.ak-footer-cta-content h3 {
    margin: 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
}

.ak-footer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding: 13px 22px;
    border-radius: 50px;
    background: #d6a94d;
    color: #061d3a;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ak-footer-cta-btn:hover {
    background: #ffffff;
    color: #061d3a;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18);
}


/* ===================== FOOTER BOTTOM ===================== */

.ak-footer-bottom {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    min-height: 70px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ak-footer-copyright,
.ak-footer-credit {
    margin: 0;
    color: rgba(255, 255, 255, 0.60);
    font-size: 12px;
}

.ak-footer-credit {
    text-align: right;
}

.ak-footer-credit a {
    color: #d6a94d;
    font-weight: 600;
    text-decoration: none;
}

.ak-footer-credit a:hover {
    color: #ffffff;
}

.ak-footer-bottom-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.ak-footer-bottom-links a {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ak-footer-bottom-links span {
    color: rgba(255, 255, 255, 0.25);
    font-size: 11px;
}

.ak-footer-bottom-links a:hover {
    color: #d6a94d;
}


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

@media (max-width: 1100px) {

    .ak-footer-main {
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 45px;
    }

    .ak-footer-brand {
        max-width: 100%;
    }

    .ak-footer-contact {
        grid-column: 2 / 4;
    }

}


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

@media (max-width: 767px) {

    .ak-footer {
        padding-top: 55px;
    }

    .ak-footer-container {
        width: min(90%, 560px);
    }

    .ak-footer-main {
        grid-template-columns: 1fr;
        gap: 38px;
        padding-bottom: 20px;
    }

    .ak-footer-brand {
        max-width: 100%;
    }

    .ak-footer-logo {
        width: 180px;
        height: 125px;
    }

    .ak-footer-logo img {
        max-width: 150px;
    }

    .ak-footer-heading {
        margin-bottom: 20px;
    }

    .ak-footer-contact {
        grid-column: auto;
    }

    .ak-footer-cta {
        flex-direction: column;
        align-items: flex-start;
        padding: 25px;
        gap: 20px;
    }

    .ak-footer-cta-content h3 {
        font-size: 20px;
        line-height: 1.35;
    }

    .ak-footer-cta-btn {
        width: 100%;
        justify-content: center;
    }

    .ak-footer-bottom {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 12px;
        padding: 22px 0;
    }

    .ak-footer-copyright,
    .ak-footer-credit {
        text-align: center;
    }

    .ak-footer-bottom-links {
        flex-wrap: wrap;
    }

}


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

@media (max-width: 420px) {

    .ak-footer {
        padding-top: 45px;
    }

    .ak-footer-container {
        width: 88%;
    }

    .ak-footer-brand-title {
        font-size: 17px;
    }

    .ak-footer-description {
        font-size: 13px;
    }

    .ak-footer-cta {
        padding: 22px;
    }

    .ak-footer-cta-label {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .ak-footer-cta-content h3 {
        font-size: 18px;
    }

}


/* ==========================================
   AADI KIRAN HOME OVERVIEW SECTION
========================================== */

.ak-home-overview {
  --ak-home-blue: #064581;
  --ak-home-dark: #07386c;
  --ak-home-orange: #f58216;
  --ak-home-green: #258d45;
  --ak-home-light: #f1f8fd;

  width: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--ak-home-dark);
  font-family: inherit;
}

.ak-home-overview *,
.ak-home-overview *::before,
.ak-home-overview *::after {
  box-sizing: border-box;
}

.ak-home-overview a {
  text-decoration: none;
}

/* TOP HIGHLIGHTS */

.ak-home-highlights {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    padding:20px 0px;
    background: #fff;
    border-bottom: 1px solid #e5edf3;
    max-width: 1280px;
    margin: 0 auto;
}

.ak-home-highlight {
  position: relative;
  min-width: 0;
  padding: 0 12px;
  text-align: center;
}

.ak-home-highlight + .ak-home-highlight::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 0;
  height: 76%;
  width: 1px;
  background: #d1dbe4;
}
.ak-home-overview {padding: 0 0 0px;    
    margin: 0 auto;}
.ak-home-highlight-icon {
  width: 70px;
  height: 70px;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  color: var(--ak-home-orange);
  font-size: 27px;
  font-weight: 800;
  background: #f8fcff;
}

.ak-home-highlight h3 {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 750;
  color: var(--ak-home-blue);
}

.ak-home-highlight p {
  margin: 0;
  color: #000;
  font-size: 15px;
  line-height: 1.4;
  font-family: inherit;
}

/* ABOUT ROW */

.ak-home-about-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr .65fr;
    align-items: stretch;
    gap: 24px;
    padding: 50px 0% 40px;
    max-width: 1280px;
    margin: 0 auto;
 
}


.ak-home-overview-inner {    background: var(--ak-home-light);     }

 
 

.ak-home-about > p {
    margin: 0 0 30px;
    text-align: justify;
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
    color: #000;
    font-size: 16px;
    line-height: 1.7;

}

.ak-home-trust-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 15px 0;
}

.ak-home-trust-points span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 3px 8px;
  border-right: 1px solid #d0dce5;
  color: var(--ak-home-blue);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
}

.ak-home-trust-points span:first-child {
  padding-left: 0;
}

.ak-home-trust-points span:last-child {
  border-right: 0;
}

.ak-home-trust-points b {
  font-size: 20px;
}

.ak-home-learn-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 18px;
  border: 1px solid #7c9eb8;
  border-radius: 25px;
  color: var(--ak-home-blue);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: .25s ease;
}

.ak-home-learn-btn span {
  font-size: 19px;
  line-height: 1;
}

.ak-home-learn-btn:hover {
  color: #fff;
  background: var(--ak-home-blue);
  border-color: var(--ak-home-blue);
}

/* FEATURE BANNER */

.ak-home-feature-banner {
  position: relative;
  min-height: 205px;
  overflow: hidden;
  background: #0a5594;
}

.ak-home-feature-image {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(3, 43, 82, .15), transparent 65%),
    url("../images/solar-panels-card.webp") center / cover no-repeat;
}

.ak-home-feature-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  color: #fff;
  text-align: right;
  background: linear-gradient(90deg, transparent, rgba(3, 48, 91, .95));
}

.ak-home-feature-caption strong {
  font-size: 16px;
  line-height: 1.4;
}

.ak-home-feature-caption span {
  margin-top: 3px;
  color: #ffc34d;
  font-size: 17px;
  font-weight: 800;
}

/* WHY CHOOSE US */

.ak-home-why {
  padding: 18px 0;
}

.ak-home-why h2 {
  margin-bottom: 14px;
  font-size: 21px;
}

.ak-home-why ul {
  display: grid;
  gap: 11px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ak-home-why li {
  position: relative;
  padding-left: 26px;
  color: #000;
  font-size: 16px;
  line-height: 1.9;
}

.ak-home-why li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--ak-home-green);
  font-size: 18px;
  font-weight: 900;
}

/* CATEGORY CARDS */

.ak-home-categories {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 30px 0% 60px;
  background: var(--ak-home-light);
   max-width: 1280px; margin: 0 auto;
}

.ak-home-category {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 0;
  min-height: 105px;
  padding: 13px;
  overflow: hidden;
  border-radius: 7px;
  color: #fff;
  isolation: isolate;
  background-color: var(--ak-home-blue);
  background-size: cover;
  background-position: center;
  transition: transform .25s ease, box-shadow .25s ease;
}

.ak-home-category::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(0deg, rgba(2, 40, 78, .95), rgba(2, 40, 78, .02) 100%);
}

.ak-home-category:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 18px #07386c2b;
}

.ak-home-category h3 {
  margin: 0 0 3px;
  color: #fff;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.25;
}

.ak-home-category p {
  margin: 0;
  color: #fff;
  font-size: 10px;
  line-height: 1.4;
}

.ak-home-category > span {
  flex: 0 0 auto;
  margin-left: 5px;
  font-size: 23px;
  line-height: 1;
}

.ak-home-cat-solar {
  background-image: url("images/category-solar.webp");
}

.ak-home-cat-hardware {
  background-color: #f58216;
  background-image: url("images/category-electrical.webp");
}

.ak-home-cat-ro {
  background-color: #039cc2;
  background-image: url("images/category-ro.webp");
}

.ak-home-cat-ev {
  background-color: #064581;
  background-image: url("images/category-emobility.webp");
}

.ak-home-cat-projects {
  background-color: #168642;
  background-image: url("images/category-projects.webp");
}

/* BOTTOM BRAND STRIP */

.ak-home-bottom-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 20px;
  background: var(--ak-home-blue);
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .7px;
}

.ak-home-bottom-strip span {
  width: 12%;
  max-width: 150px;
  height: 1px;
  background: #9bbbd8;
}

.ak-home-bottom-strip i {
  font-style: normal;
  color: #f9ad34;
}

/* TABLET */

@media (max-width: 1000px) {
  .ak-home-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 22px;
  }

  .ak-home-highlight:nth-child(4)::before {
    display: none;
  }

  .ak-home-about-row {
    grid-template-columns: 1fr 1fr;
  }

  .ak-home-why {
    grid-column: 1 / -1;
    padding: 0;
  }

  .ak-home-why ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ak-home-categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* MOBILE */

@media (max-width: 600px) {
  .ak-home-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 18px 10px 40px;
    row-gap: 20px;

  }

  .ak-home-highlight {
    padding: 0 8px;
  }

  .ak-home-highlight:nth-child(odd)::before {
    display: none;
  }

  .ak-home-highlight-icon {
    width: 46px;
    height: 46px;
    font-size: 23px;
  }

  .ak-home-highlight h3 {
    font-size: 12px;
  }

  .ak-home-highlight p {
    font-size: 11px;
  }

  .ak-home-about-row {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 18px;
  }

  .ak-home-about h2 {
    font-size: 23px;
  }

  .ak-home-about > p {
    font-size: 16px;
  }

  .ak-home-trust-points span {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 3px 6px;
    font-size: 10px;
  }

  .ak-home-feature-banner {
    min-height: 190px;
  }

  .ak-home-why {
    grid-column: auto;
    padding: 0;
  }

  .ak-home-why ul {
    grid-template-columns: 1fr;
  }

  .ak-home-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 0 12px 15px;
  }

  .ak-home-category {
    min-height: 115px;
    padding: 10px;
  }

  .ak-home-category h3 {
    font-size: 23px;
  }

  .ak-home-category p {
    font-size: 10px;
  }

  .ak-home-bottom-strip {
    flex-wrap: wrap;
    gap: 7px;
    padding: 13px 12px;
    font-size: 10px;
    line-height: 1.5;
  }

  .ak-home-bottom-strip span {
    display: none;
  }
}


/* =========================================
   SERVICES DROPDOWN - DESKTOP
========================================= */

.main-nav {
    align-items: center;
}

.nav-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.nav-dropdown-link {
    display: inline-flex;
    align-items: center;
}

.submenu-toggle,
.mobile-submenu-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, color 0.25s ease;
}

.submenu-toggle {
    width: 22px;
    height: 30px;
    padding: 0;
    font-size: 11px;
}

.nav-dropdown:hover > .nav-submenu,
.nav-dropdown:focus-within > .nav-submenu,
.nav-dropdown.is-open > .nav-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-dropdown.is-open > .submenu-toggle,
.mobile-nav-dropdown.is-open .mobile-submenu-toggle {
    transform: rotate(180deg);
}

.nav-submenu {
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    z-index: 1000;

    width: 270px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 10px;

    background: #ffffff;
    border: 1px solid rgba(7, 52, 108, 0.10);
    border-radius: 12px;
    box-shadow: 0 14px 35px rgba(5, 29, 58, 0.20);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease,
        transform 0.22s ease;
}

.nav-submenu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 25px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-top: 1px solid rgba(7, 52, 108, 0.10);
    border-left: 1px solid rgba(7, 52, 108, 0.10);
    transform: rotate(45deg);
}

.nav-submenu a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 11px 13px;
    border-radius: 7px;

    color: #17375e;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;

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

.nav-submenu a:hover,
.nav-submenu a:focus-visible {
    color: #a95d00;
    background: #fff4df;
    padding-left: 18px;
}

.nav-submenu a + a {
    margin-top: 2px;
}


/* =========================================
   SERVICES SUBMENU - MOBILE
========================================= */

.mobile-nav-dropdown {
    width: 100%;
}

.mobile-services-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mobile-services-heading > a {
    flex: 1;
}

.mobile-submenu-toggle {
    flex: 0 0 40px;
    width: 40px;
    height: 42px;
    border-radius: 8px;
    color: inherit;
    font-size: 13px;
}

.mobile-submenu-toggle:hover {
    background: rgba(243, 146, 0, 0.12);
}

.mobile-submenu {
    display: none;
    padding: 5px 0 8px 14px;
    margin: 2px 0 8px 8px;
    border-left: 2px solid #f39200;
}

.mobile-nav-dropdown.is-open .mobile-submenu {
    display: block;
}

.mobile-submenu a {
    display: block;
    padding: 10px 12px;
    color: inherit;
    font-size: 14px;
    line-height: 1.45;
    text-decoration: none;
    border-radius: 6px;
}

.mobile-submenu a:hover,
.mobile-submenu a:focus-visible {
    color: #f39200;
    background: rgba(243, 146, 0, 0.10);
}


/* =========================================
   KEYBOARD ACCESSIBILITY
========================================= */

.nav-dropdown a:focus-visible,
.nav-dropdown button:focus-visible,
.mobile-nav-dropdown a:focus-visible,
.mobile-nav-dropdown button:focus-visible {
    outline: 2px solid #f39200;
    outline-offset: 3px;
}


/* =========================================
   RESPONSIVE ADJUSTMENTS
========================================= */

@media (max-width: 991px) {
    .nav-dropdown {
        display: none;
    }

    .nav-submenu {
        display: none;
    }
}

@media (min-width: 992px) {
    .mobile-nav-dropdown {
        display: none;
    }
}
.ak-cta-content     .btn-header {
        min-width: 286px !important;
        font-size: 13px !important;
    }