/* ==========================================================
   GARAGE DOOR REPAIR ALLEN TX
   NAVY + DARK BLUE + GOLD THEME
========================================================== */

:root {

    /* GOLD */
    --ga-gold: #D9A928;
    --ga-gold-dark: #B88716;
    --ga-gold-light: #F2CD64;

    /* keep old variable names for compatibility */
    --ga-orange: #D9A928;
    --ga-orange-dark: #B88716;

    /* NAVY / DARK BLUE */
    --ga-black: #07182E;
    --ga-navy: #07182E;
    --ga-navy-deep: #04111F;
    --ga-dark: #102A43;
    --ga-blue: #163A5F;

    /* NEUTRALS */
    --ga-white: #FFFFFF;
    --ga-gray: #6F7C8C;
    --ga-light: #F1F5F9;
    --ga-border: #DCE3EA;
}


/* ==========================================================
   GENERAL
========================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--ga-white);

    color: var(--ga-dark);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}


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

.ga-header {
    position: relative;

    z-index: 9999;

    width: 100%;
}


/* ==========================================================
   NAVBAR
========================================================== */

.ga-navbar {
    position: relative;

    z-index: 9999;

    min-height: 96px;

    padding: 0;

    background: var(--ga-white);

    box-shadow:
        0 5px 30px
        rgba(7, 24, 46, .10);
}

.ga-navbar > .container {
    position: relative;

    min-height: 96px;
}


/* ==========================================================
   LOGO
========================================================== */

.ga-logo {
    display: flex;

    align-items: center;

    padding: 0;

    margin-right: 35px;
}

.ga-logo img {
    display: block;

    width: auto;
    height: auto;

    max-width: 190px;

    object-fit: contain;
}


/* ==========================================================
   DESKTOP MENU
========================================================== */

.ga-menu {
    display: flex;

    align-items: center;

    gap: 3px;
}

.ga-menu .nav-link {
    position: relative;

    padding:
        39px 14px !important;

    color: var(--ga-dark);

    font-size: 13px;

    line-height: 1;

    font-weight: 800;

    text-transform: uppercase;

    transition:
        color .3s ease;
}

.ga-menu .nav-link::after {
    content: "";

    position: absolute;

    left: 14px;
    right: 14px;

    bottom: 27px;

    height: 2px;

    background: var(--ga-gold);

    transform:
        scaleX(0);

    transform-origin:
        right center;

    transition:
        transform .35s ease;
}

.ga-menu .nav-link:hover,
.ga-menu .nav-link.active {
    color: var(--ga-gold);
}

.ga-menu .nav-link:hover::after,
.ga-menu .nav-link.active::after {
    transform:
        scaleX(1);

    transform-origin:
        left center;
}


/* ==========================================================
   NAV CONTACT
========================================================== */

.ga-nav-contact {
    position: relative;

    align-self: stretch;

    display: flex;

    align-items: center;

    margin-left: 17px;

    padding-left: 27px;
}

.ga-nav-contact::before {
    content: "";

    position: absolute;

    left: 0;
    top: 22px;
    bottom: 22px;

    width: 1px;

    background: var(--ga-border);
}


/* ==========================================================
   NAV PHONE
========================================================== */

.ga-nav-phone {
    display: flex;

    align-items: center;

    gap: 13px;

    color: var(--ga-dark);

    text-decoration: none;
}

.ga-nav-phone-icon {
    position: relative;

    display: flex;

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

    width: 55px;
    height: 55px;

    flex: 0 0 55px;

    border-radius: 50%;

    background: var(--ga-gold);

    color: var(--ga-navy);

    font-size: 18px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.ga-nav-phone-icon::before {
    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px solid
        rgba(217, 169, 40, .38);

    border-radius: 50%;

    animation:
        gaPhonePulse
        2s
        infinite;
}

.ga-nav-phone:hover .ga-nav-phone-icon {
    background: var(--ga-navy);

    color: var(--ga-gold);

    transform:
        rotate(12deg);
}

.ga-nav-phone-text {
    display: flex;

    flex-direction: column;
}

.ga-nav-phone-text small {
    margin-bottom: 5px;

    color: var(--ga-gray);

    font-size: 9px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.3px;
}

.ga-nav-phone-text strong {
    color: var(--ga-navy);

    font-size: 21px;

    line-height: 1;

    font-weight: 900;

    white-space: nowrap;

    transition:
        color .3s ease;
}

.ga-nav-phone:hover .ga-nav-phone-text strong {
    color: var(--ga-gold-dark);
}


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

.ga-toggler {
    position: relative;

    width: 50px;
    height: 46px;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: var(--ga-gold);

    box-shadow: none !important;
}

.ga-toggler:focus,
.ga-toggler:active {
    outline: none;

    box-shadow: none !important;
}


/* TOGGLER LINES */

.ga-toggler span {
    position: absolute;

    left: 12px;

    width: 26px;
    height: 2px;

    margin: 0;

    background: var(--ga-navy);

    transition:
        top .3s ease,
        transform .3s ease,
        opacity .2s ease;
}

.ga-toggler span:nth-child(1) {
    top: 14px;
}

.ga-toggler span:nth-child(2) {
    top: 22px;
}

.ga-toggler span:nth-child(3) {
    top: 30px;
}


/* ==========================================================
   TOGGLER OPEN STATE
========================================================== */

.ga-toggler:not(.collapsed) span:nth-child(1) {
    top: 22px;

    transform:
        rotate(45deg);
}

.ga-toggler:not(.collapsed) span:nth-child(2) {
    opacity: 0;
}

.ga-toggler:not(.collapsed) span:nth-child(3) {
    top: 22px;

    transform:
        rotate(-45deg);
}


/* ==========================================================
   HERO
========================================================== */

.ga-hero {
    position: relative;

    width: 100%;

    min-height: 760px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background: var(--ga-navy);
}


/* ==========================================================
   HERO BACKGROUND
========================================================== */

.ga-hero-bg {
    position: absolute;

    inset: 0;

    z-index: 0;

    overflow: hidden;
}

.ga-hero-bg img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    animation:
        gaBackgroundZoom
        14s
        ease-in-out
        infinite alternate;
}


/* ==========================================================
   HERO OVERLAY
========================================================== */

.ga-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

 
}


/* GOLD TOP DETAIL */

.ga-hero::before {
    content: "";

    position: absolute;

    z-index: 10;

    top: 0;
    left: 0;

    width: 165px;
    height: 6px;

    background:
        linear-gradient(
            90deg,
            var(--ga-gold),
            var(--ga-gold-light)
        );
}


/* ==========================================================
   LARGE BACKGROUND TEXT
========================================================== */

.ga-bg-text {
    position: absolute;

    z-index: 2;

    left: -30px;
    bottom: -18px;

    color: transparent;

    -webkit-text-stroke:
        1px
        rgba(217, 169, 40, .10);

    font-size:
        clamp(100px, 13vw, 235px);

    line-height: .8;

    font-weight: 900;

    letter-spacing: -9px;

    white-space: nowrap;

    pointer-events: none;
}


/* ==========================================================
   HERO CONTAINER
========================================================== */

.ga-hero-container {
    position: relative;

    z-index: 5;
}

.ga-hero-row {
    min-height: 760px;
}


/* ==========================================================
   HERO CONTENT
========================================================== */

.ga-hero-content {
    position: relative;

    z-index: 10;

    max-width: 680px;

    padding:
        100px 0 115px;
}


/* ==========================================================
   SMALL TITLE
========================================================== */

.ga-small-title {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 22px;

    color: var(--ga-gold);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    animation:
        gaFadeUp
        .8s
        .10s
        both;
}

.ga-small-line {
    display: block;

    width: 42px;
    height: 3px;

    background: var(--ga-gold);
}


/* ==========================================================
   HERO H1
========================================================== */

.ga-title {
    position: relative;

    margin: 0;

    color: var(--ga-white);

    font-size:
        clamp(54px, 5.2vw, 84px);

    line-height: .96;

    font-weight: 900;

    letter-spacing: -3px;

    text-transform: uppercase;

    animation:
        gaFadeUp
        .9s
        .20s
        both;
}

.ga-title span {
    position: relative;

    display: block;

    width: fit-content;

    color: var(--ga-gold);
}

.ga-title span::after {
    content: "";

    position: absolute;

    right: -75px;
    top: 50%;

    width: 55px;
    height: 7px;

    background: var(--ga-gold);

    transform:
        translateY(-50%);
}


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

.ga-description {
    max-width: 610px;

    margin:
        28px 0 0;

    padding-left: 19px;

    border-left:
        3px solid
        var(--ga-gold);

    color:
        rgba(255, 255, 255, .78);

    font-size: 16px;

    line-height: 1.75;

    animation:
        gaFadeUp
        .9s
        .32s
        both;
}


/* ==========================================================
   FEATURES
========================================================== */

.ga-features {
    display: flex;

    flex-wrap: wrap;

    gap: 24px;

    margin-top: 25px;

    animation:
        gaFadeUp
        .9s
        .42s
        both;
}

.ga-feature {
    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--ga-white);

    font-size: 14px;

    font-weight: 700;
}

.ga-feature i {
    color: var(--ga-gold);

    font-size: 17px;
}


/* ==========================================================
   HERO ACTIONS
========================================================== */

.ga-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 28px;

    margin-top: 37px;

    animation:
        gaFadeUp
        .9s
        .52s
        both;
}


/* ==========================================================
   FREE ESTIMATE BUTTON
========================================================== */

.ga-estimate-btn {
    position: relative;

    overflow: hidden;

    display: inline-flex;

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

    gap: 15px;

    min-height: 62px;

    padding:
        0 29px;

    background:
        linear-gradient(
            135deg,
            var(--ga-gold),
            var(--ga-gold-dark)
        );

    color: var(--ga-navy);

    text-decoration: none;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: .3px;

    text-transform: uppercase;

    transition:
        color .35s ease,
        transform .35s ease,
        box-shadow .35s ease;
}

.ga-estimate-btn::before {
    content: "";

    position: absolute;

    inset: 0;

    background: var(--ga-white);

    transform:
        translateX(-102%);

    transition:
        transform .4s ease;
}

.ga-estimate-btn span,
.ga-estimate-btn i {
    position: relative;

    z-index: 2;
}

.ga-estimate-btn:hover::before {
    transform:
        translateX(0);
}

.ga-estimate-btn:hover {
    color: var(--ga-navy);

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 30px
        rgba(217, 169, 40, .20);
}

.ga-estimate-btn i {
    transition:
        transform .3s ease;
}

.ga-estimate-btn:hover i {
    transform:
        translateX(5px);
}


/* ==========================================================
   HERO PHONE
========================================================== */

.ga-hero-call {
    display: flex;

    align-items: center;

    gap: 13px;

    color: var(--ga-white);

    text-decoration: none;
}

.ga-call-circle {
    position: relative;

    display: flex;

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

    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    border-radius: 50%;

    background: var(--ga-white);

    color: var(--ga-gold-dark);

    font-size: 18px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}

.ga-call-circle::before {
    content: "";

    position: absolute;

    inset: -6px;

    border:
        1px solid
        rgba(217, 169, 40, .45);

    border-radius: 50%;

    animation:
        gaHeroCallPulse
        2s
        infinite;
}

.ga-hero-call:hover .ga-call-circle {
    background: var(--ga-gold);

    color: var(--ga-navy);

    transform:
        rotate(12deg);
}

.ga-call-info {
    display: flex;

    flex-direction: column;
}

.ga-call-info small {
    margin-bottom: 4px;

    color:
        rgba(255, 255, 255, .62);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.ga-call-info strong {
    color: var(--ga-white);

    font-size: 24px;

    line-height: 1;

    font-weight: 900;

    white-space: nowrap;

    transition:
        color .3s ease;
}

.ga-hero-call:hover .ga-call-info strong {
    color: var(--ga-gold);
}


/* ==========================================================
   MOVING TOOL - NEW POSITION
   BETWEEN TEXT & TECHNICIAN
========================================================== */

.ga-moving-tool {
    position: absolute;

    z-index: 15;

    /* مكانها الجديد */
    top: 55%;
    right: -50px;
    bottom: auto;
    left: auto;

    width: 165px;

    pointer-events: none;

    transform: translateY(-50%);

    animation:
        gaToolNewMove
        4s
        ease-in-out
        infinite;
}


.ga-moving-tool img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 15px 20px
            rgba(4, 17, 31, .40)
        );
}


/* الحركة حوالين المكان الجديد */

@keyframes gaToolNewMove {

    0%,
    100% {
        transform:
            translateY(-50%)
            translateX(0)
            rotate(-8deg);
    }

    50% {
        transform:
            translateY(calc(-50% - 18px))
            translateX(8px)
            rotate(5deg);
    }

}


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

@media (max-width: 991.98px) {

    .ga-moving-tool {
        top: 58%;

        right: 20px;

        width: 115px;
    }

}


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

@media (max-width: 575.98px) {

    .ga-moving-tool {
        top: 52%;

        right: 5px;

        width: 80px;

        opacity: .75;
    }

}
/* ==========================================================
   TECHNICIAN COLUMN
========================================================== */

.ga-technician-column {
    position: relative;

    align-self: stretch;
}

.ga-technician-area {
    position: absolute;

    z-index: 5;

    left: -80px;
    right: -130px;

    bottom: 0;

    height: 100%;

    display: flex;

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


/* ==========================================================
   GOLD CIRCLE
========================================================== */

.ga-orange-circle {
    position: absolute;

    z-index: 0;

    right: 30px;
    bottom: 55px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            var(--ga-gold-light) 0%,
            var(--ga-gold) 43%,
            var(--ga-gold-dark) 100%
        );

    box-shadow:
        0 25px 80px
        rgba(217, 169, 40, .22);

    animation:
        gaCirclePulse
        5s
        ease-in-out
        infinite;
}


/* ==========================================================
   ROTATING GOLD OUTLINE
========================================================== */

.ga-orange-outline {
    position: absolute;

    z-index: 0;

    right: -15px;
    bottom: 12px;

    width: 610px;
    height: 610px;

    border:
        1px solid
        rgba(217, 169, 40, .48);

    border-radius: 50%;

    animation:
        gaOutlineRotate
        22s
        linear
        infinite;
}

.ga-orange-outline::before {
    content: "";

    position: absolute;

    top: 68px;
    left: 85px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background: var(--ga-gold);
}

.ga-orange-outline::after {
    content: "";

    position: absolute;

    right: 40px;
    bottom: 140px;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--ga-white);
}


/* ==========================================================
   DOTS
========================================================== */

.ga-orange-dot {
    position: absolute;

    z-index: 1;

    border-radius: 50%;

    background: var(--ga-gold);
}

.ga-dot-one {
    width: 13px;
    height: 13px;

    top: 130px;
    right: 80px;

    animation:
        gaDotFloat
        3s
        ease-in-out
        infinite;
}

.ga-dot-two {
    width: 8px;
    height: 8px;

    top: 220px;
    left: 80px;

    animation:
        gaDotFloat
        4s
        .5s
        ease-in-out
        infinite;
}


/* ==========================================================
   TECHNICIAN
========================================================== */

.ga-technician {
    position: relative;

    z-index: 3;

    display: block;

    width: auto;

    max-width: 730px;

    height: 94%;

    object-fit: contain;

    object-position: bottom;

    filter:
        drop-shadow(
            0 20px 25px
            rgba(4, 17, 31, .40)
        );

    transform-origin:
        bottom center;

    animation:
        gaTechnicianEntrance
        1.15s
        cubic-bezier(.2, .75, .25, 1)
        both;
}


/* ==========================================================
   SERVICE CARD
========================================================== */

.ga-experience-card {
    position: absolute;

    z-index: 8;

    right: 0;
    bottom: 58px;

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 250px;

    padding:
        18px 22px;

    background: var(--ga-white);

    box-shadow:
        0 15px 45px
        rgba(4, 17, 31, .22);

    animation:
        gaCardFloat
        4s
        ease-in-out
        infinite;
}

.ga-experience-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 5px;
    height: 100%;

    background: var(--ga-gold);
}

.ga-experience-icon {
    display: flex;

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

    width: 49px;
    height: 49px;

    flex: 0 0 49px;

    background:
        rgba(217, 169, 40, .12);

    color: var(--ga-gold-dark);

    font-size: 20px;
}

.ga-experience-content {
    display: flex;

    flex-direction: column;
}

.ga-experience-content strong {
    margin-bottom: 3px;

    color: var(--ga-navy);

    font-size: 17px;

    font-weight: 900;

    text-transform: uppercase;
}

.ga-experience-content span {
    color: var(--ga-gray);

    font-size: 10px;

    line-height: 1.4;

    font-weight: 700;

    text-transform: uppercase;
}


/* ==========================================================
   FREE ESTIMATE FLOATING CARD
========================================================== */

.ga-free-card {
    position: absolute;

    z-index: 7;

    top: 130px;
    left: 20px;

    display: flex;

    align-items: center;

    gap: 11px;

    padding:
        14px 17px;

    background:
        linear-gradient(
            135deg,
            var(--ga-gold),
            var(--ga-gold-dark)
        );

    color: var(--ga-navy);

    box-shadow:
        0 15px 35px
        rgba(4, 17, 31, .22);

    animation:
        gaFreeCardFloat
        4.5s
        ease-in-out
        infinite;
}

.ga-free-icon {
    display: flex;

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

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 50%;

    background: var(--ga-navy);

    color: var(--ga-gold);
}

.ga-free-card > div {
    display: flex;

    flex-direction: column;
}

.ga-free-card small {
    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.3px;
}

.ga-free-card strong {
    margin-top: 2px;

    font-size: 13px;

    font-weight: 900;
}


/* ==========================================================
   SIDE TEXT
========================================================== */

.ga-side-decoration {
    position: absolute;

    z-index: 8;

    right: 15px;
    top: 50%;

    transform:
        translateY(-50%);

    writing-mode:
        vertical-rl;

    color:
        rgba(242, 205, 100, .55);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 5px;

    pointer-events: none;
}


/* ==========================================================
   BOTTOM GOLD LINE
========================================================== */

