:root {

    --porter-dark: #171d29;
    --porter-dark-2: #222b38;

    --porter-green: #b8e62e;
    --porter-green-dark: #94c800;

    --porter-white: #ffffff;
    --porter-light: #f5f7f8;

    --porter-text: #111722;
    --porter-muted: #68717d;

    --porter-border: #e3e6e9;

    --porter-shadow:
        0 20px 60px rgba(0, 0, 0, .14);
}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;

    color: var(--porter-text);
    background: #fff;
}

a {
    text-decoration: none;
}


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

.porter-header {
    position: relative;
    background: var(--porter-dark);
}


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

.porter-nav-wrap {
    position: absolute;

    top: 14px;
    left: 0;
    right: 0;

    z-index: 50;
}


.porter-navbar {
    background: var(--porter-white);

    border-radius: 28px 28px 0 0;

    box-shadow: var(--porter-shadow);

    padding: 0;

    overflow: hidden;
}


.porter-brand {
    width: 255px;
    min-height: 138px;

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

    gap: 13px;

    margin: 0;

    padding: 20px 28px;
}


.porter-brand-icon {
    width: 52px;
    height: 52px;

    border: 4px solid var(--porter-green);

    border-radius: 50%;

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

    position: relative;

    color: var(--porter-green-dark);

    font-size: 22px;
}


.porter-brand-icon::after {
    content: "";

    position: absolute;

    width: 17px;
    height: 4px;

    background: var(--porter-green);

    right: -10px;
    top: 7px;

    transform: rotate(-45deg);
}


.porter-brand-text {
    line-height: 1.05;
}


.porter-brand-text strong {
    display: block;

    color: #10151d;

    font-size: 24px;
    font-weight: 800;
}


.porter-brand-text small {
    display: block;

    color: var(--porter-muted);

    font-size: 11px;

    margin-top: 5px;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.porter-nav-content {
    width: 100%;
}


.porter-nav-top {
    min-height: 78px;

    display: flex;

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

    gap: 30px;

    padding: 10px 35px;

    border-bottom:
        1px solid var(--porter-border);
}


.porter-nav-contact {
    display: flex;
    align-items: center;

    gap: 13px;
}


.porter-contact-icon {
    width: 46px;
    height: 46px;

    border: 2px solid #141a22;

    border-radius: 50%;

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

    color: #141a22;

    font-size: 16px;
}


.porter-contact-data small {
    display: block;

    color: #59626d;

    font-size: 12px;
    font-weight: 600;

    margin-bottom: 2px;

    text-transform: uppercase;

    letter-spacing: .5px;
}


.porter-contact-data a {
    color: #121822;

    font-size: 23px;
    font-weight: 900;

    line-height: 1;
}


.porter-estimate-btn {
    min-width: 150px;
    height: 54px;

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

    padding: 0 24px;

    border: 2px solid #171d29;

    border-radius: 28px;

    color: #111722;

    background: var(--porter-green);

    font-size: 14px;
    font-weight: 800;

    box-shadow:
        0 4px 0 #759700;

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


.porter-estimate-btn:hover {
    color: #111722;

    background: #c9f443;

    transform:
        translateY(-2px);

    box-shadow:
        0 7px 0 #759700;
}


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

.porter-nav-bottom {
    min-height: 60px;

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

    padding: 0 30px;
}


.porter-menu {
    display: flex;
    align-items: center;

    gap: 4px;
}


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

    color: #222933;

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

    padding:
        20px 16px !important;

    transition:
        color .25s ease;
}


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

    position: absolute;

    left: 50%;
    bottom: 12px;

    width: 0;
    height: 2px;

    background:
        var(--porter-green-dark);

    transform:
        translateX(-50%);

    transition:
        width .25s ease;
}


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


.porter-menu .nav-link:hover::after,
.porter-menu .nav-link.active::after {
    width: 24px;
}


.porter-nav-call {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #151b24;

    font-size: 14px;
    font-weight: 800;

    padding-left: 22px;

    border-left:
        1px solid #ddd;
}


.porter-nav-call:hover {
    color:
        var(--porter-green-dark);
}


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

.porter-hero {
    position: relative;

    min-height: 790px;

    overflow: hidden;

    background: #d7d9da;
}


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

.porter-hero-image {
    position: absolute;

    inset: 0;

    z-index: 1;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .06),
            rgba(255, 255, 255, .06)
        ),
        url("../images/garage-door-repair-porter-hero.webp");

    background-size: cover;

    background-position:
        center right;

    filter:
        grayscale(100%);

    opacity: .4;

    transform:
        scale(1.12);

    animation:
        porterHeroImage
        1.8s
        cubic-bezier(.22, 1, .36, 1)
        forwards;
}


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

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

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.30) 0%,
            rgba(255,255,255,.12) 45%,
            rgba(255,255,255,0) 70%
        );

    pointer-events: none;
}


/* ==================================
   DARK SHAPE
================================== */

.porter-dark-shape {
    position: absolute;

    z-index: 3;

    left: 0;
    bottom: 0;

    width: 39%;
    height: 76%;

    background:
        var(--porter-dark);

    clip-path:
        polygon(
            44% 0,
            100% 100%,
            0 100%
        );

    transform-origin:
        bottom left;

    opacity: 0;

    transform:
        translateX(-220px);

    animation:
        porterDarkReveal
        1.05s
        cubic-bezier(.22, 1, .36, 1)
        .05s
        forwards;
}


/* ==================================
   GREEN SHAPE
================================== */

.porter-green-shape {
    position: absolute;

    z-index: 2;

    left: 17%;
    bottom: 0;

    width: 38%;
    height: 76%;

    background:
        linear-gradient(
            180deg,
            rgba(187, 236, 45, .82),
            rgba(145, 203, 0, .72)
        );

    clip-path:
        polygon(
            0 0,
            100% 100%,
            27% 100%
        );

    mix-blend-mode:
        multiply;

    transform-origin:
        bottom left;

    opacity: 0;

    transform:
        translateX(-180px)
        scale(.8);

    animation:
        porterGreenReveal
        1.35s
        cubic-bezier(.22, 1, .36, 1)
        .14s
        forwards;
}


/* ==================================
   BOTTOM GREEN SHAPE
================================== */

.porter-bottom-shape {
    position: absolute;

    z-index: 3;

    right: -4%;
    bottom: -70px;

    width: 58%;
    height: 220px;

    background:
        rgba(154, 213, 12, .78);

    transform:
        rotate(-10deg)
        translateY(100px);

    transform-origin:
        center;

    opacity: 0;

    animation:
        porterBottomBand
        1.3s
        cubic-bezier(.22, 1, .36, 1)
        .35s
        forwards;
}


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

.porter-hero-container {
    position: relative;

    z-index: 10;
}


.porter-hero .row {
    padding-top: 170px;
}


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

.porter-hero-content {
    max-width: 590px;

    padding-left: 40px;
    padding-top: 60px;

    position: relative;
}


/* ==================================
   EYEBROW
================================== */

.porter-eyebrow {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 14px;

    color: #fff;

    font-size: 18px;
    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;

    opacity: 0;

    transform:
        translateX(-50px);

    animation:
        porterEyebrowIn
        .8s
        ease
        .25s
        forwards;
}


.porter-eyebrow span {
    display: block;

    width: 32px;
    height: 4px;

    background:
        var(--porter-green);

    transform-origin:
        left center;

    animation:
        porterEyebrowLine
        1.2s
        ease
        .4s
        both;
}


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

.porter-hero h1 {
    position: relative;

    margin: 0;

    color: #fff;

    text-transform: uppercase;

    line-height: .79;

    font-weight: 1000;
}


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

.porter-small-title {
    display: block;

    margin-left: 45px;
    margin-bottom: 7px;

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

    letter-spacing: 8px;

    opacity: 0;

    transform:
        translateY(-45px);

    animation:
        porterTitleTop
        .85s
        cubic-bezier(.22, 1, .36, 1)
        .38s
        forwards;
}


/* ==================================
   GARAGE / DOOR
================================== */

.porter-main-title {
    display: block;

    font-size:
        5rem;

    letter-spacing: -3px;

    opacity: 0;

    transform:
        translateX(-100px);

    filter:
        blur(4px);

    animation:
        porterTitleBig
        1s
        cubic-bezier(.22, 1, .36, 1)
        forwards;
}


.porter-main-title:nth-of-type(2) {
    animation-delay: .52s;
}


.porter-main-title:nth-of-type(3) {
    animation-delay: .66s;
}


/* ==================================
   PORTER TX
   HORIZONTAL -> ROTATE -> VERTICAL
================================== */

.porter-side-title {
    position: absolute;

    /* مكان الكلمة */
    top: 86px;

    /* زودناها ناحية اليمين */
    right: -162px;

    color: #fff;

    font-size: 32px;
    font-weight: 900;
    line-height: 1;

    letter-spacing: 2.5px;

    writing-mode: horizontal-tb;
    white-space: nowrap;

    /* background خفيف */
    background: rgba(255, 255, 255, .10);

border: 1px solid rgba(255, 255, 255, .16);

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

    padding: 10px 22px;

    border-radius: 4px;

    border:
        1px solid rgba(255, 255, 255, .12);

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

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .10);

    transform-origin: 50% 50%;

    opacity: 0;

    transform:
        translate(-105px, -52px)
        rotate(0deg)
        scale(.88);

    /* اللفة السريعة */
    animation:
        porterThemeSideTitle
        .65s
        cubic-bezier(.76, 0, .24, 1)
        .55s
        forwards;

    text-shadow:
        0 3px 12px rgba(0, 0, 0, .18);

    will-change:
        transform,
        opacity;
}
@keyframes porterThemeSideTitle {

    0% {
        opacity: 0;

        transform:
            translate(-105px, -52px)
            rotate(0deg)
            scale(.88);
    }

    12% {
        opacity: 1;

        transform:
            translate(-90px, -42px)
            rotate(0deg)
            scale(1);
    }

    30% {
        opacity: 1;

        transform:
            translate(-65px, -28px)
            rotate(18deg)
            scale(1);
    }

    52% {
        opacity: 1;

        transform:
            translate(-35px, -13px)
            rotate(52deg)
            scale(1);
    }

    75% {
        opacity: 1;

        transform:
            translate(-8px, -3px)
            rotate(84deg)
            scale(1);
    }

    100% {
        opacity: 1;

        transform:
            translate(0, 0)
            rotate(90deg)
            scale(1);
    }
}


/* decorative green mark */

.porter-side-title::before {
    content: "";

    position: absolute;

    left: -28px;
    top: 50%;

    width: 18px;
    height: 3px;

    border-radius: 10px;

    background:
        var(--porter-green);

    transform:
        translateY(-50%);

    opacity: 0;

    animation:
        porterSideMark
        .5s
        ease
        1.9s
        forwards;
}


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

.porter-hero-text {
    position: relative;

    max-width: 505px;

    margin:
        26px 0 22px;

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

    font-size: 15px;

    line-height: 1.8;

    opacity: 0;

    transform:
        translateY(35px);

    animation:
        porterContentUp
        .8s
        ease
        1.15s
        forwards;
}


.porter-hero-text strong {
    color:
        var(--porter-green);
}


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

.porter-features {
    display: flex;

    gap: 16px;

    margin-bottom: 25px;

    opacity: 0;

    transform:
        translateY(35px);

    animation:
        porterContentUp
        .8s
        ease
        1.3s
        forwards;
}


.porter-feature {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #fff;
}


