/* =========================================================
   DOORWAY SOLUTION
   PROJECTS PAGE
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --brand-blue: #3f4198;
    --brand-blue-light: #5558bd;
    --brand-blue-dark: #292b72;

    --charcoal: #242124;

    --white: #ffffff;

    --light: #f5f5f7;
    --light-alt: #eeeeF2;

    --text-muted: #6d6e77;

    --border:
        rgba(36, 33, 36, .12);

    --dark-border:
        rgba(255, 255, 255, .12);

    --heading:
        "Manrope",
        sans-serif;

    --body:
        "Inter",
        sans-serif;

    --container:
        1400px;

}


/* =========================================================
   RESET
========================================================= */

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


html {
    scroll-behavior:
        smooth;
}


body {
    margin:
        0;

    overflow-x:
        hidden;

    color:
        var(--charcoal);

    background:
        var(--light);

    font-family:
        var(--body);

    -webkit-font-smoothing:
        antialiased;
}


img {
    display:
        block;

    max-width:
        100%;
}


figure {
    margin:
        0;
}


a {
    color:
        inherit;

    text-decoration:
        none;
}


button,
input,
textarea {
    font:
        inherit;
}


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

.projects-container {

    width:
        min(
            calc(100% - 64px),
            var(--container)
        );

    margin:
        0 auto;

}


/* =========================================================
   01 — HERO
========================================================= */

.projects-hero {

    position:
        relative;

    min-height:
        72vh;

    padding:
        175px 0
        105px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #f7f7f9 0%,
            #eeeeF2 100%
        );

}


/* subtle grid */

.projects-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .5;

    background-image:

        linear-gradient(
            rgba(36,33,36,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(36,33,36,.025) 1px,
            transparent 1px
        );

    background-size:
        90px 90px;

}


/* blue architectural line */

.projects-hero::after {

    content:
        "";

    position:
        absolute;

    top:
        0;

    right:
        10%;

    width:
        1px;

    height:
        100%;

    background:
        linear-gradient(
            transparent,
            rgba(63,65,152,.15),
            transparent
        );

}


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

.projects-hero-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        950px;

}


/* eyebrow */

.projects-eyebrow {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    color:
        var(--brand-blue);

}


.projects-eyebrow > span {

    width:
        36px;

    height:
        1px;

    background:
        var(--brand-blue);

}


.projects-eyebrow strong {

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}


/* hero heading */

.projects-hero h1 {

    max-width:
        980px;

    margin:
        44px 0 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            64px,
            7.2vw,
            110px
        );

    font-weight:
        500;

    line-height:
        .90;

    letter-spacing:
        -.065em;

}


.projects-hero h1 span {

    display:
        block;

    color:
        var(--brand-blue);

}


/* description */

.projects-hero-content > p {

    max-width:
        570px;

    margin:
        34px 0 0;

    color:
        var(--text-muted);

    font-size:
        16px;

    line-height:
        1.75;

}


/* =========================================================
   COMMON SECTION LABEL
========================================================= */

.projects-section-label {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    color:
        rgba(36,33,36,.52);

}


.projects-section-label > span {

    color:
        var(--brand-blue);

    font-size:
        11px;

    font-weight:
        700;

}


.projects-section-label p {

    margin:
        0;

    font-size:
        15px;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

}
/* =========================================================
   02 — CLIENT LOGO MOVING STRIPS
========================================================= */

.projects-clients {
    position: relative;

    padding:
        90px 0;

    overflow: hidden;

    background:
        #ffffff;
}


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