.ga-bottom-line {
    position: absolute;

    z-index: 10;

    left: 0;
    bottom: 0;

    width: 170px;
    height: 7px;

    background:
        linear-gradient(
            90deg,
            var(--ga-gold-dark),
            var(--ga-gold-light)
        );
}


/* ==========================================================
   ANIMATIONS
========================================================== */

@keyframes gaFadeUp {

    from {
        opacity: 0;

        transform:
            translateY(45px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes gaTechnicianEntrance {

    from {
        opacity: 0;

        transform:
            translateX(110px)
            scale(.95);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}


@keyframes gaBackgroundZoom {

    from {
        transform:
            scale(1.03);
    }

    to {
        transform:
            scale(1.10);
    }
}


@keyframes gaToolMovement {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(-8deg);
    }

    25% {
        transform:
            translate(8px, -13px)
            rotate(-2deg);
    }

    50% {
        transform:
            translate(-4px, -24px)
            rotate(7deg);
    }

    75% {
        transform:
            translate(-10px, -9px)
            rotate(1deg);
    }
}


@keyframes gaCirclePulse {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.035);
    }
}


@keyframes gaOutlineRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }
}


@keyframes gaCardFloat {

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

    50% {
        transform:
            translateY(-10px);
    }
}


@keyframes gaFreeCardFloat {

    0%,
    100% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(7px, -12px);
    }
}


@keyframes gaDotFloat {

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

    50% {
        transform:
            translateY(-15px);
    }
}


@keyframes gaPhonePulse {

    0% {
        transform:
            scale(.9);

        opacity: .8;
    }

    70% {
        transform:
            scale(1.25);

        opacity: 0;
    }

    100% {
        transform:
            scale(1.25);

        opacity: 0;
    }
}


@keyframes gaHeroCallPulse {

    0% {
        transform:
            scale(.9);

        opacity: .7;
    }

    70% {
        transform:
            scale(1.25);

        opacity: 0;
    }

    100% {
        transform:
            scale(1.25);

        opacity: 0;
    }
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1199.98px) {

    .ga-logo {
        margin-right: 15px;
    }


    .ga-logo img {
        max-width: 155px;
    }


    .ga-menu .nav-link {
        padding-left:
            8px !important;

        padding-right:
            8px !important;

        font-size: 11px;
    }


    .ga-nav-contact {
        margin-left: 7px;

        padding-left: 15px;
    }


    .ga-nav-phone-icon {
        width: 47px;
        height: 47px;

        flex-basis: 47px;
    }


    .ga-nav-phone-text strong {
        font-size: 17px;
    }


    .ga-technician-area {
        left: -110px;
        right: -170px;
    }


    .ga-technician {
        max-width: 650px;
    }


    .ga-orange-circle {
        width: 455px;
        height: 455px;
    }


    .ga-orange-outline {
        width: 525px;
        height: 525px;
    }


    .ga-moving-tool {
        right: -30px;

        width: 145px;
    }

}


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

@media (max-width: 991.98px) {

    /* ======================================================
       NAVBAR
    ====================================================== */

    .ga-navbar,
    .ga-navbar > .container {
        min-height: 80px;
    }


    .ga-navbar > .container {
        position: relative;
    }


    .ga-logo {
        position: relative;

        z-index: 1002;

        margin: 0;
    }


    .ga-logo img {
        max-width: 155px;
    }


    .ga-toggler {
        position: relative;

        z-index: 1002;

        display: block;
    }


    /* ======================================================
       COLLAPSE
    ====================================================== */

    .ga-navbar-collapse {
        position: absolute;

        z-index: 1000;

        top: 80px;
        left: 0;

        width: 100%;

        padding:
            10px 20px 22px;

        background: var(--ga-white);

        border-top:
            1px solid
            var(--ga-border);

        box-shadow:
            0 20px 35px
            rgba(7, 24, 46, .18);
    }


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

    .ga-menu {
        display: block;

        width: 100%;

        margin:
            0 !important;

        padding: 0;
    }


    .ga-menu .nav-item {
        display: block;

        width: 100%;
    }


    .ga-menu .nav-link {
        display: block;

        width: 100%;

        padding:
            15px 5px !important;

        border-bottom:
            1px solid
            var(--ga-border);

        color: var(--ga-navy);

        font-size: 14px;

        font-weight: 800;

        text-transform: uppercase;
    }


    .ga-menu .nav-link::after {
        display: none;
    }


    .ga-menu .nav-link:hover,
    .ga-menu .nav-link.active {
        color: var(--ga-gold-dark);
    }


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

    .ga-nav-contact {
        display: block;

        width: 100%;

        margin:
            17px 0 0;

        padding: 0;
    }


    .ga-nav-contact::before {
        display: none;
    }


    .ga-nav-phone {
        display: flex;

        width: 100%;

        align-items: center;

        gap: 13px;

        padding:
            14px 16px;

        background:
            linear-gradient(
                135deg,
                #F7F9FC,
                #EEF3F7
            );

        border-left:
            4px solid
            var(--ga-gold);

        text-decoration: none;
    }


    .ga-nav-phone-icon {
        width: 55px;
        height: 55px;

        flex:
            0 0 55px;
    }


    .ga-nav-phone-text strong {
        font-size: 24px;
    }


    /* ======================================================
       HERO
    ====================================================== */

    .ga-hero {
        min-height: auto;
    }


    .ga-hero-row {
        min-height: auto;
    }


    .ga-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(4, 17, 31, .95) 0%,
                rgba(7, 24, 46, .92) 55%,
                rgba(16, 42, 67, .86) 100%
            );
    }


    .ga-hero-content {
        max-width: 720px;

        margin:
            0 auto;

        padding:
            85px 0 30px;

        text-align: center;
    }


    .ga-small-title,
    .ga-features,
    .ga-actions {
        justify-content: center;
    }


    .ga-title span {
        margin:
            0 auto;
    }


    .ga-description {
        margin:
            28px auto 0;

        padding: 0;

        border-left: 0;
    }


    .ga-moving-tool {
        z-index: 0;

        right: 25px;
        top: 25px;

        width: 120px;
    }


    /* ======================================================
       TECHNICIAN
    ====================================================== */

    .ga-technician-column {
        min-height: 520px;
    }


    .ga-technician-area {
        left: 0;
        right: 0;

        height: 520px;
    }


    .ga-technician {
        max-width: 510px;

        height: 510px;
    }


    .ga-orange-circle {
        right: 50%;
        bottom: 30px;

        width: 400px;
        height: 400px;

        margin-right: -200px;
    }


    .ga-orange-outline {
        right: 50%;
        bottom: 5px;

        width: 465px;
        height: 465px;

        margin-right: -232px;
    }


    .ga-experience-card {
        right: 6%;
    }


    .ga-free-card {
        left: 7%;
    }


    .ga-side-decoration {
        display: none;
    }

}


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

@media (max-width: 575.98px) {

    /* ======================================================
       NAV
    ====================================================== */

    .ga-navbar > .container {
        padding-left: 15px;
        padding-right: 15px;
    }


    .ga-logo img {
        max-width: 140px;
    }


    .ga-navbar-collapse {
        padding:
            8px 15px 20px;
    }


    .ga-menu .nav-link {
        padding:
            14px 4px !important;

        font-size: 13px;
    }


    .ga-nav-phone {
        padding:
            13px 14px;
    }


    /* LARGE PHONE NUMBER */

    .ga-nav-phone-text strong {
        font-size: 23px;
    }


    /* ======================================================
       HERO
    ====================================================== */

    .ga-hero-content {
        padding:
            65px 0 20px;
    }


    .ga-small-title {
        justify-content:
            flex-start;

        font-size: 10px;

        letter-spacing: 1.3px;

        text-align: left;
    }


    .ga-title {
        text-align: left;

        font-size: 43px;

        line-height: 1;

        letter-spacing: -2px;
    }


    .ga-title span {
        margin: 0;
    }


    .ga-title span::after {
        right: -48px;

        width: 35px;
        height: 5px;
    }


    .ga-description {
        margin-top: 23px;

        padding-left: 15px;

        border-left:
            3px solid
            var(--ga-gold);

        text-align: left;

        font-size: 14px;

        line-height: 1.65;
    }


    .ga-features {
        justify-content:
            flex-start;

        gap:
            12px 20px;
    }


    .ga-feature {
        font-size: 13px;
    }


    /* ======================================================
       BUTTONS
    ====================================================== */

    .ga-actions {
        flex-direction: column;

        align-items: stretch;

        gap: 20px;

        margin-top: 30px;
    }


    .ga-estimate-btn {
        width: 100%;
    }


    .ga-hero-call {
        justify-content:
            flex-start;
    }


    .ga-call-info strong {
        font-size: 25px;
    }


    .ga-call-circle {
        width: 55px;
        height: 55px;

        flex-basis: 55px;
    }


    /* ======================================================
       TOOL
    ====================================================== */

 /* ==========================================================
   MOVING TOOL - NEW POSITION
========================================================== */

.ga-moving-tool {
    position: absolute;

    z-index: 2;

    /* NEW POSITION */
    right: -170px;
    bottom: 65px;
    top: auto;

    width: 170px;

    pointer-events: none;

    animation:
        gaToolMovement
        4.5s
        ease-in-out
        infinite;
}

.ga-moving-tool img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 15px 20px
            rgba(4, 17, 31, .35)
        );
}


/* TOOL MOVEMENT */

@keyframes gaToolMovement {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-7deg);
    }

    50% {
        transform:
            translateY(-18px)
            rotate(5deg);
    }
}


/* TABLET */

@media (max-width: 991.98px) {

    .ga-moving-tool {
        right: 20px;
        bottom: 15px;
        top: auto;

        width: 125px;

        opacity: .85;
    }

}


/* MOBILE */

@media (max-width: 575.98px) {

    .ga-moving-tool {
        right: 0;
        bottom: 5px;

        width: 85px;

        opacity: .65;
    }

}


    /* ======================================================
       TECHNICIAN
    ====================================================== */

    .ga-technician-column {
        min-height: 430px;
    }


    .ga-technician-area {
        height: 430px;
    }


    .ga-technician {
        width: 100%;

        height: 420px;

        object-fit: contain;
    }


    .ga-orange-circle {
        width: 310px;
        height: 310px;

        margin-right: -155px;

        bottom: 20px;
    }


    .ga-orange-outline {
        width: 360px;
        height: 360px;

        margin-right: -180px;
    }


    /* ======================================================
       SERVICE CARD
    ====================================================== */

    .ga-experience-card {
        right: 5px;
        bottom: 18px;

        min-width: 190px;

        padding:
            12px 14px;
    }


    .ga-experience-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    .ga-experience-content strong {
        font-size: 13px;
    }


    .ga-experience-content span {
        font-size: 8px;
    }


    /* ======================================================
       FREE ESTIMATE CARD
    ====================================================== */

    .ga-free-card {
        top: 80px;
        left: 0;

        padding:
            10px 12px;
    }


    .ga-bg-text {
        display: none;
    }

}


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

@media (max-width: 380px) {

    .ga-title {
        font-size: 37px;
    }


    .ga-nav-phone-text strong {
        font-size: 21px;
    }


    .ga-call-info strong {
        font-size: 22px;
    }


    .ga-technician-column {
        min-height: 390px;
    }


    .ga-technician-area {
        height: 390px;
    }


    .ga-technician {
        height: 385px;
    }

}


/* ==========================================================
   ACCESSIBILITY - REDUCED MOTION
========================================================== */

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

    .ga-hero-bg img,
    .ga-moving-tool,
    .ga-technician,
    .ga-orange-circle,
    .ga-orange-outline,
    .ga-orange-dot,
    .ga-experience-card,
    .ga-free-card,
    .ga-nav-phone-icon::before,
    .ga-call-circle::before {

        animation: none !important;
    }

}

/* ==========================================================
   VERTICAL STICKY OFFERS BUTTON
========================================================== */

.ga-sticky-offers {
    position: fixed;

    z-index: 9998;

    right: 0;
    top: 50%;

    transform: translateY(-50%);

    display: flex;

    flex-direction: column;

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

    gap: 10px;

    width: 58px;

    padding: 16px 8px;

    background:
        linear-gradient(
            180deg,
            var(--ga-gold),
            var(--ga-gold-dark)
        );

    color: var(--ga-navy);

    text-decoration: none;

    border-radius: 12px 0 0 12px;

    box-shadow:
        -8px 10px 30px
        rgba(4, 17, 31, .28);

    transition:
        width .3s ease,
        background .3s ease,
        color .3s ease,
        box-shadow .3s ease;
}


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

.ga-sticky-offers i {
    display: flex;

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

    width: 36px;
    height: 36px;

    flex: 0 0 36px;

    border-radius: 50%;

    background: var(--ga-navy);

    color: var(--ga-gold);

    font-size: 15px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


/* ==========================================================
   VERTICAL TEXT
========================================================== */

.ga-sticky-offers span {
    display: block;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    color: var(--ga-navy);

    font-size: 12px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: 2px;

    white-space: nowrap;
}


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

.ga-sticky-offers:hover {
    width: 64px;

    color: var(--ga-white);

    background: var(--ga-navy);

    box-shadow:
        -12px 15px 35px
        rgba(4, 17, 31, .38);
}


.ga-sticky-offers:hover span {
    color: var(--ga-gold);
}


.ga-sticky-offers:hover i {
    background: var(--ga-gold);

    color: var(--ga-navy);

    transform: rotate(-12deg);
}


/* ==========================================================
   LITTLE PULSE EFFECT
========================================================== */

.ga-sticky-offers::before {
    content: "";

    position: absolute;

    left: -5px;
    top: 50%;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: var(--ga-gold-light);

    transform: translateY(-50%);

    box-shadow:
        0 0 0
        rgba(217, 169, 40, .5);

    animation:
        gaOfferDotPulse
        1.8s
        infinite;
}


@keyframes gaOfferDotPulse {

    0% {
        box-shadow:
            0 0 0 0
            rgba(217, 169, 40, .55);
    }

    70% {
        box-shadow:
            0 0 0 10px
            rgba(217, 169, 40, 0);
    }

    100% {
        box-shadow:
            0 0 0 0
            rgba(217, 169, 40, 0);
    }

}


/* ==========================================================
   MOBILE
   KEEP IT VERTICAL TOO
========================================================== */

@media (max-width: 575.98px) {

    .ga-sticky-offers {
        right: 0;

        top: 55%;
        bottom: auto;

        width: 48px;

        padding:
            12px 6px;

        border-radius:
            10px 0 0 10px;

        transform:
            translateY(-50%);
    }


    .ga-sticky-offers i {
        width: 31px;
        height: 31px;

        flex-basis: 31px;

        font-size: 13px;
    }


    .ga-sticky-offers span {
        font-size: 10px;

        letter-spacing: 1.5px;
    }


    .ga-sticky-offers:hover {
        width: 52px;
    }

}

/* ==========================================================
   ABOUT SECTION
========================================================== */

.ga-about-section {
    position: relative;
    overflow: hidden;

    padding: 90px 0;

    background: var(--ga-light);
}


/* ==========================================================
   LEFT IMAGE
========================================================== */

.ga-about-image-wrap {
    position: relative;

    width: 100%;
    max-width: 530px;

    margin: 0 auto;
}


.ga-about-image {
    display: block;

    width: 100%;
    height: 1000px;

    object-fit: cover;

    border-radius: 20px;
}


/* ==========================================================
   EXPERIENCE CARD
========================================================== */

.ga-about-experience {
    position: absolute;

    right: 10px;
    bottom: 10px;

    min-width: 365px;

    padding: 24px 30px;

    background: var(--ga-white);

    border-radius:
        20px 20px 8px 20px;

    box-shadow:
        0 15px 35px
        rgba(7, 24, 46, .08);

    animation:
        gaAboutCardFloat
        4s ease-in-out infinite;
}


.ga-about-experience span {
    display: block;

    color: var(--ga-black);

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

    font-weight: 500;
}


@keyframes gaAboutCardFloat {

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

    50% {
        transform: translateY(-7px);
    }

}


/* ==========================================================
   RIGHT CONTENT
========================================================== */

.ga-about-content {
    padding-left: 45px;
}


/* ==========================================================
   SMALL LABEL
========================================================== */

.ga-about-label {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    padding: 8px 18px;

    background: var(--ga-white);

    border-radius: 50px;

    color: var(--ga-black);

    font-size: 14px;
    line-height: 1;
    font-weight: 500;
}


.ga-about-label span {
    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: var(--ga-orange);
}


/* ==========================================================
   TITLE
========================================================== */

.ga-about-content h2 {
    max-width: 720px;

    margin:
        0 0 30px;

    color: var(--ga-black);

    font-size: clamp(
        36px,
        3.3vw,
        52px
    );

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -.7px;
}


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

.ga-about-description {
    max-width: 720px;
}


.ga-about-description p {
    margin:
        0 0 12px;

    color: var(--ga-gray);

    font-size: 16px;

    line-height: 1.9;

    font-weight: 400;
}


.ga-about-description p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   STATS
========================================================== */

.ga-about-stats {
    margin-top: 38px;
}


.ga-about-stat-card {
    position: relative;

    height: 100%;

    min-height: 176px;

    padding:
        34px 40px;

    overflow: hidden;

    background: #F7F3EA;

    border-radius: 22px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease;
}


.ga-about-stat-card:hover {
    transform:
        translateY(-7px);

    background:
        var(--ga-white);

    box-shadow:
        0 18px 40px
        rgba(7, 24, 46, .09);
}


/* STAT TOP TITLE */

.ga-stat-heading {
    position: relative;

    display: flex;

    align-items: center;

    margin-bottom: 25px;
}


.ga-stat-heading span {
    position: relative;

    z-index: 2;

    padding-right: 10px;

    background: #F7F3EA;

    color: var(--ga-orange-dark);

    font-size: 15px;

    font-weight: 600;

    transition:
        background .35s ease;
}


.ga-about-stat-card:hover
.ga-stat-heading span {
    background: var(--ga-white);
}


.ga-stat-heading::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 1px;

    background:
        rgba(7, 24, 46, .15);
}


/* ==========================================================
   STAT NUMBER
========================================================== */

.ga-stat-content {
    display: flex;

    align-items: center;

    gap: 25px;
}