.porter-feature > i {
    width: 39px;
    height: 39px;

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

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

    border-radius: 50%;

    color:
        var(--porter-green);

    font-size: 14px;

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


.porter-feature:hover > i {
    background:
        var(--porter-green);

    color:
        var(--porter-dark);

    transform:
        rotate(8deg)
        scale(1.08);
}


.porter-feature strong,
.porter-feature span {
    display: block;
}


.porter-feature strong {
    font-size: 13px;
    font-weight: 800;

    line-height: 1.1;
}


.porter-feature span {
    margin-top: 4px;

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

    font-size: 10px;
}


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

.porter-hero-actions {
    display: flex;
    align-items: center;

    gap: 14px;

    opacity: 0;

    transform:
        translateY(35px);

    animation:
        porterContentUp
        .8s
        ease
        1.45s
        forwards;
}


.porter-main-btn {
    min-height: 64px;

    display: inline-flex;
    align-items: center;

    gap: 13px;

    padding:
        7px 22px;

    border-radius: 34px;

    border:
        2px solid #161c25;

    color: #111722;

    background:
        var(--porter-green);

    box-shadow:
        0 5px 0 #6d9000;

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


.porter-main-btn > i {
    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background: #111722;

    color:
        var(--porter-green);

    transition:
        transform .35s ease;
}


.porter-main-btn span {
    font-size: 26px;
    font-weight: 900;

    line-height: 1.05;
}


.porter-main-btn small {
    display: block;

    margin-bottom: 3px;

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

    letter-spacing: .7px;

    text-transform: uppercase;
}


.porter-main-btn:hover {
    color: #111722;

    background: #c8f33e;

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 0 #6d9000;
}


.porter-main-btn:hover > i {
    transform:
        rotate(-10deg)
        scale(1.08);
}


.porter-outline-btn {
    min-height: 58px;

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

    gap: 9px;

    padding:
        0 21px;

    border:
        1px solid rgba(255,255,255,.65);

    border-radius: 30px;

    color: #fff;

    font-size: 12px;
    font-weight: 800;

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


.porter-outline-btn i {
    transition:
        transform .25s ease;
}


.porter-outline-btn:hover {
    color: #111722;

    border-color:
        var(--porter-green);

    background:
        var(--porter-green);

    transform:
        translateY(-2px);
}


.porter-outline-btn:hover i {
    transform:
        translateX(5px);
}


/* ==================================
   RIGHT INDICATOR
================================== */

.porter-slide-count {
    position: absolute;

    z-index: 15;

    right: 48px;
    top: 50%;

    transform:
        translateY(-30%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 15px;

    color: #626971;

    opacity: 0;

    animation:
        porterRightIndicator
        .9s
        ease
        1.3s
        forwards;
}


.porter-slide-count::before {
    content: "";

    position: absolute;

    top: 33px;
    bottom: 33px;

    left: 50%;

    width: 1px;

    background:
        rgba(30, 38, 46, .35);

    z-index: -1;
}


.porter-count {
    width: 30px;
    height: 30px;

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

    background: transparent;

    font-size: 14px;
}


.porter-count.active {
    color:
        var(--porter-green-dark);

    font-weight: 900;
}


.porter-up,
.porter-down {
    color: #131a23;

    font-size: 16px;
}


/* ==================================
   SERVICE STRIP
================================== */

.porter-service-strip {
    position: absolute;

    z-index: 14;

    right: 8%;
    bottom: 30px;

    display: flex;
    align-items: center;

    gap: 17px;

    color: #111722;

    font-size: 11px;

    letter-spacing: 2px;

    opacity: 0;

    transform:
        translateY(30px);

    animation:
        porterContentUp
        .8s
        ease
        1.5s
        forwards;
}


.porter-service-strip > span:nth-child(2) {
    display: block;

    width: 70px;
    height: 1px;

    background: #111722;
}


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

.porter-mobile-phone {
    margin-left: auto;
    margin-right: 12px;

    color: #121822;

    font-size: 14px;
    font-weight: 900;
}


.porter-mobile-phone i {
    margin-right: 4px;

    color:
        var(--porter-green-dark);
}


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

.porter-toggler {
    width: 46px;
    height: 42px;

    border: 0;

    box-shadow:
        none !important;

    padding: 8px;
}


.porter-toggler span {
    display: block;

    height: 2px;

    margin: 6px 0;

    background: #151b24;

    border-radius: 5px;
}


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

.porter-mobile-trust {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 23px;

    opacity: 0;

    animation:
        porterContentUp
        .8s
        ease
        1.55s
        forwards;
}


.porter-mobile-trust span {
    display: inline-flex;
    align-items: center;

    gap: 5px;

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

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

    text-transform: uppercase;
}


.porter-mobile-trust i {
    color:
        var(--porter-green);
}


/* ==================================
   KEYFRAMES
================================== */

@keyframes porterHeroImage {

    0% {
        opacity: .4;

        transform:
            scale(1.12);
    }

    100% {
        opacity: 1;

        transform:
            scale(1);
    }

}


@keyframes porterDarkReveal {

    0% {
        opacity: 0;

        transform:
            translateX(-220px);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0);
    }

}


@keyframes porterGreenReveal {

    0% {
        opacity: 0;

        transform:
            translateX(-180px)
            scale(.8);
    }

    100% {
        opacity: 1;

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

}


@keyframes porterBottomBand {

    0% {
        opacity: 0;

        transform:
            rotate(-10deg)
            translateY(100px);
    }

    100% {
        opacity: 1;

        transform:
            rotate(-10deg)
            translateY(0);
    }

}


@keyframes porterEyebrowIn {

    0% {
        opacity: 0;

        transform:
            translateX(-50px);
    }

    100% {
        opacity: 1;

        transform:
            translateX(0);
    }

}


@keyframes porterEyebrowLine {

    0% {
        transform:
            scaleX(0);
    }

    100% {
        transform:
            scaleX(1);
    }

}


@keyframes porterTitleTop {

    0% {
        opacity: 0;

        transform:
            translateY(-45px);

        letter-spacing: 8px;
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);

        letter-spacing: -1px;
    }

}


@keyframes porterTitleBig {

    0% {
        opacity: 0;

        transform:
            translateX(-100px);

        filter:
            blur(4px);
    }

    55% {
        opacity: 1;
    }

    100% {
        opacity: 1;

        transform:
            translateX(0);

        filter:
            blur(0);
    }

}


/* ==================================
   IMPORTANT PORTER TX ANIMATION
================================== */

@keyframes porterThemeSideTitle {

    /*
       starts horizontal
    */
    0% {
        opacity: 0;

        transform:
            translate(-105px, -52px)
            rotate(0deg)
            scale(.82);
    }


    /*
       horizontal word becomes visible
    */
    18% {
        opacity: 1;

        transform:
            translate(-90px, -42px)
            rotate(0deg)
            scale(1);
    }


    /*
       stays horizontal for a moment
    */
    34% {
        opacity: 1;

        transform:
            translate(-78px, -35px)
            rotate(0deg)
            scale(1);
    }


    /*
       begins the turn
    */
    52% {
        opacity: 1;

        transform:
            translate(-50px, -20px)
            rotate(25deg)
            scale(1);
    }


    /*
       more rotation
    */
    68% {
        opacity: 1;

        transform:
            translate(-28px, -10px)
            rotate(55deg)
            scale(1);
    }


    /*
       almost vertical
    */
    84% {
        opacity: 1;

        transform:
            translate(-7px, -2px)
            rotate(82deg)
            scale(1);
    }


    /*
       final vertical position
    */
    100% {
        opacity: 1;

        transform:
            translate(0, 0)
            rotate(90deg)
            scale(1);
    }

}


@keyframes porterSideMark {

    0% {
        opacity: 0;

        transform:
            translateY(-50%)
            scaleX(0);
    }

    100% {
        opacity: 1;

        transform:
            translateY(-50%)
            scaleX(1);
    }

}


@keyframes porterContentUp {

    0% {
        opacity: 0;

        transform:
            translateY(35px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes porterRightIndicator {

    0% {
        opacity: 0;

        transform:
            translateY(-20%);
    }

    100% {
        opacity: 1;

        transform:
            translateY(-30%);
    }

}


/* ==================================
   RESPONSIVE 1199
================================== */

@media (max-width: 1199px) {

    .porter-brand {
        width: 215px;
    }


    .porter-nav-top {
        gap: 18px;

        padding-right: 20px;
    }


    .porter-contact-data a {
        font-size: 18px;
    }


    .porter-menu .nav-link {
        padding-left:
            10px !important;

        padding-right:
            10px !important;

        font-size: 12px;
    }


    .porter-main-title {
        font-size: 105px;
    }


    .porter-side-title {
        top: 83px;

        right: -67px;

        font-size: 28px;
    }

}


/* ==================================
   RESPONSIVE 991
================================== */

@media (max-width: 991.98px) {

    .porter-nav-wrap {
        top: 10px;

        padding-left: 12px;
        padding-right: 12px;
    }


    .porter-navbar {
        border-radius: 18px;

        overflow: visible;
    }


    .porter-navbar > .container-fluid {
        min-height: 77px;

        padding-left:
            16px !important;

        padding-right:
            10px !important;
    }


    .porter-brand {
        width: auto;

        min-height: auto;

        padding:
            8px 0;
    }


    .porter-brand-icon {
        width: 40px;
        height: 40px;

        border-width: 3px;

        font-size: 16px;
    }


    .porter-brand-text strong {
        font-size: 17px;
    }


    .porter-brand-text small {
        font-size: 8px;
    }


    .navbar-collapse {
        position: absolute;

        top:
            calc(100% + 8px);

        left: 0;
        right: 0;

        padding: 16px;

        border-radius: 15px;

        background: #fff;

        box-shadow:
            0 18px 45px
            rgba(0,0,0,.16);
    }


    .porter-nav-top {
        min-height: auto;

        justify-content:
            space-between;

        padding: 12px;

        background: #f6f7f8;

        border-radius: 12px;

        border: 0;
    }


    .porter-contact-data a {
        font-size: 12px !important;
    }


    .porter-estimate-btn {
        min-width: 125px;

        height: 45px;

        padding:
            0 15px;

        font-size: 12px;
    }


    .porter-nav-bottom {
        display: block;

        min-height: auto;

        padding:
            8px 0 0;
    }


    .porter-menu {
        align-items: stretch;
    }


    .porter-menu .nav-link {
        padding:
            12px 10px !important;

        border-bottom:
            1px solid #eeeeee;

        font-size: 14px;
    }


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


    .porter-hero {
        min-height: 790px;
    }


    .porter-hero .row {
        padding-top: 80px;
    }


    .porter-hero-image {
        background-position:
            63% center;
    }


    .porter-hero::before {
        background:
            linear-gradient(
                90deg,
                rgba(13,18,25,.35),
                rgba(13,18,25,.07)
            );
    }


    .porter-dark-shape {
        width: 74%;
        height: 72%;

        clip-path:
            polygon(
                25% 0,
                100% 100%,
                0 100%
            );
    }


    .porter-green-shape {
        left: 5%;

        width: 60%;
        height: 71%;
    }


    .porter-bottom-shape {
        width: 72%;
    }


    .porter-hero-content {
        padding-left: 15px;

        padding-top: 130px;
    }


    .porter-main-title {
        font-size:
            clamp(78px, 15vw, 115px);
    }


    .porter-side-title {
        top: 70px;

        right: -42px;

        font-size: 23px;
    }

}


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

@media (max-width: 767.98px) {

    .porter-mobile-phone {
        font-size: 14px;
    }


    .porter-mobile-phone i {
        display: none;
    }


    .porter-hero {
        min-height: 820px;
    }


    .porter-hero-image {
        background-position:
            64% center;
    }


    .porter-dark-shape {
        width: 91%;
        height: 70%;

        opacity: .96;
    }


    .porter-green-shape {
        width: 78%;
        height: 70%;
    }


    .porter-bottom-shape {
        display: none;
    }


    .porter-hero-content {
        max-width: 520px;

        padding-top: 130px;
    }


    .porter-eyebrow {
        font-size: 13px;
    }


    .porter-small-title {
        margin-left: 23px;

        font-size: 23px;
    }


    .porter-main-title {
        font-size:
            clamp(70px, 21vw, 105px);

        letter-spacing: -5px;
    }


    /*
       PORTER TX
       still horizontal -> vertical
       but smaller on mobile
    */

    .porter-side-title {
        top: 62px;

        right: -32px;

        font-size: 18px;

        letter-spacing: 1.5px;
    }


    .porter-side-title::before {
        left: -20px;

        width: 13px;
    }


    .porter-hero-text {
        max-width: 430px;

        font-size: 14px;

        line-height: 1.65;
    }


    .porter-features {
        flex-wrap: wrap;

        gap: 13px;
    }


    .porter-hero-actions {
        flex-direction: column;

        align-items: flex-start;

        max-width: 340px;
    }


    .porter-main-btn {
        width: 100%;

        min-height: 70px;

        justify-content:
            flex-start;
    }


    .porter-main-btn span {
        font-size: 22px;
    }


    .porter-outline-btn {
        width: 100%;

        min-height: 52px;
    }

}


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

@media (max-width: 480px) {

    .porter-navbar > .container-fluid {
        min-height: 70px;
    }


    .porter-brand-icon {
        width: 34px;
        height: 34px;

        font-size: 14px;
    }


    .porter-brand-text strong {
        font-size: 14px;
    }


    .porter-brand-text small {
        display: none;
    }


    .porter-mobile-phone {
        font-size: 16px;

        font-weight: 900;

        white-space: nowrap;
    }


    .porter-toggler {
        width: 37px;

        padding-left: 5px;
        padding-right: 5px;
    }


    .porter-hero {
        min-height: 800px;
    }


    .porter-hero-content {
        padding-left: 4px;
        padding-right: 4px;

        padding-top: 120px;
    }


    .porter-small-title {
        margin-left: 15px;

        font-size: 19px;
    }


    .porter-main-title {
        font-size:
            clamp(62px, 20vw, 88px);

        letter-spacing: -4px;
    }


    .porter-side-title {
        top: 54px;

        right: -26px;

        font-size: 15px;

        letter-spacing: 1px;
    }


    .porter-hero-text {
        margin-top: 21px;

        font-size: 13px;
    }


    .porter-feature strong {
        font-size: 12px;
    }


    .porter-main-btn span {
        font-size: 21px;
    }

}


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

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

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

        scroll-behavior:
            auto !important;
    }

}


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

.porter-about {
    position: relative;

    padding:
        120px 0 125px;

    background:
        #ffffff;

    overflow: hidden;

    isolation: isolate;
}


/* subtle background decoration */

.porter-about::before {
    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    right: -240px;
    top: -230px;

    border-radius: 50%;

    border:
        1px solid rgba(23, 29, 41, .06);

    box-shadow:
        0 0 0 70px rgba(23, 29, 41, .018),
        0 0 0 140px rgba(23, 29, 41, .012);

    z-index: -1;
}


/* ==========================================
   LEFT VISUAL
========================================== */

.porter-about-visual {
    position: relative;

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

    min-height: 640px;

    margin:
        0 auto;

    opacity: 0;

    transform:
        translateX(-60px);

    animation:
        porterAboutVisualIn
        1s
        cubic-bezier(.22, 1, .36, 1)
        .15s
        forwards;
}


/* ==========================================
   LARGE CIRCLE
========================================== */

.porter-about-circle {
    position: absolute;

    width: 470px;
    height: 470px;

    left: 25px;
    top: 50px;

    border-radius: 50%;

    border:
        1px solid rgba(23, 29, 41, .10);

    z-index: 0;
}


.porter-about-circle::before {
    content: "";

    position: absolute;

    inset: 24px;

    border-radius: 50%;

    border:
        1px dashed rgba(148, 200, 0, .30);

    animation:
        porterAboutCircleRotate
        22s
        linear
        infinite;
}


.porter-about-circle::after {
    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    top: 48px;
    right: 61px;

    border-radius: 50%;

    background:
        var(--porter-green);

    box-shadow:
        0 0 0 8px
        rgba(184, 230, 46, .15);
}


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

.porter-about-main-image {
    position: absolute;

    left: 82px;
    top: 15px;

    width: 365px;
    height: 510px;

    z-index: 2;

    overflow: hidden;

    clip-path:
        polygon(
            0 0,
            100% 0,
            100% 82%,
            79% 100%,
            0 100%
        );

    background:
        #e9ebec;

    box-shadow:
        0 30px 60px
        rgba(17, 23, 34, .12);
}


.porter-about-main-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.07);

    transition:
        transform
        1.1s
        cubic-bezier(.22, 1, .36, 1);
}


.porter-about-visual:hover
.porter-about-main-image img {
    transform:
        scale(1);
}


/* ==========================================
   SMALL FLOATING IMAGE
========================================== */

.porter-about-small-image {
    position: absolute;

    width: 215px;
    height: 245px;

    right: 5px;
    bottom: 35px;

    z-index: 5;

    overflow: hidden;

    border:
        9px solid #fff;

    background:
        #e8eaeb;

    box-shadow:
        0 22px 50px
        rgba(17, 23, 34, .17);

    opacity: 0;

    transform:
        translate(50px, 40px)
        rotate(4deg);

    animation:
        porterAboutSmallImageIn
        .9s
        cubic-bezier(.22, 1, .36, 1)
        .65s
        forwards;
}


.porter-about-small-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform .8s ease;
}


.porter-about-small-image:hover img {
    transform:
        scale(1.08);
}


/* ==========================================
   ROTATING ORBIT
========================================== */

.porter-about-orbit {
    position: absolute;

    left: 5px;
    bottom: 25px;

    width: 165px;
    height: 165px;

    z-index: 7;

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

    border-radius: 50%;

    background:
        var(--porter-dark);

    box-shadow:
        0 18px 45px
        rgba(17, 23, 34, .20);

    opacity: 0;

    transform:
        scale(.65);

    animation:
        porterAboutOrbitIn
        .8s
        cubic-bezier(.22, 1, .36, 1)
        .8s
        forwards;
}


/* circle ring */

.porter-about-orbit::before {
    content: "";

    position: absolute;

    inset: 9px;

    border-radius: 50%;

    border:
        1px solid
        rgba(255,255,255,.18);
}


/* rotating text */

.porter-about-orbit-text {
    position: absolute;

    inset: 0;

    animation:
        porterAboutOrbitSpin
        12s
        linear
        infinite;
}


.porter-about-orbit-text span {
    position: absolute;

    left: 50%;
    top: 8px;

    height: 74px;

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

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;

    transform-origin:
        0 74px;
}


/*
   Circular character placement
*/

.porter-about-orbit-text span:nth-child(1) {
    transform: rotate(0deg);
}

.porter-about-orbit-text span:nth-child(2) {
    transform: rotate(17deg);
}

.porter-about-orbit-text span:nth-child(3) {
    transform: rotate(34deg);
}

.porter-about-orbit-text span:nth-child(4) {
    transform: rotate(51deg);
}

.porter-about-orbit-text span:nth-child(5) {
    transform: rotate(68deg);
}

.porter-about-orbit-text span:nth-child(6) {
    transform: rotate(85deg);
}

.porter-about-orbit-text span:nth-child(7) {
    transform: rotate(106deg);
}

.porter-about-orbit-text span:nth-child(8) {
    transform: rotate(127deg);
}

.porter-about-orbit-text span:nth-child(9) {
    transform: rotate(144deg);
}

.porter-about-orbit-text span:nth-child(10) {
    transform: rotate(161deg);
}

.porter-about-orbit-text span:nth-child(11) {
    transform: rotate(178deg);
}

.porter-about-orbit-text span:nth-child(12) {
    transform: rotate(200deg);
}

.porter-about-orbit-text span:nth-child(13) {
    transform: rotate(222deg);
}

.porter-about-orbit-text span:nth-child(14) {
    transform: rotate(239deg);
}

.porter-about-orbit-text span:nth-child(15) {
    transform: rotate(256deg);
}

.porter-about-orbit-text span:nth-child(16) {
    transform: rotate(273deg);
}

.porter-about-orbit-text span:nth-child(17) {
    transform: rotate(290deg);
}

.porter-about-orbit-text span:nth-child(18) {
    transform: rotate(307deg);
}

.porter-about-orbit-text span:nth-child(19) {
    transform: rotate(324deg);
}


/* orbit center */

.porter-about-orbit-center {
    position: relative;

    z-index: 3;

    width: 68px;
    height: 68px;

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

    border-radius: 50%;

    background:
        var(--porter-green);

    color:
        var(--porter-dark);

    font-size: 25px;

    box-shadow:
        0 0 0 8px
        rgba(184,230,46,.10);
}


/* ==========================================
   LOCAL SERVICE BADGE
========================================== */

.porter-about-badge {
    position: absolute;

    right: 3px;
    top: 65px;

    z-index: 8;

    width: 128px;
    min-height: 110px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        18px 15px;

    background:
        var(--porter-green);

    color:
        var(--porter-dark);

    box-shadow:
        0 15px 35px
        rgba(17, 23, 34, .12);

    opacity: 0;

    transform:
        translateX(45px);

    animation:
        porterAboutBadgeIn
        .8s
        cubic-bezier(.22, 1, .36, 1)
        .9s
        forwards;
}


.porter-about-badge strong {
    display: block;

    font-size: 24px;
    font-weight: 950;

    line-height: 1;
}


.porter-about-badge span {
    display: block;

    margin-top: 8px;

    font-size: 9px;
    font-weight: 800;

    line-height: 1.4;

    letter-spacing: 1.1px;
}


/* ==========================================
   DECORATIVE LINE
========================================== */

.porter-about-line {
    position: absolute;

    left: 40px;
    top: 25px;

    width: 2px;
    height: 100px;

    background:
        rgba(23,29,41,.08);
}


.porter-about-line span {
    position: absolute;

    left: -3px;
    top: 0;

    width: 8px;
    height: 26px;

    border-radius: 10px;

    background:
        var(--porter-green);

    animation:
        porterAboutLineMove
        2.2s
        ease-in-out
        infinite;
}


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

.porter-about-content {
    position: relative;

    max-width: 580px;

    padding-left: 25px;
}


/* ==========================================
   ABOUT LABEL
========================================== */

.porter-about-label {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color:
        var(--porter-green-dark);

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;

    opacity: 0;

    transform:
        translateY(20px);

    animation:
        porterAboutContentIn
        .7s
        ease
        .35s
        forwards;
}


.porter-about-label-icon {
    width: 34px;
    height: 34px;

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

    border-radius: 50%;

    background:
        rgba(184,230,46,.18);

    color:
        var(--porter-green-dark);
}


/* ==========================================
   H2
========================================== */

.porter-about-content h2 {
    max-width: 560px;

    margin:
        0 0 25px;

    color:
        var(--porter-dark);

    font-size:
        clamp(42px, 4.2vw, 67px);

    font-weight: 950;

    line-height: .98;

    letter-spacing: -3px;

    text-transform: uppercase;

    opacity: 0;

    transform:
        translateX(55px);

    animation:
        porterAboutHeadingIn
        .9s
        cubic-bezier(.22, 1, .36, 1)
        .48s
        forwards;
}


.porter-about-content h2 span {
    display: block;

    color:
        var(--porter-green-dark);

    position: relative;
}


/* underline accent */

.porter-about-content h2 span::after {
    content: "";

    display: inline-block;

    width: 45px;
    height: 5px;

    margin-left: 12px;

    vertical-align: middle;

    background:
        var(--porter-green);
}


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

.porter-about-description {
    max-width: 550px;

    margin:
        0 0 28px;

    padding-left: 21px;

    border-left:
        3px solid var(--porter-green);

    color:
        #626b75;

    font-size: 15px;

    line-height: 1.85;

    opacity: 0;

    transform:
        translateY(25px);

    animation:
        porterAboutContentIn
        .8s
        ease
        .7s
        forwards;
}


/* ==========================================
   SERVICE ROW
========================================== */

.porter-about-service {
    display: flex;
    align-items: center;

    gap: 15px;

    max-width: 500px;

    margin-bottom: 32px;

    padding:
        17px 20px;

    background:
        #f6f7f7;

    border:
        1px solid #eceeee;

    opacity: 0;

    transform:
        translateY(25px);

    animation:
        porterAboutContentIn
        .8s
        ease
        .85s
        forwards;
}


.porter-about-service-icon {
    flex:
        0 0 48px;

    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background:
        var(--porter-dark);

    color:
        var(--porter-green);

    font-size: 18px;
}


.porter-about-service-text small {
    display: block;

    margin-bottom: 4px;

    color:
        #858c94;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 1.5px;
}


.porter-about-service-text strong {
    display: block;

    color:
        var(--porter-dark);

    font-size: 14px;
    font-weight: 850;
}


/* ==========================================
   BOTTOM AREA
========================================== */

.porter-about-bottom {
    display: flex;
    align-items: center;

    gap: 25px;

    opacity: 0;

    transform:
        translateY(25px);

    animation:
        porterAboutContentIn
        .8s
        ease
        1s
        forwards;
}


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

.porter-about-btn {
    min-height: 58px;

    display: inline-flex;
    align-items: center;

    gap: 20px;

    padding:
        6px 7px 6px 23px;

    border-radius: 30px;

    background:
        var(--porter-dark);

    color: #fff;

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .5px;

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


.porter-about-btn i {
    width: 45px;
    height: 45px;

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

    border-radius: 50%;

    background:
        var(--porter-green);

    color:
        var(--porter-dark);

    transition:
        transform .3s ease;
}


.porter-about-btn:hover {
    color:
        var(--porter-dark);

    background:
        var(--porter-green);

    transform:
        translateY(-3px);
}


.porter-about-btn:hover i {
    background: #fff;

    transform:
        rotate(-35deg);
}


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

.porter-about-phone {
    display: flex;
    align-items: center;

    gap: 11px;

    color:
        var(--porter-dark);
}


.porter-about-phone > span {
    width: 44px;
    height: 44px;

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

    border:
        1px solid #dfe2e4;

    border-radius: 50%;

    color:
        var(--porter-green-dark);

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


.porter-about-phone small {
    display: block;

    margin-bottom: 2px;

    color:
        #8b9197;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 1px;
}


.porter-about-phone strong {
    display: block;

    color:
        var(--porter-dark);

    font-size: 17px;
    font-weight: 900;
}


.porter-about-phone:hover > span {
    background:
        var(--porter-green);

    color:
        var(--porter-dark);
}


/* ==========================================
   EXTRA ROTATING BACKGROUND SHAPE
========================================== */

.porter-about-rotate-shape {
    position: absolute;

    right: 4%;
    bottom: 45px;

    width: 85px;
    height: 85px;

    z-index: -1;

    border:
        1px solid rgba(23,29,41,.08);

    animation:
        porterAboutSquareRotate
        14s
        linear
        infinite;
}


.porter-about-rotate-shape span {
    position: absolute;

    width: 25px;
    height: 25px;

    right: -12px;
    top: -12px;

    background:
        rgba(184,230,46,.35);
}


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

@keyframes porterAboutVisualIn {

    from {
        opacity: 0;

        transform:
            translateX(-60px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


@keyframes porterAboutSmallImageIn {

    from {
        opacity: 0;

        transform:
            translate(50px, 40px)
            rotate(4deg);
    }

    to {
        opacity: 1;

        transform:
            translate(0, 0)
            rotate(0);
    }

}


@keyframes porterAboutOrbitIn {

    from {
        opacity: 0;

        transform:
            scale(.65)
            rotate(-80deg);
    }

    to {
        opacity: 1;

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

}


@keyframes porterAboutOrbitSpin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes porterAboutCircleRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes porterAboutBadgeIn {

    from {
        opacity: 0;

        transform:
            translateX(45px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


@keyframes porterAboutLineMove {

    0%,
    100% {
        top: 0;
    }

    50% {
        top: 72px;
    }

}


@keyframes porterAboutContentIn {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes porterAboutHeadingIn {

    from {
        opacity: 0;

        transform:
            translateX(55px);

        letter-spacing: 2px;
    }

    to {
        opacity: 1;

        transform:
            translateX(0);

        letter-spacing: -3px;
    }

}


@keyframes porterAboutSquareRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


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

@media (max-width: 1199.98px) {

    .porter-about-visual {
        transform:
            scale(.9);

        transform-origin:
            center;
    }


    .porter-about-content h2 {
        font-size:
            clamp(40px, 4.2vw, 58px);
    }

}


@media (max-width: 991.98px) {

    .porter-about {
        padding:
            90px 0;
    }


    .porter-about-visual {
        min-height: 610px;

        margin-bottom: 25px;

        transform:
            none;
    }


    .porter-about-content {
        max-width: 650px;

        padding-left: 0;

        margin:
            0 auto;
    }

}


@media (max-width: 767.98px) {

    .porter-about {
        padding:
            70px 0;
    }


    .porter-about-visual {
        min-height: 525px;

        max-width: 440px;
    }


    .porter-about-circle {
        width: 360px;
        height: 360px;

        left: 20px;
        top: 45px;
    }


    .porter-about-main-image {
        left: 50px;
        top: 20px;

        width: 285px;
        height: 400px;
    }


    .porter-about-small-image {
        width: 165px;
        height: 190px;

        right: 0;
        bottom: 20px;

        border-width: 6px;
    }


    .porter-about-orbit {
        width: 130px;
        height: 130px;

        left: 0;
        bottom: 20px;
    }


    .porter-about-orbit-text span {
        top: 6px;

        height: 58px;

        font-size: 8px;

        transform-origin:
            0 58px;
    }


    .porter-about-orbit-center {
        width: 52px;
        height: 52px;

        font-size: 19px;
    }


    .porter-about-badge {
        width: 105px;
        min-height: 90px;

        right: 0;
        top: 48px;

        padding:
            14px 12px;
    }


    .porter-about-badge strong {
        font-size: 19px;
    }


    .porter-about-content h2 {
        font-size:
            clamp(38px, 10vw, 52px);

        letter-spacing: -2px;
    }


    .porter-about-description {
        font-size: 14px;

        line-height: 1.75;
    }


    .porter-about-bottom {
        flex-wrap: wrap;
    }

}


@media (max-width: 480px) {

    .porter-about {
        padding:
            60px 0 65px;
    }


    .porter-about-visual {
        min-height: 450px;

        max-width: 350px;
    }


    .porter-about-circle {
        width: 295px;
        height: 295px;

        left: 12px;
    }


    .porter-about-main-image {
        width: 235px;
        height: 335px;

        left: 35px;
    }


    .porter-about-small-image {
        width: 135px;
        height: 155px;

        right: 0;
    }


    .porter-about-orbit {
        width: 108px;
        height: 108px;
    }


    .porter-about-orbit-text {
        display: none;
    }


    .porter-about-orbit-center {
        width: 58px;
        height: 58px;
    }


    .porter-about-badge {
        width: 92px;
        min-height: 80px;

        top: 40px;
    }


    .porter-about-badge strong {
        font-size: 17px;
    }


    .porter-about-badge span {
        font-size: 7px;
    }


    .porter-about-line {
        display: none;
    }


    .porter-about-label {
        margin-bottom: 14px;
    }


    .porter-about-content h2 {
        margin-bottom: 20px;

        font-size:
            clamp(34px, 10.5vw, 45px);

        line-height: 1;
    }


    .porter-about-content h2 span::after {
        width: 30px;
        height: 4px;
    }


    .porter-about-service {
        padding:
            14px;
    }


    .porter-about-service-text strong {
        font-size: 12px;
    }


    .porter-about-bottom {
        gap: 18px;
    }


    .porter-about-phone strong {
        font-size: 16px;
    }

}


/* ==========================================
   REDUCED MOTION
========================================== */

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

    .porter-about *,
    .porter-about *::before,
    .porter-about *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}


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

.porter-why {
    position: relative;

    padding: 125px 0 110px;

    background:
        #f4f5f3;

    overflow: hidden;

    isolation: isolate;
}


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

.porter-why-bg-word {
    position: absolute;

    top: -75px;
    left: 50%;

    transform:
        translateX(-50%);

    z-index: -1;

    color:
        rgba(23, 29, 41, .035);

    font-size:
        clamp(180px, 26vw, 410px);

    font-weight: 1000;

    line-height: 1;

    letter-spacing: -30px;

    user-select: none;

    pointer-events: none;

    animation:
        porterWhyBgFloat
        7s
        ease-in-out
        infinite;
}


/* ==========================================================
   GREEN GEOMETRIC ELEMENT
========================================================== */

.porter-why-green-angle {
    position: absolute;

    right: -120px;
    top: 70px;

    width: 300px;
    height: 300px;

    z-index: -1;

    border:
        55px solid
        rgba(184, 230, 46, .12);

    transform:
        rotate(45deg);

    animation:
        porterWhyAngleRotate
        18s
        linear
        infinite;
}


/* ==========================================================
   LEFT DECORATIVE CIRCLE
========================================================== */

.porter-why-circle {
    position: absolute;

    left: -75px;
    bottom: 60px;

    width: 170px;
    height: 170px;

    border-radius: 50%;

    border:
        1px solid
        rgba(23, 29, 41, .10);

    z-index: -1;

    animation:
        porterWhyCircleSpin
        12s
        linear
        infinite;
}


.porter-why-circle::before {

    content: "";

    position: absolute;

    inset: 22px;

    border-radius: 50%;

    border:
        1px dashed
        rgba(23,29,41,.15);
}


.porter-why-circle span {

    position: absolute;

    width: 12px;
    height: 12px;

    right: 19px;
    top: 28px;

    border-radius: 50%;

    background:
        var(--porter-green);

    box-shadow:
        0 0 0 8px
        rgba(184,230,46,.15);
}


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

.porter-why-heading-row {

    position: relative;

    margin-bottom: 65px;

    z-index: 3;
}


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

.porter-why-label {

    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    color:
        var(--porter-green-dark);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;

    opacity: 0;

    transform:
        translateX(-40px);

    animation:
        porterWhyLabelIn
        .7s
        cubic-bezier(.22,1,.36,1)
        .15s
        forwards;
}


.porter-why-label span {

    position: relative;

    width: 38px;
    height: 3px;

    background:
        var(--porter-green);
}


.porter-why-label span::after {

    content: "";

    position: absolute;

    right: -7px;
    top: 50%;

    width: 7px;
    height: 7px;

    transform:
        translateY(-50%)
        rotate(45deg);

    background:
        var(--porter-green);
}


/* ==========================================================
   H2
========================================================== */

.porter-why-heading h2 {

    max-width: 700px;

    margin: 0;

    color:
        var(--porter-dark);

    font-size:
        clamp(50px, 5.5vw, 82px);

    font-weight: 950;

    line-height: .91;

    letter-spacing: -5px;

    text-transform: uppercase;
}


/* first heading reveal */

.porter-why-heading h2 {

    opacity: 0;

    transform:
        translateY(60px);

    animation:
        porterWhyHeadingIn
        .95s
        cubic-bezier(.22,1,.36,1)
        .25s
        forwards;
}


.porter-why-heading h2 span {

    display: block;

    color:
        var(--porter-green-dark);

    position: relative;
}


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

.porter-why-intro {

    position: relative;

    max-width: 420px;

    margin-left: auto;

    padding-left: 30px;

    opacity: 0;

    transform:
        translateX(45px);

    animation:
        porterWhyIntroIn
        .8s
        cubic-bezier(.22,1,.36,1)
        .55s
        forwards;
}


.porter-why-intro-line {

    position: absolute;

    left: 0;
    top: 3px;

    width: 3px;
    height: 100%;

    background:
        #dfe1de;
}


.porter-why-intro-line::after {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 40%;

    background:
        var(--porter-green);

    animation:
        porterWhyLineMove
        2.3s
        ease-in-out
        infinite;
}


.porter-why-intro p {

    margin: 0;

    color:
        #687078;

    font-size: 15px;

    line-height: 1.85;
}


/* ==========================================================
   MAIN AREA
========================================================== */

.porter-why-main {

    position: relative;

    align-items: stretch;

    z-index: 5;
}


/* ==========================================================
   LEFT / RIGHT COLUMN
========================================================== */

.porter-why-left,
.porter-why-right {

    height: 100%;

    display: flex;
    flex-direction: column;

    justify-content: center;

    position: relative;

    z-index: 5;
}


.porter-why-left {

    padding:
        35px 42px 35px 0;
}


.porter-why-right {

    padding:
        35px 0 35px 42px;
}


/* ==========================================================
   SERVICE ITEM
========================================================== */

.porter-why-item {

    position: relative;

    min-height: 220px;

    padding:
        32px 20px 32px 0;

    border-bottom:
        1px solid
        rgba(23,29,41,.12);

    opacity: 0;

    transform:
        translateY(45px);

    animation:
        porterWhyItemIn
        .8s
        cubic-bezier(.22,1,.36,1)
        forwards;
}


.porter-why-left
.porter-why-item:first-child {

    animation-delay: .65s;
}


.porter-why-left
.porter-why-item:last-child {

    animation-delay: .8s;
}


.porter-why-right
.porter-why-item:first-child {

    animation-delay: .75s;
}


.porter-why-right
.porter-why-item:last-child {

    animation-delay: .9s;
}


.porter-why-item:last-child {

    border-bottom: 0;
}


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

.porter-why-number {

    position: absolute;

    right: 5px;
    top: 20px;

    color:
        rgba(23,29,41,.07);

    font-size: 64px;

    font-weight: 950;

    line-height: 1;

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


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

    color:
        rgba(148,200,0,.17);

    transform:
        translateY(-7px);
}


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

.porter-why-item-icon {

    position: relative;

    width: 62px;
    height: 62px;

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

    margin-bottom: 21px;

    border-radius: 50%;

    background:
        var(--porter-dark);

    color:
        var(--porter-green);

    font-size: 20px;

    transition:
        transform .45s
        cubic-bezier(.22,1,.36,1),
        background .3s ease,
        color .3s ease;
}


.porter-why-item-icon::before {

    content: "";

    position: absolute;

    inset: -6px;

    border:
        1px solid
        rgba(23,29,41,.13);

    border-radius: 50%;

    transition:
        transform .5s ease;
}


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

    background:
        var(--porter-green);

    color:
        var(--porter-dark);

    transform:
        rotate(360deg);
}


.porter-why-item:hover
.porter-why-item-icon::before {

    transform:
        scale(1.15);
}


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

.porter-why-item-content h3 {

    max-width: 270px;

    margin:
        0 0 12px;

    color:
        var(--porter-dark);

    font-size: 21px;

    font-weight: 900;

    line-height: 1.18;
}


.porter-why-item-content p {

    max-width: 300px;

    margin: 0;

    color:
        #747b82;

    font-size: 13px;

    line-height: 1.75;
}


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

.porter-why-image-wrap {

    position: relative;

    height: 100%;

    min-height: 550px;

    z-index: 7;

    opacity: 0;

    transform:
        scale(.88);

    animation:
        porterWhyImageReveal
        1.1s
        cubic-bezier(.22,1,.36,1)
        .55s
        forwards;
}


.porter-why-image {

    position: absolute;

    inset: 0;

    overflow: hidden;

    background:
        #ddd;
}


/* theme-like angled image */

.porter-why-image {

    clip-path:
        polygon(
            13% 0,
            100% 0,
            100% 88%,
            84% 100%,
            0 100%,
            0 14%
        );
}


.porter-why-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(23,29,41,.28) 100%
        );

    pointer-events: none;
}


.porter-why-image img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.1);

    transition:
        transform
        1.2s
        cubic-bezier(.22,1,.36,1),
        filter .8s ease;
}


.porter-why-image-wrap:hover
.porter-why-image img {

    transform:
        scale(1.02);
}


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

.porter-why-image-corner {

    position: absolute;

    right: -15px;
    top: -15px;

    width: 95px;
    height: 95px;

    border-top:
        3px solid
        var(--porter-green);

    border-right:
        3px solid
        var(--porter-green);

    z-index: 10;
}


.porter-why-image-corner span {

    position: absolute;

    right: -6px;
    top: -6px;

    width: 12px;
    height: 12px;

    background:
        var(--porter-dark);

    border:
        3px solid
        var(--porter-green);
}



/* ==========================================================
   BOTTOM CTA
========================================================== */

.porter-why-bottom {

    position: relative;

    max-width: 930px;

    min-height: 100px;

    margin:
        105px auto 0;

    display: flex;
    align-items: center;

    padding:
        20px 30px;

    background:
        var(--porter-dark);

    overflow: hidden;

    opacity: 0;

    transform:
        translateY(40px);

    animation:
        porterWhyBottomIn
        .9s
        cubic-bezier(.22,1,.36,1)
        1s
        forwards;
}


.porter-why-bottom::after {

    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -80px;
    top: -85px;

    border-radius: 50%;

    background:
        rgba(184,230,46,.08);
}


/* ==========================================================
   BOTTOM TEXT
========================================================== */

.porter-why-bottom-text {

    flex: 0 0 auto;
}


.porter-why-bottom-text span {

    display: block;

    margin-bottom: 4px;

    color:
        var(--porter-green);

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.porter-why-bottom-text strong {

    color: #fff;

    font-size: 17px;

    font-weight: 850;
}


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

.porter-why-bottom-line {

    flex: 1;

    height: 1px;

    margin:
        0 35px;

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

    position: relative;
}


.porter-why-bottom-line::before {

    content: "";

    position: absolute;

    left: 0;
    top: -1px;

    width: 30%;

    height: 3px;

    background:
        var(--porter-green);

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


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

.porter-why-phone {

    position: relative;

    z-index: 4;

    display: flex;
    align-items: center;

    gap: 12px;

    color: #fff;
}


.porter-why-phone-icon {

    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    background:
        var(--porter-green);

    color:
        var(--porter-dark);

    font-size: 17px;

    transition:
        transform .35s ease;
}


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

    transform:
        rotate(-15deg)
        scale(1.08);
}


.porter-why-phone-data small {

    display: block;

    margin-bottom: 2px;

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

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;
}


.porter-why-phone-data strong {

    display: block;

    color: #fff;

    font-size: 20px;

    font-weight: 950;
}


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

@keyframes porterWhyLabelIn {

    from {
        opacity: 0;

        transform:
            translateX(-40px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


@keyframes porterWhyHeadingIn {

    from {
        opacity: 0;

        transform:
            translateY(60px);

        letter-spacing: 1px;
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes porterWhyIntroIn {

    from {
        opacity: 0;

        transform:
            translateX(45px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


@keyframes porterWhyItemIn {

    from {
        opacity: 0;

        transform:
            translateY(45px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes porterWhyImageReveal {

    0% {
        opacity: 0;

        transform:
            scale(.88)
            rotate(-3deg);

        clip-path:
            polygon(
                50% 50%,
                50% 50%,
                50% 50%,
                50% 50%,
                50% 50%,
                50% 50%
            );
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 1;

        transform:
            scale(1)
            rotate(0);

        clip-path:
            polygon(
                13% 0,
                100% 0,
                100% 88%,
                84% 100%,
                0 100%,
                0 14%
            );
    }
}


@keyframes porterWhyRotator {

    from {
        transform:
            rotate(0deg);
    }

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


@keyframes porterWhyAngleRotate {

    from {
        transform:
            rotate(45deg);
    }

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


@keyframes porterWhyCircleSpin {

    from {
        transform:
            rotate(0deg);
    }

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


@keyframes porterWhyBgFloat {

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

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


@keyframes porterWhyLineMove {

    0%,
    100% {
        top: 0;
    }

    50% {
        top: 60%;
    }
}


@keyframes porterWhyBottomIn {

    from {
        opacity: 0;

        transform:
            translateY(40px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes porterWhyBottomLine {

    0% {
        left: 0;
    }

    50% {
        left: 70%;
    }

    100% {
        left: 0;
    }
}


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

@media (max-width: 991.98px) {

    .porter-why {

        padding:
            90px 0;
    }


    .porter-why-heading-row {

        margin-bottom:
            45px;
    }


    .porter-why-intro {

        max-width: 600px;

        margin:
            30px 0 0;
    }


    .porter-why-left,
    .porter-why-right {

        padding:
            0;
    }


    .porter-why-left {

        display: grid;

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

        gap: 25px;

        margin-bottom:
            40px;
    }


    .porter-why-right {

        display: grid;

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

        gap: 25px;

        margin-top:
            90px;
    }


    .porter-why-item {

        min-height: auto;

        padding:
            25px;

        border:
            1px solid
            rgba(23,29,41,.10);

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


    .porter-why-image-wrap {

        max-width: 500px;

        min-height: 600px;

        margin:
            0 auto;
    }


    .porter-why-bottom {

        margin-top:
            70px;
    }

}


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

@media (max-width: 767.98px) {

    .porter-why {

        padding:
            70px 0;
    }


    .porter-why-bg-word {

        top: -20px;

        font-size:
            180px;

        letter-spacing:
            -15px;
    }


    .porter-why-heading h2 {

        font-size:
            clamp(42px, 12vw, 60px);

        line-height: .95;

        letter-spacing:
            -3px;
    }


    .porter-why-left,
    .porter-why-right {

        grid-template-columns:
            1fr;
    }


    .porter-why-image-wrap {

        min-height:
            530px;
    }


    .porter-why-right {

        margin-top:
            90px;
    }


    .porter-why-bottom {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap: 20px;

        padding:
            25px;

        margin-top:
            65px;
    }


    .porter-why-bottom-line {

        width: 100%;

        flex: none;

        margin: 0;
    }


    .porter-why-phone-data strong {

        font-size: 22px;
    }

}


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

@media (max-width: 480px) {

    .porter-why {

        padding:
            60px 0;
    }


    .porter-why-heading h2 {

        font-size:
            clamp(37px, 11.5vw, 48px);
    }


    .porter-why-intro {

        padding-left:
            20px;
    }


    .porter-why-image-wrap {

        min-height:
            440px;
    }


    .porter-why-rotator {

        width: 125px;
        height: 125px;

        bottom: -58px;
    }


    .porter-why-rotator-center {

        width: 50px;
        height: 50px;

        font-size: 15px;
    }


    .porter-why-item {

        padding:
            23px 20px;
    }


    .porter-why-number {

        font-size: 50px;
    }


    .porter-why-item-content h3 {

        font-size: 19px;
    }


    .porter-why-phone-data strong {

        font-size: 20px;
    }

}


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

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

    .porter-why *,
    .porter-why *::before,
    .porter-why *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}


/* =====================================================
   SERVICES SECTION
===================================================== */

.pgs-services {
    position: relative;
    padding: 120px 0 115px;
    overflow: hidden;
    background: #171d29;
    isolation: isolate;
}


/* giant background word */

.pgs-bg-text {
    position: absolute;
    top: -75px;
    right: -15px;
    z-index: -1;

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

    font-size: clamp(150px, 20vw, 330px);
    font-weight: 950;
    line-height: 1;

    letter-spacing: -20px;

    pointer-events: none;
    user-select: none;
}


/* circle decoration */

.pgs-deco-circle {
    position: absolute;
    left: -110px;
    top: 170px;

    width: 220px;
    height: 220px;

    border: 1px solid rgba(184,230,46,.13);
    border-radius: 50%;

    animation:
        pgsCircleSpin 13s linear infinite;
}

.pgs-deco-circle::before {
    content: "";

    position: absolute;
    inset: 27px;

    border:
        1px dashed rgba(255,255,255,.10);

    border-radius: 50%;
}

.pgs-deco-circle::after {
    content: "";

    position: absolute;

    width: 13px;
    height: 13px;

    top: 31px;
    right: 30px;

    border-radius: 50%;

    background: var(--porter-green);

    box-shadow:
        0 0 0 8px rgba(184,230,46,.10);
}


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

.pgs-heading {
    position: relative;
    z-index: 10;

    margin-bottom: 60px;
}


/* subtitle */

.pgs-subtitle {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 20px;

    color: var(--porter-green);

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 2px;
    text-transform: uppercase;

    opacity: 0;

    transform: translateX(-35px);

    animation:
        pgsSubtitleIn .7s ease .15s forwards;
}


.pgs-subtitle-line {
    width: 35px;
    height: 2px;

    background: var(--porter-green);
}


.pgs-subtitle i {
    font-size: 13px;
}


/* H2 */

.pgs-heading h2 {
    margin: 0;

    max-width: 730px;

    color: #fff;

    font-size:
        clamp(50px, 5.4vw, 80px);

    font-weight: 950;

    line-height: .92;

    letter-spacing: -5px;

    text-transform: uppercase;

    opacity: 0;

    transform: translateY(50px);

    animation:
        pgsHeadingIn
        .9s
        cubic-bezier(.22,1,.36,1)
        .25s
        forwards;
}


.pgs-heading h2 span {
    display: block;

    color: var(--porter-green);
}


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

.pgs-heading-right {
    max-width: 390px;
    margin-left: auto;
}


.pgs-heading-right p {
    margin: 0 0 25px;

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

    font-size: 14px;

    line-height: 1.8;
}


/* =====================================================
   CONTROLS
===================================================== */

.pgs-controls {
    display: flex;
    align-items: center;
    gap: 16px;
}


.pgs-arrow {
    width: 51px;
    height: 51px;

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

    border:
        1px solid rgba(255,255,255,.22);

    border-radius: 50%;

    color: #fff;
    background: transparent;

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


.pgs-arrow:hover {
    border-color: var(--porter-green);

    background: var(--porter-green);

    color: var(--porter-dark);

    transform: scale(1.08);
}


.pgs-counter {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 70px;
}


.pgs-counter strong {
    color: var(--porter-green);

    font-size: 17px;
    font-weight: 900;
}


.pgs-counter span {
    width: 20px;
    height: 1px;

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


.pgs-counter small {
    color:
        rgba(255,255,255,.45);

    font-size: 11px;
}


/* =====================================================
   SLIDER
===================================================== */

.pgs-slider {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        10px 0 55px;
}


.pgs-track {
    display: flex;

    gap: 26px;

    padding-left:
        max(calc((100vw - 1320px) / 2), 30px);

    padding-right: 30px;

    transition:
        transform
        .75s
        cubic-bezier(.22,1,.36,1);

    will-change: transform;
}


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

.pgs-card {
    position: relative;

    flex:
        0 0 365px;

    min-width: 0;

    background: #fff;

    overflow: hidden;

    transform:
        translateY(28px)
        scale(.94);

    opacity: .52;

    transition:
        transform .65s
        cubic-bezier(.22,1,.36,1),
        opacity .5s ease,
        box-shadow .5s ease;
}


.pgs-card.active {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);

    box-shadow:
        0 28px 70px rgba(0,0,0,.28);
}


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

.pgs-image {
    position: relative;

    display: block;

    height: 295px;

    overflow: hidden;

    background: #ddd;
}


.pgs-image::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(23,29,41,.30) 100%
        );

    pointer-events: none;
}


.pgs-image::after {
    content: "";

    position: absolute;

    z-index: 3;

    left: -120%;
    top: 0;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.25),
            transparent
        );

    transform: skewX(-20deg);

    transition:
        left .8s ease;
}


.pgs-card:hover
.pgs-image::after {
    left: 150%;
}


.pgs-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    filter: grayscale(100%);

    transform: scale(1.08);

    transition:
        transform 1s
        cubic-bezier(.22,1,.36,1),
        filter .7s ease;
}


.pgs-card.active
.pgs-image img,
.pgs-card:hover
.pgs-image img {
    filter: grayscale(0);

    transform: scale(1);
}


/* =====================================================
   BODY
===================================================== */

.pgs-card-body {
    position: relative;

    min-height: 310px;

    padding:
        32px 31px 30px;

    overflow: hidden;
}


/* green animated corner */

.pgs-card-body::before {
    content: "";

    position: absolute;

    right: -80px;
    bottom: -80px;

    width: 150px;
    height: 150px;

    background:
        rgba(184,230,46,.12);

    transform: rotate(45deg);

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


.pgs-card:hover
.pgs-card-body::before {
    transform:
        rotate(75deg)
        scale(1.3);

    background:
        rgba(184,230,46,.20);
}


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

.pgs-number {
    position: absolute;

    right: 22px;
    top: 20px;

    color:
        rgba(23,29,41,.07);

    font-size: 65px;
    font-weight: 950;

    line-height: 1;

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


.pgs-card:hover
.pgs-number,
.pgs-card.active
.pgs-number {
    color:
        rgba(148,200,0,.15);

    transform:
        translateY(-5px);
}


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

.pgs-icon {
    position: relative;

    width: 55px;
    height: 55px;

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

    margin-bottom: 22px;

    border-radius: 50%;

    background:
        var(--porter-dark);

    color:
        var(--porter-green);

    font-size: 18px;

    transition:
        transform .5s
        cubic-bezier(.22,1,.36,1),
        background .3s ease,
        color .3s ease;
}


.pgs-card:hover
.pgs-icon,
.pgs-card.active
.pgs-icon {
    background:
        var(--porter-green);

    color:
        var(--porter-dark);

    transform: rotate(360deg);
}


/* =====================================================
   H3
===================================================== */

.pgs-card h3 {
    position: relative;
    z-index: 4;

    margin:
        0 0 14px;

    max-width: 285px;

    font-size: 22px;

    font-weight: 900;

    line-height: 1.16;
}


.pgs-card h3 a {
    color:
        var(--porter-dark);

    transition:
        color .25s ease;
}


.pgs-card h3 a:hover {
    color:
        var(--porter-green-dark);
}


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

.pgs-card p {
    position: relative;
    z-index: 4;

    margin:
        0 0 23px;

    color: #70777e;

    font-size: 13px;

    line-height: 1.7;
}


/* =====================================================
   LINK
===================================================== */

.pgs-link {
    position: relative;
    z-index: 5;

    display: inline-flex;
    align-items: center;

    gap: 13px;

    color:
        var(--porter-dark);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .8px;

    text-transform: uppercase;
}


.pgs-link i {
    width: 31px;
    height: 31px;

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

    border-radius: 50%;

    background:
        var(--porter-green);

    transition:
        transform .35s ease;
}


.pgs-link:hover {
    color:
        var(--porter-dark);
}


.pgs-link:hover i {
    transform:
        rotate(-35deg)
        scale(1.08);
}


/* =====================================================
   PROGRESS
===================================================== */

.pgs-progress {
    position: relative;

    height: 2px;

    margin-top: 15px;

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

    overflow: hidden;
}


.pgs-progress-bar {
    position: absolute;

    left: 0;
    top: 0;

    width: calc(100% / 13);

    height: 100%;

    background:
        var(--porter-green);

    transition:
        transform
        .65s
        cubic-bezier(.22,1,.36,1);
}


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

@keyframes pgsSubtitleIn {

    from {
        opacity: 0;

        transform:
            translateX(-35px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}


@keyframes pgsHeadingIn {

    from {
        opacity: 0;

        transform:
            translateY(50px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}


@keyframes pgsCircleSpin {

    from {
        transform:
            rotate(0deg);
    }

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


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

@media (max-width: 991.98px) {

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


    .pgs-heading-right {
        max-width: 600px;

        margin:
            30px 0 0;
    }


    .pgs-heading h2 {
        font-size:
            clamp(48px, 8vw, 68px);
    }


    .pgs-track {
        padding-left: 30px;
    }


    .pgs-card {
        flex-basis: 340px;
    }

}


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

@media (max-width: 767.98px) {

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


    .pgs-heading {
        margin-bottom: 40px;
    }


    .pgs-heading h2 {
        font-size:
            clamp(40px, 12vw, 55px);

        letter-spacing: -3px;
    }


    .pgs-track {
        gap: 17px;

        padding-left: 18px;

        padding-right: 18px;
    }


    .pgs-card {
        flex-basis:
            calc(100vw - 55px);

        transform:
            translateY(15px)
            scale(.97);
    }


    .pgs-card.active {
        transform:
            translateY(0)
            scale(1);
    }


    .pgs-image {
        height: 270px;
    }


    .pgs-card-body {
        min-height: 285px;

        padding:
            27px 24px;
    }


    .pgs-number {
        font-size: 55px;
    }

}


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

@media (max-width: 480px) {

    .pgs-heading h2 {
        font-size:
            clamp(37px, 11vw, 47px);
    }


    .pgs-heading-right p {
        font-size: 13px;
    }


    .pgs-card {
        flex-basis:
            calc(100vw - 38px);
    }


    .pgs-image {
        height: 245px;
    }


    .pgs-card h3 {
        font-size: 20px;
    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

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

    .pgs-services *,
    .pgs-services *::before,
    .pgs-services *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}



/* ==========================================================
   GARAGE DOOR REPAIR PORTER TX
   CASE STUDY STYLE
========================================================== */

.pgr-case {
    position: relative;

    padding:
        125px 0 145px;

    background:
        #f4f5f3;

    overflow: hidden;

    isolation: isolate;
}


/* ==========================================================
   GIANT BACKGROUND WORD
========================================================== */

.pgr-case-bg-word {
    position: absolute;

    left: 50%;
    top: 10px;

    transform:
        translateX(-50%);

    z-index: -1;

    color:
        rgba(23, 29, 41, .035);

    font-size:
        clamp(160px, 21vw, 330px);

    font-weight: 950;

    line-height: .8;

    letter-spacing: -18px;

    pointer-events: none;

    user-select: none;
}


/* ==========================================================
   BACKGROUND RINGS
========================================================== */

.pgr-case-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(23,29,41,.08);

    pointer-events: none;

    z-index: -1;
}


.pgr-case-ring::before {
    content: "";

    position: absolute;

    inset: 18px;

    border-radius: inherit;

    border:
        1px dashed
        rgba(148,200,0,.25);
}


.pgr-case-ring::after {
    content: "";

    position: absolute;

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background:
        var(--porter-green);

    box-shadow:
        0 0 0 7px
        rgba(184,230,46,.13);
}


.pgr-case-ring-one {
    width: 170px;
    height: 170px;

    left: -75px;
    top: 260px;

    animation:
        pgrCaseRingSpin
        14s
        linear
        infinite;
}


.pgr-case-ring-one::after {
    right: 16px;
    top: 25px;
}


.pgr-case-ring-two {
    width: 110px;
    height: 110px;

    right: -45px;
    bottom: 100px;

    animation:
        pgrCaseRingSpinReverse
        10s
        linear
        infinite;
}


.pgr-case-ring-two::after {
    left: 7px;
    bottom: 18px;
}


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

.pgr-case-top {
    position: relative;

    z-index: 5;

    margin-bottom: 37px;
}


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

.pgr-case-label {
    display: flex;

    align-items: center;

    gap: 11px;

    color:
        var(--porter-green-dark);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;

    opacity: 0;

    transform:
        translateX(-45px);

    animation:
        pgrCaseLabelIn
        .7s
        cubic-bezier(.22,1,.36,1)
        .15s
        forwards;
}


.pgr-case-label > span {
    position: relative;

    width: 38px;
    height: 2px;

    background:
        var(--porter-green);
}


.pgr-case-label > span::after {
    content: "";

    position: absolute;

    right: -6px;
    top: 50%;

    width: 6px;
    height: 6px;

    transform:
        translateY(-50%)
        rotate(45deg);

    background:
        var(--porter-green);
}


.pgr-case-label i {
    font-size: 12px;
}


/* ==========================================================
   STAGE
========================================================== */

.pgr-case-stage {
    position: relative;

    min-height: 920px;
}


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

.pgr-case-image {
    position: relative;

    width: 82%;
    height: 590px;

    margin-left: auto;

    overflow: hidden;

    background:
        #d9dcdd;

    clip-path:
        polygon(
            8% 0,
            100% 0,
            100% 88%,
            91% 100%,
            0 100%,
            0 11%
        );

    opacity: 0;

    transform:
        translateX(80px)
        scale(.96);

    animation:
        pgrCaseImageReveal
        1.1s
        cubic-bezier(.22,1,.36,1)
        .25s
        forwards;
}


.pgr-case-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.09);

    transition:
        transform
        1.4s
        cubic-bezier(.22,1,.36,1);
}


.pgr-case-stage:hover
.pgr-case-image img {
    transform:
        scale(1.02);
}


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

.pgr-case-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(17,23,34,.24) 0%,
            rgba(17,23,34,.05) 42%,
            transparent 75%
        );

    pointer-events: none;
}


/* ==========================================================
   SCAN EFFECT
========================================================== */

.pgr-case-scan {
    position: absolute;

    left: -40%;
    top: 0;

    width: 20%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.20),
            transparent
        );

    transform:
        skewX(-17deg);

    animation:
        pgrCaseScan
        5.5s
        ease-in-out
        infinite;
}


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

.pgr-case-number {
    position: absolute;

    right: 38px;
    top: 22px;

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

    font-size: 110px;

    font-weight: 950;

    line-height: 1;

    letter-spacing: -8px;
}


/* ==========================================================
   VERTICAL PORTER TX
========================================================== */

.pgr-case-vertical {
    position: absolute;

    right: 22px;
    bottom: 65px;

    color: #fff;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 5px;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);
}


/* ==========================================================
   GREEN GEOMETRIC SHAPE
========================================================== */

.pgr-case-green-shape {
    position: absolute;

    left: 4%;
    top: 55px;

    width: 190px;
    height: 470px;

    z-index: 3;

    background:
        rgba(184,230,46,.87);

    clip-path:
        polygon(
            0 0,
            100% 13%,
            63% 100%,
            0 87%
        );

    transform:
        translateX(-80px)
        rotate(-4deg);

    opacity: 0;

    animation:
        pgrCaseGreenIn
        .9s
        cubic-bezier(.22,1,.36,1)
        .65s
        forwards;
}


.pgr-case-green-shape::before {
    content: "";

    position: absolute;

    width: 55px;
    height: 100%;

    right: 28px;
    top: 0;

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

    transform:
        skewX(-12deg);
}


.pgr-case-green-line {
    position: absolute;

    width: 2px;
    height: 120px;

    left: 35px;
    top: 55px;

    background:
        rgba(23,29,41,.35);
}


.pgr-case-green-line::after {
    content: "";

    position: absolute;

    left: -3px;
    top: 0;

    width: 8px;
    height: 30px;

    border-radius: 10px;

    background:
        var(--porter-dark);

    animation:
        pgrCaseGreenLine
        2.4s
        ease-in-out
        infinite;
}


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

.pgr-case-content {
    position: absolute;

    left: 0;
    top: 315px;

    width: 66%;
    max-width: 790px;

    z-index: 8;

    background:
        #fff;

    box-shadow:
        0 30px 80px
        rgba(23,29,41,.13);

    opacity: 0;

    transform:
        translate(-55px, 65px);

    animation:
        pgrCaseContentIn
        1s
        cubic-bezier(.22,1,.36,1)
        .8s
        forwards;
}


.pgr-case-content-inner {
    position: relative;

    z-index: 3;

    padding:
        48px 55px 50px;
}


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

.pgr-case-small-title {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 19px;
}


.pgr-case-small-title > span {
    color:
        var(--porter-green-dark);

    font-size: 11px;

    font-weight: 950;
}


.pgr-case-small-title > div {
    width: 32px;
    height: 1px;

    background:
        #ccd0d2;
}


.pgr-case-small-title strong {
    color:
        #83898e;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.7px;
}


/* ==========================================================
   H2
========================================================== */

.pgr-case-content h2 {
    max-width: 650px;

    margin:
        0 0 25px;

    color:
        var(--porter-dark);

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

    font-weight: 950;

    line-height: 1;

    letter-spacing: -2.6px;
}


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

.pgr-case-content p {
    max-width: 670px;

    margin:
        0 0 17px;

    color:
        #697178;

    font-size: 14px;

    line-height: 1.82;
}


.pgr-case-content p:last-child {
    margin-bottom: 0;
}


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

.pgr-case-divider {
    position: relative;

    width: 100%;
    height: 1px;

    margin:
        27px 0 25px;

    background:
        #eceeee;

    overflow: hidden;
}


.pgr-case-divider span {
    position: absolute;

    left: 0;
    top: 0;

    width: 95px;
    height: 100%;

    background:
        var(--porter-green);

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


/* ==========================================================
   H3
========================================================== */

.pgr-case-content h3 {
    position: relative;

    margin:
        0 0 17px;

    padding-left: 21px;

    color:
        var(--porter-dark);

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

    font-weight: 900;

    line-height: 1.12;

    letter-spacing: -1px;
}


.pgr-case-content h3::before {
    content: "";

    position: absolute;

    left: 0;
    top: 3px;

    width: 5px;
    height: calc(100% - 6px);

    background:
        var(--porter-green);
}


/* ==========================================================
   CORNER
========================================================== */

.pgr-case-corner {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 95px;
    height: 95px;

    overflow: hidden;

    pointer-events: none;
}


.pgr-case-corner::before {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    right: -75px;
    bottom: -75px;

    background:
        var(--porter-green);

    transform:
        rotate(45deg);
}


.pgr-case-corner span {
    position: absolute;

    z-index: 2;

    right: 15px;
    bottom: 15px;

    width: 7px;
    height: 7px;

    background:
        var(--porter-dark);

    border-radius: 50%;
}


/* ==========================================================
   ROTATING BADGE
========================================================== */

.pgr-case-orbit {
    position: absolute;

    right: 5%;
    top: 515px;

    width: 160px;
    height: 160px;

    z-index: 10;

    border-radius: 50%;

    background:
        var(--porter-green);

    box-shadow:
        0 20px 45px
        rgba(23,29,41,.18);

    opacity: 0;

    transform:
        scale(.6)
        rotate(-90deg);

    animation:
        pgrCaseOrbitIn
        .8s
        cubic-bezier(.22,1,.36,1)
        1.15s
        forwards;
}


.pgr-case-orbit svg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    animation:
        pgrCaseOrbitRotate
        11s
        linear
        infinite;
}


.pgr-case-orbit text {
    fill:
        var(--porter-dark);

    font-size: 8.5px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.pgr-case-orbit-center {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 61px;
    height: 61px;

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

    display: flex;

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

    border-radius: 50%;

    background:
        var(--porter-dark);

    color:
        var(--porter-green);

    font-size: 19px;
}


/* ==========================================================
   FLOATING BOX
========================================================== */

.pgr-case-floating-box {
    position: absolute;

    right: 0;
    top: 140px;

    z-index: 9;

    width: 85px;
    height: 125px;

    display: flex;

    flex-direction: column;

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

    gap: 11px;

    background:
        var(--porter-dark);

    opacity: 0;

    transform:
        translateX(50px);

    animation:
        pgrCaseFloatBoxIn
        .8s
        cubic-bezier(.22,1,.36,1)
        .95s
        forwards;
}


.pgr-case-floating-box span {
    color:
        var(--porter-green);

    font-size: 26px;

    font-weight: 950;
}


.pgr-case-floating-box div {
    width: 1px;
    height: 38px;

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

    position: relative;
}


.pgr-case-floating-box div::after {
    content: "";

    position: absolute;

    width: 3px;
    height: 14px;

    left: -1px;
    top: 0;

    background:
        var(--porter-green);

    animation:
        pgrCaseFloatLine
        1.8s
        ease-in-out
        infinite;
}


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

@keyframes pgrCaseLabelIn {

    from {
        opacity: 0;

        transform:
            translateX(-45px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


@keyframes pgrCaseImageReveal {

    0% {
        opacity: 0;

        transform:
            translateX(80px)
            scale(.96);

        clip-path:
            polygon(
                100% 0,
                100% 0,
                100% 100%,
                100% 100%,
                100% 100%,
                100% 0
            );
    }

    100% {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);

        clip-path:
            polygon(
                8% 0,
                100% 0,
                100% 88%,
                91% 100%,
                0 100%,
                0 11%
            );
    }

}


@keyframes pgrCaseGreenIn {

    from {
        opacity: 0;

        transform:
            translateX(-80px)
            rotate(-12deg);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            rotate(-4deg);
    }

}


@keyframes pgrCaseContentIn {

    from {
        opacity: 0;

        transform:
            translate(-55px, 65px);
    }

    to {
        opacity: 1;

        transform:
            translate(0, 0);
    }

}


@keyframes pgrCaseOrbitIn {

    from {
        opacity: 0;

        transform:
            scale(.6)
            rotate(-90deg);
    }

    to {
        opacity: 1;

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

}


@keyframes pgrCaseOrbitRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes pgrCaseRingSpin {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes pgrCaseRingSpinReverse {

    from {
        transform:
            rotate(0deg);
    }

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

}


@keyframes pgrCaseScan {

    0% {
        left: -40%;
    }

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

}


@keyframes pgrCaseGreenLine {

    0%,
    100% {
        top: 0;
    }

    50% {
        top: 90px;
    }

}


@keyframes pgrCaseDividerMove {

    0% {
        left: 0;
    }

    50% {
        left: calc(100% - 95px);
    }

    100% {
        left: 0;
    }

}


@keyframes pgrCaseFloatBoxIn {

    from {
        opacity: 0;

        transform:
            translateX(50px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


@keyframes pgrCaseFloatLine {

    0%,
    100% {
        top: 0;
    }

    50% {
        top: 24px;
    }

}


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

@media (max-width: 1199.98px) {

    .pgr-case-stage {
        min-height: 980px;
    }


    .pgr-case-image {
        width: 87%;

        height: 560px;
    }


    .pgr-case-content {
        width: 72%;
    }


    .pgr-case-content-inner {
        padding:
            42px 45px;
    }

}


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

@media (max-width: 991.98px) {

    .pgr-case {
        padding:
            90px 0;
    }


    .pgr-case-stage {
        min-height: auto;
    }


    .pgr-case-image {
        width: 94%;

        height: 520px;

        margin-left: auto;
    }


    .pgr-case-green-shape {
        left: 0;

        width: 140px;

        height: 390px;
    }


    .pgr-case-content {
        position: relative;

        left: auto;
        top: auto;

        width: 88%;
        max-width: none;

        margin-top: -110px;
    }


    .pgr-case-orbit {
        right: 2%;

        top: 445px;
    }


    .pgr-case-floating-box {
        right: 0;

        top: 95px;
    }

}


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

@media (max-width: 767.98px) {

    .pgr-case {
        padding:
            70px 0;
    }


    .pgr-case-bg-word {
        top: 30px;

        font-size: 150px;

        letter-spacing: -10px;
    }


    .pgr-case-top {
        margin-bottom: 27px;
    }


    .pgr-case-image {
        width: 100%;

        height: 430px;

        clip-path:
            polygon(
                8% 0,
                100% 0,
                100% 92%,
                90% 100%,
                0 100%,
                0 10%
            );
    }


    .pgr-case-green-shape {
        width: 105px;

        height: 320px;

        top: 40px;
    }


    .pgr-case-number {
        font-size: 75px;

        right: 20px;
    }


    .pgr-case-content {
        width:
            calc(100% - 25px);

        margin-top:
            -65px;
    }


    .pgr-case-content-inner {
        padding:
            35px 28px 38px;
    }


    .pgr-case-content h2 {
        font-size:
            clamp(32px, 8vw, 43px);

        letter-spacing:
            -1.8px;
    }


    .pgr-case-content p {
        font-size: 13px;

        line-height: 1.75;
    }


    .pgr-case-content h3 {
        font-size:
            clamp(23px, 6vw, 29px);
    }


    .pgr-case-orbit {
        width: 125px;
        height: 125px;

        top: 375px;

        right: 4%;
    }


    .pgr-case-orbit-center {
        width: 48px;
        height: 48px;

        font-size: 15px;
    }


    .pgr-case-floating-box {
        display: none;
    }

}


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

@media (max-width: 480px) {

    .pgr-case {
        padding:
            60px 0;
    }


    .pgr-case-image {
        height: 355px;
    }


    .pgr-case-green-shape {
        width: 82px;

        height: 260px;
    }


    .pgr-case-vertical {
        display: none;
    }


    .pgr-case-content {
        width:
            calc(100% - 14px);

        margin-top:
            -35px;
    }


    .pgr-case-content-inner {
        padding:
            30px 21px 34px;
    }


    .pgr-case-small-title strong {
        font-size: 7px;

        letter-spacing: 1px;
    }


    .pgr-case-content h2 {
        font-size:
            clamp(29px, 8.5vw, 37px);

        line-height: 1.03;
    }


    .pgr-case-orbit {
        width: 105px;
        height: 105px;

        top: 305px;

        right: 2%;
    }


    .pgr-case-orbit svg {
        display: none;
    }


    .pgr-case-orbit-center {
        width: 60px;
        height: 60px;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    .pgr-case *,
    .pgr-case *::before,
    .pgr-case *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}

/* ==========================================
   PORTER OFFERS - DARK CLEAN SECTION
========================================== */

.porter-offers-clean {
    position: relative;

    padding: 100px 0;

    background: #171d29;

    overflow: hidden;

    isolation: isolate;
}


/* soft green glow */

.porter-offers-clean::before {
    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    left: -240px;
    top: -220px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(184, 230, 46, .12) 0%,
            rgba(184, 230, 46, .04) 38%,
            transparent 70%
        );

    pointer-events: none;

    z-index: -1;
}


/* second subtle decoration */

.porter-offers-clean::after {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: -190px;
    bottom: -180px;

    border-radius: 50%;

    border:
        1px solid rgba(184, 230, 46, .10);

    box-shadow:
        inset 0 0 0 50px
        rgba(184, 230, 46, .015);

    pointer-events: none;

    z-index: -1;
}


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

.porter-offers-clean-head {
    position: sticky;

    top: 40px;

    max-width: 360px;
}


.porter-offers-kicker {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color:
        var(--porter-green);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.porter-offers-kicker::before {
    content: "";

    width: 35px;
    height: 2px;

    background:
        var(--porter-green);
}


/* heading */

.porter-offers-clean-head h2 {
    margin:
        0 0 22px;

    color: #ffffff;

    font-size:
        clamp(45px, 4.5vw, 68px);

    font-weight: 950;

    line-height: .92;

    letter-spacing: -3px;

    text-transform: uppercase;
}


.porter-offers-clean-head h2 span {
    display: block;

    margin-top: 7px;

    color:
        var(--porter-green);
}


/* paragraph */

.porter-offers-clean-head p {
    margin:
        0 0 30px;

    max-width: 340px;

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

    font-size: 14px;

    line-height: 1.8;
}


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

.porter-offers-call {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    padding:
        8px 18px 8px 8px;

    border:
        1px solid rgba(255, 255, 255, .12);

    border-radius: 50px;

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

    color: #ffffff;

    text-decoration: none;

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


.porter-offers-call:hover {
    border-color:
        rgba(184, 230, 46, .45);

    background:
        rgba(184, 230, 46, .06);

    color: #ffffff;

    transform:
        translateY(-3px);
}


.porter-offers-call-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--porter-green);

    color:
        var(--porter-dark);

    font-size: 16px;

    transition:
        transform .35s ease;
}


.porter-offers-call:hover
.porter-offers-call-icon {
    transform:
        rotate(-12deg)
        scale(1.06);
}


.porter-offers-call small {
    display: block;

    margin-bottom: 2px;

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

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.4px;
}


.porter-offers-call strong {
    display: block;

    color: #ffffff;

    font-size: 22px;

    font-weight: 950;

    line-height: 1.1;
}


/* ==========================================
   WHOLE COUPON LINK
========================================== */

.porter-coupon-link {
    display: block;

    height: 100%;

    color: inherit;

    text-decoration: none;

    border-radius: 16px;

    outline: none;
}


.porter-coupon-link:hover {
    color: inherit;
}


.porter-coupon-link:focus-visible {
    outline:
        3px solid var(--porter-green);

    outline-offset: 4px;
}


/* ==========================================
   COUPON CARD
========================================== */

.porter-coupon-clean {
    position: relative;

    min-height: 245px;

    height: 100%;

    display: flex;

    align-items: center;

    overflow: hidden;

    border-radius: 16px;

    background-image:
        url("images/inner-coupon.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    border:
        1px solid rgba(255, 255, 255, .08);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, .24);

    transform:
        translateY(0);

    transition:
        transform .42s
        cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


/* hover on whole clickable card */

.porter-coupon-link:hover
.porter-coupon-clean {
    transform:
        translateY(-8px);

    border-color:
        rgba(184, 230, 46, .35);

    box-shadow:
        0 30px 65px
        rgba(0, 0, 0, .35);
}


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

.porter-coupon-clean-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.97) 0%,
            rgba(255,255,255,.94) 56%,
            rgba(255,255,255,.77) 100%
        );

    transition:
        opacity .35s ease;
}


.porter-coupon-link:hover
.porter-coupon-clean-overlay {
    opacity: .93;
}
.porter-footer-info a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.porter-footer-info a:hover {
    opacity: 0.75;
}

/* ==========================================
   TOP GREEN LINE
========================================== */

.porter-coupon-clean::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    z-index: 5;

    width: 0;
    height: 4px;

    background:
        var(--porter-green);

    transition:
        width .5s
        cubic-bezier(.22,1,.36,1);
}


.porter-coupon-link:hover
.porter-coupon-clean::before {
    width: 100%;
}


/* ==========================================
   SUBTLE CORNER SHAPE
========================================== */

.porter-coupon-clean::after {
    content: "";

    position: absolute;

    z-index: 2;

    width: 130px;
    height: 130px;

    right: -95px;
    bottom: -95px;

    background:
        rgba(184,230,46,.18);

    transform:
        rotate(45deg);

    transition:
        right .45s ease,
        bottom .45s ease,
        transform .45s ease;
}


.porter-coupon-link:hover
.porter-coupon-clean::after {
    right: -75px;
    bottom: -75px;

    transform:
        rotate(65deg)
        scale(1.08);
}


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

.porter-coupon-clean-content {
    position: relative;

    z-index: 4;

    width: 100%;

    padding:
        30px 32px;
}


/* ==========================================
   OFFER VALUE
========================================== */

.porter-coupon-clean-value {
    display: flex;

    align-items: flex-end;

    margin-bottom: 17px;

    line-height: 1;
}


.porter-coupon-clean-value small {
    margin-bottom: 10px;

    color:
        var(--porter-green-dark);

    font-size: 22px;

    font-weight: 950;
}


.porter-coupon-clean-value strong {
    color:
        var(--porter-dark);

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

    font-weight: 950;

    line-height: .85;

    letter-spacing: -5px;

    transition:
        transform .35s ease;
}


.porter-coupon-link:hover
.porter-coupon-clean-value strong {
    transform:
        translateY(-3px);
}


.porter-coupon-clean-value span {
    margin:
        0 0 8px 9px;

    color:
        var(--porter-green-dark);

    font-size: 15px;

    font-weight: 950;

    letter-spacing: 1px;
}


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

.porter-coupon-clean h3 {
    max-width: 360px;

    margin:
        0 0 21px;

    color:
        var(--porter-dark);

    font-size: 19px;

    font-weight: 900;

    line-height: 1.3;
}


/* ==========================================
   ACTION
========================================== */

.porter-coupon-action {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color:
        var(--porter-dark);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .8px;

    text-transform: uppercase;
}


.porter-coupon-action i {
    width: 32px;
    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        var(--porter-dark);

    color:
        var(--porter-green);

    font-size: 11px;

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


.porter-coupon-link:hover
.porter-coupon-action i {
    transform:
        translateX(5px);

    background:
        var(--porter-green);

    color:
        var(--porter-dark);
}


/* ==========================================
   FEATURED LAST OFFER
========================================== */

.porter-coupon-clean-featured {
    border-color:
        rgba(184, 230, 46, .35);
}


.porter-coupon-clean-featured
.porter-coupon-clean-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(184,230,46,.97) 0%,
            rgba(184,230,46,.91) 55%,
            rgba(184,230,46,.78) 100%
        );
}


.porter-coupon-clean-featured
.porter-coupon-clean-value small,

.porter-coupon-clean-featured
.porter-coupon-clean-value span {
    color:
        var(--porter-dark);
}


.porter-coupon-clean-featured::after {
    background:
        rgba(23,29,41,.10);
}


.porter-coupon-clean-featured
.porter-coupon-action i {
    background:
        var(--porter-dark);

    color:
        var(--porter-green);
}


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

@media (max-width: 991.98px) {

    .porter-offers-clean {
        padding:
            80px 0;
    }


    .porter-offers-clean-head {
        position: static;

        max-width: 650px;

        margin-bottom: 10px;
    }


    .porter-offers-clean-head p {
        max-width: 550px;
    }


    .porter-offers-clean-head h2 {
        font-size:
            clamp(42px, 8vw, 60px);
    }

}


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

@media (max-width: 767.98px) {

    .porter-offers-clean {
        padding:
            65px 0;
    }


    .porter-offers-clean-head h2 {
        font-size:
            clamp(38px, 11vw, 50px);
    }


    .porter-coupon-clean {
        min-height: 225px;

        border-radius: 14px;
    }


    .porter-coupon-link {
        border-radius: 14px;
    }


    .porter-coupon-clean-content {
        padding:
            26px 24px;
    }


    .porter-offers-call strong {
        font-size: 20px;
    }

}


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

@media (max-width: 480px) {

    .porter-offers-clean {
        padding:
            55px 0;
    }


    .porter-offers-clean-head h2 {
        font-size:
            clamp(36px, 11vw, 46px);

        letter-spacing: -2px;
    }


    .porter-coupon-clean {
        min-height: 210px;
    }


    .porter-coupon-clean-content {
        padding:
            24px 21px;
    }


    .porter-coupon-clean-value strong {
        font-size: 58px;
    }


    .porter-coupon-clean h3 {
        font-size: 17px;

        margin-bottom: 18px;
    }


    .porter-offers-call {
        width: 100%;
    }


    .porter-offers-call strong {
        font-size: 19px;
    }

}


/* ==========================================
   REDUCED MOTION
========================================== */

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

    .porter-offers-clean *,
    .porter-offers-clean *::before,
    .porter-offers-clean *::after {
        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}


/* ==========================================================
   DEVELOPING GARAGE DOOR PROBLEMS - PORTER TX
========================================================== */

.porter-problem-section {
    position: relative;
    padding: 110px 0;
    background: #f7f8f5;
    overflow: hidden;
}


/* subtle background decoration */

.porter-problem-section::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    right: -210px;
    top: -210px;

    border-radius: 50%;

    border:
        1px solid rgba(23, 29, 41, .07);

    box-shadow:
        inset 0 0 0 55px
        rgba(184, 230, 46, .025);

    pointer-events: none;
}


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

.porter-problem-visual {
    position: relative;

    max-width: 570px;

    padding:
        25px 0 35px 35px;
}


/* ==========================================================
   GREEN SHAPE
========================================================== */

.porter-problem-green-shape {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 62%;
    height: 78%;

    background:
        var(--porter-green);

    clip-path:
        polygon(
            0 11%,
            78% 0,
            100% 86%,
            15% 100%
        );

    opacity: .95;

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


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

.porter-problem-image {
    position: relative;

    z-index: 2;

    width: 88%;
    height: 620px;

    margin-left: auto;

    overflow: hidden;

    background: #ddd;

    clip-path:
        polygon(
            8% 0,
            100% 0,
            100% 91%,
            91% 100%,
            0 100%,
            0 8%
        );

    box-shadow:
        0 28px 60px
        rgba(23, 29, 41, .16);
}


.porter-problem-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transform: scale(1.04);

    transition:
        transform 1.1s
        cubic-bezier(.22,1,.36,1);
}


.porter-problem-visual:hover
.porter-problem-image img {
    transform: scale(1.09);
}


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

.porter-problem-image-shade {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 48%,
            rgba(23,29,41,.42) 100%
        );

    pointer-events: none;
}


/* ==========================================================
   VERTICAL PORTER
========================================================== */

.porter-problem-vertical {
    position: absolute;

    right: 18px;
    bottom: 32px;

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

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 5px;

    writing-mode: vertical-rl;

    transform: rotate(180deg);
}


/* ==========================================================
   FLOATING BADGE
========================================================== */

.porter-problem-badge {
    position: absolute;

    z-index: 6;

    left: 0;
    bottom: 85px;

    min-width: 220px;

    padding: 16px 20px;

    display: flex;
    align-items: center;

    gap: 13px;

    background:
        var(--porter-dark);

    box-shadow:
        0 18px 40px
        rgba(23,29,41,.25);

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


.porter-problem-badge-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

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

    border-radius: 50%;

    background:
        var(--porter-green);

    color:
        var(--porter-dark);

    font-size: 15px;
}


.porter-problem-badge small {
    display: block;

    margin-bottom: 2px;

    color:
        var(--porter-green);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.porter-problem-badge strong {
    display: block;

    color: #fff;

    font-size: 15px;

    font-weight: 900;

    letter-spacing: .4px;
}


/* ==========================================================
   ORBIT
========================================================== */

.porter-problem-orbit {
    position: absolute;

    z-index: 7;

    right: -5px;
    top: 85px;

    width: 105px;
    height: 105px;

    border-radius: 50%;

    border:
        1px dashed rgba(23,29,41,.28);

    animation:
        porterProblemOrbit 6s
        linear infinite;
}


.porter-problem-orbit > span {
    position: absolute;

    left: 50%;
    top: -6px;

    width: 12px;
    height: 12px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        var(--porter-green);
}


.porter-problem-orbit > div {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 60px;
    height: 60px;

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

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

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 10px 30px
        rgba(23,29,41,.12);

    color:
        var(--porter-dark);

    font-size: 18px;
}


/* stop icon itself rotating */

.porter-problem-orbit > div i {
    animation:
        porterProblemOrbitReverse
        6s linear infinite;
}


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

.porter-problem-content {
    position: relative;

    max-width: 610px;

    padding-left: 15px;
}


/* ==========================================================
   KICKER
========================================================== */

.porter-problem-kicker {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 17px;

    color:
        var(--porter-green-dark);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.8px;
}


.porter-problem-kicker > span {
    position: relative;

    width: 42px;
    height: 2px;

    background:
        var(--porter-green);
}


.porter-problem-kicker > span::after {
    content: "";

    position: absolute;

    right: -6px;
    top: 50%;

    width: 6px;
    height: 6px;

    transform:
        translateY(-50%)
        rotate(45deg);

    background:
        var(--porter-green);
}


/* ==========================================================
   H2
========================================================== */

.porter-problem-content h2 {
    margin:
        0 0 25px;

    color:
        var(--porter-dark);

    font-size:
        clamp(42px, 4.2vw, 62px);

    font-weight: 950;

    line-height: .98;

    letter-spacing: -3px;
}


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

.porter-problem-content p {
    margin:
        0 0 18px;

    color: #697177;

    font-size: 14px;

    line-height: 1.85;
}


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

.porter-problem-divider {
    position: relative;

    width: 100%;
    height: 1px;

    margin:
        30px 0 27px;

    background: #dfe2df;

    overflow: hidden;
}


.porter-problem-divider span {
    position: absolute;

    left: 0;
    top: 0;

    width: 100px;
    height: 2px;

    background:
        var(--porter-green);

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


/* ==========================================================
   H3
========================================================== */

.porter-problem-content h3 {
    position: relative;

    margin:
        0 0 19px;

    padding-left: 21px;

    color:
        var(--porter-dark);

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

    font-weight: 900;

    line-height: 1.1;

    letter-spacing: -1.2px;
}


.porter-problem-content h3::before {
    content: "";

    position: absolute;

    left: 0;
    top: 4px;

    width: 5px;
    height: calc(100% - 8px);

    background:
        var(--porter-green);
}


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

@keyframes porterProblemShape {

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

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

}


@keyframes porterProblemBadge {

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

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

}


@keyframes porterProblemOrbit {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes porterProblemOrbitReverse {

    from {
        transform:
            rotate(0deg);
    }

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

}


@keyframes porterProblemDivider {

    0% {
        left: -100px;
    }

    50% {
        left:
            calc(100% - 100px);
    }

    100% {
        left: -100px;
    }

}


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

@media (max-width: 991.98px) {

    .porter-problem-section {
        padding:
            85px 0;
    }


    .porter-problem-visual {
        max-width: 620px;

        margin:
            0 auto 25px;
    }


    .porter-problem-image {
        height: 580px;
    }


    .porter-problem-content {
        max-width: 700px;

        padding-left: 0;
    }

}


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

@media (max-width: 767.98px) {

    .porter-problem-section {
        padding:
            65px 0;
    }


    .porter-problem-visual {
        padding:
            18px 0 30px 18px;
    }


    .porter-problem-image {
        width: 94%;
        height: 480px;
    }


    .porter-problem-green-shape {
        width: 58%;
    }


    .porter-problem-badge {
        bottom: 60px;

        min-width: 195px;

        padding:
            13px 15px;
    }


    .porter-problem-orbit {
        width: 85px;
        height: 85px;

        right: 0;
        top: 65px;
    }


    .porter-problem-orbit > div {
        width: 48px;
        height: 48px;

        font-size: 15px;
    }


    .porter-problem-content h2 {
        font-size:
            clamp(38px, 10vw, 50px);

        letter-spacing: -2px;
    }


    .porter-problem-content h3 {
        font-size:
            clamp(26px, 7vw, 32px);
    }

}


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

@media (max-width: 480px) {

    .porter-problem-section {
        padding:
            55px 0;
    }


    .porter-problem-image {
        height: 390px;
    }


    .porter-problem-badge {
        left: 0;
        bottom: 45px;

        min-width: 180px;
    }


    .porter-problem-badge-icon {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }


    .porter-problem-badge strong {
        font-size: 13px;
    }


    .porter-problem-orbit {
        width: 75px;
        height: 75px;
    }


    .porter-problem-orbit > div {
        width: 43px;
        height: 43px;
    }


    .porter-problem-content h2 {
        font-size:
            clamp(34px, 10.5vw, 44px);
    }


    .porter-problem-content p {
        font-size: 13px;

        line-height: 1.78;
    }

}


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

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

    .porter-problem-section *,
    .porter-problem-section *::before,
    .porter-problem-section *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}

/* ==========================================
   ACTIONS - PHONE + SAME DAY SERVICE
========================================== */

.porter-problem-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 30px;
}


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

.porter-problem-call {
    display: inline-flex;
    align-items: center;

    gap: 13px;

    min-height: 62px;

    padding:
        7px 22px 7px 7px;

    border-radius: 34px;

    background:
        var(--porter-dark);

    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0 15px 35px
        rgba(23, 29, 41, .15);

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


.porter-problem-call:hover {
    color: #ffffff;

    background:
        #202936;

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 40px
        rgba(23, 29, 41, .20);
}


.porter-problem-call-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border-radius: 50%;

    background:
        var(--porter-green);

    color:
        var(--porter-dark);

    font-size: 15px;

    transition:
        transform .3s ease;
}


.porter-problem-call:hover
.porter-problem-call-icon {
    transform:
        rotate(-12deg)
        scale(1.07);
}


.porter-problem-call-text small {
    display: block;

    margin-bottom: 2px;

    color:
        var(--porter-green);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.4px;
}


.porter-problem-call-text strong {
    display: block;

    color: #ffffff;

    font-size: 21px;

    font-weight: 950;

    line-height: 1.05;
}


/* ==========================================
   SAME DAY SERVICE
========================================== */

.porter-problem-same-day {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    min-height: 62px;

    padding:
        7px 18px 7px 7px;

    border:
        1px solid rgba(23, 29, 41, .10);

    border-radius: 34px;

    background:
        #ffffff;

    box-shadow:
        0 12px 30px
        rgba(23, 29, 41, .07);
}


.porter-problem-same-day-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border-radius: 50%;

    background:
        rgba(184, 230, 46, .18);

    color:
        var(--porter-green-dark);

    font-size: 16px;
}


.porter-problem-same-day small {
    display: block;

    margin-bottom: 2px;

    color:
        #8a9095;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.1px;
}


.porter-problem-same-day strong {
    display: block;

    color:
        var(--porter-dark);

    font-size: 15px;

    font-weight: 900;
}


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

@media (max-width: 767.98px) {

    .porter-problem-actions {
        gap: 12px;

        margin-top: 25px;
    }


    .porter-problem-call,
    .porter-problem-same-day {
        width: 100%;
    }


    .porter-problem-call {
        justify-content: flex-start;
    }


    .porter-problem-call-text strong {
        font-size: 22px;
    }

}


/* ==========================================================
   GARAGE DOOR REPAIR PROCESS
========================================================== */

.porter-process {
    position: relative;

    padding: 110px 0;

    background: #f5f6f3;

    overflow: hidden;

    isolation: isolate;
}


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

.porter-process-bg-text {
    position: absolute;

    top: -60px;
    right: -20px;

    z-index: -1;

    color:
        rgba(23,29,41,.035);

    font-size:
        clamp(160px, 21vw, 330px);

    font-weight: 950;

    line-height: 1;

    letter-spacing: -22px;

    pointer-events: none;

    user-select: none;
}


/* ==========================================================
   DECORATIVE CIRCLE
========================================================== */

.porter-process-circle {
    position: absolute;

    left: -80px;
    top: 360px;

    width: 170px;
    height: 170px;

    border:
        1px solid rgba(23,29,41,.09);

    border-radius: 50%;

    z-index: -1;

    animation:
        porterProcessCircle
        12s linear infinite;
}


.porter-process-circle::before {
    content: "";

    position: absolute;

    inset: 20px;

    border-radius: 50%;

    border:
        1px dashed rgba(148,200,0,.25);
}


.porter-process-circle span {
    position: absolute;

    top: 21px;
    right: 18px;

    width: 11px;
    height: 11px;

    border-radius: 50%;

    background:
        var(--porter-green);

    box-shadow:
        0 0 0 7px
        rgba(184,230,46,.12);
}


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

.porter-process-heading {
    position: relative;

    margin-bottom: 55px;

    z-index: 4;
}


/* kicker */

.porter-process-kicker {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color:
        var(--porter-green-dark);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.porter-process-kicker > span {
    position: relative;

    width: 38px;
    height: 2px;

    background:
        var(--porter-green);
}


.porter-process-kicker > span::after {
    content: "";

    position: absolute;

    right: -6px;
    top: 50%;

    width: 6px;
    height: 6px;

    transform:
        translateY(-50%)
        rotate(45deg);

    background:
        var(--porter-green);
}


/* H2 */

.porter-process-heading h2 {
    max-width: 700px;

    margin: 0;

    color:
        var(--porter-dark);

    font-size:
        clamp(48px, 5.2vw, 76px);

    font-weight: 950;

    line-height: .92;

    letter-spacing: -4px;

    text-transform: uppercase;
}


.porter-process-heading h2 span {
    display: block;

    color:
        var(--porter-green-dark);
}


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

.porter-process-intro {
    position: relative;

    max-width: 420px;

    margin-left: auto;

    padding-left: 28px;
}


.porter-process-intro > span {
    position: absolute;

    left: 0;
    top: 3px;

    width: 3px;
    height: 100%;

    background:
        var(--porter-green);
}


.porter-process-intro p {
    margin: 0;

    color: #6c747a;

    font-size: 14px;

    line-height: 1.8;
}


/* ==========================================================
   BEFORE AFTER WRAPPER
========================================================== */

.porter-before-after {
    position: relative;

    margin-bottom: 70px;

    box-shadow:
        0 25px 65px
        rgba(23,29,41,.14);
}


/* ==========================================================
   BEFORE AFTER CARD
========================================================== */

.porter-ba-card {
    position: relative;

    height: 455px;

    overflow: hidden;

    background: #ddd;
}


.porter-ba-image {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


.porter-ba-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.05);

    transition:
        transform
        1s cubic-bezier(.22,1,.36,1);
}


.porter-ba-card:hover
.porter-ba-image img {
    transform:
        scale(1.11);
}


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

.porter-ba-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(17,23,34,.65) 100%
        );

    pointer-events: none;
}


/* before slight grayscale */

.porter-ba-before img {
    filter:
        grayscale(55%);
}


/* after image */

.porter-ba-after img {
    filter:
        saturate(1.05)
        contrast(1.02);
}


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

.porter-ba-label {
    position: absolute;

    z-index: 4;

    left: 28px;
    bottom: 28px;

    display: flex;
    align-items: center;

    gap: 14px;
}


.porter-ba-label > span {
    width: 52px;
    height: 52px;

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

    border-radius: 50%;

    background:
        var(--porter-green);

    color:
        var(--porter-dark);

    font-size: 15px;

    font-weight: 950;
}


.porter-ba-label small {
    display: block;

    margin-bottom: 2px;

    color:
        var(--porter-green);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.7px;
}


.porter-ba-label strong {
    display: block;

    color: #fff;

    font-size: 20px;

    font-weight: 900;
}


/* ==========================================================
   CENTER BEFORE / AFTER BUTTON
========================================================== */

.porter-ba-center {
    position: absolute;

    z-index: 8;

    left: 50%;
    top: 50%;

    width: 90px;
    height: 90px;

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

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

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.20);
}


.porter-ba-center > span {
    position: relative;

    z-index: 2;

    width: 55px;
    height: 55px;

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

    border-radius: 50%;

    background:
        var(--porter-green);

    color:
        var(--porter-dark);

    font-size: 17px;
}


.porter-ba-center-ring {
    position: absolute;

    inset: 5px;

    border-radius: 50%;

    border:
        1px dashed
        rgba(23,29,41,.25);

    animation:
        porterProcessRotate
        7s linear infinite;
}


/* ==========================================================
   STEPS
========================================================== */

.porter-process-steps {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-top:
        1px solid #dfe2df;

    border-bottom:
        1px solid #dfe2df;
}


/* ==========================================================
   STEP
========================================================== */

.porter-process-step {
    position: relative;

    min-height: 330px;

    padding:
        38px 30px;

    border-right:
        1px solid #dfe2df;

    background:
        transparent;

    overflow: hidden;

    transition:
        background .4s ease,
        transform .4s
        cubic-bezier(.22,1,.36,1);
}


.porter-process-step:last-child {
    border-right: 0;
}


/* green background reveal */

.porter-process-step::before {
    content: "";

    position: absolute;

    inset: auto 0 0;

    height: 0;

    background:
        var(--porter-green);

    transition:
        height .5s
        cubic-bezier(.22,1,.36,1);

    z-index: 0;
}


.porter-process-step:hover::before {
    height: 100%;
}


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

.porter-step-number {
    position: absolute;

    right: 19px;
    top: 18px;

    z-index: 1;

    color:
        rgba(23,29,41,.06);

    font-size: 68px;

    font-weight: 950;

    line-height: 1;

    transition:
        color .3s ease;
}


.porter-process-step:hover
.porter-step-number {
    color:
        rgba(23,29,41,.11);
}


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

.porter-step-icon {
    position: relative;

    z-index: 2;

    width: 58px;
    height: 58px;

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

    margin-bottom: 28px;

    border-radius: 50%;

    background:
        var(--porter-dark);

    color:
        var(--porter-green);

    font-size: 18px;

    transition:
        transform .5s
        cubic-bezier(.22,1,.36,1),
        background .3s ease,
        color .3s ease;
}


.porter-process-step:hover
.porter-step-icon {
    background: #fff;

    color:
        var(--porter-dark);

    transform:
        rotate(360deg);
}


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

.porter-step-content {
    position: relative;

    z-index: 2;
}


.porter-step-content small {
    display: block;

    margin-bottom: 8px;

    color:
        var(--porter-green-dark);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.6px;

    transition:
        color .3s ease;
}


.porter-step-content h3 {
    max-width: 220px;

    margin:
        0 0 14px;

    color:
        var(--porter-dark);

    font-size: 21px;

    font-weight: 900;

    line-height: 1.2;
}


.porter-step-content p {
    margin: 0;

    color: #737a80;

    font-size: 12.5px;

    line-height: 1.75;

    transition:
        color .3s ease;
}


.porter-process-step:hover
.porter-step-content small {
    color:
        var(--porter-dark);
}


.porter-process-step:hover
.porter-step-content p {
    color:
        rgba(23,29,41,.74);
}


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

.porter-step-arrow {
    position: absolute;

    z-index: 4;

    right: -17px;
    top: 50%;

    width: 34px;
    height: 34px;

    transform:
        translateY(-50%);

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

    border-radius: 50%;

    background:
        #f5f6f3;

    border:
        1px solid #dfe2df;

    color:
        var(--porter-green-dark);

    font-size: 10px;
}


/* ==========================================================
   BOTTOM CTA
========================================================== */

.porter-process-bottom {
    min-height: 100px;

    margin-top: 48px;

    padding:
        20px 27px;

    display: flex;
    align-items: center;

    background:
        var(--porter-dark);

    overflow: hidden;
}


/* left */

.porter-process-bottom-left {
    display: flex;
    align-items: center;

    gap: 13px;
}


.porter-process-bottom-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

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

    border-radius: 50%;

    background:
        var(--porter-green);

    color:
        var(--porter-dark);
}


.porter-process-bottom small {
    display: block;

    margin-bottom: 3px;

    color:
        var(--porter-green);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.porter-process-bottom strong {
    display: block;

    color: #fff;

    font-size: 17px;

    font-weight: 900;
}


/* line */

.porter-process-bottom-line {
    flex: 1;

    height: 1px;

    margin:
        0 35px;

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

    position: relative;

    overflow: hidden;
}


.porter-process-bottom-line::after {
    content: "";

    position: absolute;

    left: -80px;
    top: 0;

    width: 80px;
    height: 2px;

    background:
        var(--porter-green);

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


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

.porter-process-phone {
    display: flex;
    align-items: center;

    gap: 12px;

    color: #fff;

    text-decoration: none;
}


.porter-process-phone > span {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;

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

    border:
        1px solid rgba(255,255,255,.17);

    border-radius: 50%;

    color:
        var(--porter-green);

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


.porter-process-phone strong {
    font-size: 22px;
}


.porter-process-phone:hover {
    color: #fff;
}


.porter-process-phone:hover > span {
    background:
        var(--porter-green);

    color:
        var(--porter-dark);

    transform:
        rotate(-12deg);
}


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

@keyframes porterProcessRotate {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes porterProcessCircle {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes porterProcessBottomLine {

    0% {
        left: -80px;
    }

    50% {
        left: 100%;
    }

    100% {
        left: -80px;
    }

}


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

@media (max-width: 991.98px) {

    .porter-process {
        padding:
            85px 0;
    }


    .porter-process-intro {
        max-width: 600px;

        margin:
            20px 0 0;
    }


    .porter-ba-card {
        height: 410px;
    }


    .porter-process-steps {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .porter-process-step {
        border-bottom:
            1px solid #dfe2df;
    }


    .porter-process-step:nth-child(2) {
        border-right: 0;
    }


    .porter-process-step:nth-child(3),
    .porter-process-step:nth-child(4) {
        border-bottom: 0;
    }


    .porter-process-bottom {
        flex-wrap: wrap;

        gap: 20px;
    }


    .porter-process-bottom-line {
        display: none;
    }


    .porter-process-phone {
        margin-left: auto;
    }

}


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

@media (max-width: 767.98px) {

    .porter-process {
        padding:
            65px 0;
    }


    .porter-process-heading {
        margin-bottom:
            40px;
    }


    .porter-process-heading h2 {
        font-size:
            clamp(39px, 11vw, 52px);

        letter-spacing:
            -2.5px;
    }


    .porter-ba-card {
        height: 340px;
    }


    .porter-ba-center {
        width: 72px;
        height: 72px;
    }


    .porter-ba-center > span {
        width: 45px;
        height: 45px;
    }


    .porter-process-steps {
        grid-template-columns:
            1fr;
    }


    .porter-process-step,
    .porter-process-step:nth-child(2),
    .porter-process-step:nth-child(3) {
        min-height: auto;

        border-right: 0;

        border-bottom:
            1px solid #dfe2df;
    }


    .porter-process-step:last-child {
        border-bottom: 0;
    }


    .porter-step-arrow {
        display: none;
    }


    .porter-process-bottom {
        flex-direction: column;

        align-items: flex-start;

        padding:
            23px;
    }


    .porter-process-phone {
        margin-left: 0;
    }


    .porter-process-phone strong {
        font-size: 23px;
    }

}


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

@media (max-width: 480px) {

    .porter-process {
        padding:
            55px 0;
    }


    .porter-ba-card {
        height: 285px;
    }


    .porter-ba-label {
        left: 18px;
        bottom: 18px;
    }


    .porter-ba-label > span {
        width: 44px;
        height: 44px;
    }


    .porter-ba-label strong {
        font-size: 17px;
    }


    .porter-ba-center {
        top: 50%;

        width: 60px;
        height: 60px;
    }


    .porter-ba-center > span {
        width: 40px;
        height: 40px;

        font-size: 13px;
    }


    .porter-process-step {
        padding:
            30px 23px;
    }


    .porter-process-bottom {
        margin-top: 35px;
    }


    .porter-process-phone strong {
        font-size: 20px;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    .porter-process *,
    .porter-process *::before,
    .porter-process *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}

/* ==========================================
   PROPERTY GARAGE DOOR SECTION
========================================== */

.porter-property-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}


/* subtle decoration */

.porter-property-section::before {
    content: "";
    position: absolute;

    width: 260px;
    height: 260px;

    right: -130px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    border:
        1px solid rgba(23, 29, 41, .06);

    pointer-events: none;
}


/* ==========================================
   BLOCK
========================================== */

.porter-property-block {
    position: relative;
    z-index: 2;
}


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

.porter-property-label {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

    color:
        var(--porter-green-dark);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.porter-property-label::before {
    content: "";

    width: 35px;
    height: 2px;

    background:
        var(--porter-green);
}


/* ==========================================
   HEADINGS
========================================== */

.porter-property-title h2,
.porter-property-title h3 {
    max-width: 500px;

    margin: 0;

    color:
        var(--porter-dark);

    font-weight: 950;

    line-height: 1.02;

    letter-spacing: -2.2px;
}


.porter-property-title h2 {
    font-size:
        clamp(38px, 4vw, 56px);
}


.porter-property-title h3 {
    font-size:
        clamp(34px, 3.5vw, 49px);
}


/* ==========================================
   COPY
========================================== */

.porter-property-copy {
    position: relative;

    padding-left: 30px;

    border-left:
        1px solid #e1e4df;
}


.porter-property-copy::before {
    content: "";

    position: absolute;

    left: -2px;
    top: 0;

    width: 3px;
    height: 55px;

    background:
        var(--porter-green);
}


.porter-property-copy p {
    margin:
        0 0 19px;

    color: #697177;

    font-size: 15px;

    line-height: 1.85;
}


.porter-property-copy p:last-child {
    margin-bottom: 0;
}


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

.porter-property-divider {
    position: relative;

    width: 100%;
    height: 1px;

    margin:
        60px 0;

    background:
        #e5e7e4;

    overflow: hidden;
}


.porter-property-divider span {
    display: block;

    width: 90px;
    height: 3px;

    background:
        var(--porter-green);
}


/* ==========================================
   SECOND BLOCK
========================================== */

.porter-property-block:last-child
.porter-property-title {
    position: relative;
}


.porter-property-block:last-child
.porter-property-title::after {
    content: "02";

    position: absolute;

    right: 10px;
    top: -20px;

    color:
        rgba(23, 29, 41, .045);

    font-size: 90px;

    font-weight: 950;

    line-height: 1;

    pointer-events: none;
}


/* first block number */

.porter-property-block:first-child
.porter-property-title {
    position: relative;
}


.porter-property-block:first-child
.porter-property-title::after {
    content: "01";

    position: absolute;

    right: 10px;
    top: -20px;

    color:
        rgba(23, 29, 41, .045);

    font-size: 90px;

    font-weight: 950;

    line-height: 1;

    pointer-events: none;
}


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

@media (max-width: 991.98px) {

    .porter-property-section {
        padding:
            80px 0;
    }


    .porter-property-copy {
        padding-left: 22px;
    }


    .porter-property-divider {
        margin:
            50px 0;
    }

}


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

@media (max-width: 767.98px) {

    .porter-property-section {
        padding:
            65px 0;
    }


    .porter-property-title h2 {
        font-size:
            clamp(36px, 10vw, 46px);

        letter-spacing:
            -1.8px;
    }


    .porter-property-title h3 {
        font-size:
            clamp(31px, 8.5vw, 40px);

        letter-spacing:
            -1.5px;
    }


    .porter-property-copy {
        padding:
            20px 0 0 20px;

        border-left:
            1px solid #e1e4df;
    }


    .porter-property-copy::before {
        height: 45px;
    }


    .porter-property-copy p {
        font-size: 14px;

        line-height: 1.8;
    }


    .porter-property-divider {
        margin:
            42px 0;
    }


    .porter-property-block:first-child
    .porter-property-title::after,

    .porter-property-block:last-child
    .porter-property-title::after {
        font-size: 65px;

        right: 0;

        top: -10px;
    }

}

/* ==========================================================
   PORTER GARAGE DOOR BRANDS
========================================================== */

.porter-brands-section {
    position: relative;

    padding: 90px 0 75px;

    background:
        radial-gradient(
            circle at 50% 110%,
            rgba(184,230,46,.09),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #101720 0%,
            #171d29 50%,
            #0c131b 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* subtle garage lines */

.porter-brands-section::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -2;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 74px,
            rgba(255,255,255,.025) 75px,
            transparent 76px
        );

    pointer-events: none;
}


/* floor glow */

.porter-brands-section::after {
    content: "";

    position: absolute;

    left: 10%;
    right: 10%;
    bottom: -130px;

    height: 230px;

    z-index: -1;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(184,230,46,.11) 0%,
            rgba(184,230,46,.025) 42%,
            transparent 70%
        );

    filter: blur(10px);

    pointer-events: none;
}


/* ==========================================================
   SIDE DECORATIONS
========================================================== */

.porter-brands-line {
    position: absolute;

    width: 150px;
    height: 150px;

    border-color:
        var(--porter-green);

    opacity: .8;

    pointer-events: none;
}


.porter-brands-line-left {
    left: -75px;
    bottom: 80px;

    border-top:
        2px solid var(--porter-green);

    transform:
        rotate(45deg);
}


.porter-brands-line-right {
    right: -75px;
    bottom: 80px;

    border-top:
        2px solid var(--porter-green);

    transform:
        rotate(-45deg);
}


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

.porter-brands-heading {
    position: relative;

    z-index: 3;

    max-width: 1050px;

    margin:
        0 auto 48px;
}


/* kicker */

.porter-brands-kicker {
    display: flex;

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

    gap: 18px;

    margin-bottom: 16px;

    color:
        var(--porter-green);
}


.porter-brands-kicker span {
    width: 70px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.9)
        );
}


.porter-brands-kicker span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.9),
            transparent
        );
}


.porter-brands-kicker strong {
    font-size: 11px;

    font-weight: 900;

    letter-spacing: 5px;

    text-transform: uppercase;
}


/* H2 */

.porter-brands-heading h2 {
    margin:
        0 0 15px;

    color: #ffffff;

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

    font-weight: 950;

    line-height: .95;

    letter-spacing: -3px;

    text-transform: uppercase;
}


.porter-brands-heading h2 span {
    color:
        var(--porter-green);
}


.porter-brands-heading p {
    max-width: 760px;

    margin:
        0 auto;

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

    font-size: 15px;

    line-height: 1.75;
}


/* ==========================================================
   BRAND GRID
========================================================== */

.porter-brands-grid {
    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        repeat(10, minmax(125px, 1fr));

    gap: 10px;

    width: 100%;

    max-width: 1900px;

    margin: 0 auto;

    padding:
        15px 0 28px;
}


/* green glow underneath */

.porter-brands-grid::after {
    content: "";

    position: absolute;

    z-index: -1;

    left: 4%;
    right: 4%;
    bottom: 15px;

    height: 35px;

    background:
        var(--porter-green);

    opacity: .15;

    filter:
        blur(22px);

    border-radius: 50%;
}


/* ==========================================================
   BRAND CARD
========================================================== */

.porter-brand-card {
    position: relative;

    min-width: 0;
    height: 130px;

    display: flex;

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

    padding:
        20px 15px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f4f4f4 100%
        );

    border:
        1px solid rgba(255,255,255,.7);

    border-radius:
        5px;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.24),
        0 4px 0
        rgba(184,230,46,.55);

    transform:
        skewX(-6deg);

    overflow: hidden;

    transition:
        transform .4s
        cubic-bezier(.22,1,.36,1),
        box-shadow .4s ease,
        background .3s ease;
}


/* shine */

.porter-brand-card::before {
    content: "";

    position: absolute;

    top: -50%;
    left: -80%;

    width: 55%;
    height: 200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.8),
            transparent
        );

    transform:
        rotate(18deg);

    transition:
        left .65s ease;

    pointer-events: none;
}


.porter-brand-card:hover::before {
    left: 135%;
}


/* hover */

.porter-brand-card:hover {
    z-index: 10;

    transform:
        skewX(-6deg)
        translateY(-10px)
        scale(1.035);

    background: #ffffff;

    box-shadow:
        0 22px 45px
        rgba(0,0,0,.32),
        0 5px 0
        var(--porter-green),
        0 18px 35px
        rgba(184,230,46,.12);
}


/* ==========================================================
   LOGOS
========================================================== */

.porter-brand-card img {
    position: relative;

    z-index: 2;

    display: block;

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

    height: 68px;

    object-fit: contain;

    transform:
        skewX(6deg);

    transition:
        transform .4s
        cubic-bezier(.22,1,.36,1),
        filter .3s ease;
}


.porter-brand-card:hover img {
    transform:
        skewX(6deg)
        scale(1.08);
}


/* ==========================================================
   BOTTOM GEAR
========================================================== */

.porter-brands-bottom {
    position: relative;

    z-index: 4;

    max-width: 620px;

    margin:
        28px auto 13px;

    display: flex;

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

    gap: 18px;
}


.porter-brands-bottom > span {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.45)
        );
}


.porter-brands-bottom > span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.45),
            transparent
        );
}


/* gear */

.porter-brands-gear {
    display: flex;

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

    width: 44px;
    height: 44px;

    color:
        var(--porter-green);

    font-size: 27px;

    animation:
        porterBrandGear 8s
        linear infinite;
}


/* ==========================================================
   TAGLINE
========================================================== */

.porter-brands-tagline {
    position: relative;

    z-index: 3;

    margin: 0;

    text-align: center;

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

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 5px;

    text-transform: uppercase;
}


.porter-brands-tagline b {
    margin:
        0 9px;

    color:
        var(--porter-green);
}


/* ==========================================================
   ANIMATION
========================================================== */

@keyframes porterBrandGear {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


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

@media (max-width: 1500px) {

    .porter-brands-grid {
        grid-template-columns:
            repeat(5, 1fr);

        max-width: 1150px;

        gap: 14px;
    }


    .porter-brand-card {
        height: 125px;
    }


    .porter-brand-card img {
        max-width: 155px;
    }

}


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

@media (max-width: 991.98px) {

    .porter-brands-section {
        padding:
            75px 0 65px;
    }


    .porter-brands-grid {
        grid-template-columns:
            repeat(3, 1fr);

        max-width: 750px;
    }


    .porter-brands-heading {
        margin-bottom: 38px;
    }


    .porter-brands-heading h2 {
        font-size:
            clamp(40px, 8vw, 58px);
    }

}


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

@media (max-width: 767.98px) {

    .porter-brands-section {
        padding:
            60px 0 55px;
    }


    .porter-brands-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;

        padding-left: 8px;
        padding-right: 8px;
    }


    .porter-brand-card {
        height: 110px;

        padding:
            17px 13px;

        transform:
            skewX(-3deg);
    }


    .porter-brand-card img {
        max-width: 130px;
        height: 58px;

        transform:
            skewX(3deg);
    }


    .porter-brand-card:hover {
        transform:
            skewX(-3deg)
            translateY(-6px);
    }


    .porter-brand-card:hover img {
        transform:
            skewX(3deg)
            scale(1.05);
    }


    .porter-brands-heading h2 {
        font-size:
            clamp(36px, 10vw, 48px);

        letter-spacing:
            -2px;
    }


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


    .porter-brands-kicker {
        gap: 10px;
    }


    .porter-brands-kicker span {
        width: 35px;
    }


    .porter-brands-kicker strong {
        letter-spacing: 3px;
    }


    .porter-brands-tagline {
        padding:
            0 20px;

        font-size: 8px;

        line-height: 2;

        letter-spacing: 2px;
    }

}


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

@media (max-width: 420px) {

    .porter-brands-grid {
        gap: 9px;
    }


    .porter-brand-card {
        height: 100px;

        padding:
            14px 10px;
    }


    .porter-brand-card img {
        max-width: 115px;
        height: 52px;
    }


    .porter-brands-heading h2 {
        font-size: 35px;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    .porter-brands-section *,
    .porter-brands-section *::before,
    .porter-brands-section *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}

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

.porter-contact-section {
    position: relative;
    padding: 105px 0;
    background: #f4f5f2;
    overflow: hidden;
}


/* background decoration */

.porter-contact-section::before {
    content: "";
    position: absolute;

    width: 450px;
    height: 450px;

    left: -240px;
    bottom: -240px;

    border-radius: 50%;

    border: 1px solid rgba(23, 29, 41, .06);

    box-shadow:
        inset 0 0 0 65px
        rgba(184, 230, 46, .025);

    pointer-events: none;
}


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

.porter-contact-heading {
    position: relative;
    z-index: 3;

    margin-bottom: 48px;
}


.porter-contact-kicker {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 15px;

    color: var(--porter-green-dark);

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 1.8px;

    text-transform: uppercase;
}


.porter-contact-kicker i {
    color: var(--porter-green);

    font-size: 20px;
}


.porter-contact-heading h2 {
    max-width: 720px;

    margin: 0;

    color: var(--porter-dark);

    font-size: clamp(48px, 5.3vw, 76px);

    font-weight: 950;

    line-height: .92;

    letter-spacing: -4px;

    text-transform: uppercase;
}


.porter-contact-heading h2 span {
    display: block;

    color: var(--porter-green-dark);
}


.porter-contact-heading p {
    max-width: 450px;

    margin: 0 0 5px auto;

    color: #6c7479;

    font-size: 14px;

    line-height: 1.8;
}


/* ==========================================================
   MAIN SHELL
========================================================== */

.porter-contact-shell {
    position: relative;

    z-index: 4;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 28px 70px
        rgba(23, 29, 41, .13);
}


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

.porter-contact-form-side {
    height: 100%;

    padding: 48px 45px;

    background: #ffffff;
}


/* top */

.porter-form-top {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 34px;
}


.porter-form-number {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

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

    border-radius: 50%;

    background: var(--porter-green);

    color: var(--porter-dark);

    font-size: 14px;

    font-weight: 950;
}


.porter-form-top small {
    display: block;

    margin-bottom: 3px;

    color: var(--porter-green-dark);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.5px;
}


.porter-form-top h3 {
    margin: 0;

    color: var(--porter-dark);

    font-size: 27px;

    font-weight: 950;

    letter-spacing: -1px;
}


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

.porter-contact-form fieldset {
    padding: 0;
    margin: 0;

    border: 0;
}


.porter-contact-form label {
    display: block;

    margin-bottom: 8px;

    color: var(--porter-dark);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: .5px;

    text-transform: uppercase;
}


/* field */

.porter-form-field {
    position: relative;
}


.porter-form-field > i {
    position: absolute;

    z-index: 2;

    left: 17px;
    top: 50%;

    transform: translateY(-50%);

    color: var(--porter-green-dark);

    font-size: 13px;

    pointer-events: none;
}


.porter-form-field input,
.porter-form-field select,
.porter-form-field textarea {
    width: 100%;

    border: 1px solid #e1e4df;

    border-radius: 0;

    outline: none;

    background: #f7f8f6;

    color: var(--porter-dark);

    font-family: inherit;

    font-size: 13px;

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


.porter-form-field input,
.porter-form-field select {
    height: 57px;

    padding:
        0 42px;
}


.porter-form-field select {
    cursor: pointer;
}


.porter-form-field textarea {
    min-height: 135px;

    padding:
        17px 18px 17px 43px;

    resize: vertical;
}


.porter-message-field > i {
    top: 20px;

    transform: none;
}


/* focus */

.porter-form-field input:focus,
.porter-form-field select:focus,
.porter-form-field textarea:focus {
    border-color: var(--porter-green);

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(184, 230, 46, .10);
}


.porter-form-field input::placeholder,
.porter-form-field textarea::placeholder {
    color: #9ca19d;
}


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

.porter-form-submit {
    width: 100%;
    min-height: 60px;

    margin-top: 6px;

    padding:
        7px 8px 7px 24px;

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

    border: 0;

    background: var(--porter-dark);

    color: #ffffff;

    cursor: pointer;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;

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


.porter-form-submit i {
    width: 46px;
    height: 46px;

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

    border-radius: 50%;

    background: var(--porter-green);

    color: var(--porter-dark);

    transition: transform .3s ease;
}


.porter-form-submit:hover {
    background: #202936;

    transform: translateY(-2px);

    box-shadow:
        0 14px 30px
        rgba(23, 29, 41, .16);
}


.porter-form-submit:hover i {
    transform: translateX(4px);
}


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

.porter-form-bottom {
    display: flex;
    align-items: center;

    gap: 30px;

    margin-top: 28px;

    padding-top: 24px;

    border-top: 1px solid #e4e6e2;
}


.porter-form-feature {
    display: flex;
    align-items: center;

    gap: 10px;
}


.porter-form-feature > i {
    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background:
        rgba(184, 230, 46, .16);

    color: var(--porter-green-dark);

    font-size: 12px;
}


.porter-form-feature small {
    display: block;

    color: #999e9a;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.2px;
}


.porter-form-feature strong {
    display: block;

    color: var(--porter-dark);

    font-size: 12px;

    font-weight: 900;
}


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

.porter-map-side {
    position: relative;

    height: 100%;

    min-height: 720px;

    overflow: hidden;

    background: var(--porter-dark);
}


.porter-map-frame {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;

    filter:
        grayscale(80%)
        contrast(1.05);

    transition:
        filter .5s ease,
        transform .7s ease;
}


.porter-map-side:hover
.porter-map-frame {
    filter:
        grayscale(15%)
        contrast(1);

    transform: scale(1.015);
}


/* subtle shade */

.porter-map-shade {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(23,29,41,.10) 0%,
            transparent 35%,
            rgba(23,29,41,.25) 100%
        );
}


/* ==========================================================
   LOCATION CARD
========================================================== */

.porter-location-card {
    position: absolute;

    z-index: 5;

    left: 32px;
    right: 32px;
    bottom: 32px;

    padding: 26px;

    background:
        rgba(23, 29, 41, .96);

    color: #ffffff;

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.28);

    backdrop-filter: blur(8px);
}


/* green top line */

.porter-location-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 105px;
    height: 4px;

    background: var(--porter-green);
}


/* heading */

.porter-location-head {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 17px;
}


.porter-location-head > span {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;

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

    border-radius: 50%;

    background: var(--porter-green);

    color: var(--porter-dark);
}


.porter-location-head small,
.porter-location-phone small {
    display: block;

    margin-bottom: 2px;

    color: var(--porter-green);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.4px;
}


.porter-location-head strong {
    display: block;

    color: #ffffff;

    font-size: 17px;

    font-weight: 900;
}


/* address */

.porter-location-card address {
    margin: 0;

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

    font-size: 18px;

    font-weight: 700;

    font-style: normal;

    line-height: 1.55;
}


/* divider */

.porter-location-line {
    width: 100%;
    height: 1px;

    margin: 19px 0;

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


/* phone */

.porter-location-phone {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    color: #ffffff;

    text-decoration: none;
}


.porter-location-phone > span {
    width: 40px;
    height: 40px;

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

    border:
        1px solid rgba(255,255,255,.16);

    border-radius: 50%;

    color: var(--porter-green);

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


.porter-location-phone strong {
    color: #ffffff;

    font-size: 20px;

    font-weight: 950;
}


.porter-location-phone:hover {
    color: #ffffff;
}


.porter-location-phone:hover > span {
    background: var(--porter-green);

    color: var(--porter-dark);

    transform: rotate(-12deg);
}


/* ==========================================================
   VERTICAL MAP LABEL
========================================================== */

.porter-map-label {
    position: absolute;

    z-index: 5;

    right: 20px;
    top: 25px;

    display: flex;
    align-items: center;

    gap: 8px;

    padding:
        9px 13px;

    background:
        var(--porter-dark);

    color: #ffffff;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 2px;
}


.porter-map-label span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--porter-green);

    box-shadow:
        0 0 0 5px
        rgba(184,230,46,.13);
}


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

@media (max-width: 991.98px) {

    .porter-contact-section {
        padding: 80px 0;
    }


    .porter-contact-heading p {
        max-width: 600px;

        margin:
            15px 0 0;
    }


    .porter-contact-form-side {
        padding:
            42px 35px;
    }


    .porter-map-side {
        min-height: 600px;
    }

}


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

@media (max-width: 767.98px) {

    .porter-contact-section {
        padding: 65px 0;
    }


    .porter-contact-heading {
        margin-bottom: 35px;
    }


    .porter-contact-heading h2 {
        font-size:
            clamp(38px, 11vw, 50px);

        letter-spacing: -2px;
    }


    .porter-contact-form-side {
        padding:
            32px 23px;
    }


    .porter-form-top h3 {
        font-size: 23px;
    }


    .porter-form-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 14px;
    }


    .porter-map-side {
        min-height: 540px;
    }


    .porter-location-card {
        left: 18px;
        right: 18px;
        bottom: 18px;

        padding: 22px;
    }


    .porter-location-card address {
        font-size: 16px;
    }


    .porter-location-phone strong {
        font-size: 19px;
    }

}


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

@media (max-width: 420px) {

    .porter-contact-form-side {
        padding:
            28px 18px;
    }


    .porter-map-side {
        min-height: 510px;
    }


    .porter-location-card {
        left: 12px;
        right: 12px;
        bottom: 12px;

        padding:
            19px;
    }


    .porter-location-phone strong {
        font-size: 18px;
    }

}


/* ==========================================================
   FAQ SECTION
========================================================== */

.porter-faq-section {
    position: relative;

    padding: 100px 0;

    background: #f7f8f5;

    overflow: hidden;

    isolation: isolate;
}


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

.porter-faq-bg-word {
    position: absolute;

    left: 50%;
    top: -65px;

    transform: translateX(-50%);

    z-index: -2;

    color:
        rgba(23, 29, 41, .035);

    font-size:
        clamp(200px, 28vw, 430px);

    font-weight: 950;

    line-height: 1;

    letter-spacing: -25px;

    pointer-events: none;

    user-select: none;
}


/* ==========================================================
   FLOATING GARAGE TOOL ICONS
========================================================== */

.porter-faq-tool {
    position: absolute;

    z-index: -1;

    display: flex;

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

    color:
        rgba(23, 29, 41, .055);

    font-size: 54px;

    pointer-events: none;
}


.porter-faq-tool-1 {
    left: 7%;
    top: 18%;

    animation:
        porterFaqToolFloatOne
        7s ease-in-out infinite;
}


.porter-faq-tool-2 {
    right: 9%;
    top: 24%;

    font-size: 62px;

    animation:
        porterFaqToolFloatTwo
        9s ease-in-out infinite;
}


.porter-faq-tool-3 {
    left: 12%;
    bottom: 14%;

    font-size: 46px;

    animation:
        porterFaqToolFloatTwo
        8s ease-in-out infinite reverse;
}


.porter-faq-tool-4 {
    right: 11%;
    bottom: 12%;

    font-size: 58px;

    animation:
        porterFaqToolFloatOne
        10s ease-in-out infinite;
}


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

.porter-faq-heading {
    position: relative;

    z-index: 3;

    max-width: 760px;

    margin:
        0 auto 50px;
}


.porter-faq-kicker {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

    color:
        var(--porter-green-dark);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.porter-faq-kicker::before,
.porter-faq-kicker::after {
    content: "";

    width: 34px;
    height: 2px;

    background:
        var(--porter-green);
}


/* H2 */

.porter-faq-heading h2 {
    margin: 0;

    color:
        var(--porter-dark);

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

    font-weight: 950;

    line-height: .94;

    letter-spacing: -3px;

    text-transform: uppercase;
}


.porter-faq-heading h2 span {
    display: block;

    color:
        var(--porter-green-dark);
}


/* ==========================================================
   FAQ LIST
========================================================== */

.porter-faq-list {
    position: relative;

    z-index: 4;

    max-width: 1000px;

    margin: 0 auto;
}


/* ==========================================================
   FAQ ITEM
========================================================== */

.porter-faq-item {
    position: relative;

    padding:
        28px 30px;

    margin-bottom: 16px;

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

    border:
        1px solid rgba(23,29,41,.08);

    box-shadow:
        0 12px 30px
        rgba(23,29,41,.045);

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


.porter-faq-item:last-child {
    margin-bottom: 0;
}


.porter-faq-item:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(184,230,46,.40);

    box-shadow:
        0 20px 40px
        rgba(23,29,41,.08);
}


/* green left line */

.porter-faq-item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 4px;
    height: 0;

    background:
        var(--porter-green);

    transition:
        height .4s
        cubic-bezier(.22,1,.36,1);
}


.porter-faq-item:hover::before {
    height: 100%;
}


/* ==========================================================
   QUESTION
========================================================== */

.porter-faq-question {
    display: flex;

    align-items: flex-start;

    gap: 18px;
}


.porter-faq-number {
    flex: 0 0 auto;

    color:
        var(--porter-green-dark);

    font-size: 12px;

    font-weight: 950;

    line-height: 1.5;
}


.porter-faq-question h3 {
    margin: 0;

    color:
        var(--porter-dark);

    font-size: 22px;

    font-weight: 900;

    line-height: 1.3;

    letter-spacing: -.4px;
}


/* ==========================================================
   ANSWER
========================================================== */

.porter-faq-answer {
    padding:
        17px 0 0 42px;
}


.porter-faq-answer p {
    margin: 0;

    color: #697177;

    font-size: 14px;

    line-height: 1.85;
}


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

@keyframes porterFaqToolFloatOne {

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

    50% {
        transform:
            translate(8px, -10px)
            rotate(8deg);
    }

}


@keyframes porterFaqToolFloatTwo {

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

    50% {
        transform:
            translate(-8px, 10px)
            rotate(-8deg);
    }

}


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

@media (max-width: 991.98px) {

    .porter-faq-section {
        padding:
            80px 0;
    }


    .porter-faq-heading {
        margin-bottom: 40px;
    }


    .porter-faq-tool {
        opacity: .65;
    }

}


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

@media (max-width: 767.98px) {

    .porter-faq-section {
        padding:
            65px 0;
    }


    .porter-faq-bg-word {
        top: 10px;

        font-size: 180px;

        letter-spacing: -15px;
    }


    .porter-faq-heading h2 {
        font-size:
            clamp(38px, 11vw, 50px);

        letter-spacing: -2px;
    }


    .porter-faq-item {
        padding:
            24px 20px;
    }


    .porter-faq-question {
        gap: 12px;
    }


    .porter-faq-question h3 {
        font-size: 19px;
    }


    .porter-faq-answer {
        padding:
            14px 0 0 28px;
    }


    .porter-faq-answer p {
        font-size: 13px;

        line-height: 1.78;
    }


    .porter-faq-tool {
        font-size: 38px;
    }

}


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

@media (max-width: 480px) {

    .porter-faq-section {
        padding:
            55px 0;
    }


    .porter-faq-heading {
        margin-bottom: 32px;
    }


    .porter-faq-kicker::before,
    .porter-faq-kicker::after {
        width: 22px;
    }


    .porter-faq-item {
        padding:
            21px 17px;
    }


    .porter-faq-question h3 {
        font-size: 18px;
    }


    .porter-faq-answer {
        padding-left: 0;

        margin-top: 13px;
    }


    .porter-faq-tool-3,
    .porter-faq-tool-4 {
        display: none;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    .porter-faq-section *,
    .porter-faq-section *::before,
    .porter-faq-section *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}

/* ==========================================================
   CUSTOMER REVIEWS
========================================================== */

.porter-reviews-section {
    position: relative;

    padding: 115px 0;

    background: #171d29;

    overflow: hidden;

    isolation: isolate;
}


/* ==========================================================
   LARGE BACKGROUND WORD
========================================================== */

.porter-reviews-bg-word {
    position: absolute;

    left: 50%;
    top: -75px;

    transform: translateX(-50%);

    z-index: -2;

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

    font-size:
        clamp(180px, 24vw, 390px);

    font-weight: 950;

    line-height: 1;

    letter-spacing: -25px;

    white-space: nowrap;

    pointer-events: none;
    user-select: none;
}


/* ==========================================================
   FLOATING TOOLS
========================================================== */

.porter-review-tool {
    position: absolute;

    z-index: -1;

    color:
        rgba(184,230,46,.055);

    pointer-events: none;
}


.porter-review-tool-1 {
    left: 5%;
    top: 25%;

    font-size: 80px;

    animation:
        porterReviewToolOne
        12s linear infinite;
}


.porter-review-tool-2 {
    right: 5%;
    bottom: 15%;

    font-size: 65px;

    animation:
        porterReviewToolTwo
        7s ease-in-out infinite;
}


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

.porter-reviews-heading {
    position: relative;

    z-index: 5;

    margin-bottom: 60px;
}


/* kicker */

.porter-review-kicker {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 17px;

    color:
        var(--porter-green);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.porter-review-kicker > span {
    width: 38px;
    height: 2px;

    background:
        var(--porter-green);
}


.porter-review-kicker i {
    font-size: 10px;
}


/* heading */

.porter-reviews-heading h2 {
    max-width: 760px;

    margin: 0;

    color: #ffffff;

    font-size:
        clamp(50px, 5.5vw, 78px);

    font-weight: 950;

    line-height: .92;

    letter-spacing: -4px;

    text-transform: uppercase;
}


.porter-reviews-heading h2 span {
    display: block;

    color:
        var(--porter-green);
}


/* heading right */

.porter-review-heading-right {
    position: relative;

    max-width: 430px;

    margin-left: auto;

    padding-left: 27px;
}


.porter-review-heading-right > span {
    position: absolute;

    left: 0;
    top: 2px;

    width: 3px;
    height: 100%;

    background:
        var(--porter-green);
}


.porter-review-heading-right p {
    margin: 0;

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

    font-size: 14px;

    line-height: 1.8;
}


/* ==========================================================
   REVIEW STAGE
========================================================== */

.porter-review-stage {
    position: relative;

    min-height: 650px;

    margin-bottom: 75px;
}


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

.porter-review-photo {
    position: absolute;

    left: 0;
    top: 0;

    width: 38%;
    height: 570px;

    overflow: hidden;

    background: #ddd;

    clip-path:
        polygon(
            0 0,
            92% 0,
            100% 10%,
            100% 100%,
            8% 100%,
            0 90%
        );
}


.porter-review-photo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transform: scale(1.04);

    transition:
        transform 1s
        cubic-bezier(.22,1,.36,1);
}


.porter-review-stage:hover
.porter-review-photo img {
    transform: scale(1.08);
}


/* overlay */

.porter-review-photo-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(23,29,41,.60) 100%
        );
}


/* image number */

.porter-review-photo-number {
    position: absolute;

    right: 25px;
    top: 20px;

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

    font-size: 80px;

    font-weight: 950;

    line-height: 1;
}


/* PORTER TX */

.porter-review-photo-label {
    position: absolute;

    left: 20px;
    bottom: 30px;

    color: #ffffff;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 4px;

    writing-mode: vertical-rl;

    transform:
        rotate(180deg);
}


/* ==========================================================
   GREEN SHAPE
========================================================== */

.porter-review-green-shape {
    position: absolute;

    left: 29%;
    top: 42px;

    width: 180px;
    height: 475px;

    background:
        var(--porter-green);

    clip-path:
        polygon(
            30% 0,
            100% 12%,
            70% 100%,
            0 88%
        );

    opacity: .92;

    transform:
        rotate(5deg);

    z-index: 2;
}


/* ==========================================================
   MAIN REVIEW CARD
========================================================== */

.porter-review-card {
    position: absolute;

    z-index: 6;

    right: 5%;
    top: 65px;

    width: 62%;
    max-width: 760px;

    min-height: 440px;

    padding:
        52px 55px;

    background: #ffffff;

    box-shadow:
        0 35px 80px
        rgba(0,0,0,.28);
}


/* green top */

.porter-review-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 110px;
    height: 5px;

    background:
        var(--porter-green);
}


/* ==========================================================
   QUOTE
========================================================== */

.porter-review-quote {
    position: absolute;

    right: 40px;
    top: 25px;

    color:
        rgba(23,29,41,.055);

    font-size: 85px;

    line-height: 1;
}


/* ==========================================================
   STARS
========================================================== */

.porter-review-stars {
    display: flex;

    gap: 5px;

    margin-bottom: 22px;

    color:
        var(--porter-green-dark);

    font-size: 14px;
}


/* ==========================================================
   QUOTE TEXT
========================================================== */

.porter-review-card blockquote {
    position: relative;

    max-width: 640px;

    margin:
        0 0 34px;

    color:
        var(--porter-dark);

    font-size:
        clamp(21px, 2vw, 28px);

    font-weight: 700;

    line-height: 1.55;

    letter-spacing: -.5px;
}


/* ==========================================================
   AUTHOR
========================================================== */

.porter-review-author {
    display: flex;
    align-items: center;

    gap: 15px;
}


.porter-review-author-image {
    width: 64px;
    height: 64px;

    flex: 0 0 64px;

    padding: 3px;

    border:
        2px solid var(--porter-green);

    border-radius: 50%;
}


.porter-review-author-image img {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    object-fit: cover;
}


.porter-review-author-info h3 {
    margin:
        0 0 4px;

    color:
        var(--porter-dark);

    font-size: 18px;

    font-weight: 950;
}


.porter-review-author-info span {
    color: #8a9094;

    font-size: 10px;

    font-weight: 700;
}


/* ==========================================================
   RATING
========================================================== */

.porter-review-rating {
    position: absolute;

    right: 45px;
    bottom: 43px;

    text-align: right;
}


.porter-review-rating small {
    display: block;

    margin-bottom: 3px;

    color: #91979b;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}


.porter-review-rating strong {
    color:
        var(--porter-dark);

    font-size: 28px;

    font-weight: 950;
}


.porter-review-rating strong span {
    color:
        var(--porter-green-dark);

    font-size: 15px;
}


/* ==========================================================
   MINI REVIEW
========================================================== */

.porter-mini-review {
    position: absolute;

    z-index: 8;

    width: 275px;

    padding:
        20px;

    background:
        var(--porter-dark);

    border:
        1px solid rgba(255,255,255,.09);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.25);
}


.porter-mini-review-one {
    left: 29%;
    bottom: 0;
}


.porter-mini-review-two {
    right: 0;
    bottom: -25px;
}


/* mini header */

.porter-mini-review-top {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 13px;
}


.porter-mini-avatar {
    width: 43px;
    height: 43px;

    flex:
        0 0 43px;

    border-radius: 50%;

    overflow: hidden;
}


.porter-mini-avatar img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


.porter-mini-review h3 {
    margin:
        0 0 2px;

    color: #ffffff;

    font-size: 13px;

    font-weight: 900;
}


.porter-mini-review-top span {
    color:
        rgba(255,255,255,.48);

    font-size: 8px;
}


/* stars */

.porter-mini-stars {
    display: flex;

    gap: 3px;

    margin-bottom: 10px;

    color:
        var(--porter-green);

    font-size: 8px;
}


.porter-mini-review p {
    margin: 0;

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

    font-size: 10px;

    line-height: 1.65;
}


/* ==========================================================
   BOTTOM REVIEWS
========================================================== */

.porter-review-bottom {
    display: grid;

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

    border-top:
        1px solid rgba(255,255,255,.10);

    border-bottom:
        1px solid rgba(255,255,255,.10);
}


.porter-review-bottom-item {
    position: relative;

    min-height: 230px;

    display: flex;

    gap: 18px;

    padding:
        32px 28px;

    border-right:
        1px solid rgba(255,255,255,.10);
}


.porter-review-bottom-item:last-child {
    border-right: 0;
}


/* number */

.porter-review-bottom-number {
    flex: 0 0 auto;

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

    font-size: 27px;

    font-weight: 950;
}


/* stars */

.porter-review-bottom-stars {
    display: flex;

    gap: 3px;

    margin-bottom: 13px;

    color:
        var(--porter-green);

    font-size: 9px;
}


.porter-review-bottom-item p {
    min-height: 75px;

    margin:
        0 0 17px;

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

    font-size: 12px;

    line-height: 1.7;
}


.porter-review-bottom-item strong {
    display: block;

    color: #ffffff;

    font-size: 13px;

    font-weight: 900;
}


.porter-review-bottom-item small {
    display: block;

    margin-top: 3px;

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

    font-size: 8px;
}


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

.porter-review-bottom-item {
    transition:
        background .35s ease;
}


.porter-review-bottom-item::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 3px;

    background:
        var(--porter-green);

    transition:
        width .4s
        cubic-bezier(.22,1,.36,1);
}


.porter-review-bottom-item:hover {
    background:
        rgba(255,255,255,.025);
}


.porter-review-bottom-item:hover::before {
    width: 100%;
}


/* ==========================================================
   DECORATIVE ANIMATION
========================================================== */

@keyframes porterReviewToolOne {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes porterReviewToolTwo {

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

    50% {
        transform:
            translate(-10px,-12px)
            rotate(10deg);
    }

}


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

@media (max-width: 1199.98px) {

    .porter-review-photo {
        width: 40%;
    }


    .porter-review-card {
        width: 65%;

        right: 0;
    }


    .porter-review-green-shape {
        left: 30%;
    }

}


@media (max-width: 991.98px) {

    .porter-reviews-section {
        padding:
            85px 0;
    }


    .porter-review-heading-right {
        max-width: 600px;

        margin:
            20px 0 0;
    }


    .porter-review-stage {
        min-height: auto;

        padding-bottom: 0;
    }


    .porter-review-photo {
        position: relative;

        width: 70%;
        height: 520px;
    }


    .porter-review-green-shape {
        left: 55%;
        top: 40px;

        width: 150px;

        height: 420px;
    }


    .porter-review-card {
        position: relative;

        width: 82%;
        max-width: none;

        margin:
            -150px 0 0 auto;

        top: auto;
        right: auto;
    }


    .porter-mini-review {
        position: relative;

        width: calc(50% - 8px);

        left: auto;
        right: auto;
        bottom: auto;
    }


    .porter-mini-review-one,
    .porter-mini-review-two {
        display: inline-block;

        vertical-align: top;

        margin-top: 20px;
    }


    .porter-mini-review-two {
        margin-left: 12px;
    }


    .porter-review-bottom {
        margin-top: 50px;

        grid-template-columns: 1fr;
    }


    .porter-review-bottom-item {
        min-height: auto;

        border-right: 0;

        border-bottom:
            1px solid rgba(255,255,255,.10);
    }


    .porter-review-bottom-item:last-child {
        border-bottom: 0;
    }


    .porter-review-bottom-item p {
        min-height: auto;
    }

}


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

@media (max-width: 767.98px) {

    .porter-reviews-section {
        padding:
            65px 0;
    }


    .porter-reviews-heading {
        margin-bottom: 40px;
    }


    .porter-reviews-heading h2 {
        font-size:
            clamp(39px, 11vw, 52px);

        letter-spacing: -2px;
    }


    .porter-review-photo {
        width: 91%;

        height: 440px;
    }


    .porter-review-green-shape {
        width: 100px;
        height: 340px;

        left: auto;
        right: 0;

        top: 45px;
    }


    .porter-review-card {
        width: 92%;

        margin-top: -90px;

        padding:
            38px 27px;
    }


    .porter-review-card blockquote {
        font-size: 19px;
    }


    .porter-review-rating {
        position: static;

        margin-top: 25px;

        text-align: left;
    }


    .porter-mini-review {
        display: block;

        width: 100%;

        margin:
            15px 0 0 !important;
    }


    .porter-review-bg-word {
        font-size: 160px;
    }

}


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

@media (max-width: 480px) {

    .porter-reviews-section {
        padding:
            55px 0;
    }


    .porter-review-photo {
        height: 360px;
    }


    .porter-review-card {
        width: 96%;

        margin-top: -50px;

        padding:
            32px 21px;
    }


    .porter-review-quote {
        right: 18px;

        font-size: 60px;
    }


    .porter-review-card blockquote {
        font-size: 17px;

        line-height: 1.6;
    }


    .porter-review-author-image {
        width: 55px;
        height: 55px;

        flex-basis: 55px;
    }


    .porter-review-bottom-item {
        padding:
            25px 19px;
    }

}


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

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

    .porter-reviews-section *,
    .porter-reviews-section *::before,
    .porter-reviews-section *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }

}

/* ==========================================================
   LOCATION SERVICES - PORTER TX
========================================================== */

.porter-location-services {
    position: relative;

    padding: 105px 0 0;

    background:
        linear-gradient(
            135deg,
            #111822 0%,
            #171d29 55%,
            #0d141d 100%
        );

    overflow: hidden;

    isolation: isolate;
}


/* ==========================================================
   BACKGROUND PORTER
========================================================== */

.porter-ls-bg-text {
    position: absolute;

    left: -30px;
    top: -55px;

    z-index: -2;

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

    font-size: clamp(170px, 23vw, 350px);

    font-weight: 950;

    line-height: 1;

    letter-spacing: -20px;

    pointer-events: none;
    user-select: none;
}


/* ==========================================================
   BACKGROUND GEAR
========================================================== */

.porter-ls-gear {
    position: absolute;

    right: -80px;
    top: 80px;

    z-index: -1;

    color: rgba(184,230,46,.035);

    font-size: 250px;

    animation:
        porterLsGear 25s linear infinite;
}


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

.porter-ls-content {
    position: relative;

    z-index: 3;
}


/* kicker */

.porter-ls-kicker {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 16px;

    color: var(--porter-green);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2px;
}


.porter-ls-kicker span {
    width: 38px;
    height: 2px;

    background: var(--porter-green);
}


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

.porter-ls-content h2 {
    margin: 0 0 23px;

    color: #ffffff;

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

    font-weight: 950;

    line-height: .94;

    letter-spacing: -3.5px;

    text-transform: uppercase;
}


.porter-ls-content h2 span {
    display: block;

    color: var(--porter-green);
}


.porter-ls-content > p {
    max-width: 500px;

    margin: 0 0 34px;

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

    font-size: 14px;

    line-height: 1.85;
}


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

.porter-ls-address {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 17px;

    padding: 18px 0;

    border-top:
        1px solid rgba(255,255,255,.10);

    border-bottom:
        1px solid rgba(255,255,255,.10);
}


.porter-ls-address-icon {
    width: 50px;
    height: 50px;

    flex: 0 0 50px;

    display: flex;

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

    border-radius: 50%;

    background: var(--porter-green);

    color: var(--porter-dark);

    font-size: 16px;
}


.porter-ls-address small,
.porter-ls-phone small {
    display: block;

    margin-bottom: 3px;

    color: var(--porter-green);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.4px;
}


.porter-ls-address strong {
    display: block;

    color: #ffffff;

    font-size: 15px;

    font-weight: 800;

    line-height: 1.5;
}


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

.porter-ls-phone {
    display: inline-flex;

    align-items: center;

    gap: 13px;

    color: #ffffff;

    text-decoration: none;
}


.porter-ls-phone > span {
    width: 50px;
    height: 50px;

    display: flex;

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

    border:
        1px solid rgba(255,255,255,.15);

    border-radius: 50%;

    color: var(--porter-green);

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


.porter-ls-phone strong {
    display: block;

    color: #ffffff;

    font-size: 24px;

    font-weight: 950;
}


.porter-ls-phone:hover {
    color: #ffffff;
}


.porter-ls-phone:hover > span {
    background: var(--porter-green);

    color: var(--porter-dark);

    transform: rotate(-12deg);
}


/* ==========================================================
   AREA CARD
========================================================== */

.porter-ls-area-card {
    position: relative;

    padding: 42px;

    background: #ffffff;

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.28);

    overflow: hidden;
}


/* green corner */

.porter-ls-area-card::before {
    content: "";

    position: absolute;

    right: -55px;
    top: -55px;

    width: 125px;
    height: 125px;

    transform: rotate(45deg);

    background: var(--porter-green);
}


/* ==========================================================
   CARD TOP
========================================================== */

.porter-ls-card-top {
    display: flex;

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

    gap: 20px;
}


.porter-ls-card-top small {
    display: block;

    margin-bottom: 2px;

    color: #858c90;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.7px;
}


.porter-ls-zip {
    display: block;

    color: var(--porter-dark);

    font-size: clamp(60px, 7vw, 92px);

    font-weight: 950;

    line-height: .95;

    letter-spacing: -5px;
}


/* map icon */

.porter-ls-map-icon {
    width: 68px;
    height: 68px;

    flex: 0 0 68px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(184,230,46,.15);

    color: var(--porter-green-dark);

    font-size: 22px;
}


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

.porter-ls-divider {
    position: relative;

    height: 1px;

    margin: 28px 0;

    background: #e4e6e3;
}


.porter-ls-divider::before {
    content: "";

    position: absolute;

    left: 0;
    top: -1px;

    width: 75px;
    height: 3px;

    background: var(--porter-green);
}


/* ==========================================================
   AREAS
========================================================== */

.porter-ls-area-card h3 {
    margin: 0 0 20px;

    color: var(--porter-dark);

    font-size: 21px;

    font-weight: 950;
}


.porter-ls-areas {
    display: flex;

    flex-wrap: wrap;

    gap: 9px;
}


.porter-ls-areas span {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding: 10px 13px;

    background: #f4f5f2;

    border:
        1px solid #e6e8e4;

    color: #5f676c;

    font-size: 10px;

    font-weight: 800;

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


.porter-ls-areas i {
    color: var(--porter-green-dark);

    font-size: 9px;
}


.porter-ls-areas span:hover {
    background: var(--porter-dark);

    border-color: var(--porter-dark);

    color: #ffffff;

    transform: translateY(-2px);
}


/* ==========================================================
   CARD BOTTOM
========================================================== */

.porter-ls-card-bottom {
    display: grid;

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

    gap: 12px;

    margin-top: 29px;

    padding-top: 24px;

    border-top:
        1px solid #e5e7e4;
}


.porter-ls-card-bottom > div {
    display: flex;

    align-items: center;

    gap: 10px;
}


.porter-ls-card-bottom i {
    width: 39px;
    height: 39px;

    display: flex;

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

    flex: 0 0 39px;

    border-radius: 50%;

    background:
        rgba(184,230,46,.16);

    color: var(--porter-green-dark);

    font-size: 11px;
}


.porter-ls-card-bottom small {
    display: block;

    color: #999e9a;

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;
}


.porter-ls-card-bottom strong {
    display: block;

    color: var(--porter-dark);

    font-size: 11px;

    font-weight: 900;
}


/* ==========================================================
   CITY MARQUEE
========================================================== */

.porter-ls-marquee {
    position: relative;

    width: 100%;

    margin-top: 90px;

    padding: 23px 0;

    background: var(--porter-green);

    overflow: hidden;

    transform: rotate(-1deg) scale(1.02);

    transform-origin: center;
}


.porter-ls-marquee-track {
    display: flex;

    width: max-content;

    animation:
        porterLsMarquee
        28s linear infinite;
}


.porter-ls-marquee-group {
    display: flex;

    align-items: center;

    flex-shrink: 0;
}


.porter-ls-marquee span {
    margin: 0 26px;

    color: var(--porter-dark);

    font-size: 18px;

    font-weight: 950;

    letter-spacing: 1px;

    white-space: nowrap;
}


.porter-ls-marquee i {
    color: var(--porter-dark);

    font-size: 14px;

    opacity: .55;
}


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

@keyframes porterLsGear {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes porterLsMarquee {

    from {
        transform: translateX(0);
    }

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

}


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

@media (max-width: 991.98px) {

    .porter-location-services {
        padding-top: 80px;
    }


    .porter-ls-content {
        max-width: 650px;
    }


    .porter-ls-area-card {
        padding: 35px;
    }


    .porter-ls-marquee {
        margin-top: 70px;
    }

}


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

@media (max-width: 767.98px) {

    .porter-location-services {
        padding-top: 65px;
    }


    .porter-ls-content h2 {
        font-size:
            clamp(40px, 11vw, 52px);

        letter-spacing: -2px;
    }


    .porter-ls-phone strong {
        font-size: 22px;
    }


    .porter-ls-area-card {
        padding: 28px 22px;
    }


    .porter-ls-zip {
        font-size: 65px;

        letter-spacing: -3px;
    }


    .porter-ls-map-icon {
        width: 55px;
        height: 55px;

        flex-basis: 55px;
    }


    .porter-ls-card-bottom {
        grid-template-columns: 1fr;
    }


    .porter-ls-marquee {
        margin-top: 55px;

        padding: 19px 0;
    }


    .porter-ls-marquee span {
        margin: 0 18px;

        font-size: 15px;
    }

}


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

@media (max-width: 420px) {

    .porter-ls-area-card {
        padding: 24px 18px;
    }


    .porter-ls-areas {
        gap: 7px;
    }


    .porter-ls-areas span {
        padding: 9px 10px;

        font-size: 9px;
    }


    .porter-ls-zip {
        font-size: 58px;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

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

    .porter-location-services *,
    .porter-location-services *::before,
    .porter-location-services *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

}


/* ==========================================================
   FOOTER - GARAGE DOOR REPAIR PORTER TX
========================================================== */

.porter-footer {
    position: relative;

    padding: 0 0 25px;

    background:
        linear-gradient(
            135deg,
            #0f151d 0%,
            #171d29 55%,
            #0b1118 100%
        );

    color: #ffffff;

    overflow: hidden;

    isolation: isolate;
}


/* ==========================================================
   BIG BACKGROUND TEXT
========================================================== */

.porter-footer-bg-text {
    position: absolute;

    left: 50%;
    bottom: -70px;

    transform:
        translateX(-50%);

    z-index: -1;

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

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

    font-weight: 950;

    line-height: 1;

    letter-spacing: -20px;

    pointer-events: none;
    user-select: none;
}


/* ==========================================================
   TOP CTA
========================================================== */

.porter-footer-top {
    position: relative;

    min-height: 120px;

    margin-bottom: 70px;

    padding: 25px 32px;

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

    gap: 25px;

    background:
        var(--porter-green);

    overflow: hidden;
}


.porter-footer-top::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    right: -70px;
    top: -90px;

    border-radius: 50%;

    border:
        25px solid rgba(23,29,41,.08);

    pointer-events: none;
}


.porter-footer-top-left {
    position: relative;

    z-index: 2;

    display: flex;
    align-items: center;

    gap: 15px;
}


.porter-footer-top-icon {
    width: 58px;
    height: 58px;

    flex: 0 0 58px;

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

    border-radius: 50%;

    background:
        var(--porter-dark);

    color:
        var(--porter-green);

    font-size: 17px;
}


.porter-footer-top-left small {
    display: block;

    margin-bottom: 3px;

    color:
        rgba(23,29,41,.65);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1.6px;
}


.porter-footer-top-left strong {
    display: block;

    color:
        var(--porter-dark);

    font-size: 22px;

    font-weight: 950;
}


/* phone */

.porter-footer-phone {
    position: relative;

    z-index: 2;

    display: inline-flex;
    align-items: center;

    gap: 14px;

    color:
        var(--porter-dark);

    font-size: 30px;

    font-weight: 950;

    text-decoration: none;

    letter-spacing: -1px;
}


.porter-footer-phone i {
    width: 48px;
    height: 48px;

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

    border-radius: 50%;

    background:
        var(--porter-dark);

    color:
        var(--porter-green);

    font-size: 14px;

    transition:
        transform .35s ease;
}


.porter-footer-phone:hover {
    color:
        var(--porter-dark);
}


.porter-footer-phone:hover i {
    transform:
        translateX(5px)
        rotate(-25deg);
}


/* ==========================================================
   MAIN FOOTER
========================================================== */

.porter-footer-main {
    position: relative;

    z-index: 4;
}


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

.porter-footer-about {
    max-width: 380px;
}


.porter-footer-about h2 {
    margin:
        0 0 18px;

    color: #ffffff;

    font-size: 34px;

    font-weight: 950;

    line-height: 1;

    letter-spacing: -1.5px;

    text-transform: uppercase;
}


.porter-footer-about h2 span {
    display: block;

    margin-top: 5px;

    color:
        var(--porter-green);
}


.porter-footer-about > p {
    margin:
        0 0 28px;

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

    font-size: 13px;

    line-height: 1.8;
}


/* ==========================================================
   INFO
========================================================== */

.porter-footer-info {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 17px;
}


.porter-footer-info > span {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

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

    border-radius: 50%;

    background:
        rgba(184,230,46,.11);

    color:
        var(--porter-green);

    font-size: 12px;
}


.porter-footer-info small {
    display: block;

    margin-bottom: 3px;

    color:
        var(--porter-green);

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1.3px;
}


.porter-footer-info strong {
    display: block;

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

    font-size: 13px;

    font-weight: 800;

    line-height: 1.55;
}


.porter-footer-info em {
    display: block;

    margin-top: 3px;

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

    font-size: 10px;

    font-style: normal;

    font-weight: 700;
}


/* ==========================================================
   FOOTER LINKS
========================================================== */

.porter-footer-links h3 {
    position: relative;

    margin:
        0 0 25px;

    padding-bottom: 12px;

    color: #ffffff;

    font-size: 16px;

    font-weight: 900;
}


.porter-footer-links h3::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 35px;
    height: 2px;

    background:
        var(--porter-green);
}


.porter-footer-links ul {
    margin: 0;

    padding: 0;

    list-style: none;
}


.porter-footer-links li {
    margin-bottom: 11px;
}


.porter-footer-links li:last-child {
    margin-bottom: 0;
}


.porter-footer-links a {
    position: relative;

    display: inline-block;

    padding-left: 14px;

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

    font-size: 12px;

    line-height: 1.55;

    text-decoration: none;

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


.porter-footer-links a::before {
    content: "";

    position: absolute;

    left: 0;
    top: 8px;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--porter-green);

    opacity: .55;
}


.porter-footer-links a:hover {
    color:
        var(--porter-green);

    transform:
        translateX(4px);
}


/* ==========================================================
   MINI PHONE
========================================================== */

.porter-footer-mini-phone {
    display: inline-flex !important;

    align-items: center;

    gap: 11px;

    margin-top: 25px;

    padding:
        9px 16px 9px 9px !important;

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

    border-radius: 40px;

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

    transform: none !important;
}


.porter-footer-mini-phone::before {
    display: none;
}


.porter-footer-mini-phone > i {
    width: 40px;
    height: 40px;

    flex: 0 0 40px;

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

    border-radius: 50%;

    background:
        var(--porter-green);

    color:
        var(--porter-dark);

    font-size: 12px;
}


.porter-footer-mini-phone small {
    display: block;

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

    font-size: 7px;

    font-weight: 900;

    letter-spacing: 1px;
}


.porter-footer-mini-phone strong {
    display: block;

    color: #ffffff;

    font-size: 15px;

    font-weight: 950;
}


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

.porter-footer-bottom {
    position: relative;

    z-index: 4;

    margin-top: 55px;

    padding-top: 23px;

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

    gap: 20px;

    border-top:
        1px solid rgba(255,255,255,.09);
}


.porter-footer-bottom p {
    margin: 0;

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

    font-size: 10px;
}


.porter-footer-bottom-badge {
    display: flex;
    align-items: center;

    gap: 10px;

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: .5px;
}


.porter-footer-bottom-badge i {
    color:
        var(--porter-green);
}


.porter-footer-bottom-badge b {
    color:
        var(--porter-green);

    font-weight: 900;
}


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

@media (max-width: 991.98px) {

    .porter-footer-top {
        margin-bottom: 55px;
    }


    .porter-footer-phone {
        font-size: 26px;
    }


    .porter-footer-bottom {
        flex-direction: column;

        align-items: flex-start;
    }

}


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

@media (max-width: 767.98px) {

    .porter-footer-top {
        flex-direction: column;

        align-items: flex-start;

        margin-bottom: 45px;

        padding: 24px 22px;
    }


    .porter-footer-phone {
        width: 100%;

        justify-content: space-between;

        font-size: 27px;
    }


    .porter-footer-about {
        max-width: 100%;
    }


    .porter-footer-links h3 {
        margin-bottom: 18px;
    }


    .porter-footer-bottom-badge {
        flex-wrap: wrap;
    }

}


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

@media (max-width: 420px) {

    .porter-footer-phone {
        font-size: 23px;
    }


    .porter-footer-top-left strong {
        font-size: 18px;
    }


    .porter-footer-about h2 {
        font-size: 29px;
    }

}

    /* 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;
    width: auto;          /* 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}
}