.projects-logo-marquee {
    width: 100%;

    margin-top:
        42px;

    overflow: hidden;

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

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


/* =========================================================
   EACH ROW
========================================================= */

.projects-logo-row {
    position: relative;

    width: 100%;

    overflow: hidden;
}


.projects-logo-row + .projects-logo-row {
    border-top:
        1px solid
        var(--border);
}


/* =========================================================
   SIDE FADE
========================================================= */

.projects-logo-row::before,
.projects-logo-row::after {
    content: "";

    position: absolute;

    z-index: 5;

    top: 0;
    bottom: 0;

    width:
        100px;

    pointer-events: none;
}


.projects-logo-row::before {
    left: 0;

    background:
        linear-gradient(
            to right,
            #ffffff 0%,
            rgba(255,255,255,.95) 20%,
            rgba(255,255,255,0) 100%
        );
}


.projects-logo-row::after {
    right: 0;

    background:
        linear-gradient(
            to left,
            #ffffff 0%,
            rgba(255,255,255,.95) 20%,
            rgba(255,255,255,0) 100%
        );
}


/* =========================================================
   TRACK
========================================================= */

.projects-logo-track {
    width:
        max-content;

    display: flex;

    flex-wrap: nowrap;

    will-change:
        transform;
}


/* FIRST ROW */

.projects-logo-track-left {
    animation:
        doorwayLogosLeft
        28s
        linear
        infinite;
}


/* SECOND ROW */

.projects-logo-track-right {
    animation:
        doorwayLogosRight
        26s
        linear
        infinite;
}


/* =========================================================
   DUPLICATED SET
========================================================= */

.projects-logo-set {
    display: flex;

    flex-shrink: 0;

    flex-wrap: nowrap;
}


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

.projects-logo-item {
    width:
        clamp(
            230px,
            18vw,
            320px
        );

    height:
        145px;

    padding:
        28px 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    background:
        transparent;

    border:
        0;
}


/* =========================================================
   LOGO IMAGE — ORIGINAL COLORS
========================================================= */

.projects-logo-item img {
    width: auto;

    max-width:
        175px;

    height:
        80px;

    object-fit:
        contain;

    object-position:
        center;

    filter:
        none !important;

    opacity:
        1 !important;

    transform:
        none;

    transition:
        transform .3s ease;
}


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

@media (hover: hover) and (pointer: fine) {

    .projects-logo-marquee:hover
    .projects-logo-track {
        animation-play-state:
            paused;
    }


    .projects-logo-item:hover {
        background:
            transparent;
    }


    .projects-logo-item:hover img {
        filter:
            none !important;

        opacity:
            1 !important;

        transform:
            scale(1.06);
    }

}


/* =========================================================
   MOVEMENT
========================================================= */

@keyframes doorwayLogosLeft {

    from {
        transform:
            translateX(0);
    }

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

}


@keyframes doorwayLogosRight {

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

    to {
        transform:
            translateX(0);
    }

}
/* =========================================================
   SPECIAL SIZE — LEXUS + POOJA PLAZZIO
========================================================= */

/* Give these two logo boxes a little more usable space */

.projects-logo-item:has(img[src*="lexus.jpg"]),
.projects-logo-item:has(img[src*="pooja-plazzio.jpg"])
projects-logo-item:has(img[src*="grand-emporio.png"]) {
    padding:
        18px 22px;
}


/* LEXUS */

.projects-logo-item img[src*="lexus.jpg"] {
    width:
        220px;

    max-width:
        100%;

    height:
        110px;

    object-fit:
        contain;

    filter:
        none !important;

    opacity:
        1 !important;
}


/* POOJA PLAZZIO */

.projects-logo-item img[src*="pooja-plazzio.jpg"] {
    width:
        225px;

    max-width:
        100%;

    height:
        180px;

    object-fit:
        contain;

    filter:
        none !important;

    opacity:
        1 !important;
}
/* POOJA PLAZZIO */

.projects-logo-item img[src*="grand-emporio.png"] {
    width:
        225px;

    max-width:
        100%;

    height:
        110px;

    object-fit:
        contain;

    filter:
        none !important;

    opacity:
        1 !important;
}

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

@media (max-width: 1024px) {

    .projects-logo-item:has(img[src*="lexus.jpg"]),
    .projects-logo-item:has(img[src*="pooja-plazzio.jpg"])
     {
        padding:
            16px 18px;
    }


    .projects-logo-item img[src*="lexus.jpg"] {
        width:
            190px;

        max-height:
            72px;
    }


    .projects-logo-item img[src*="pooja-plazzio.jpg"] {
        width:
            195px;

        max-height:
            74px;
    }

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

@media (max-width: 767px) {

    .projects-logo-item:has(img[src*="lexus.jpg"]),
    .projects-logo-item:has(img[src*="pooja-plazzio.jpg"])
    .projects-logo-item:has(img[src*="grand-emporio.png"]) {
        padding:
            13px 15px;
    }


    .projects-logo-item img[src*="lexus.jpg"] {
        width:
            155px;

        max-height:
            80px;
    }


    .projects-logo-item img[src*="pooja-plazzio.jpg"] {
        width:
            160px;

        max-height:
            120px;
    }
        .projects-logo-item img[src*="grand-emporio.png"] {
        width:
            160px;

        max-height:
            90px;
    }
        .projects-logo-item img[src*="mohali-citi-centre.png"] {
        width:
            160px;

        max-height:
            90px;
    }

}
@media (max-width: 390px) {

    .projects-logo-item img[src*="lexus.jpg"] {
        width:
            145px;

        max-height:
            56px;
    }


    .projects-logo-item img[src*="pooja-plazzio.jpg"] {
        width:
            150px;

        max-height:
            58px;
    }

}

/* =========================================================
   03 — PROJECT GALLERY
   HOME-STYLE CARDS / EQUAL 16:10 SIZE
========================================================= */

.projects-gallery-section {
    position: relative;

    padding:
        115px 0;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f7f7f9 55%,
            #f1f1f5 100%
        );

    color:
        var(--charcoal);
}


/* subtle architectural background */

.projects-gallery-section::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background-image:
        linear-gradient(
            rgba(63, 65, 152, .03) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(63, 65, 152, .03) 1px,
            transparent 1px
        );

    background-size:
        100px 100px;
}


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