.ga-stat-content strong {
    color: var(--ga-black);

    font-size: 58px;

    line-height: 1;

    font-weight: 400;

    letter-spacing: -2px;
}


.ga-stat-content p {
    margin: 0;

    color: var(--ga-gray);

    font-size: 15px;

    line-height: 1.5;
}


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

.ga-about-btn {
    display: inline-flex;

    align-items: center;

    gap: 16px;

    margin-top: 48px;

    padding:
        5px 5px 5px 28px;

    background:
        var(--ga-orange);

    color:
        var(--ga-black);

    text-decoration: none;

    border-radius: 50px;

    font-size: 15px;

    font-weight: 700;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.ga-about-btn i {
    display: flex;

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

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background:
        var(--ga-white);

    color:
        var(--ga-black);

    font-size: 17px;

    transform:
        rotate(-45deg);

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}


.ga-about-btn:hover {
    background:
        var(--ga-black);

    color:
        var(--ga-white);

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 28px
        rgba(7, 24, 46, .18);
}


.ga-about-btn:hover i {
    background:
        var(--ga-orange);

    color:
        var(--ga-black);

    transform:
        rotate(0);
}


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

@media (max-width: 1199.98px) {

    .ga-about-content {
        padding-left: 20px;
    }


    .ga-about-image {
        height: 650px;
    }


    .ga-about-experience {
        min-width: 320px;
    }


    .ga-about-experience span {
        font-size: 21px;
    }


    .ga-about-stat-card {
        padding:
            30px 25px;
    }


    .ga-stat-content {
        gap: 18px;
    }


    .ga-stat-content strong {
        font-size: 50px;
    }

}


/* ==========================================================
   MOBILE / TABLET STACK
========================================================== */

@media (max-width: 991.98px) {

    .ga-about-section {
        padding:
            70px 0;
    }


    .ga-about-image-wrap {
        max-width: 650px;
    }


    .ga-about-image {
        height: 650px;
    }


    .ga-about-content {
        padding-left: 0;
    }


    .ga-about-content h2 {
        max-width: 100%;

        font-size:
            clamp(34px, 6vw, 48px);
    }


    .ga-about-description {
        max-width: 100%;
    }

}


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

@media (max-width: 575.98px) {

    .ga-about-section {
        padding:
            55px 0;
    }


    .ga-about-image {
        height: 500px;

        border-radius: 16px;
    }


    .ga-about-experience {
        right: 8px;
        bottom: 8px;
        left: 8px;

        min-width: 0;

        padding:
            18px 20px;

        border-radius:
            15px;
    }


    .ga-about-experience span {
        font-size: 19px;
    }


    .ga-about-content h2 {
        margin-bottom: 22px;

        font-size: 31px;

        line-height: 1.15;
    }


    .ga-about-description p {
        font-size: 15px;

        line-height: 1.75;
    }


    .ga-about-stats {
        margin-top: 28px;
    }


    .ga-about-stat-card {
        min-height: auto;

        padding:
            25px 24px;

        border-radius: 18px;
    }


    .ga-stat-content strong {
        font-size: 48px;
    }


    .ga-about-btn {
        margin-top: 30px;
    }

}

/* ==========================================================
   WHY CHOOSE US
========================================================== */

.ga-why {
    position: relative;
    overflow: hidden;

    padding: 110px 0;

    background: var(--ga-white);
}


/* subtle background */

.ga-why::before {
    content: "";

    position: absolute;

    top: -180px;
    left: -180px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    border:
        80px solid
        rgba(217, 169, 40, .06);

    pointer-events: none;
}


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

.ga-why-content {
    position: relative;
    z-index: 2;

    padding-right: 35px;
}


/* LABEL */

.ga-why-label {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    padding:
        8px 17px;

    background:
        var(--ga-light);

    border-radius: 50px;

    color:
        var(--ga-black);

    font-size: 14px;

    font-weight: 600;
}


.ga-why-label span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        var(--ga-orange);
}


/* TITLE */

.ga-why-content h2 {
    max-width: 650px;

    margin:
        0 0 24px;

    color:
        var(--ga-black);

    font-size:
        clamp(38px, 4vw, 56px);

    line-height: 1.07;

    font-weight: 750;

    letter-spacing: -1.5px;
}


.ga-why-content h2 span {
    color:
        var(--ga-orange-dark);
}


/* INTRO */

.ga-why-intro {
    max-width: 610px;

    margin:
        0 0 38px;

    color:
        var(--ga-gray);

    font-size: 16px;

    line-height: 1.8;
}


/* ==========================================================
   FEATURES
========================================================== */

.ga-why-list {
    position: relative;

    display: flex;

    flex-direction: column;
}


/* vertical line */

.ga-why-list::before {
    content: "";

    position: absolute;

    top: 32px;
    bottom: 32px;

    left: 26px;

    width: 1px;

    background:
        var(--ga-border);
}


.ga-why-item {
    position: relative;

    display: grid;

    grid-template-columns:
        54px 1fr;

    gap: 20px;

    padding:
        0 0 28px;
}


.ga-why-item:last-child {
    padding-bottom: 0;
}


/* NUMBER */

.ga-why-number {
    position: relative;

    z-index: 2;

    display: flex;

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

    width: 54px;
    height: 54px;

    border-radius: 50%;

    background:
        var(--ga-black);

    border:
        5px solid
        var(--ga-white);

    box-shadow:
        0 0 0 1px
        var(--ga-border);

    transition:
        background .3s ease,
        transform .3s ease;
}


.ga-why-number span {
    color:
        var(--ga-orange);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: .5px;
}


.ga-why-item:hover
.ga-why-number {

    background:
        var(--ga-orange);

    transform:
        scale(1.08);
}


.ga-why-item:hover
.ga-why-number span {

    color:
        var(--ga-black);
}


/* FEATURE CONTENT */

.ga-why-item-content {
    display: grid;

    grid-template-columns:
        48px 1fr;

    gap: 15px;

    padding-top: 4px;
}


.ga-why-item-icon {
    display: flex;

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

    width: 48px;
    height: 48px;

    border-radius: 12px;

    background:
        rgba(217, 169, 40, .11);

    color:
        var(--ga-orange-dark);

    font-size: 18px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.ga-why-item:hover
.ga-why-item-icon {

    background:
        var(--ga-orange);

    color:
        var(--ga-black);

    transform:
        rotate(-5deg);
}


.ga-why-item h3 {
    margin:
        0 0 7px;

    color:
        var(--ga-black);

    font-size: 19px;

    line-height: 1.3;

    font-weight: 700;
}


.ga-why-item p {
    max-width: 470px;

    margin: 0;

    color:
        var(--ga-gray);

    font-size: 14px;

    line-height: 1.7;
}


/* ==========================================================
   BOTTOM ACTIONS
========================================================== */

.ga-why-bottom {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 28px;

    margin-top: 42px;
}


/* BUTTON */

.ga-why-btn {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding:
        5px 5px 5px 25px;

    border-radius: 50px;

    background:
        var(--ga-orange);

    color:
        var(--ga-black);

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.ga-why-btn i {
    display: flex;

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

    width: 45px;
    height: 45px;

    border-radius: 50%;

    background:
        var(--ga-white);

    color:
        var(--ga-black);

    transform:
        rotate(-45deg);

    transition:
        transform .3s ease;
}


.ga-why-btn:hover {
    background:
        var(--ga-black);

    color:
        var(--ga-white);

    transform:
        translateY(-3px);
}


.ga-why-btn:hover i {
    transform:
        rotate(0);
}


/* PHONE */

.ga-why-phone {
    display: flex;

    align-items: center;

    gap: 11px;

    color:
        var(--ga-black);

    text-decoration: none;
}


.ga-why-phone-icon {
    display: flex;

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

    width: 45px;
    height: 45px;

    border-radius: 50%;

    border:
        1px solid
        var(--ga-border);

    color:
        var(--ga-orange-dark);

    transition:
        background .3s ease,
        color .3s ease;
}


.ga-why-phone:hover
.ga-why-phone-icon {

    background:
        var(--ga-black);

    color:
        var(--ga-orange);
}


.ga-why-phone > span:last-child {
    display: flex;

    flex-direction: column;
}


.ga-why-phone small {
    color:
        var(--ga-gray);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


.ga-why-phone strong {
    color:
        var(--ga-black);

    font-size: 17px;
}


/* ==========================================================
   RIGHT VISUAL
========================================================== */

.ga-why-visual {
    position: relative;

    width: 100%;

    max-width: 610px;

    min-height: 700px;

    margin-left: auto;

    padding:
        0 0 35px 55px;
}


/* GOLD BACK SHAPE */

.ga-why-gold-shape {
    position: absolute;

    z-index: 0;

    top: 40px;
    right: 0;

    width: 86%;
    height: 87%;

    border-radius:
        160px 22px 22px 22px;

    background:
        var(--ga-orange);
}


/* IMAGE */

.ga-why-image {
    position: relative;

    z-index: 2;

    overflow: hidden;

    height: 620px;

    border-radius:
        160px 22px 22px 22px;

    background:
        var(--ga-light);

    box-shadow:
        0 25px 60px
        rgba(7, 24, 46, .12);
}


.ga-why-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s ease;
}


.ga-why-visual:hover
.ga-why-image img {

    transform:
        scale(1.04);
}


/* ==========================================================
   TOP BADGE
========================================================== */

.ga-why-badge {
    position: absolute;

    z-index: 5;

    top: 32px;
    right: -20px;

    display: flex;

    align-items: center;

    gap: 12px;

    padding:
        12px 18px 12px 12px;

    border-radius: 50px;

    background:
        var(--ga-white);

    box-shadow:
        0 14px 35px
        rgba(7, 24, 46, .15);

    animation:
        gaWhyBadgeFloat
        4s ease-in-out infinite;
}


.ga-why-badge-icon {
    display: flex;

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

    width: 43px;
    height: 43px;

    border-radius: 50%;

    background:
        var(--ga-orange);

    color:
        var(--ga-black);
}


.ga-why-badge div {
    display: flex;

    flex-direction: column;
}


.ga-why-badge strong {
    color:
        var(--ga-black);

    font-size: 14px;
}


.ga-why-badge small {
    color:
        var(--ga-gray);

    font-size: 10px;
}


@keyframes gaWhyBadgeFloat {

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

    50% {
        transform:
            translateY(-8px);
    }

}


/* ==========================================================
   DARK FLOATING CARD
========================================================== */

.ga-why-floating {
    position: absolute;

    z-index: 6;

    left: 0;
    bottom: 0;

    width: 235px;

    padding:
        26px;

    border-radius:
        8px 28px 8px 28px;

    background:
        var(--ga-black);

    box-shadow:
        0 20px 45px
        rgba(7, 24, 46, .28);
}


.ga-floating-top {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;
}


.ga-floating-top > span {
    display: flex;

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

    width: 39px;
    height: 39px;

    border-radius: 50%;

    background:
        var(--ga-orange);

    color:
        var(--ga-black);
}


.ga-floating-top small {
    color:
        rgba(255,255,255,.65);

    font-size: 9px;

    line-height: 1.4;

    letter-spacing: 1.5px;

    font-weight: 700;
}


.ga-floating-big {
    display: block;

    color:
        var(--ga-white);

    font-size: 27px;

    line-height: 1.1;

    font-weight: 700;
}


.ga-floating-big span {
    color:
        var(--ga-orange);
}


.ga-floating-line {
    width: 100%;

    height: 1px;

    margin:
        19px 0;

    background:
        rgba(255,255,255,.13);
}


.ga-why-floating p {
    margin: 0;

    color:
        rgba(255,255,255,.68);

    font-size: 12px;

    line-height: 1.6;
}


/* ==========================================================
   DECORATIVE DOTS
========================================================== */

.ga-why-dots {
    position: absolute;

    z-index: 1;

    left: 12px;
    top: 80px;

    display: grid;

    grid-template-columns:
        repeat(3, 5px);

    gap: 8px;
}


.ga-why-dots span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--ga-orange);
}


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

@media (max-width: 1199.98px) {

    .ga-why-content {
        padding-right: 10px;
    }

    .ga-why-visual {
        min-height: 640px;
    }

    .ga-why-image {
        height: 570px;
    }

}


/* ==========================================================
   STACK
========================================================== */

@media (max-width: 991.98px) {

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


    .ga-why-content {
        padding-right: 0;
    }


    .ga-why-visual {
        max-width: 650px;

        margin:
            25px auto 0;
    }

}


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

@media (max-width: 575.98px) {

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


    .ga-why-content h2 {
        font-size: 34px;

        letter-spacing: -.7px;
    }


    .ga-why-item {
        grid-template-columns:
            46px 1fr;

        gap: 12px;
    }


    .ga-why-list::before {
        left: 22px;
    }


    .ga-why-number {
        width: 46px;
        height: 46px;
    }


    .ga-why-item-content {
        grid-template-columns: 1fr;
    }


    .ga-why-item-icon {
        width: 42px;
        height: 42px;
    }


    .ga-why-bottom {
        gap: 20px;
    }


    /* VISUAL */

    .ga-why-visual {
        min-height: 530px;

        padding:
            0 0 25px 25px;
    }


    .ga-why-gold-shape {
        top: 25px;

        height: 86%;

        border-radius:
            90px 16px 16px 16px;
    }


    .ga-why-image {
        height: 480px;

        border-radius:
            90px 16px 16px 16px;
    }


    .ga-why-badge {
        top: 20px;
        right: 5px;
    }


    .ga-why-floating {
        width: 190px;

        padding: 20px;
    }


    .ga-floating-big {
        font-size: 22px;
    }

}


/* ==========================================================
   CONTACT + MAP SECTION
========================================================== */

.ga-contact-map-section {
    position: relative;
    overflow: hidden;

    padding: 80px 0;

    background: #FFFFFF;
}


/* ==========================================================
   BACKGROUND MAP
========================================================== */

.ga-contact-map-bg {
    position: absolute;

    z-index: 0;

    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 62%;

    overflow: hidden;

    pointer-events: none;
}


.ga-contact-map-bg iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;

    filter:
        saturate(.7)
        contrast(.92);
}


/* WHITE MAP OVERLAY */

.ga-contact-overlay {
    position: absolute;
    z-index: 1;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #FFFFFF 28%,
            rgba(255,255,255,.92) 48%,
            rgba(255,255,255,.55) 72%,
            rgba(255,255,255,.30) 100%
        );

    pointer-events: none;
}


.ga-contact-map-section .container {
    position: relative;

    z-index: 3;
}


/* ==========================================================
   MAIN BOX
========================================================== */

.ga-contact-box {
    width: 100%;

    max-width: 1200px;

    margin:
        0 auto;

    overflow: visible;

    border-radius: 28px;

    background:
        var(--ga-orange);

    box-shadow:
        0 30px 70px
        rgba(7,24,46,.14);
}


/* ==========================================================
   LEFT PANEL
========================================================== */

.ga-contact-info {
    position: relative;

    height: 100%;

    min-height: 710px;

    padding:
        48px 46px 40px;

    border-radius:
        28px 0 0 28px;

    background:
        linear-gradient(
            145deg,
            var(--ga-black) 0%,
            var(--ga-dark) 100%
        );

    color:
        var(--ga-white);
}


/* GOLD DECORATION */

.ga-contact-info::before {
    content: "";

    position: absolute;

    left: 0;
    top: 90px;

    width: 4px;
    height: 95px;

    border-radius:
        0 5px 5px 0;

    background:
        var(--ga-orange);
}


/* ==========================================================
   LOCATION LABEL
========================================================== */

.ga-contact-label {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    padding:
        8px 16px;

    border-radius: 50px;

    background:
        rgba(255,255,255,.13);

    color:
        var(--ga-white);

    font-size: 13px;

    font-weight: 600;
}


.ga-contact-label span {
    display: block;

    width: 8px;
    height: 8px;

    flex:
        0 0 8px;

    border-radius: 50%;

    background:
        var(--ga-orange);
}


/* ==========================================================
   LEFT TITLE
========================================================== */

.ga-contact-info h2 {
    max-width: 540px;

    margin:
        0 0 20px;

    color:
        var(--ga-white);

    font-size:
        clamp(38px, 3.5vw, 52px);

    line-height: 1.1;

    font-weight: 700;

    letter-spacing:
        -1px;
}


.ga-contact-info h2 span {
    color:
        var(--ga-orange);
}


/* ==========================================================
   INTRO
========================================================== */

.ga-contact-intro {
    max-width: 540px;

    margin: 0;

    color:
        rgba(255,255,255,.72);

    font-size: 15px;

    line-height: 1.8;
}


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

.ga-contact-divider {
    width: 100%;
    height: 1px;

    margin:
        28px 0 24px;

    background:
        rgba(255,255,255,.16);
}


/* ==========================================================
   ADDRESS
========================================================== */

.ga-address {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 24px;
}


.ga-address-icon {
    display: flex;

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

    width: 58px;
    height: 58px;

    flex:
        0 0 58px;

    border-radius: 50%;

    background:
        var(--ga-orange);

    color:
        var(--ga-black);

    font-size: 18px;

    box-shadow:
        0 10px 25px
        rgba(217,169,40,.20);
}


.ga-address-content {
    display: flex;

    flex-direction: column;
}


.ga-address-content small {
    margin-bottom: 5px;

    color:
        rgba(255,255,255,.58);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.ga-address-content address {
    margin: 0;

    color:
        var(--ga-white);

    font-size: 15px;

    line-height: 1.6;

    font-style: normal;
}


/* ==========================================================
   INNER MAP
========================================================== */

.ga-inner-map {
    position: relative;

    overflow: hidden;

    width: 100%;
    height: 470px;

    border-radius: 13px;

    border:
        4px solid
        rgba(255,255,255,.10);

    background:
        var(--ga-white);
}


.ga-inner-map iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


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

.ga-contact-form-wrap {
    position: relative;

    z-index: 5;

    min-height: 710px;

    margin:
        8px 8px 8px 0;

    padding:
        42px 42px 38px;

    border-radius:
        24px;

    background:
        var(--ga-white);

    box-shadow:
        0 15px 45px
        rgba(7,24,46,.10);
}


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

.ga-form-label {
    display: inline-flex;

    align-items: center;

    margin-bottom: 14px;

    padding:
        8px 16px;

    border-radius: 50px;

    background:
        var(--ga-light);

    color:
        var(--ga-black);

    font-size: 13px;

    font-weight: 600;
}


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

.ga-contact-form-wrap > h2 {
    margin:
        0 0 10px;

    color:
        var(--ga-black);

    font-size:
        32px;

    line-height: 1.2;

    font-weight: 700;
}


.ga-form-intro {
    max-width: 520px;

    margin:
        0 0 25px;

    color:
        var(--ga-gray);

    font-size: 14px;

    line-height: 1.7;
}


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

.ga-form-group {
    width: 100%;
}


.ga-form-group label {
    display: block;

    margin-bottom: 7px;

    color:
        var(--ga-dark);

    font-size: 13px;

    font-weight: 600;
}


/* INPUTS */

.ga-form-group input,
.ga-form-group select,
.ga-form-group textarea {
    display: block;

    width: 100%;

    padding:
        13px 15px;

    border:
        1px solid
        var(--ga-border);

    border-radius:
        8px;

    outline: none;

    background:
        var(--ga-white);

    color:
        var(--ga-black);

    font-family:
        inherit;

    font-size: 14px;

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


.ga-form-group input,
.ga-form-group select {
    height: 48px;
}


.ga-form-group textarea {
    min-height: 105px;

    resize: vertical;
}


.ga-form-group input::placeholder,
.ga-form-group textarea::placeholder {
    color:
        #9AA5B1;
}


/* FOCUS */

.ga-form-group input:focus,
.ga-form-group select:focus,
.ga-form-group textarea:focus {
    border-color:
        var(--ga-orange);

    box-shadow:
        0 0 0 3px
        rgba(217,169,40,.12);

    background:
        #FFFEFA;
}


/* ==========================================================
   SELECT
========================================================== */

.ga-form-group select {
    cursor: pointer;

    color:
        var(--ga-gray);
}


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

.ga-form-submit {
    display: flex;

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

    width: 100%;

    margin-top: 3px;

    padding:
        5px 5px 5px 25px;

    border: 0;

    border-radius: 50px;

    background:
        var(--ga-orange);

    color:
        var(--ga-black);

    font-family:
        inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.ga-form-submit i {
    display: flex;

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

    width: 46px;
    height: 46px;

    flex:
        0 0 46px;

    border-radius: 50%;

    background:
        var(--ga-black);

    color:
        var(--ga-white);

    font-size: 15px;

    transform:
        rotate(-45deg);

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}


.ga-form-submit:hover {
    background:
        var(--ga-black);

    color:
        var(--ga-white);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(7,24,46,.20);
}


.ga-form-submit:hover i {
    background:
        var(--ga-orange);

    color:
        var(--ga-black);

    transform:
        rotate(0);
}


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

@media (max-width: 1199.98px) {

    .ga-contact-info {
        padding:
            42px 35px 35px;
    }


    .ga-contact-form-wrap {
        padding:
            38px 32px 34px;
    }

}


/* ==========================================================
   STACK
========================================================== */

@media (max-width: 991.98px) {

    .ga-contact-map-section {
        padding:
            70px 0;
    }


    .ga-contact-box {
        max-width: 720px;
    }


    .ga-contact-info {
        min-height: auto;

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


    .ga-contact-form-wrap {
        min-height: auto;

        margin:
            0 8px 8px;

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


    .ga-inner-map {
        height: 330px;
    }

}


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

@media (max-width: 575.98px) {

    .ga-contact-map-section {
        padding:
            55px 0;
    }


    .ga-contact-box {
        border-radius:
            20px;
    }


    .ga-contact-info {
        padding:
            32px 20px 25px;

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


    .ga-contact-info h2 {
        font-size:
            34px;
    }


    .ga-contact-intro {
        font-size:
            14px;
    }


    .ga-address {
        align-items:
            flex-start;
    }


    .ga-address-icon {
        width: 48px;
        height: 48px;

        flex-basis:
            48px;
    }


    .ga-address-content address {
        font-size:
            13px;
    }


    .ga-inner-map {
        height:
            270px;
    }


    .ga-contact-form-wrap {
        margin:
            0 5px 5px;

        padding:
            30px 18px 25px;
    }


    .ga-contact-form-wrap > h2 {
        font-size:
            27px;
    }


    .ga-form-submit {
        padding-left:
            20px;
    }

}

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

/* FORM WRAPPER */
form.CUS {
    max-width: 900px;
    width: 100%;
    margin: 20px auto;
    padding: 20px;
    background: #f9fafb;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: system-ui, sans-serif;
}

/* FLEX FIELDSET */
form.CUS fieldset {
    display: flex;
    flex-wrap: wrap;
    border: none;
    padding: 0;
    margin: 0;
}

/* BASE BLOCK STYLE */
form.CUS fieldset > p {
    width: 100%;
    padding: 10px;
    margin: 0;
    font-size: 0.95rem;
    color: #444;
}

/* Universal input/select styling */
form.CUS input,
form.CUS select,
form.CUS textarea {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1rem;
}

/* ===============================
   ROW 1: Name, Phone, Address
=============================== */
form.CUS fieldset > p:nth-of-type(1),
form.CUS fieldset > p:nth-of-type(2),
form.CUS fieldset > p:nth-of-type(3) {
    width: 33.333%;
}

/* ===============================
   ROW 2: City, State, Zip Code
=============================== */
form.CUS fieldset > p:nth-of-type(4),
form.CUS fieldset > p:nth-of-type(5),
form.CUS fieldset > p:nth-of-type(6) {
    width: 33.333%;
}

/* ===============================
   SERVICE NEEDED TEXTAREA
=============================== */
form.CUS fieldset > p:nth-of-type(7) {
    width: 100%;
}

/* ===============================
   SERVICE DATE (Month, Day, Year)
   → ALL 3 IN ONE ROW
=============================== */

/* Make the 8th <p> (Service Date block) a flex row */
form.CUS fieldset > p:nth-of-type(8) {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: flex-start;
}

/* Month, Day, Year = 3 equal flex columns */
form.CUS fieldset > p:nth-of-type(8) select#service_date,
form.CUS fieldset > p:nth-of-type(8) select#service_day,
form.CUS fieldset > p:nth-of-type(8) input#service_year {
    flex: 1 1 0;
            /* flex handles width */
    margin-top: 6px;
}

/* ===============================
   SERVICE TIME (Full width)
=============================== */
form.CUS fieldset > p:nth-of-type(9) {
    width: 100%;
}

/* ===============================
   SUBMIT BUTTON (Full width)
=============================== */
form.CUS fieldset > p:nth-of-type(10) {
    width: 100%;
}

form.CUS input[type="submit"] {
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

form.CUS input[type="submit"]:hover {
    background: #030827;
}

/* Hide honeypot */
form.CUS input.subject {
    display: none;
}

/* ===============================
   MOBILE RESPONSIVE (stack fields)
=============================== */
@media (max-width: 600px) {

    form.CUS fieldset > p {
        width: 100%;
        padding: 6px 0;
    }

    /* Month, Day, Year full width stacked on mobile */
    form.CUS fieldset > p:nth-of-type(8) {
        flex-direction: column;
        gap: 6px;
    }

    form.CUS fieldset > p:nth-of-type(8) select#service_date,
    form.CUS fieldset > p:nth-of-type(8) select#service_day,
    form.CUS fieldset > p:nth-of-type(8) input#service_year {
        flex: none;
        width: 100% !important;
    }
/* ===============================
   ROW 1: Name, Phone, Address
=============================== */
form.CUS fieldset > p:nth-of-type(1),
form.CUS fieldset > p:nth-of-type(2),
form.CUS fieldset > p:nth-of-type(3) {
    width: 100%;
}

/* ===============================
   ROW 2: City, State, Zip Code
=============================== */
form.CUS fieldset > p:nth-of-type(4),
form.CUS fieldset > p:nth-of-type(5),
form.CUS fieldset > p:nth-of-type(6) {
    width: 100%;
}
}



.blogbox{text-align:justify;padding:20px;background-color:#FFF;box-sizing:border-box;clear:both;overflow:hidden;margin-bottom:15px;box-shadow:3px 3px 7px rgba(0,0,0,0.2)}
.blogbox .blogimg img {float: right; width: 35%; height: auto; margin: 15px;box-shadow: 0 0 3px rgba(0,0,0,0.8)}
.blogbox .read-more a{background-color:#ccc;color:#2D2D2D;padding:10px;border-radius:5px;border:1px solid #2D2D2D}
.blogbox .read-more a:hover {background-color:#2D2D2D;color:#FFF;letter-spacing: 2px;padding:10px 15px}
.blogpost {text-align: justify;padding:20px;background-color: #FFF;box-sizing: border-box}
.blogpost h1, .blogbox h1 {margin:0;font-size:28px;color:#222;}
.blogpost h2, .blogbox h2 {margin:0;font-size:24px;color:#222;}
.blogpost .blog_wrapper img {float: right; max-width: 35%; height: auto; margin: 15px;box-shadow: 0 0 3px rgba(0,0,0,0.8)}
.socialbox{overflow:hidden;position:relative;text-align:center;width:100%;}
.social-share-btns{display:inline-block;overflow:hidden}
.social-share-btns .share-btn{float:left;margin:0 5px;padding:8px 16px;border-radius:3px;color:#fff;font-size:14px;line-height:18px;vertical-align:middle;transition:background .2s ease-in-out;display:flex;align-items:center;}
.social-share-btns .share-btn svg {fill:currentColor;height:1rem;width:1rem;margin-right:10px;}
.share-btn{background-color:#95a5a6}
.share-btn:hover{background-color:#798d8f}
.share-btn-twitter{background-color:#00aced}
.share-btn-twitter:hover{background-color:#0087ba}
.share-btn-facebook{background-color:#3b5998}
.share-btn-facebook:hover{background-color:#2d4373}
.share-btn-linkedin{background-color:#007bb6}
.share-btn-linkedin:hover{background-color:#005983}
@media only screen and (max-width:700px){
.blogbox .blogimg img{max-width:90%;width:auto}
}



/* ==========================================================
   REAL FAILURE REPAIR SECTION
========================================================== */

.ga-real-repair-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0;

    background: var(--ga-light);
}


/* subtle background decoration */

.ga-real-repair-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -230px;
    bottom: -220px;

    border-radius: 50%;

    border: 70px solid rgba(217, 169, 40, .06);

    pointer-events: none;
}


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

.ga-real-repair-content {
    position: relative;

    z-index: 2;

    max-width: 760px;

    padding-right: 30px;
}


/* LABEL */

.ga-real-repair-label {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    padding: 8px 17px;

    border-radius: 50px;

    background: var(--ga-white);

    color: var(--ga-black);

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 8px 25px
        rgba(7, 24, 46, .05);
}


.ga-real-repair-label span {
    display: block;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--ga-orange);
}


/* ==========================================================
   MAIN TITLE
========================================================== */

.ga-real-repair-content > h2 {
    max-width: 700px;

    margin: 0 0 28px;

    color: var(--ga-black);

    font-size:
        clamp(38px, 4vw, 56px);

    line-height: 1.08;

    font-weight: 750;

    letter-spacing: -1.4px;
}


/* ==========================================================
   PARAGRAPHS
========================================================== */

.ga-real-repair-content > p {
    max-width: 720px;

    margin: 0 0 17px;

    color: var(--ga-gray);

    font-size: 15px;

    line-height: 1.9;
}


/* ==========================================================
   SECOND CONTENT AREA
========================================================== */

.ga-real-repair-subsection {
    position: relative;

    display: grid;

    grid-template-columns: 70px 1fr;

    gap: 25px;

    margin-top: 42px;

    padding-top: 40px;

    border-top:
        1px solid
        var(--ga-border);
}


/* NUMBER */

.ga-real-repair-number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    border-radius: 50% 50% 50% 8px;

    background: var(--ga-orange);
    color: var(--ga-black);

    font-size: 22px;

    box-shadow: 0 12px 25px rgba(217, 169, 40, .22);

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease,
        border-radius .35s ease;
}

.ga-real-repair-subsection:hover .ga-real-repair-number {
    background: var(--ga-black);
    color: var(--ga-orange);

    border-radius: 50%;

    transform: rotate(-8deg) scale(1.06);
}

.ga-real-repair-number i {
    transition: transform .35s ease;
}

.ga-real-repair-subsection:hover .ga-real-repair-number i {
    transform: rotate(18deg);
}

/* SECOND TITLE */

.ga-real-repair-subcontent h3 {
    max-width: 610px;

    margin:
        0 0 17px;

    color:
        var(--ga-black);

    font-size:
        clamp(27px, 2.6vw, 36px);

    line-height: 1.18;

    font-weight: 700;

    letter-spacing: -.7px;
}


.ga-real-repair-subcontent p {
    margin:
        0 0 15px;

    color:
        var(--ga-gray);

    font-size: 15px;

    line-height: 1.9;
}


.ga-real-repair-subcontent p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   RIGHT VISUAL
========================================================== */

.ga-real-repair-visual {
    position: sticky;

    top: 110px;

    width: 100%;

    max-width: 500px;

    min-height: 830px;

    margin-left: auto;

    padding:
        30px 25px 35px 0;
}


/* ==========================================================
   GOLD SHAPE
========================================================== */

.ga-real-repair-shape {
    position: absolute;

    z-index: 0;

    top: 0;
    right: 0;

    width: 82%;
    height: 92%;

    border-radius:
        25px 150px 25px 25px;

    background:
        var(--ga-orange);
}


/* ==========================================================
   IMAGE
========================================================== */

.ga-real-repair-image {
    position: relative;

    z-index: 2;

    overflow: hidden;

    width: calc(100% - 25px);
    height: 610px;

    border-radius:
        22px 140px 22px 22px;

    background:
        var(--ga-white);

    box-shadow:
        0 25px 55px
        rgba(7, 24, 46, .15);
}


.ga-real-repair-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .8s ease;
}


.ga-real-repair-visual:hover
.ga-real-repair-image img {

    transform:
        scale(1.045);
}


/* ==========================================================
   FLOATING CARD
========================================================== */

.ga-real-repair-card {
    position: absolute;

    z-index: 5;

    left: -35px;
    bottom: 0;

    display: flex;

    align-items: center;

    gap: 15px;

    min-width: 245px;

    padding:
        18px 22px;

    border-radius:
        18px 18px 18px 5px;

    background:
        var(--ga-black);

    box-shadow:
        0 20px 40px
        rgba(7, 24, 46, .28);

    animation:
        gaRealCardFloat
        4s ease-in-out infinite;
}


/* CARD ICON */

.ga-real-card-icon {
    display: flex;

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

    width: 50px;
    height: 50px;

    flex:
        0 0 50px;

    border-radius: 50%;

    background:
        var(--ga-orange);

    color:
        var(--ga-black);

    font-size: 17px;
}


.ga-real-repair-card > div {
    display: flex;

    flex-direction: column;
}


.ga-real-repair-card small {
    margin-bottom: 4px;

    color:
        var(--ga-orange);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.5px;
}


.ga-real-repair-card strong {
    color:
        var(--ga-white);

    font-size: 17px;

    line-height: 1.25;

    font-weight: 700;
}


@keyframes gaRealCardFloat {

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

    50% {
        transform:
            translateY(-8px);
    }

}


/* ==========================================================
   DOT DECORATION
========================================================== */

.ga-real-repair-dots {
    position: absolute;

    z-index: 4;

    right: 3px;
    bottom: 38px;

    display: grid;

    grid-template-columns:
        repeat(2, 5px);

    gap: 8px;
}


.ga-real-repair-dots span {
    display: block;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--ga-black);
}


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

@media (max-width: 1199.98px) {

    .ga-real-repair-content {
        padding-right: 5px;
    }


    .ga-real-repair-visual {
        min-height: 620px;
    }


    .ga-real-repair-image {
        height: 555px;
    }


    .ga-real-repair-card {
        left: -15px;
    }

}


/* ==========================================================
   BELOW 992
========================================================== */

@media (max-width: 991.98px) {

    .ga-real-repair-section {
        padding:
            80px 0;
    }


    .ga-real-repair-content {
        max-width: 100%;

        padding-right: 0;
    }


    .ga-real-repair-content > h2 {
        max-width: 800px;
    }


    .ga-real-repair-content > p {
        max-width: 100%;
    }


    .ga-real-repair-visual {
        position: relative;

        top: auto;

        max-width: 650px;

        margin:
            25px auto 0;
    }


    .ga-real-repair-image {
        width: calc(100% - 25px);

        height: 600px;
    }

}


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

@media (max-width: 575.98px) {

    .ga-real-repair-section {
        padding:
            60px 0;
    }


    .ga-real-repair-content > h2 {
        font-size: 34px;

        letter-spacing: -.6px;
    }


    .ga-real-repair-content > p,
    .ga-real-repair-subcontent p {

        font-size: 14px;

        line-height: 1.8;
    }


    /* SECOND AREA */

    .ga-real-repair-subsection {
        grid-template-columns: 1fr;

        gap: 17px;

        margin-top: 30px;

        padding-top: 30px;
    }


    .ga-real-repair-number {
        width: 52px;
        height: 52px;
    }


    .ga-real-repair-subcontent h3 {
        font-size: 27px;
    }


    /* IMAGE */

    .ga-real-repair-visual {
        min-height: 510px;

        padding:
            20px 15px 25px 0;
    }


    .ga-real-repair-shape {
        border-radius:
            18px 85px 18px 18px;
    }


    .ga-real-repair-image {
        width:
            calc(100% - 15px);

        height: 465px;

        border-radius:
            18px 80px 18px 18px;
    }


    .ga-real-repair-card {
        left: 12px;
        bottom: 0;

        min-width: 215px;

        padding:
            14px 17px;
    }


    .ga-real-card-icon {
        width: 43px;
        height: 43px;

        flex-basis: 43px;
    }


    .ga-real-repair-card strong {
        font-size: 15px;
    }

}

/* ==========================================================
   PHONE BUTTON
========================================================== */

.ga-real-repair-action {
    display: flex;
    align-items: center;

    margin-top: 30px;
}

.ga-real-call-btn {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    min-width: 285px;

    padding: 6px 7px;

    border-radius: 60px;

    background: var(--ga-black);

    color: var(--ga-white);

    text-decoration: none;

    box-shadow:
        0 14px 30px
        rgba(7, 24, 46, .16);

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}


/* PHONE ICON */

.ga-real-call-icon {
    display: flex;

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

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    border-radius: 50%;

    background: var(--ga-orange);

    color: var(--ga-black);

    font-size: 16px;

    transition:
        transform .3s ease,
        background .3s ease;
}


/* TEXT */

.ga-real-call-text {
    display: flex;

    flex-direction: column;

    flex: 1;
}

.ga-real-call-text small {
    margin-bottom: 2px;

    color: var(--ga-orange);

    font-size: 9px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1.3px;
}

.ga-real-call-text strong {
    color: var(--ga-white);

    font-size: 17px;

    line-height: 1.2;

    font-weight: 750;

    letter-spacing: .3px;
}


/* ARROW */

.ga-real-call-arrow {
    display: flex;

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

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    margin-right: 2px;

    border-radius: 50%;

    background: rgba(255,255,255,.10);

    color: var(--ga-white);

    font-size: 12px;

    transform: rotate(-45deg);

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}


/* HOVER */

.ga-real-call-btn:hover {
    background: var(--ga-orange);

    color: var(--ga-black);

    transform: translateY(-3px);

    box-shadow:
        0 18px 35px
        rgba(7, 24, 46, .22);
}

.ga-real-call-btn:hover .ga-real-call-icon {
    background: var(--ga-black);

    color: var(--ga-orange);

    transform: rotate(-10deg);
}

.ga-real-call-btn:hover .ga-real-call-text small,
.ga-real-call-btn:hover .ga-real-call-text strong {
    color: var(--ga-black);
}

.ga-real-call-btn:hover .ga-real-call-arrow {
    background: var(--ga-black);

    color: var(--ga-orange);

    transform: rotate(0deg);
}


/* ==========================================================
   FEATURED PROJECTS
========================================================== */

.ga-projects-section {
    position: relative;
    overflow: hidden;

    padding: 110px 0 120px;

    background: var(--ga-black);
}


/* ==========================================================
   HUGE BACKGROUND WORD
========================================================== */

.ga-projects-big-text {
    position: absolute;

    z-index: 0;

    top: 30px;
    left: 50%;

    transform: translateX(-50%);

    color: rgba(255,255,255,.025);

    font-size: clamp(130px, 20vw, 330px);
    line-height: .8;

    font-weight: 900;

    letter-spacing: -15px;

    white-space: nowrap;

    pointer-events: none;

    animation: gaProjectBigText 8s ease-in-out infinite;
}


@keyframes gaProjectBigText {

    0%,
    100% {
        transform:
            translateX(-50%);
    }

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

}


.ga-projects-section .container {
    position: relative;
    z-index: 2;
}


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

.ga-projects-heading {
    margin-bottom: 55px;
}


/* LABEL */

.ga-projects-label {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    padding: 8px 16px;

    border-radius: 50px;

    background: rgba(255,255,255,.08);

    color: var(--ga-white);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .5px;
}


.ga-projects-label span {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--ga-orange);

    box-shadow:
        0 0 0 5px
        rgba(217,169,40,.12);
}


/* TITLE */

.ga-projects-heading h2 {
    max-width: 800px;

    margin: 0;

    color: var(--ga-white);

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

    line-height: 1.03;

    font-weight: 750;

    letter-spacing: -2px;
}


.ga-projects-heading h2 span {
    color: var(--ga-orange);
}


/* DESCRIPTION */

.ga-projects-heading p {
    max-width: 390px;

    margin:
        0 0 5px auto;

    padding-left: 25px;

    border-left:
        2px solid
        var(--ga-orange);

    color:
        rgba(255,255,255,.58);

    font-size: 14px;

    line-height: 1.8;
}


/* ==========================================================
   PROJECT GRID
========================================================== */

.ga-projects-grid {
    display: flex;

    width: 100%;
    height: 570px;

    gap: 13px;
}


/* ==========================================================
   PROJECT CARD
========================================================== */

.ga-project-card {
    position: relative;

    flex: .72;

    min-width: 0;

    overflow: hidden;

    border-radius: 8px;

    background: var(--ga-dark);

    cursor: pointer;

    transition:
        flex .75s cubic-bezier(.2,.75,.25,1),
        transform .5s ease;
}


/* FIRST CARD OPEN */

.ga-project-card.ga-project-active {
    flex: 2.4;
}


/* WHEN HOVERING GRID */

.ga-projects-grid:hover
.ga-project-card.ga-project-active {

    flex: .72;
}


/* OPEN HOVERED CARD */

.ga-projects-grid
.ga-project-card:hover {

    flex: 2.4;
}


/* ==========================================================
   IMAGE
========================================================== */

.ga-project-card > img {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        grayscale(35%)
        brightness(.72);

    transform:
        scale(1.04);

    transition:
        transform 1s cubic-bezier(.2,.75,.25,1),
        filter .7s ease;
}


.ga-project-card.ga-project-active > img {
    filter:
        grayscale(0)
        brightness(.82);
}


.ga-projects-grid:hover
.ga-project-card.ga-project-active > img {

    filter:
        grayscale(35%)
        brightness(.72);
}


.ga-project-card:hover > img {
    transform: scale(1.10);

    filter:
        grayscale(0)
        brightness(.84);
}


/* ==========================================================
   IMAGE OVERLAY
========================================================== */

.ga-project-overlay {
    position: absolute;

    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(7,24,46,.04) 20%,
            rgba(7,24,46,.22) 52%,
            rgba(7,24,46,.94) 100%
        );

    transition:
        background .5s ease;
}


.ga-project-card:hover
.ga-project-overlay {

    background:
        linear-gradient(
            180deg,
            rgba(7,24,46,.02) 15%,
            rgba(7,24,46,.12) 45%,
            rgba(7,24,46,.93) 100%
        );
}


/* ==========================================================
   NUMBER
========================================================== */

.ga-project-number {
    position: absolute;

    z-index: 4;

    top: 25px;
    left: 50%;

    transform:
        translateX(-50%);

    color:
        rgba(255,255,255,.65);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    transition:
        left .6s ease,
        transform .6s ease,
        color .3s ease;
}


/* NUMBER MOVES LEFT ON OPEN */

.ga-project-card.ga-project-active
.ga-project-number {

    left: 27px;

    transform:
        translateX(0);

    color:
        var(--ga-orange);
}


.ga-projects-grid:hover
.ga-project-card.ga-project-active
.ga-project-number {

    left: 50%;

    transform:
        translateX(-50%);

    color:
        rgba(255,255,255,.65);
}


.ga-projects-grid
.ga-project-card:hover
.ga-project-number {

    left: 27px;

    transform:
        translateX(0);

    color:
        var(--ga-orange);
}


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

.ga-project-content {
    position: absolute;

    z-index: 4;

    left: 30px;
    right: 85px;
    bottom: 30px;

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity .4s ease .18s,
        transform .5s ease .18s;
}


/* DEFAULT OPEN CARD */

.ga-project-card.ga-project-active
.ga-project-content {

    opacity: 1;

    transform:
        translateY(0);
}


/* CLOSE DEFAULT WHEN GRID HOVER */

.ga-projects-grid:hover
.ga-project-card.ga-project-active
.ga-project-content {

    opacity: 0;

    transform:
        translateY(25px);
}


/* SHOW HOVERED */

.ga-projects-grid
.ga-project-card:hover
.ga-project-content {

    opacity: 1;

    transform:
        translateY(0);
}


/* CATEGORY */

.ga-project-category {
    display: block;

    margin-bottom: 8px;

    color:
        var(--ga-orange);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* PROJECT TITLE */

.ga-project-content h3 {
    margin: 0;

    color:
        var(--ga-white);

    font-size: clamp(26px, 2.5vw, 38px);

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -.8px;
}


/* ==========================================================
   ARROW
========================================================== */

.ga-project-arrow {
    position: absolute;

    z-index: 6;

    right: 27px;
    bottom: 28px;

    display: flex;

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

    width: 52px;
    height: 52px;

    border-radius: 50%;

    background: var(--ga-orange);

    color: var(--ga-black);

    text-decoration: none;

    opacity: 0;

    transform:
        scale(.5)
        rotate(-45deg);

    transition:
        opacity .4s ease .2s,
        transform .5s ease .2s,
        background .3s ease,
        color .3s ease;
}


/* DEFAULT ACTIVE */

.ga-project-card.ga-project-active
.ga-project-arrow {

    opacity: 1;

    transform:
        scale(1)
        rotate(-45deg);
}


/* RESET ACTIVE */

.ga-projects-grid:hover
.ga-project-card.ga-project-active
.ga-project-arrow {

    opacity: 0;

    transform:
        scale(.5)
        rotate(-45deg);
}


/* HOVERED CARD */

.ga-projects-grid
.ga-project-card:hover
.ga-project-arrow {

    opacity: 1;

    transform:
        scale(1)
        rotate(-45deg);
}


.ga-project-arrow:hover {
    background: var(--ga-white);

    color: var(--ga-black);

    transform:
        scale(1.08)
        rotate(0deg) !important;
}


/* ==========================================================
   GOLD LINE ON BOTTOM
========================================================== */

.ga-project-card::after {
    content: "";

    position: absolute;

    z-index: 5;

    left: 0;
    bottom: 0;

    width: 0;
    height: 4px;

    background: var(--ga-orange);

    transition:
        width .7s
        cubic-bezier(.2,.75,.25,1);
}


.ga-project-card.ga-project-active::after {
    width: 100%;
}


.ga-projects-grid:hover
.ga-project-card.ga-project-active::after {

    width: 0;
}


.ga-projects-grid
.ga-project-card:hover::after {

    width: 100%;
}


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

@media (max-width: 1199.98px) {

    .ga-projects-grid {
        height: 520px;
    }

    .ga-project-card {
        flex: .65;
    }

    .ga-project-card.ga-project-active {
        flex: 2.1;
    }

    .ga-projects-grid
    .ga-project-card:hover {
        flex: 2.1;
    }

}


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

@media (max-width: 991.98px) {

    .ga-projects-section {
        padding:
            80px 0;
    }


    .ga-projects-heading p {
        max-width: 100%;

        margin:
            25px 0 0;

        padding-left: 18px;
    }


    .ga-projects-grid {
        display: grid;

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

        height: auto;

        gap: 18px;
    }


    .ga-project-card,
    .ga-project-card.ga-project-active,
    .ga-projects-grid:hover
    .ga-project-card.ga-project-active,
    .ga-projects-grid
    .ga-project-card:hover {

        width: 100%;
        height: 440px;

        flex: none;
    }


    .ga-project-content,
    .ga-project-card.ga-project-active
    .ga-project-content,
    .ga-projects-grid:hover
    .ga-project-card.ga-project-active
    .ga-project-content {

        left: 24px;
        right: 75px;
        bottom: 24px;

        opacity: 1;

        transform: none;
    }


    .ga-project-arrow,
    .ga-project-card.ga-project-active
    .ga-project-arrow,
    .ga-projects-grid:hover
    .ga-project-card.ga-project-active
    .ga-project-arrow {

        right: 22px;
        bottom: 22px;

        opacity: 1;

        transform:
            scale(1)
            rotate(-45deg);
    }


    .ga-project-number,
    .ga-project-card.ga-project-active
    .ga-project-number,
    .ga-projects-grid:hover
    .ga-project-card.ga-project-active
    .ga-project-number {

        left: 24px;

        transform: none;

        color:
            var(--ga-orange);
    }


    .ga-project-card::after,
    .ga-project-card.ga-project-active::after,
    .ga-projects-grid:hover
    .ga-project-card.ga-project-active::after {

        width: 100%;
    }

}


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

@media (max-width: 575.98px) {

    .ga-projects-section {
        padding:
            60px 0;
    }


    .ga-projects-big-text {
        top: 20px;

        font-size: 105px;

        letter-spacing: -7px;
    }


    .ga-projects-heading {
        margin-bottom: 35px;
    }


    .ga-projects-heading h2 {
        font-size: 36px;

        letter-spacing: -1px;
    }


    .ga-projects-grid {
        grid-template-columns: 1fr;
    }


    .ga-project-card,
    .ga-project-card.ga-project-active,
    .ga-projects-grid:hover
    .ga-project-card.ga-project-active,
    .ga-projects-grid
    .ga-project-card:hover {

        height: 430px;
    }


    .ga-project-content h3 {
        font-size: 28px;
    }


    .ga-project-arrow {
        width: 46px;
        height: 46px;
    }

}

/* ==========================================================
   CUSTOMER REVIEWS
========================================================== */

.ga-reviews-section {
    position: relative;
    overflow: hidden;

    padding: 90px 0;

    background: #F7F3EE;
}


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

.ga-reviews-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 7px;

    padding: 7px 16px;

    border-radius: 50px;

    background: var(--ga-white);

    color: var(--ga-black);

    font-size: 12px;
    font-weight: 600;
}

.ga-reviews-label span {
    display: block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--ga-orange);
}


/* ==========================================================
   TITLE
========================================================== */

.ga-reviews-title {
    max-width: 760px;

    margin: 0;

    color: var(--ga-black);

    font-size: clamp(20px, 2vw, 54px);
    line-height: 1.08;

    font-weight: 750;

    letter-spacing: -1.4px;
}

.ga-reviews-title span {
    display: block;
}


/* ==========================================================
   LEFT SIDE
========================================================== */

.ga-reviews-left {
    width: 100%;
}


/* IMAGE */

.ga-reviews-image {
    position: relative;

    overflow: hidden;

    width: 100%;
    height: 380px;

    border-radius: 22px;

    background: var(--ga-border);
}

.ga-reviews-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}

.ga-reviews-image:hover img {
    transform: scale(1.05);
}


/* ==========================================================
   PEOPLE
========================================================== */

.ga-review-people {
    margin-top: 30px;
}

.ga-review-avatars {
    display: flex;
    align-items: center;

    padding-left: 5px;
}

.ga-review-avatars img,
.ga-review-plus {
    position: relative;

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

    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    margin-left: -9px;

    border: 3px solid #F7F3EE;

    border-radius: 50%;

    object-fit: cover;
}

.ga-review-avatars img:first-child {
    margin-left: 0;
}

.ga-review-plus {
    z-index: 5;

    background: var(--ga-white);

    color: var(--ga-orange);

    font-size: 17px;
}

.ga-review-people p {
    margin: 7px 0 0;

    color: var(--ga-black);

    font-size: 13px;
}


/* ==========================================================
   REVIEW GRID
========================================================== */

.ga-review-grid {
    display: grid;

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

    gap: 8px;

    padding: 8px;

    border-radius: 30px;

    background: var(--ga-white);
}


/* ==========================================================
   REVIEW CARD
========================================================== */

.ga-review-card {
    position: relative;

    min-height: 235px;

    padding: 34px 32px 28px;

    border-radius: 24px;

    background: #F7F3EE;

    transition:
        transform .35s ease,
        background .35s ease,
        box-shadow .35s ease;
}

.ga-review-card:hover {
    z-index: 3;

    transform: translateY(-5px);

    background: var(--ga-white);

    box-shadow:
        0 18px 40px
        rgba(7,24,46,.09);
}


/* ==========================================================
   NUMBER
========================================================== */

.ga-review-number {
    position: absolute;

    top: 35px;
    right: 30px;

    color: var(--ga-gray);

    font-size: 11px;
}


/* ==========================================================
   STARS
========================================================== */

.ga-review-stars {
    display: flex;

    align-items: center;

    gap: 4px;

    min-height: 31px;

    margin-bottom: 25px;

    color: var(--ga-orange);

    font-size: 17px;
}

.ga-review-stars i {
    transition: transform .3s ease;
}

.ga-review-card:hover
.ga-review-stars i:nth-child(1) {
    transform: translateY(-3px);
}

.ga-review-card:hover
.ga-review-stars i:nth-child(2) {
    transform: translateY(-5px);
}

.ga-review-card:hover
.ga-review-stars i:nth-child(3) {
    transform: translateY(-7px);
}

.ga-review-card:hover
.ga-review-stars i:nth-child(4) {
    transform: translateY(-5px);
}

.ga-review-card:hover
.ga-review-stars i:nth-child(5) {
    transform: translateY(-3px);
}


/* ==========================================================
   REVIEW TITLE
========================================================== */

.ga-review-card h3 {
    margin: 0 0 14px;

    color: var(--ga-black);

    font-size: 20px;
    line-height: 1.3;

    font-weight: 650;
}


/* ==========================================================
   REVIEW TEXT
========================================================== */

.ga-review-card > p {
    max-width: 360px;

    margin: 0 0 20px;

    color: var(--ga-gray);

    font-size: 13px;
    line-height: 1.75;
}


/* ==========================================================
   AUTHOR
========================================================== */

.ga-review-author {
    display: flex;
    align-items: center;

    gap: 10px;
}

.ga-review-author > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    border-radius: 50%;

    background: var(--ga-orange);

    color: var(--ga-black);

    font-size: 12px;
    font-weight: 800;
}

.ga-review-author > div {
    display: flex;
    flex-direction: column;
}

.ga-review-author strong {
    color: var(--ga-black);

    font-size: 12px;
    line-height: 1.3;
}

.ga-review-author small {
    margin-top: 2px;

    color: var(--ga-gray);

    font-size: 10px;
}


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

@media (max-width: 1199.98px) {

    .ga-reviews-image {
        height: 360px;
    }

    .ga-review-card {
        padding:
            30px 25px 25px;
    }

}


/* ==========================================================
   BELOW 992
========================================================== */

@media (max-width: 991.98px) {

    .ga-reviews-section {
        padding: 75px 0;
    }

    .ga-reviews-title {
        margin-top: 25px;
    }

    .ga-reviews-image {
        height: 500px;
    }

    .ga-review-people {
        margin-bottom: 30px;
    }

}


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

@media (max-width: 767.98px) {

    .ga-review-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 575.98px) {

    .ga-reviews-section {
        padding: 60px 0;
    }

    .ga-reviews-title {
        font-size: 34px;
    }

    .ga-reviews-image {
        height: 410px;

        border-radius: 18px;
    }

    .ga-review-grid {
        padding: 6px;

        border-radius: 22px;
    }

    .ga-review-card {
        min-height: auto;

        padding: 28px 22px;

        border-radius: 18px;
    }

    .ga-review-number {
        top: 29px;
        right: 22px;
    }

}
/* ==========================================================
   BRANDS SHOWCASE
========================================================== */

.ga-brands-showcase {
    position: relative;
    z-index: 1;

    overflow: hidden;

    padding: 90px 0 75px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.94) 0%,
            rgba(255,255,255,.98) 25%,
            #FFFFFF 50%,
            rgba(255,255,255,.98) 75%,
            rgba(255,255,255,.94) 100%
        );
}


/* ==========================================================
   GARAGE BACKGROUND
========================================================== */

.ga-brands-showcase::before {
    content: "";

    position: absolute;
    z-index: -3;

    inset: 0;

  
}


/* WHITE FADE */

.ga-brands-showcase::after {
    content: "";

    position: absolute;
    z-index: -2;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.25) 0%,
            rgba(255,255,255,.88) 20%,
            rgba(255,255,255,.98) 38%,
            rgba(255,255,255,.98) 62%,
            rgba(255,255,255,.88) 80%,
            rgba(255,255,255,.25) 100%
        );

    pointer-events: none;
}


.ga-brands-showcase .container {
    position: relative;
    z-index: 3;
}


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

.ga-brands-heading {
    max-width: 1000px;

    margin: 0 auto 42px;

    text-align: center;
}


/* LABEL */

.ga-brands-label {
    display: flex;

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

    gap: 18px;

    margin-bottom: 18px;

    color: var(--ga-black);

    font-size: 12px;
    line-height: 1;

    font-weight: 750;

    letter-spacing: 4px;
}


.ga-brands-label span {
    display: block;

    width: 68px;
    height: 2px;

    background: var(--ga-orange);
}


/* ==========================================================
   TITLE
========================================================== */

.ga-brands-heading h2 {
    max-width: 1000px;

    margin: 0 auto 20px;

    color: var(--ga-black);

    font-size: clamp(42px, 5vw, 66px);
    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -2px;
}


.ga-brands-heading h2 span {
    display: block;

    color: var(--ga-orange-dark);
}


/* GOLD UNDERLINE */

.ga-brands-heading h2 span::after {
    content: "";

    display: block;

    width: 175px;
    height: 4px;

    margin: 13px auto 0;

    border-radius: 20px;

    background: var(--ga-orange);

    transform: rotate(-2deg);
}


/* TEXT */

.ga-brands-heading p {
    max-width: 790px;

    margin: 22px auto 0;

    color: var(--ga-gray);

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


/* ==========================================================
   FEATURES
========================================================== */

.ga-brand-features {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    max-width: 1050px;

    margin: 0 auto 38px;
}


/* FEATURE */

.ga-brand-feature {
    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 8px 28px;
}


/* DIVIDER */

.ga-brand-feature:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 0;

    width: 1px;
    height: 46px;

    transform: translateY(-50%);

    background: var(--ga-border);
}


/* ==========================================================
   FEATURE ICON
========================================================== */

.ga-brand-feature-icon {
    display: flex;

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

    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    border:
        2px solid
        var(--ga-orange);

    border-radius: 50%;

    background: var(--ga-white);

    color: var(--ga-orange-dark);

    font-size: 19px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.ga-brand-feature:hover
.ga-brand-feature-icon {

    background: var(--ga-orange);

    color: var(--ga-black);

    transform:
        translateY(-5px)
        rotate(-7deg);

    box-shadow:
        0 10px 25px
        rgba(217,169,40,.22);
}


/* FEATURE TEXT */

.ga-brand-feature > div:last-child {
    display: flex;

    flex-direction: column;
}


.ga-brand-feature strong {
    margin-bottom: 3px;

    color: var(--ga-black);

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

    font-weight: 750;
}


.ga-brand-feature span {
    color: var(--ga-gray);

    font-size: 11px;
    line-height: 1.3;
}


/* ==========================================================
   WHITE LOGO BAR
========================================================== */

.ga-brands-logo-box {
    position: relative;

    display: grid;

    grid-template-columns:
        repeat(10, 1fr);

    align-items: center;

    width: calc(100% + 100px);

    margin-left: -50px;

    padding: 27px 24px;

    border:
        1px solid
        rgba(220,227,234,.7);

    border-radius: 24px;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 20px 50px
        rgba(7,24,46,.10);

    backdrop-filter:
        blur(8px);
}


/* GOLD TOP LINE */

.ga-brands-logo-box::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 0;
    height: 3px;

    transform:
        translateX(-50%);

    border-radius:
        0 0 10px 10px;

    background:
        var(--ga-orange);

    transition:
        width .7s ease;
}


.ga-brands-logo-box:hover::before {
    width: 70%;
}


/* ==========================================================
   INDIVIDUAL LOGO
========================================================== */

.ga-brand-logo {
    position: relative;

    display: flex;

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

    min-width: 0;
    min-height: 75px;

    padding: 7px 13px;
}


/* DIVIDERS */

.ga-brand-logo:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 0;

    width: 1px;
    height: 50px;

    transform:
        translateY(-50%);

    background:
        var(--ga-border);
}


/* IMAGE */

.ga-brand-logo img {
    display: block;

    max-width: 100%;
    width: auto;

    max-height: 48px;
    height: auto;

    object-fit: contain;

    filter:
        grayscale(20%);

    opacity: .85;

    transition:
        filter .35s ease,
        opacity .35s ease,
        transform .35s ease;
}


/* LOGO HOVER */

.ga-brand-logo:hover img {
    filter:
        grayscale(0);

    opacity: 1;

    transform:
        scale(1.10)
        translateY(-3px);
}


/* ==========================================================
   BOTTOM TEXT
========================================================== */

.ga-brands-bottom {
    display: flex;

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

    gap: 0;

    max-width: 850px;

    margin: 27px auto 0;
}


.ga-brands-bottom > span {
    display: block;

    flex: 1;

    height: 1px;

    background: var(--ga-orange);
}


.ga-brands-bottom strong {
    display: block;

    padding: 12px 35px;

    border-radius: 50px;

    background: var(--ga-orange);

    color: var(--ga-black);

    font-size: 10px;

    font-weight: 850;

    letter-spacing: 2.5px;

    white-space: nowrap;

    box-shadow:
        0 10px 25px
        rgba(217,169,40,.17);
}


/* ==========================================================
   ANIMATION
========================================================== */

.ga-brands-logo-box {
    animation:
        gaBrandsFloat
        5s ease-in-out infinite;
}


@keyframes gaBrandsFloat {

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

    50% {
        transform:
            translateY(-6px);
    }

}


/* ==========================================================
   1200PX
========================================================== */

@media (max-width: 1199.98px) {

    .ga-brands-logo-box {
        width: 100%;

        margin-left: 0;

        grid-template-columns:
            repeat(5, 1fr);

        row-gap: 12px;
    }


    .ga-brand-logo:nth-child(5)::after,
    .ga-brand-logo:nth-child(10)::after {
        display: none;
    }


    .ga-brand-logo:nth-child(n+6) {
        border-top:
            1px solid
            var(--ga-border);
    }

}


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

@media (max-width: 991.98px) {

    .ga-brands-showcase {
        padding:
            75px 0 65px;
    }


    .ga-brand-features {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 15px;
    }


    .ga-brand-feature {
        padding: 15px;
    }


    .ga-brand-feature::after {
        display: none;
    }


    .ga-brand-logo {
        min-height: 85px;
    }

}


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

@media (max-width: 767.98px) {

    .ga-brands-logo-box {
        grid-template-columns:
            repeat(2, 1fr);

        padding:
            18px 12px;

        border-radius: 18px;
    }


    .ga-brand-logo {
        border-top:
            1px solid
            var(--ga-border);
    }


    .ga-brand-logo:nth-child(1),
    .ga-brand-logo:nth-child(2) {
        border-top: 0;
    }


    .ga-brand-logo:nth-child(odd)::after {
        display: block;
    }


    .ga-brand-logo:nth-child(even)::after {
        display: none;
    }

}


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

@media (max-width: 575.98px) {

    .ga-brands-showcase {
        padding:
            60px 0 55px;
    }


    .ga-brands-label {
        gap: 10px;

        font-size: 10px;

        letter-spacing: 2px;
    }


    .ga-brands-label span {
        width: 35px;
    }


    .ga-brands-heading h2 {
        font-size: 36px;

        letter-spacing: -1px;
    }


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


    .ga-brand-features {
        grid-template-columns: 1fr;

        max-width: 350px;
    }


    .ga-brand-feature {
        padding:
            12px 0;

        border-bottom:
            1px solid
            var(--ga-border);
    }


    .ga-brand-feature:last-child {
        border-bottom: 0;
    }


    .ga-brand-logo {
        min-height: 80px;

        padding:
            12px 15px;
    }


    .ga-brand-logo img {
        max-height: 43px;
    }


    .ga-brands-bottom strong {
        padding:
            11px 16px;

        font-size: 8px;

        letter-spacing: 1.2px;
    }

}


/* ==========================================================
   GARAGE DOOR SYSTEM SECTION
========================================================== */

.ga-system-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0;

    background: var(--ga-white);
}


/* BACKGROUND DETAIL */

.ga-system-section::before {
    content: "";

    position: absolute;

    top: -220px;
    right: -220px;

    width: 520px;
    height: 520px;

    border: 80px solid rgba(217,169,40,.055);
    border-radius: 50%;

    pointer-events: none;
}


/* ==========================================================
   LEFT VISUAL
========================================================== */

.ga-system-visual {
    position: sticky;

    top: 110px;

    width: 100%;
    max-width: 500px;

    min-height: 720px;

    padding: 0 35px 45px 0;
}


/* GOLD SHAPE */

.ga-system-gold-shape {
    position: absolute;

    z-index: 0;

    left: 35px;
    bottom: 0;

    width: calc(100% - 35px);
    height: 90%;

    border-radius: 25px 25px 140px 25px;

    background: var(--ga-orange);
}


/* IMAGE */

.ga-system-image {
    position: relative;

    z-index: 2;

    overflow: hidden;

    width: 100%;
    height: 650px;

    border-radius: 25px 25px 140px 25px;

    background: var(--ga-light);

    box-shadow:
        0 25px 55px
        rgba(7,24,46,.15);
}


.ga-system-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;
}


.ga-system-visual:hover
.ga-system-image img {
    transform: scale(1.045);
}


/* ==========================================================
   FLOATING CARD
========================================================== */

.ga-system-floating-card {
    position: absolute;

    z-index: 6;

    right: 0;
    bottom: 75px;

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 220px;

    padding: 18px 20px;

    border-radius: 18px 5px 18px 18px;

    background: var(--ga-black);

    box-shadow:
        0 18px 40px
        rgba(7,24,46,.28);
}


.ga-system-floating-icon {
    display: flex;

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

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border-radius: 50%;

    background: var(--ga-orange);

    color: var(--ga-black);

    font-size: 17px;
}


.ga-system-floating-card > div {
    display: flex;
    flex-direction: column;
}


.ga-system-floating-card small {
    margin-bottom: 4px;

    color: var(--ga-orange);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.3px;
}


.ga-system-floating-card strong {
    color: var(--ga-white);

    font-size: 15px;

    line-height: 1.25;

    font-weight: 700;
}


/* ==========================================================
   MOVING TOOL
========================================================== */

.ga-system-tool {
    position: absolute;

    z-index: 7;

    top: 70px;
    right: -35px;

    width: 110px;

    pointer-events: none;

    filter:
        drop-shadow(
            0 12px 15px
            rgba(7,24,46,.25)
        );

    animation:
        gaSystemToolMove
        4s ease-in-out infinite;
}


.ga-system-tool img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


@keyframes gaSystemToolMove {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-10deg);
    }

    50% {
        transform:
            translateY(-18px)
            rotate(7deg);
    }

}