.projects-gallery-header {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        .55fr
        1.45fr;

    align-items: start;

    gap: 70px;

    padding-bottom: 45px;

    border-bottom:
        1px solid
        rgba(36, 33, 36, .10);
}


.projects-gallery-heading h2 {
    max-width: 760px;

    margin: 0;

    color:
        var(--charcoal);

    font-family:
        var(--heading);

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

    font-weight: 500;

    line-height:
        .96;

    letter-spacing:
        -.055em;
}


.projects-gallery-heading h2 span {
    display: block;

    color:
        var(--brand-blue);
}


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

.projects-gallery-grid {
    position: relative;

    z-index: 2;

    margin-top: 28px;

    display: grid;

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

    gap: 14px;
}


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

.projects-gallery-card {
    position: relative;

    width: 100%;

    aspect-ratio:
        16 / 10;

    overflow: hidden;

    isolation: isolate;

    background:
        linear-gradient(
            135deg,
            #e8e9ee,
            #f5f5f8
        );

    border:
        1px solid
        rgba(36, 33, 36, .08);
}


/*
IMPORTANT:
No featured cards.
No wide cards.
No small / large blocks.

Every card remains 16:10.
*/


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

.projects-gallery-image {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


.projects-gallery-image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transform:
        scale(1.01);

    transition:
        transform .65s
        cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.projects-gallery-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(7, 8, 11, .76) 0%,
            rgba(7, 8, 11, .25) 42%,
            rgba(7, 8, 11, .03) 72%,
            rgba(7, 8, 11, .05) 100%
        );
}


/* subtle brand hover overlay */

.projects-gallery-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            transparent,
            rgba(63, 65, 152, .20)
        );

    opacity: 0;

    transition:
        opacity .4s ease;
}


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

.projects-gallery-index {
    position: absolute;

    z-index: 4;

    top: 20px;

    left: 20px;

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

    font-size: 9px;

    font-weight: 600;

    letter-spacing:
        .10em;
}


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