/* ==========================================================
   RIGHT CONTENT
========================================================== */

.ga-system-content {
    position: relative;

    z-index: 3;

    padding-left: 30px;
}


/* LABEL */

.ga-system-label {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    padding: 8px 16px;

    border-radius: 50px;

    background: var(--ga-light);

    color: var(--ga-black);

    font-size: 12px;

    font-weight: 700;
}


.ga-system-label span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--ga-orange);
}


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

.ga-system-content > h2 {
    max-width: 720px;

    margin: 0 0 25px;

    color: var(--ga-black);

    font-size:
        clamp(38px,4vw,55px);

    line-height: 1.08;

    font-weight: 750;

    letter-spacing: -1.3px;
}


/* PARAGRAPHS */

.ga-system-content > p {
    max-width: 760px;

    margin: 0 0 17px;

    color: var(--ga-gray);

    font-size: 15px;

    line-height: 1.9;
}


/* ==========================================================
   CHECK AREA
========================================================== */

.ga-system-check-area {
    margin-top: 35px;

    padding: 30px;

    border:
        1px solid
        var(--ga-border);

    border-radius: 22px;

    background: var(--ga-light);
}


/* CHECK HEADING */

.ga-system-check-heading {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 25px;

    padding-bottom: 22px;

    border-bottom:
        1px solid
        var(--ga-border);
}


.ga-system-check-icon {
    display: flex;

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

    width: 55px;
    height: 55px;

    flex: 0 0 55px;

    border-radius:
        50% 50% 50% 8px;

    background: var(--ga-orange);

    color: var(--ga-black);

    font-size: 20px;
}


.ga-system-check-heading h3 {
    max-width: 530px;

    margin: 0;

    color: var(--ga-black);

    font-size:
        clamp(24px,2.5vw,31px);

    line-height: 1.18;

    font-weight: 700;

    letter-spacing: -.5px;
}


/* ==========================================================
   CHECK GRID
========================================================== */

.ga-system-check-grid {
    display: grid;

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

    gap: 10px 25px;
}


/* CHECK ITEM */

.ga-system-check {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 11px;

    padding: 12px 0;

    border-bottom:
        1px solid
        var(--ga-border);
}


/* CHECK ICON */

.ga-system-check > span {
    display: flex;

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

    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    margin-top: 1px;

    border-radius: 50%;

    background: var(--ga-orange);

    color: var(--ga-black);

    font-size: 9px;

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease;
}


.ga-system-check:hover > span {
    background: var(--ga-black);

    color: var(--ga-orange);

    transform:
        rotate(-10deg)
        scale(1.08);
}


/* CHECK TEXT */

.ga-system-check p {
    margin: 0;

    color: var(--ga-gray);

    font-size: 12px;

    line-height: 1.6;
}


.ga-system-check p strong {
    color: var(--ga-black);

    font-size: 13px;

    font-weight: 750;
}


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

@media (max-width: 1199.98px) {

    .ga-system-visual {
        min-height: 650px;
    }


    .ga-system-image {
        height: 585px;
    }


    .ga-system-content {
        padding-left: 10px;
    }


    .ga-system-check-area {
        padding: 25px;
    }

}


/* ==========================================================
   BELOW 992
========================================================== */

@media (max-width: 991.98px) {

    .ga-system-section {
        padding: 80px 0;
    }


    .ga-system-visual {
        position: relative;

        top: auto;

        max-width: 650px;

        min-height: 680px;

        margin: 0 auto 20px;
    }


    .ga-system-image {
        height: 620px;
    }


    .ga-system-content {
        padding-left: 0;
    }

}


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

@media (max-width: 767.98px) {

    .ga-system-check-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 575.98px) {

    .ga-system-section {
        padding: 60px 0;
    }


    .ga-system-visual {
        min-height: 510px;

        padding:
            0 15px 30px 0;
    }


    .ga-system-gold-shape {
        left: 20px;

        width:
            calc(100% - 20px);

        border-radius:
            18px 18px 80px 18px;
    }


    .ga-system-image {
        height: 465px;

        border-radius:
            18px 18px 80px 18px;
    }


    .ga-system-tool {
        top: 45px;
        right: -5px;

        width: 75px;
    }


    .ga-system-floating-card {
        right: 0;
        bottom: 15px;

        min-width: 195px;

        padding: 14px 16px;
    }


    .ga-system-content > h2 {
        font-size: 34px;
    }


    .ga-system-content > p {
        font-size: 14px;

        line-height: 1.8;
    }


    .ga-system-check-area {
        margin-top: 28px;

        padding: 20px 17px;

        border-radius: 17px;
    }


    .ga-system-check-heading {
        align-items: flex-start;
    }


    .ga-system-check-heading h3 {
        font-size: 25px;
    }

}

/* ==========================================================
   SPECIAL OFFERS SECTION
========================================================== */

.ga-offers-section {
    position: relative;
    overflow: hidden;

    padding: 90px 0 70px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            var(--ga-light) 55%,
            #ffffff 100%
        );
}


/* BACKGROUND DECORATION */

.ga-offers-section::before {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    left: -260px;
    bottom: -260px;

    border-radius: 50%;

    border: 80px solid rgba(217,169,40,.05);

    pointer-events: none;
}


.ga-offers-section::after {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -230px;
    top: -250px;

    border-radius: 50%;

    border: 70px solid rgba(7,24,46,.035);

    pointer-events: none;
}


.ga-offers-section .container {
    position: relative;
    z-index: 2;
}


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

.ga-offers-heading {
    margin-bottom: 38px;
}


/* LABEL */

.ga-offers-label {
    display: flex;

    align-items: center;

    gap: 17px;

    margin-bottom: 16px;

    color: var(--ga-black);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 4px;
}


.ga-offers-label span {
    display: block;

    width: 70px;
    height: 2px;

    background: var(--ga-orange);
}


/* TITLE */

.ga-offers-heading h2 {
    margin: 0 0 12px;

    color: var(--ga-black);

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

    line-height: 1.03;

    font-weight: 800;

    letter-spacing: -2px;
}


.ga-offers-heading h2 span {
    color: var(--ga-orange-dark);
}


/* DESCRIPTION */

.ga-offers-heading p {
    max-width: 830px;

    margin: 0;

    color: var(--ga-gray);

    font-size: 15px;

    line-height: 1.7;
}