.projects-gallery-arrow {
    position: absolute;

    z-index: 4;

    top: 16px;

    right: 16px;

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(7,8,11,.55);

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

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

    font-size: 14px;

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


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

.projects-gallery-content {
    position: absolute;

    z-index: 4;

    right: 22px;

    bottom: 22px;

    left: 22px;
}


.projects-gallery-category {
    display: block;

    margin-bottom: 8px;

    color:
        #8d8fe2;

    font-size: 10px;

    font-weight: 700;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;
}


.projects-gallery-content h3 {
    margin: 0;

    color:
        #ffffff;

    font-family:
        var(--heading);

    font-size:
        clamp(
            23px,
            2vw,
            32px
        );

    font-weight: 500;

    line-height:
        1.05;

    letter-spacing:
        -.04em;
}


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

@media (hover: hover) and (pointer: fine) {

    .projects-gallery-card:hover
    .projects-gallery-image img {
        transform:
            scale(1.04);
    }


    .projects-gallery-card:hover::after {
        opacity: 1;
    }


    .projects-gallery-card:hover
    .projects-gallery-arrow {
        background:
            var(--brand-blue);

        border-color:
            var(--brand-blue);

        transform:
            translate(3px, -3px);
    }

}


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

@media (max-width: 1024px) {

    .projects-gallery-section {
        padding:
            90px 0;
    }


    .projects-gallery-header {
        grid-template-columns:
            minmax(0,1fr);

        gap: 28px;
    }


    .projects-gallery-grid {
        margin-top: 22px;

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

        gap: 12px;
    }

}


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

@media (max-width: 767px) {

    .projects-gallery-section {
        padding:
            72px 0;
    }


    .projects-gallery-section::before {
        background-size:
            52px 52px;
    }


    .projects-gallery-header {
        padding-bottom: 30px;

        gap: 24px;
    }


    .projects-gallery-heading h2 {
        font-size:
            clamp(
                40px,
                12vw,
                56px
            );
    }


    .projects-gallery-grid {
        margin-top: 18px;

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

        gap: 11px;
    }


    /*
       Still 16:10.
       No tall mobile cards.
    */

    .projects-gallery-card {
        width: 100%;

        aspect-ratio:
            16 / 10;
    }


    .projects-gallery-index {
        top: 15px;

        left: 15px;

        font-size: 8px;
    }


    .projects-gallery-arrow {
        top: 12px;

        right: 12px;

        width: 38px;

        height: 38px;
    }


    .projects-gallery-content {
        right: 17px;

        bottom: 17px;

        left: 17px;
    }


    .projects-gallery-category {
        margin-bottom: 6px;

        font-size: 8px;
    }


    .projects-gallery-content h3 {
        font-size:
            clamp(
                22px,
                7vw,
                29px
            );
    }

}


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

@media (max-width: 390px) {

    .projects-gallery-index {
        top: 13px;

        left: 13px;
    }


    .projects-gallery-arrow {
        top: 10px;

        right: 10px;

        width: 36px;

        height: 36px;
    }


    .projects-gallery-content {
        right: 14px;

        bottom: 14px;

        left: 14px;
    }

}
/* =========================================================
   04 — CTA
========================================================= */

.projects-cta {

    padding:
        110px 0;

    color:
        #ffffff;

    background:
        linear-gradient(
            145deg,
            #11131a 0%,
            #151823 52%,
            #0e1017 100%
        );

}


.projects-cta-grid {

    padding-top:
        34px;

    display:
        grid;

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

    align-items:
        end;

    gap:
        80px;

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

}


.projects-cta-label {

    display:
        block;

    color:
        var(--brand-blue-light);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .13em;

    text-transform:
        uppercase;

}


.projects-cta h2 {

    max-width:
        850px;

    margin:
        40px 0 0;

    font-family:
        var(--heading);

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

    font-weight:
        500;

    line-height:
        .94;

    letter-spacing:
        -.06em;

}


.projects-cta h2 span {

    display:
        block;

    color:
        var(--brand-blue-light);

}


/* CTA button */

.projects-cta-action a {

    min-width:
        240px;

    min-height:
        58px;

    padding:
        0 18px
        0 21px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    background:
        var(--brand-blue);

    color:
        #ffffff;

    font-size:
        12px;

    font-weight:
        650;

    transition:
        background .25s ease,
        transform .25s ease;

}


.projects-cta-action a strong {

    font-size:
        17px;

    font-weight:
        400;

    transition:
        transform .25s ease;

}


@media (hover:hover) and (pointer:fine) {

    .projects-cta-action a:hover {

        background:
            var(--brand-blue-light);

        transform:
            translateY(-3px);

    }


    .projects-cta-action a:hover strong {

        transform:
            translate(
                3px,
                -3px
            );

    }

}


/* =========================================================
   05 — CONTACT / MAP + FORM
========================================================= */

.projects-contact {

    padding:
        115px 0;

    background:
        #ffffff;

}


/* =========================================================
   MAP + FORM GRID
========================================================= */

.projects-contact-grid {

    display:
        grid;

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

    min-height:
        650px;

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

}


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

.projects-map {

    position:
        relative;

    min-height:
        650px;

    overflow:
        hidden;

    background:
        #e7e7eb;

}


.projects-map iframe {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    border:
        0;

}


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

.projects-form-wrap {

    padding:
        clamp(
            45px,
            5vw,
            75px
        );

    background:
        #f7f7f9;

}


.projects-form-wrap h2 {

    max-width:
        500px;

    margin:
        38px 0 0;

    font-family:
        var(--heading);

    font-size:
        clamp(
            45px,
            4.5vw,
            68px
        );

    font-weight:
        500;

    line-height:
        .96;

    letter-spacing:
        -.055em;

}


.projects-form-intro {

    max-width:
        440px;

    margin:
        25px 0 0;

    color:
        var(--text-muted);

    font-size:
        14px;

    line-height:
        1.75;

}


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

.projects-form {

    margin-top:
        42px;

}


/* field */

.projects-form-field {

    position:
        relative;

    margin-bottom:
        25px;

}


.projects-form-field label {

    display:
        block;

    margin-bottom:
        9px;

    color:
        rgba(36,33,36,.56);

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;

}


/* inputs */

.projects-form-field input,
.projects-form-field textarea {

    width:
        100%;

    padding:
        14px 0;

    color:
        var(--charcoal);

    background:
        transparent;

    border:
        0;

    border-bottom:
        1px solid
        rgba(36,33,36,.17);

    border-radius:
        0;

    outline:
        none;

    resize:
        none;

    transition:
        border-color .25s ease;

}


.projects-form-field textarea {

    min-height:
        90px;

}


.projects-form-field input::placeholder,
.projects-form-field textarea::placeholder {

    color:
        rgba(36,33,36,.35);

}


.projects-form-field input:focus,
.projects-form-field textarea:focus {

    border-color:
        var(--brand-blue);

}


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

.projects-form-submit {

    width:
        100%;

    min-height:
        58px;

    margin-top:
        10px;

    padding:
        0 18px
        0 21px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #ffffff;

    background:
        var(--brand-blue);

    border:
        0;

    cursor:
        pointer;

    font-size:
        12px;

    font-weight:
        650;

    transition:
        background .25s ease,
        transform .25s ease;

}


.projects-form-submit strong {

    font-size:
        17px;

    font-weight:
        400;

}


@media (hover:hover) and (pointer:fine) {

    .projects-form-submit:hover {

        background:
            var(--brand-blue-dark);

        transform:
            translateY(-2px);

    }

}


/* =========================================================
   TABLET
   UP TO 1024PX
========================================================= */

@media (max-width: 1024px) {


    /* container */

    .projects-container {

        width:
            calc(100% - 48px);

    }



    /* hero */

    .projects-hero {

        min-height:
            auto;

        padding:
            150px 0
            90px;

    }



/* clients */

.projects-clients {
    padding:
        80px 0;
}


.projects-logo-marquee {
    margin-top:
        36px;
}


.projects-logo-item {
    width:
        240px;

    height:
        125px;

    padding:
        24px 32px;
}


.projects-logo-item img {
    width:
        auto;

    max-width:
        155px;

    max-height:
        55px;
}





    /* gallery */

    .projects-gallery-section {

        padding:
            90px 0;

    }


    .projects-gallery-header {

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

        gap:
            30px;

    }


    .projects-gallery-grid {

        margin-top:
            48px;

        gap:
            48px 20px;

    }



    /* CTA */

    .projects-cta {

        padding:
            90px 0;

    }


    .projects-cta-grid {

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

        gap:
            38px;

    }


    .projects-cta-action {

        max-width:
            320px;

    }



    /* contact */

    .projects-contact {

        padding:
            90px 0;

    }


    .projects-contact-grid {

        min-height:
            0;

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

    }


    .projects-form-wrap {

        order:
            1;

    }


    .projects-map {

        order:
            2;

        min-height:
            450px;

    }

}


/* =========================================================
   MOBILE
   UP TO 767PX
========================================================= */

@media (max-width: 767px) {


    /* container */

    .projects-container {

        width:
            calc(100% - 34px);

    }



    /* hero */

    .projects-hero {

        padding:
            125px 0
            70px;

    }



/* clients */

.projects-clients {
    padding:
        68px 0;
}


.projects-logo-marquee {
    margin-top:
        30px;
}


.projects-logo-row::before,
.projects-logo-row::after {
    width:
        40px;
}


.projects-logo-item {
    width:
        190px;

    height:
        105px;

    padding:
        20px 25px;
}


.projects-logo-item img {
    width:
        auto;

    max-width:
        125px;

    max-height:
        46px;
}


.projects-logo-track-left {
    animation-duration:
        22s;
}


.projects-logo-track-right {
    animation-duration:
        20s;
}


    /* gallery */

    .projects-gallery-section {

        padding:
            72px 0;

    }


    .projects-gallery-header {

        gap:
            27px;

    }


    .projects-gallery-grid {

        margin-top:
            40px;

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

        gap:
            44px;

    }


    .project-card-image {

        aspect-ratio:
            16 / 10;

    }


    /* Keep project details clean */

    .project-card-info {

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

        gap:
            10px;

    }



    /* CTA */

    .projects-cta {

        padding:
            72px 0;

    }


    .projects-cta-grid {

        padding-top:
            28px;

        gap:
            32px;

    }


    .projects-cta-action {

        width:
            100%;

        max-width:
            none;

    }


    .projects-cta-action a {

        width:
            100%;

        min-width:
            0;

    }



    /* map + form */

    .projects-contact {

        padding:
            72px 0;

    }


    .projects-contact-grid {

        border:
            0;

    }


    .projects-form-wrap {

        width:
            100%;

        padding:
            40px 20px;

    }


    .projects-map {

        min-height:
            380px;

    }


    .projects-form {

        margin-top:
            35px;

    }

}


/* =========================================================
   SMALL MOBILE
   UP TO 390PX
========================================================= */

@media (max-width: 390px) {

    .projects-container {

        width:
            calc(100% - 28px);

    }



    .projects-logo-item img {

        max-width:
            95px;

    }


    .projects-form-wrap {

        padding:
            35px 17px;

    }


    .projects-map {

        min-height:
            330px;

    }

}


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

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

    html {
        scroll-behavior:
            auto;
    }


    .projects-logo-item,
    .projects-logo-item img,
    .project-card-image img,
    .project-card-image::after,
    .project-card-view,
    .projects-cta-action a,
    .projects-form-submit {

        transition:
            none !important;

    }

}