/* ==========================================================
   COUPONS GRID
========================================================== */

.ga-coupons-grid {
    display: grid;

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

    gap: 12px;

    height: 100%;
}


/* ==========================================================
   COUPON
========================================================== */

.ga-coupon-card {
    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 190px;

    padding: 22px 20px 16px;

    overflow: hidden;

    border:
        2px dashed
        var(--ga-dark);

    border-radius: 14px;

    background:
        rgba(255,255,255,.94);

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


.ga-coupon-card:hover {
    transform: translateY(-5px);

    border-color: var(--ga-orange);

    box-shadow:
        0 15px 35px
        rgba(7,24,46,.10);
}


/* SCISSORS */

.ga-coupon-scissors {
    position: absolute;

    top: -9px;
    left: 13px;

    display: flex;

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

    width: 30px;
    height: 20px;

    background: var(--ga-white);

    color: var(--ga-black);

    font-size: 16px;
}


/* ==========================================================
   COUPON TOP
========================================================== */

.ga-coupon-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;
}


/* PRICE */

.ga-coupon-top > strong {
    position: relative;

    display: inline-block;

    padding: 7px 13px;

    background:
        linear-gradient(
            90deg,
            #F2CD64,
            var(--ga-orange)
        );

    color: var(--ga-black);

    font-size: clamp(27px,2.6vw,42px);

    line-height: 1;

    font-weight: 900;

    letter-spacing: -2px;

    clip-path:
        polygon(
            0 0,
            100% 0,
            91% 100%,
            0 100%
        );
}


.ga-coupon-top > strong span {
    font-size: .72em;
}


/* ICON */

.ga-coupon-icon {
    display: flex;

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

    width: 54px;
    height: 54px;

    flex: 0 0 54px;

    border-radius: 50%;

    background: var(--ga-light);

    color: var(--ga-dark);

    font-size: 23px;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}


.ga-coupon-card:hover
.ga-coupon-icon {

    background: var(--ga-black);

    color: var(--ga-orange);

    transform: rotate(-12deg);
}


/* ==========================================================
   COUPON TITLE
========================================================== */

.ga-coupon-card h3 {
    max-width: 250px;

    margin: 0 0 8px;

    color: var(--ga-black);

    font-size: 18px;

    line-height: 1.2;

    font-weight: 750;
}


/* EXTRA */

.ga-coupon-extra {
    margin-bottom: 5px;

    color: var(--ga-black);

    font-size: 13px;

    font-weight: 800;
}


/* LIMITED */

.ga-coupon-card small {
    display: block;

    margin-top: auto;

    color: var(--ga-gray);

    font-size: 10px;

    text-align: center;
}


/* ==========================================================
   BEFORE / AFTER BOX
========================================================== */

.ga-before-after-box {
    position: relative;

    height: 100%;

    min-height: 590px;

    padding: 7px;

    border-radius: 18px;

    background: var(--ga-white);

    box-shadow:
        0 20px 45px
        rgba(7,24,46,.11);
}


/* ==========================================================
   BEFORE / AFTER IMAGES
========================================================== */

.ga-before-after-images {
    position: relative;

    display: grid;

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

    overflow: hidden;

    width: 100%;
    height: 100%;

    min-height: 575px;

    border-radius: 14px;
}


/* IMAGE SIDE */

.ga-ba-image {
    position: relative;

    overflow: hidden;

    min-width: 0;
}


.ga-ba-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;
}


.ga-before-after-box:hover
.ga-ba-image img {

    transform: scale(1.04);
}


/* DIVIDER */

.ga-ba-before {
    border-right:
        3px solid
        var(--ga-white);
}


/* ==========================================================
   BEFORE / AFTER LABELS
========================================================== */

.ga-ba-label {
    position: absolute;

    z-index: 4;

    top: 25px;

    padding: 10px 25px;

    color: var(--ga-white);

    font-size: 13px;

    font-weight: 900;

    letter-spacing: .5px;

    box-shadow:
        0 10px 25px
        rgba(7,24,46,.18);
}


.ga-ba-before .ga-ba-label {
    left: 25px;

    background: var(--ga-black);

    border-radius: 4px 12px 4px 4px;
}


.ga-ba-after .ga-ba-label {
    right: 25px;

    background: var(--ga-orange-dark);

    border-radius: 12px 4px 4px 4px;
}


/* ==========================================================
   CENTER ARROW
========================================================== */

.ga-ba-arrow {
    position: absolute;

    z-index: 7;

    top: 50%;
    left: 50%;

    display: flex;

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

    width: 57px;
    height: 57px;

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

    border:
        4px solid
        var(--ga-white);

    border-radius: 50%;

    background: var(--ga-orange);

    color: var(--ga-white);

    font-size: 17px;

    box-shadow:
        0 10px 25px
        rgba(7,24,46,.20);

    animation:
        gaBeforeAfterArrow
        2.5s ease-in-out infinite;
}


@keyframes gaBeforeAfterArrow {

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

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

}


/* ==========================================================
   BOTTOM BEFORE AFTER MESSAGE
========================================================== */

.ga-ba-message {
    position: absolute;

    z-index: 8;

    left: 50%;
    bottom: 22px;

    width: 82%;

    transform:
        translateX(-50%)
        rotate(-2deg);

    padding: 18px 25px;

    text-align: center;

    background: var(--ga-black);

    clip-path:
        polygon(
            3% 12%,
            97% 0,
            100% 85%,
            4% 100%,
            0 55%
        );

    box-shadow:
        0 12px 30px
        rgba(7,24,46,.25);
}


.ga-ba-message span {
    color: var(--ga-white);

    font-size: 17px;

    font-style: italic;
}


.ga-ba-message strong {
    margin-left: 6px;

    color: var(--ga-orange);

    font-size: 23px;

    font-style: italic;
}


/* GOLD LINE */

.ga-ba-message::after {
    content: "";

    position: absolute;

    left: 25%;
    bottom: 8px;

    width: 50%;
    height: 3px;

    border-radius: 20px;

    background: var(--ga-orange);

    transform: rotate(-2deg);
}


/* ==========================================================
   BOTTOM FEATURES
========================================================== */

.ga-offers-features {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    margin-top: 42px;
}


/* FEATURE */

.ga-offers-feature {
    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 5px 25px;
}


.ga-offers-feature:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 0;

    width: 1px;
    height: 55px;

    transform:
        translateY(-50%);

    background: var(--ga-border);
}


/* ICON */

.ga-offers-feature-icon {
    display: flex;

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

    width: 57px;
    height: 57px;

    flex: 0 0 57px;

    border:
        3px solid
        var(--ga-orange);

    border-radius: 50%;

    background: var(--ga-white);

    color: var(--ga-orange-dark);

    font-size: 20px;

    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}


.ga-offers-feature:hover
.ga-offers-feature-icon {

    transform:
        translateY(-5px)
        rotate(-7deg);

    background: var(--ga-orange);

    color: var(--ga-black);
}


/* TEXT */

.ga-offers-feature > div {
    display: flex;

    flex-direction: column;
}


.ga-offers-feature strong {
    margin-bottom: 3px;

    color: var(--ga-black);

    font-size: 14px;

    font-weight: 750;
}


.ga-offers-feature small {
    color: var(--ga-gray);

    font-size: 11px;
}


/* ==========================================================
   1200
========================================================== */

@media (max-width:1199.98px) {

    .ga-coupon-card {
        min-height: 180px;

        padding:
            21px 16px 15px;
    }


    .ga-coupon-top > strong {
        font-size: 31px;
    }


    .ga-coupon-icon {
        width: 45px;
        height: 45px;

        flex-basis: 45px;

        font-size: 18px;
    }


    .ga-before-after-box {
        min-height: 565px;
    }


    .ga-before-after-images {
        min-height: 550px;
    }


    .ga-offers-feature {
        padding:
            5px 15px;
    }

}


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

@media (max-width:991.98px) {

    .ga-offers-section {
        padding:
            75px 0 60px;
    }


    .ga-before-after-box {
        min-height: 570px;

        margin-top: 15px;
    }


    .ga-before-after-images {
        min-height: 555px;
    }


    .ga-offers-features {
        grid-template-columns:
            repeat(2,1fr);

        gap: 25px 0;
    }


    .ga-offers-feature:nth-child(2)::after {
        display: none;
    }

}


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

@media (max-width:767.98px) {

    .ga-coupons-grid {
        grid-template-columns: 1fr;
    }


    .ga-coupon-card {
        min-height: 175px;
    }


    .ga-before-after-box {
        min-height: 520px;
    }


    .ga-before-after-images {
        min-height: 505px;
    }

}


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

@media (max-width:575.98px) {

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


    .ga-offers-label {
        gap: 10px;

        font-size: 10px;

        letter-spacing: 2px;
    }


    .ga-offers-label span {
        width: 35px;
    }


    .ga-offers-heading h2 {
        font-size: 36px;

        letter-spacing: -1px;
    }


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


    .ga-coupon-top > strong {
        font-size: 34px;
    }


    .ga-coupon-card h3 {
        font-size: 17px;
    }


    /* BEFORE / AFTER */

    .ga-before-after-box {
        min-height: 455px;
    }


    .ga-before-after-images {
        min-height: 440px;
    }


    .ga-ba-label {
        top: 15px;

        padding:
            8px 14px;

        font-size: 10px;
    }


    .ga-ba-before .ga-ba-label {
        left: 12px;
    }


    .ga-ba-after .ga-ba-label {
        right: 12px;
    }


    .ga-ba-arrow {
        width: 46px;
        height: 46px;

        font-size: 13px;
    }


    .ga-ba-message {
        bottom: 15px;

        width: 92%;

        padding:
            15px 10px;
    }


    .ga-ba-message span {
        font-size: 13px;
    }


    .ga-ba-message strong {
        font-size: 16px;
    }


    /* FEATURES */

    .ga-offers-features {
        grid-template-columns: 1fr;

        margin-top: 32px;

        gap: 0;
    }


    .ga-offers-feature {
        padding:
            16px 0;

        border-bottom:
            1px solid
            var(--ga-border);
    }


    .ga-offers-feature::after {
        display: none;
    }


    .ga-offers-feature:last-child {
        border-bottom: 0;
    }

}

.ga-coupon-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.ga-coupon-card:hover,
.ga-coupon-card:focus,
.ga-coupon-card:active,
.ga-coupon-card:visited {
    text-decoration: none;
    color: inherit;
}

/* keyboard accessibility */
.ga-coupon-card:focus-visible {
    outline: 3px solid var(--ga-orange);
    outline-offset: 4px;
}


/* ==========================================================
   EXPERIENCE + FAQ
========================================================== */

.ga-faq-section {
    position: relative;
    overflow: hidden;
    padding: 35px 0 0;
    background: #f5f6f7;
}


/* ==========================================================
   EXPERIENCE TITLE
========================================================== */

.ga-faq-experience-title {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 38px;
    margin-bottom: 45px;
}

.ga-faq-experience-title span {
    display: block;
    height: 1px;
    background: #d7dadd;
}

.ga-faq-experience-title h2 {
    margin: 0;
    color: var(--ga-black);
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
}


/* ==========================================================
   STATS
========================================================== */

.ga-faq-stat {
    width: 100%;
}

.ga-faq-stat-label {
    display: block;
    margin-bottom: 6px;
    color: var(--ga-orange-dark);
    font-size: 12px;
    font-weight: 700;
}

.ga-faq-stat-line {
    width: 100%;
    height: 1px;
    margin-bottom: 18px;
    background: #d5d8dc;
}

.ga-faq-stat-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.ga-faq-stat-bottom > strong {
    color: #222;
    font-size: clamp(45px, 4vw, 56px);
    line-height: 1;
    font-weight: 400;
    letter-spacing: -2px;
}

.ga-faq-stat-bottom > strong span {
    color: var(--ga-orange-dark);
    font-weight: 400;
}

.ga-faq-stat-bottom p {
    margin: 0 5px 0 0;
    color: var(--ga-gray);
    font-size: 12px;
    line-height: 1.45;
}


/* ==========================================================
   MAIN FAQ
========================================================== */

.ga-faq-main {
    margin-top: 85px;
}


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

.ga-faq-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 535px;
}


/* LABEL */

.ga-faq-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 7px 15px;
    border-radius: 50px;
    background: var(--ga-white);
    color: var(--ga-black);
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
}

.ga-faq-label span {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ga-orange);
}


/* TITLE */

.ga-faq-left h2 {
    max-width: 430px;
    margin: 0;
    color: var(--ga-black);
    font-size: clamp(38px, 4vw, 53px);
    line-height: 1.12;
    font-weight: 750;
    letter-spacing: -1px;
}

.ga-faq-left h2 span {
    display: block;
}


/* ==========================================================
   GARAGE TOOLBOX IMAGE
========================================================== */

.ga-faq-tool-image {
    position: relative;
    width: 100%;
    max-width: 490px;
    margin-top: 50px;
    margin-left: -20px;
}

.ga-faq-tool-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* SMALL FLOAT */

.ga-faq-tool-image {
    animation: gaFaqToolFloat 4s ease-in-out infinite;
}

@keyframes gaFaqToolFloat {

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

    50% {
        transform: translateY(-10px);
    }
}


/* ==========================================================
   ACCORDION
========================================================== */

.ga-faq-accordion {
    padding-top: 0;
}

.ga-faq-item {
    overflow: hidden;
    margin-bottom: 9px;
    border: 0 !important;
    border-radius: 16px !important;
    background: #f8f0eb;
}


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

.ga-faq-item .accordion-button {
    position: relative;
    min-height: 65px;
    padding: 19px 72px 19px 24px;
    border: 0;
    border-radius: 16px !important;
    background: #f8f0eb;
    box-shadow: none !important;
    color: #272727;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    transition:
        background .3s ease,
        color .3s ease,
        padding .3s ease;
}


/* REMOVE BOOTSTRAP ARROW */

.ga-faq-item .accordion-button::after {
    display: none;
}


/* ACTIVE */

.ga-faq-item .accordion-button:not(.collapsed) {
    padding-top: 22px;
    padding-bottom: 14px;
    background: var(--ga-orange);
    color: var(--ga-white);
}


/* ==========================================================
   PLUS CIRCLE
========================================================== */

.ga-faq-plus {
    position: absolute;
    top: 50%;
    right: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--ga-white);
    color: var(--ga-black);
    font-size: 13px;
}

.ga-faq-plus i {
    transition: transform .35s ease;
}


/* PLUS ROTATES WHEN OPEN */

.ga-faq-item
.accordion-button:not(.collapsed)
.ga-faq-plus i {
    color: var(--ga-orange-dark);
    transform: rotate(45deg);
}


/* ==========================================================
   ANSWER
========================================================== */

.ga-faq-item .accordion-collapse {
    background: var(--ga-orange);
}

.ga-faq-item .accordion-body {
    padding: 3px 72px 23px 24px;
    color: var(--ga-white);
    font-size: 13px;
    line-height: 1.75;
}


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

.ga-faq-item .accordion-button.collapsed:hover {
    background: #f4e8df;
}

.ga-faq-item .accordion-button.collapsed:hover
.ga-faq-plus {
    background: var(--ga-black);
    color: var(--ga-orange);
}


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

@media (max-width: 991.98px) {

    .ga-faq-section {
        padding-top: 60px;
    }

    .ga-faq-experience-title {
        gap: 20px;
    }

    .ga-faq-main {
        margin-top: 65px;
    }

    .ga-faq-left {
        min-height: auto;
    }

    .ga-faq-tool-image {
        max-width: 500px;
        margin: 45px auto 25px;
    }

}


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

@media (max-width: 767.98px) {

    .ga-faq-experience-title {
        grid-template-columns: 45px auto 1fr;
        gap: 15px;
        margin-bottom: 35px;
    }

    .ga-faq-experience-title h2 {
        font-size: 15px;
        white-space: nowrap;
    }

    .ga-faq-stat {
        margin-bottom: 15px;
    }

    .ga-faq-main {
        margin-top: 45px;
    }

}


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

@media (max-width: 575.98px) {

    .ga-faq-section {
        padding-top: 45px;
    }

    .ga-faq-experience-title {
        grid-template-columns: 25px auto 1fr;
        gap: 10px;
    }

    .ga-faq-experience-title h2 {
        font-size: 13px;
    }

    .ga-faq-stat-bottom > strong {
        font-size: 44px;
    }

    .ga-faq-left h2 {
        font-size: 36px;
    }

    .ga-faq-tool-image {
        max-width: 370px;
        margin-top: 35px;
    }

    .ga-faq-item {
        border-radius: 13px !important;
    }

    .ga-faq-item .accordion-button {
        min-height: 68px;
        padding: 17px 62px 17px 18px;
        border-radius: 13px !important;
        font-size: 13px;
    }

    .ga-faq-plus {
        right: 17px;
        width: 32px;
        height: 32px;
    }

    .ga-faq-item .accordion-body {
        padding: 3px 18px 20px;
        font-size: 12px;
    }

}

/* ==========================================================
   SERVICE LOCATION
========================================================== */

.ga-location-section {
    position: relative;
    overflow: hidden;

    padding: 105px 0 0;

    background: var(--ga-black);
}


/* BACKGROUND DECORATION */

.ga-location-section::before {
    content: "";

    position: absolute;

    top: -240px;
    left: -220px;

    width: 550px;
    height: 550px;

    border: 90px solid rgba(217,169,40,.04);
    border-radius: 50%;
}


.ga-location-section::after {
    content: "";

    position: absolute;

    right: -170px;
    bottom: 60px;

    width: 390px;
    height: 390px;

    border: 1px solid rgba(255,255,255,.05);
    border-radius: 50%;
}


.ga-location-section .container {
    position: relative;
    z-index: 3;
}


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

.ga-location-content {
    max-width: 600px;
    padding-bottom: 90px;
}


/* LABEL */

.ga-location-label {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color: var(--ga-orange);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;
}


.ga-location-label span {
    display: block;

    width: 45px;
    height: 2px;

    background: var(--ga-orange);
}


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

.ga-location-content h2 {
    max-width: 590px;

    margin: 0 0 23px;

    color: var(--ga-white);

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

    line-height: 1.02;

    font-weight: 800;

    letter-spacing: -2px;
}


.ga-location-content h2 span {
    display: block;

    color: var(--ga-orange);
}


/* PARAGRAPH */

.ga-location-content > p {
    max-width: 560px;

    margin: 0 0 35px;

    color: rgba(255,255,255,.67);

    font-size: 14px;

    line-height: 1.85;
}


/* ==========================================================
   ADDRESS
========================================================== */

.ga-location-address {
    display: flex;

    align-items: center;

    gap: 17px;

    max-width: 480px;

    margin-bottom: 18px;

    padding: 19px 22px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius: 14px;

    background:
        rgba(255,255,255,.045);
}


.ga-location-address-icon {
    display: flex;

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

    width: 58px;
    height: 58px;

    flex: 0 0 58px;

    border-radius: 50%;

    background: var(--ga-orange);

    color: var(--ga-black);

    font-size: 20px;
}


.ga-location-address > div:last-child {
    display: flex;
    flex-direction: column;
}


.ga-location-address small {
    margin-bottom: 5px;

    color: var(--ga-orange);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.ga-location-address strong {
    color: var(--ga-white);

    font-size: 14px;

    line-height: 1.5;
}


/* ==========================================================
   PHONE
========================================================== */

.ga-location-call {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    padding: 10px 18px 10px 10px;

    border-radius: 50px;

    background: var(--ga-white);

    color: var(--ga-black);

    text-decoration: none;

    transition:
        transform .3s ease,
        background .3s ease;
}


.ga-location-call:hover {
    transform: translateY(-4px);

    background: var(--ga-orange);

    color: var(--ga-black);
}


.ga-location-call > span {
    display: flex;

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

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: var(--ga-orange);

    color: var(--ga-black);

    font-size: 15px;

    transition:
        background .3s ease;
}


.ga-location-call:hover > span {
    background: var(--ga-black);

    color: var(--ga-orange);
}


.ga-location-call > div {
    display: flex;
    flex-direction: column;
}


.ga-location-call small {
    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}


.ga-location-call strong {
    margin-top: 1px;

    font-size: 18px;

    line-height: 1;
}


/* ==========================================================
   ZIP MAP
========================================================== */

.ga-zip-box {
    position: relative;

    width: 100%;
    max-width: 610px;
    min-height: 570px;

    margin-left: auto;

    border: 1px solid var(--ga-border);

    border-radius: 180px 25px 25px 25px;

background:
    linear-gradient(
        rgba(7, 24, 46, .78),
        rgba(7, 24, 46, .78)
    ),
    url("../images/garage-door-location-allen-bg.webp")
    center / cover no-repeat;

    box-shadow:
        0 25px 55px rgba(7,24,46,.12);

    overflow: hidden;
}

/* ==========================================================
   MAP LINES
========================================================== */

.ga-zip-map-lines {
    position: absolute;

    inset: 0;

    overflow: hidden;

    border-radius: inherit;
}


.ga-map-line {
    position: absolute;

    display: block;

    border:
        1px dashed
        rgba(217,169,40,.25);

    border-radius: 50%;
}


.ga-map-line-1 {
    width: 480px;
    height: 260px;

    top: 100px;
    left: -40px;

    transform: rotate(25deg);
}


.ga-map-line-2 {
    width: 350px;
    height: 450px;

    top: 35px;
    right: -70px;

    transform: rotate(-30deg);
}


.ga-map-line-3 {
    width: 300px;
    height: 180px;

    left: 100px;
    bottom: 30px;

    transform: rotate(-12deg);
}


/* ==========================================================
   BIG ALLEN PIN
========================================================== */

.ga-zip-main-pin {
    position: absolute;

    z-index: 4;

    top: 50%;
    left: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

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


.ga-zip-main-pin > span {
    display: flex;

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

    width: 115px;
    height: 115px;

    margin-bottom: 14px;

    border:
        12px solid
        rgba(217,169,40,.12);

    border-radius: 50%;

    background: var(--ga-orange);

    color: var(--ga-black);

    font-size: 42px;

    box-shadow:
        0 0 0 20px
        rgba(217,169,40,.05);

    animation:
        gaLocationPulse
        2.5s ease-in-out infinite;
}


@keyframes gaLocationPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 15px
            rgba(217,169,40,.06);
    }

    50% {
        box-shadow:
            0 0 0 30px
            rgba(217,169,40,0);
    }

}


.ga-zip-main-pin small {
     color: var(--ga-gray);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 5px;
}


.ga-zip-main-pin strong {
    margin-top: 2px;

    color: var(--ga-white);

    font-size: 29px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 4px;
}


/* ==========================================================
   ZIP CARDS
========================================================== */

.ga-zip-card {
    position: absolute;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 175px;

    padding: 14px 16px;

    border-radius: 12px;

    background: var(--ga-white);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.22);

    animation:
        gaZipFloat
        4s ease-in-out infinite;
}


.ga-zip-card-one {
    top: 90px;
    right: 25px;
}


.ga-zip-card-two {
    left: 30px;
    bottom: 65px;

    animation-delay: -2s;
}


@keyframes gaZipFloat {

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

    50% {
        transform:
            translateY(-9px);
    }

}


/* ZIP ICON */

.ga-zip-icon {
    display: flex;

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

    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    border-radius: 50%;

    background: var(--ga-orange);

    color: var(--ga-black);

    font-size: 14px;
}


.ga-zip-card > div:last-child {
    display: flex;

    flex-direction: column;
}


.ga-zip-card small {
    color: var(--ga-gray);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1px;
}


.ga-zip-card strong {
    color: var(--ga-black);

    font-size: 23px;

    line-height: 1.05;

    font-weight: 800;
}


.ga-zip-card span {
    color: var(--ga-gray);

    font-size: 9px;
}


/* ==========================================================
   DECORATIVE DOTS
========================================================== */

.ga-location-dot {
    position: absolute;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--ga-orange);

    box-shadow:
        0 0 0 5px
        rgba(217,169,40,.10);
}


.ga-location-dot-1 {
    top: 35%;
    left: 13%;
}


.ga-location-dot-2 {
    right: 15%;
    bottom: 27%;
}


.ga-location-dot-3 {
    top: 20%;
    left: 38%;
}


/* ==========================================================
   MARQUEE
========================================================== */

.ga-location-marquee {
    position: relative;
    z-index: 5;
    overflow: hidden;

    padding: 20px 0;

    background: var(--ga-orange);

    /* بدون ميل */
    transform: none;
}


.ga-location-track {
    display: flex;

    align-items: center;

    gap: 30px;

    width: max-content;

    white-space: nowrap;

    animation:
        gaLocationMarquee
        22s linear infinite;
}


.ga-location-track span,
.ga-location-track strong {
    color: var(--ga-black);

    font-size: 15px;

    font-weight: 850;

    letter-spacing: 2px;
}


.ga-location-track i {
    color: var(--ga-white);

    font-size: 11px;
}


@keyframes gaLocationMarquee {

    from {
        transform:
            translateX(0);
    }

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

}


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

@media (max-width:991.98px) {

    .ga-location-section {
        padding-top: 80px;
    }


    .ga-location-content {
        max-width: 100%;

        padding-bottom: 20px;
    }


    .ga-zip-box {
        max-width: 650px;

        min-height: 540px;

        margin: 25px auto 80px;
    }

}


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

@media (max-width:575.98px) {

    .ga-location-section {
        padding-top: 60px;
    }


    .ga-location-content h2 {
        font-size: 39px;

        letter-spacing: -1px;
    }


    .ga-location-address {
        padding: 15px;
    }


    .ga-location-address-icon {
        width: 50px;
        height: 50px;

        flex-basis: 50px;
    }


    .ga-location-address strong {
        font-size: 12px;
    }


    .ga-location-call strong {
        font-size: 17px;
    }


    .ga-zip-box {
        min-height: 470px;

        margin-bottom: 65px;

        border-radius:
            100px 18px 18px 18px;
    }


    .ga-zip-main-pin > span {
        width: 90px;
        height: 90px;

        border-width: 9px;

        font-size: 32px;
    }


    .ga-zip-main-pin strong {
        font-size: 24px;
    }


    .ga-zip-card {
        min-width: 145px;

        padding: 11px;
    }


    .ga-zip-card-one {
        top: 65px;
        right: 10px;
    }


    .ga-zip-card-two {
        left: 10px;
        bottom: 45px;
    }


    .ga-zip-icon {
        width: 35px;
        height: 35px;

        flex-basis: 35px;

        font-size: 11px;
    }


    .ga-zip-card strong {
        font-size: 19px;
    }


    .ga-location-marquee {
        padding: 17px 0;
    }


    .ga-location-track {
        gap: 20px;
    }


    .ga-location-track span,
    .ga-location-track strong {
        font-size: 12px;
    }

}

/* ==========================================================
   FOOTER
========================================================== */

.ga-footer {
    position: relative;
    overflow: hidden;
    padding: 0;
    background: var(--ga-black);
    color: var(--ga-white);
}


/* ==========================================================
   DECORATION
========================================================== */

.ga-footer-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.ga-footer-glow-one {
    top: 150px;
    left: -260px;

    width: 520px;
    height: 520px;

    border: 80px solid rgba(217,169,40,.035);
}

.ga-footer-glow-two {
    right: -170px;
    bottom: -180px;

    width: 430px;
    height: 430px;

    border: 1px solid rgba(217,169,40,.10);
}

.ga-footer .container {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   TOP CTA
========================================================== */

.ga-footer-cta {
    position: relative;
    z-index: 5;

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

    padding: 30px 35px;

    border-radius: 0 0 25px 25px;

    background:
        linear-gradient(
            110deg,
            var(--ga-orange) 0%,
            #F2CD64 100%
        );
}

.ga-footer-cta::after {
    content: "";

    position: absolute;
    top: 0;
    right: 34%;

    width: 1px;
    height: 100%;

    background: rgba(7,24,46,.12);
}


/* CTA CONTENT */

.ga-footer-cta-content {
    display: flex;
    align-items: center;
    gap: 18px;
}

.ga-footer-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 65px;
    height: 65px;
    flex: 0 0 65px;

    border-radius: 50%;

    background: var(--ga-black);
    color: var(--ga-orange);

    font-size: 23px;
}

.ga-footer-cta-content small {
    display: block;

    margin-bottom: 5px;

    color: var(--ga-dark);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2px;
}

.ga-footer-cta-content h2 {
    margin: 0;

    color: var(--ga-black);

    font-size: clamp(26px, 3vw, 39px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -1px;
}

.ga-footer-cta-content h2 span {
    color: var(--ga-white);
}


/* ==========================================================
   CTA PHONE
========================================================== */

.ga-footer-cta-call {
    display: flex;
    align-items: center;
    gap: 14px;

    min-width: 300px;

    padding: 10px 13px 10px 10px;

    border-radius: 60px;

    background: var(--ga-black);

    color: var(--ga-white);

    text-decoration: none;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

.ga-footer-cta-call:hover {
    color: var(--ga-white);

    transform: translateY(-4px);

    box-shadow:
        0 15px 30px
        rgba(7,24,46,.25);
}

.ga-footer-call-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;
    flex: 0 0 52px;

    border-radius: 50%;

    background: var(--ga-orange);

    color: var(--ga-black);

    font-size: 17px;

    transition: transform .3s ease;
}

.ga-footer-cta-call:hover .ga-footer-call-icon {
    transform: rotate(-12deg);
}

.ga-footer-call-text {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.ga-footer-call-text small {
    color: rgba(255,255,255,.60);

    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.ga-footer-call-text strong {
    margin-top: 2px;

    color: var(--ga-white);

    font-size: 20px;
    line-height: 1;
}

.ga-footer-call-arrow {
    margin-right: 8px;
    color: var(--ga-orange);
}


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

.ga-footer-main {
    padding: 75px 0 65px;
}


/* ==========================================================
   COMPANY
========================================================== */

.ga-footer-logo {
    display: inline-block;
    margin-bottom: 20px;
}

.ga-footer-logo img {
    display: block;
    width: auto;
    max-width: 210px;
    height: auto;
    object-fit: contain;
}

.ga-footer-company > h3 {
    margin: 0 0 12px;

    color: var(--ga-white);

    font-size: 22px;
    line-height: 1.25;
    font-weight: 750;
}

.ga-footer-company > p {
    max-width: 370px;

    margin: 0 0 27px;

    color: rgba(255,255,255,.58);

    font-size: 13px;
    line-height: 1.75;
}


/* ==========================================================
   CONTACT ROW
========================================================== */

.ga-footer-contact {
    display: flex;
    align-items: center;
    gap: 13px;

    max-width: 390px;

    margin-bottom: 12px;

    padding: 11px;

    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;

    background: rgba(255,255,255,.025);

    color: var(--ga-white);

    text-decoration: none;

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

.ga-footer-contact:hover {
    transform: translateX(5px);

    border-color: rgba(217,169,40,.30);

    background: rgba(217,169,40,.06);

    color: var(--ga-white);
}

.ga-footer-contact > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    border-radius: 50%;

    background: var(--ga-orange);

    color: var(--ga-black);

    font-size: 13px;
}

.ga-footer-contact > div {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.ga-footer-contact small {
    margin-bottom: 3px;

    color: var(--ga-orange);

    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.ga-footer-contact strong {
    color: var(--ga-white);

    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;

    overflow-wrap: anywhere;
}


/* ==========================================================
   COLUMN TITLE
========================================================== */

.ga-footer-title {
    display: flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 28px;
}

.ga-footer-title > span {
    display: block;

    width: 30px;
    height: 3px;

    border-radius: 10px;

    background: var(--ga-orange);
}

.ga-footer-title h3 {
    margin: 0;

    color: var(--ga-white);

    font-size: 18px;
    font-weight: 750;
}


/* ==========================================================
   QUICK LINKS
========================================================== */

.ga-footer-links {
    margin: 0;
    padding: 0;

    list-style: none;
}

.ga-footer-links li {
    margin-bottom: 13px;
}

.ga-footer-links a,
.ga-footer-services a {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: rgba(255,255,255,.65);

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

    text-decoration: none;

    transition:
        color .3s ease,
        transform .3s ease;
}

.ga-footer-links a i,
.ga-footer-services a i {
    color: var(--ga-orange);

    font-size: 8px;

    transition: transform .3s ease;
}

.ga-footer-links a:hover,
.ga-footer-services a:hover {
    color: var(--ga-orange);

    transform: translateX(5px);
}

.ga-footer-links a:hover i,
.ga-footer-services a:hover i {
    transform: translateX(3px);
}


/* ==========================================================
   OPERATING HOURS
========================================================== */

.ga-footer-hours {
    margin-top: 32px;

    padding: 18px;

    border-left: 3px solid var(--ga-orange);

    border-radius: 0 10px 10px 0;

    background: rgba(255,255,255,.045);
}

.ga-footer-hours-head {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 14px;
}

.ga-footer-hours-head > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: var(--ga-orange);

    color: var(--ga-black);

    font-size: 11px;
}

.ga-footer-hours-head strong {
    color: var(--ga-white);

    font-size: 13px;
}

.ga-footer-hour-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;

    padding: 7px 0;

    border-top: 1px solid rgba(255,255,255,.07);

    font-size: 10px;
}

.ga-footer-hour-row span {
    color: rgba(255,255,255,.50);
}

.ga-footer-hour-row strong {
    color: var(--ga-orange);
}


/* ==========================================================
   SERVICES
========================================================== */

.ga-footer-services {
    display: grid;

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

    gap: 16px 25px;
}

.ga-footer-services a {
    padding-bottom: 12px;

    border-bottom: 1px solid rgba(255,255,255,.07);
}


/* ==========================================================
   SERVICE NOTE
========================================================== */

.ga-footer-service-note {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: 32px;

    padding: 17px 20px;

    border-radius: 12px;

    background:
        linear-gradient(
            100deg,
            rgba(217,169,40,.12),
            rgba(217,169,40,.025)
        );
}

.ga-footer-service-note > span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    flex: 0 0 46px;

    border-radius: 50%;

    background: var(--ga-orange);

    color: var(--ga-black);

    font-size: 15px;
}

.ga-footer-service-note > div {
    display: flex;
    flex-direction: column;
}

.ga-footer-service-note small {
    margin-bottom: 3px;

    color: var(--ga-orange);

    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.ga-footer-service-note strong {
    color: var(--ga-white);

    font-size: 13px;
}


/* ==========================================================
   BOTTOM
========================================================== */

.ga-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    padding: 24px 0;

    border-top: 1px solid rgba(255,255,255,.09);
}

.ga-footer-bottom p {
    margin: 0;

    color: rgba(255,255,255,.46);

    font-size: 10px;
}

.ga-footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ga-footer-bottom-links a {
    color: rgba(255,255,255,.48);

    font-size: 10px;

    text-decoration: none;

    transition: color .3s ease;
}

.ga-footer-bottom-links a:hover {
    color: var(--ga-orange);
}

.ga-footer-bottom-links span {
    display: block;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--ga-orange);
}


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

@media (max-width: 991.98px) {

    .ga-footer-cta {
        align-items: flex-start;
        flex-direction: column;
    }

    .ga-footer-cta::after {
        display: none;
    }

    .ga-footer-cta-call {
        min-width: 320px;
    }

    .ga-footer-main {
        padding: 60px 0;
    }

}


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

@media (max-width: 767.98px) {

    .ga-footer-services {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ga-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

}


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

@media (max-width: 575.98px) {

    .ga-footer-cta {
        padding: 24px 18px;

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

    .ga-footer-cta-icon {
        width: 52px;
        height: 52px;
        flex-basis: 52px;

        font-size: 18px;
    }

    .ga-footer-cta-content h2 {
        font-size: 27px;
    }

    .ga-footer-cta-call {
        width: 100%;
        min-width: 0;
    }

    .ga-footer-call-text strong {
        font-size: 18px;
    }

    .ga-footer-main {
        padding: 50px 0;
    }

    .ga-footer-company > h3 {
        font-size: 20px;
    }

    .ga-footer-contact {
        max-width: 100%;
    }

    .ga-footer-services-column {
        margin-top: 5px;
    }

    .ga-footer-bottom {
        padding: 20px 0;
    }

}