/* main css */

        /* =========================================================
           ROOT / GLOBAL
        ========================================================== */

        :root {

            --light-blue: #c1d0df;

            --medium-blue: #9cbbda;

            --dark-blue: #05202e;

            --pink: #b43b62;

            --white: #ffffff;

            --black: #111111;


            --raleway: "Raleway", sans-serif;

            --code: "Google Sans Code", monospace;


            --nav-height: 76px;

        }


        * {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }


        html {

            scroll-behavior: smooth;

        }


        body {

            background:#9cbbda; 

            color: var(--dark-blue);

            font-family: var(--raleway);

            overflow-x: hidden;

        }


        img {

            display: block;

            max-width: 100%;

        }


        a {

            color: inherit;

            text-decoration: none;

        }


        button {

            font-family: inherit;

        }



        /* =========================================================
           NAVIGATION
        ========================================================== */

        .nav {

            height: var(--nav-height);

            width: 100%;

            position: sticky;

            top: 0;

            z-index: 1000;

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 0 4.5%;

            background: #b1c7ddaa;

            backdrop-filter: blur(14px);

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

            border-bottom: 1px solid rgba(5, 32, 46, 0.04);

        }


        .nav-logo {

            font-size: 20px;

            font-weight: 400;

            letter-spacing: -0.4px;

        }


        .nav-right {

            display: flex;

            align-items: center;

            gap: 30px;

        }


        .nav-link {

            font-size: 15px;

            font-weight: 500;

            transition: opacity 0.2s ease;

        }


        .nav-link:hover {

            opacity: 0.65;

        }


        .contact-button {

            background: var(--pink);

            color: var(--white);

            border: none;

            border-radius: 30px;

            padding: 8px 26px;

            font-size: 14px;

            font-weight: 600;

            cursor: pointer;

            transition:
                transform 0.2s ease,
                opacity 0.2s ease;

        }


        .contact-button:hover {

            transform: translateY(-1px);

            opacity: 0.9;

        }



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

        .hero {

            padding: 45px 4.5% 42px;

        }


        .hero-inner {

            max-width: 1220px;

            margin: 0 auto;

        }


        .hero-heading {

            max-width: 60%;

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

            line-height: 1.08;

            font-weight: 500;

            letter-spacing: -1.8px;

            margin-bottom: 20px;

        }


        .hero-heading strong {

            font-weight: 800;

        }



        /* =========================================================
           SKILL PILLS
        ========================================================== */

        .skill-pills {

            display: flex;

            flex-wrap: wrap;

            gap: 8px;

            max-width: 670px;

            margin-bottom: 34px;

        }


        .skill-pill {

            border: 1px solid rgba(5, 32, 46, 0.28);

            background: rgba(193, 208, 223, 0);

            border-radius: 20px;

            padding: 6px 14px;

            font-size: 14px;

            font-weight: 500;

            white-space: nowrap;

        }



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

        .featured-grid {

            position: relative;

            display: grid;

            grid-template-columns: 1.28fr 0.92fr;

            grid-template-rows: auto auto;

            column-gap: 50px;

            row-gap: 200px;

            max-width: 1220px;

            margin: 0 auto;

            margin-top: -18vh; 

            padding-top: clamp(105px, 10vw, 155px);

        }

        .small-text { 
            display: none; 
            position: absolute; 
            top: 0; 
            left: 0; 
            width: 100%;
            height: 100%;
            background: rgba(18, 16, 43, 0.778); 
            padding-top: 35%;
            padding-left: 20%; 
            padding-right: 20%; 
            font-size: 1.6vw; 
            color: white; 
            text-align: center; 
            text-shadow: #11111182;
        }

        .featured-small:hover {
            opacity: 0.8; 
            cursor: pointer; 
        }

        .featured-small:hover .small-text {
            display: inline;
        }

        .featured-main:hover  .small-text {
            display: inline;
            cursor: pointer; 
        }



        /* =========================================================
           MAIN FEATURED PROJECT
        ========================================================== */

        .featured-main {

            grid-column: 1;

            grid-row: 1 / 3;

            position: relative;

            z-index: 1;

        }


        .featured-main .project-image {

            width: 100%;

            aspect-ratio: 1 / 1;

            min-height: 0;

            max-height: none;

        }



        /* =========================================================
           BRANDING PROJECT
        ========================================================== */


        .small1 {

            position: absolute;

            top: clamp(-150px, -8vw, -60px);

            right: 0;

            width: min(40%, 600px);

            aspect-ratio: 1 / 1;

            z-index: 5;

        }


        .small1 .project-image {

            width: 100%;

            height: 100%;

            min-height: 0;

            max-height: none;

        }



        /* =========================================================
           SOCIAL MEDIA PROJECT
        ========================================================== */

        .small2 {

            grid-column: 2;

            grid-row: 2;

            position: relative;

            z-index: 1;

        }


        .small2 .project-image {

            width: 100%;

            aspect-ratio: 5 / 4;

            min-height: 0;

            max-height: none;

        }



        /* =========================================================
           PROJECT IMAGES
        ========================================================== */

        .project-image {

            width: 100%;

            height: 100%;

            background: rgba(5, 32, 46, 0.04);

            border-radius: 27px;

            border: 1px solid rgba(5, 32, 46, 0.08);

            overflow: hidden;

            position: relative;

            box-shadow:
                0 12px 24px rgba(5, 32, 46, 0.18);

        }


        /*
            When you add your actual images, use:

            <img src="images/project.jpg" alt="Project">

            The following keeps the image correctly contained.
        */

        .project-image img {

            width: 100%;

            height: 100%;

            object-fit: cover;

        }


        .image-placeholder {

            width: 100%;

            height: 100%;

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

        }


        .featured-main .image-placeholder {

            background: rgba(5, 32, 46, 0.03);

        }


        .small1 .image-placeholder {

            background: rgba(180, 59, 98, 0.04);

        }


        .small2 .image-placeholder {

            background: rgba(156, 187, 218, 0.25);

        }



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

        .explore-wrap {

            display: flex;

            justify-content: flex-end;

            max-width: 1220px;

            margin: 20px auto 0;

        }


        .explore-button {

            display: inline-flex;

            align-items: center;

            gap: 10px;

            padding: 11px 23px;

            background: var(--dark-blue);

            color: var(--white);

            border-radius: 30px;

            font-size: 14px;

            font-weight: 500;

            transition:
                transform 0.2s ease,
                background 0.2s ease;

        }


        .explore-button:hover {

            transform: translateX(3px);

        }


        .arrow {

            font-size: 18px;

            line-height: 0;

        }



        /* =========================================================
           EXPERIENCE / EXPERTISE
        ========================================================== */

        .experience {

            background: var(--dark-blue);

            color: var(--white);

            padding: 48px 6% 56px;

        }


        .experience-inner {

            max-width: 1220px;

            margin: 0 auto;

        }


        .section-title {

            font-size: 30px;

            line-height: 1.2;

            font-weight: 700;

            padding-bottom: 17px;

            border-bottom: 1px solid rgba(255, 255, 255, 0.55);

            margin-bottom: 34px;

        }


        .experience-grid {

            display: grid;

            grid-template-columns: 1fr 0.8fr;

            gap: 70px;

        }


        .stats {

            font-family: var(--code);

            font-size: 18px;

            line-height: 1.6;

            letter-spacing: -0.3px;

        }


        .stat {

            display: flex;

            align-items: baseline;

            gap: 12px;

        }


        .stat-number {

            font-family: var(--raleway);

            font-size: 26px;

            font-weight: 700;

            min-width: 42px;

        }


        .toolkit {

            margin-top: 33px;

        }


        .small-heading {

            display: inline-block;

            font-size: 22px;

            font-weight: 600;

            padding-bottom: 6px;

            border-bottom: 1px solid rgba(255, 255, 255, 0.8);

            margin-bottom: 20px;

        }


        .tool-list {

            max-width: 480px;

            font-family: var(--code);

            font-size: 12px;

            line-height: 1.45;

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

        }


        .capabilities-list {

            list-style: none;

            font-family: var(--code);

            font-size: 18px;

            line-height: 1.45;

        }


        .capabilities-list li {

            width: fit-content;

        }


        .capabilities-list li.highlight {

            background: var(--pink);

            padding: 0 5px;

            margin-left: -5px;

        }



        /* =========================================================
           PROJECT ACCORDION
        ========================================================== */

        .projects {

            background: var(--medium-blue);

            color: var(--dark-blue);

        }


        .project-accordion {

            border-bottom: 1px solid rgba(5, 32, 46, 0.45);

        }


        .project-header {

            width: 100%;

            min-height: 175px;

            display: grid;

            grid-template-columns: 220px 1fr auto;

            align-items: center;

            gap: 30px;

            padding: 0 4.5%;

            border: none;

            background: transparent;

            color: var(--dark-blue);

            text-align: left;

            cursor: pointer;

        }


        .project-number2 {

            font-size: clamp(100px, 15vw, 185px);

            line-height: 0.72;

            font-weight: 800;

            letter-spacing: -10px;

            color: var(--pink);

            align-self: center;

        }


        .project-title {

            font-size: clamp(27px, 3.3vw, 47px);

            font-weight: 400;

            letter-spacing: -1px;

        }


        .project-learn {

            font-family: var(--code);

            font-size: 13px;

            white-space: nowrap;

            opacity: 0.8;

            transition: transform 0.3s ease;

        }


        .project-accordion.active .project-learn {

            transform: translateX(4px);

        }



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

        .project-content {

            display: grid;

            grid-template-rows: 0fr;

            transition:
                grid-template-rows 0.55s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.55s ease;

            padding: 0 4.5%;

            overflow: hidden;

        }


        .project-content-inner {

            min-height: 0;

            overflow: hidden;

        }


        .project-accordion.active .project-content {

            grid-template-rows: 1fr;

            padding-bottom: 55px;

        }



        /* =========================================================
           EXPANDED PROJECT
        ========================================================== */

        .project-expanded-grid {

            display: grid;

            grid-template-columns: 1fr 1fr 1fr;

            grid-template-rows:min-content min-content; 

            gap: 20px;

            padding-top: 10px;

        }

        .expand-sub {
    
            grid-row: 2/3; 
        }


        .project-expanded-image {

            grid-row: 1/2; 

            aspect-ratio: 1 / 0.72;

            border-radius: 18px;

            background: rgba(5, 32, 46, 0.06);

            box-shadow:
                0 10px 20px rgba(5, 32, 46, 0.14);

            overflow: hidden;

        }


        .project-expanded-image .image-placeholder {

            min-height: 100%;

        }


        .project-expanded-image img {

            width: 100%;

            height: 100%;

            object-fit: cover;

        }



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

        .contact {

            background: var(--dark-blue);

            color: var(--white);

            padding: 46px 6% 0;
            
            padding-bottom: 0px; 

        }


        .contact-inner {

            max-width: 1220px;

            margin: 0 auto;

            border-bottom: 1px solid rgba(255, 255, 255, 0.292);

        }


        .contact-title {

            font-size: 30px;

            font-weight: 700;

            padding-bottom: 17px;

            border-bottom: 1px solid rgba(255, 255, 255, 0.55);

            margin-bottom: 25px;

        }


        .contact-grid {

            display: grid;

            grid-template-columns: 105px 1fr auto;

            gap: 25px;

            align-items: center;

            min-height: 190px;

        }


        /* =========================================================
           PORTRAIT
        ========================================================== */

        .portrait-placeholder {

            width: 105px;

            height: 190px;

            border-radius: 60px 60px 0 0;

            align-self: end;

            overflow: hidden;

        }


        .portrait-placeholder img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            object-position: center top;

        }



        /* =========================================================
           CONTACT DETAILS
        ========================================================== */

        .contact-heading {

            display: inline-block;

            font-size: 22px;

            font-weight: 500;

            padding-bottom: 6px;

            border-bottom: 1px solid rgba(255, 255, 255, 0.8);

            margin-bottom: 26px;

        }


        .contact-details {

            font-family: var(--code);

            font-size: 17px;

            line-height: 1.7;

        }


        .contact-details strong {

            font-family: var(--raleway);

            font-weight: 700;

            display: inline-block;

            width: 74px;

        }



        /* =========================================================
           CONTACT LINKS
        ========================================================== */

        .contact-links {

            display: flex;

            flex-direction: column;

            gap: 8px;

            text-align: right;

            font-family: var(--code);

            font-size: 17px;

            font-weight: 600;

        }


        .contact-links a {

            text-decoration: underline;

            text-underline-offset: 4px;

            transition: opacity 0.2s ease;

        }


        .contact-links a:hover {

            opacity: 0.6;

        }



        /* =========================================================
           FOOTER
        ========================================================== */

        .footer {

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

            padding: 12px 20px 16px;

            text-align: center;

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

            background:#05202e; 

            font-family: var(--code);

            font-size: 11px;

        }



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

        @media (max-width: 900px) {


            .nav {

                padding: 0 5%;

            }


            .hero {

                padding-left: 5%;

                padding-right: 5%;

            }


            /* =====================================================
               FEATURED PROJECTS — TABLET
            ====================================================== */

            .featured-grid {

                grid-template-columns: 1fr 1fr;

                column-gap: 20px;

                row-gap: 20px;

                /*
                    Less reserved space is needed at tablet sizes.
                */

                padding-top: clamp(90px, 12vw, 125px);

            }


            .featured-main {

                grid-column: 1;

                grid-row: 1 / 3;

            }


            .featured-main .project-image {

                min-height: 0;

                aspect-ratio: 1 / 1;

            }


            /*
                Branding stays elevated.
            */

            .small1 {

                width: min(48%, 400px);

                top: clamp(-95px, -9vw, -55px);

            }


            .small2 {

                grid-column: 2;

                grid-row: 2;

            }


            .small2 .project-image {

                min-height: 0;

                aspect-ratio: 1 / 1;

            }


            .experience-grid {

                gap: 40px;

            }


            .project-header {

                grid-template-columns: 150px 1fr auto;

            }


            .project-number {

                font-size: 120px;

            }

        }



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

        @media (max-width: 650px) {


            :root {

                --nav-height: 65px;

            }


            .nav-logo {

                font-size: 16px;

            }


            .nav-right {

                gap: 16px;

            }


            .nav-link {

                font-size: 13px;

            }


            .contact-button {

                padding: 7px 18px;

                font-size: 12px;

            }



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

            .hero {

                padding-top: 35px;

                padding-bottom: 35px;

            }


            .hero-heading {

                font-size: 37px;
                max-width: 100%;
                letter-spacing: -1.3px;

            }


            .skill-pills {

                gap: 6px;

            }


            .skill-pill {

                font-size: 9px;

                padding: 5px 10px;

            }



            /* =====================================================
               PROJECT GRID — MOBILE
            ====================================================== */

            /*
                On mobile there isn't enough horizontal space
                to maintain the desktop overlap.

                Therefore all projects return to normal flow.
                This guarantees no overlap with the heading,
                main project, or social project.
            */

            .featured-grid {

                display: flex;

                flex-direction: column;

                gap: 15px;

                padding-top: 0;

                margin-top: 0vh;

            }


            /* MAIN PROJECT */

            .featured-main {

                order: 1;

                width: 100%;

            }


            .featured-main .project-image {

                width: 100%;

                aspect-ratio: 1 / 1;

                min-height: 0;

            }


            /* BRANDING PROJECT */

            .small1 {

                position: relative;

                order: 2;

                top: auto;

                right: auto;

                width: 100%;

                aspect-ratio: 1 / 1;

                z-index: 1;

            }


            .small1 .project-image {

                width: 100%;

                height: 100%;

                min-height: 0;

            }


            /* SOCIAL PROJECT */

            .small2 {

                order: 3;

                width: 100%;

            }


            .small2 .project-image {

                width: 100%;

                aspect-ratio: 1 / 1;

                min-height: 0;

            }


            /* EXPLORE */

            .explore-wrap {

                margin-top: 16px;

            }



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

            .experience {

                padding: 40px 6% 45px;

            }


            .section-title,
            .contact-title {

                font-size: 25px;

            }


            .experience-grid {

                grid-template-columns: 1fr;

                gap: 35px;

            }


            .stats {

                font-size: 15px;

            }


            .stat-number {

                font-size: 23px;

            }


            .capabilities-list {

                font-size: 14px;

            }



            /* =====================================================
               ACCORDION
            ====================================================== */

            .project-header {

                min-height: 145px;

                grid-template-columns: 100px 1fr;

                gap: 18px;

                padding: 0 5%;

            }


            .project-number {

                font-size: 100px;

                letter-spacing: -7px;

            }


            .project-title {

                font-size: 25px;

            }


            .project-learn {

                display: none;

            }


            .project-expanded-grid {

                grid-template-columns: 1fr;

                gap: 15px;

            }


            .project-expanded-image {

                aspect-ratio: 1.35 / 1;

            }



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

            .contact {

                padding-left: 6%;

                padding-right: 6%;

            }


            .contact-grid {

                grid-template-columns: 75px 1fr;

                gap: 20px;

                min-height: 180px;

            }


            .portrait-placeholder {

                width: 75px;

                height: 145px;

            }


            .contact-heading {

                font-size: 20px;

            }


            .contact-details {

                font-size: 12px;

            }


            .contact-details strong {

                width: 50px;

            }


            .contact-links {

                grid-column: 2;

                flex-direction: row;

                justify-content: flex-start;

                gap: 25px;

                font-size: 13px;

            }


            .footer {

                font-size: 9px;

            }

        }



        /* =========================================================
           SMALL PHONES
        ========================================================== */

        @media (max-width: 400px) {


            .nav-link {

                display: none;

            }


            .hero-heading {

                font-size: 32px;

            }


            .project-header {

                grid-template-columns: 85px 1fr;

            }


            .project-number {

                font-size: 83px;

            }


            .project-title {

                font-size: 22px;

            }

        }






/* project css */

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

.page-header{

    max-width:1400px;

    margin:0 auto;

    padding:75px 4.5% 55px;

    background-color:#9cbbda; 

}

.page-kicker{

    font-family:var(--code);

    font-size:13px;

    margin-bottom:18px;

    opacity:.75;

}

.page-kicker:hover {
    opacity: 1; 
}

.page-title{

    font-size:clamp(38px,6vw,70px);

    line-height:.98;

    font-weight:500;

    letter-spacing:-3px;

    margin-bottom:25px;

}

.page-title strong{

    font-weight:800;

}

.page-description{

    max-width:650px;

    font-size:17px;

    line-height:1.55;

    font-weight:400;

}



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

.projects{

    max-width:1400px;

    margin:0 auto;

    padding:0 4.5% 100px;

}

.project-grid{

    display:grid;

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

    gap:48px 28px;

}



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

.project-card{

    display:block;

    cursor:pointer;

    transition:transform .3s ease;

}

.project-card:hover{

    transform:translateY(-4px);

}

.project-image{

    width:100%;

    height: fit-content; 

    aspect-ratio:1.35 / 1;

    border-radius:25px;

    overflow:hidden;

    position:relative;

    background:rgba(5,32,46,.04);

    box-shadow:0 14px 28px rgba(5,32,46,.14);

    margin-bottom:18px;

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

}

.project-card:hover .project-image{

    transform:translateY(-3px);

    box-shadow:0 18px 36px rgba(5,32,46,.18);

}

.project-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.image-placeholder{

    width:100%;

    height:100%;

    background:rgba(5,32,46,.03);

}



/* =========================================================
   OPTIONAL PLACEHOLDER COLORS
========================================================= */

.project-card:nth-child(1) .image-placeholder{

    background:rgba(5,32,46,.03);

}

.project-card:nth-child(2) .image-placeholder{

    background:rgba(180,59,98,.04);

}

.project-card:nth-child(3) .image-placeholder{

    background:rgba(156,187,218,.35);

}

.project-card:nth-child(4) .image-placeholder{

    background:rgba(5,32,46,.045);

}

.project-card:nth-child(5) .image-placeholder{

    background:rgba(180,59,98,.03);

}

.project-card:nth-child(6) .image-placeholder{

    background:rgba(156,187,218,.25);

}

.project-card:nth-child(7) .image-placeholder{

    background:rgba(5,32,46,.05);

}

.project-card:nth-child(8) .image-placeholder{

    background:rgba(180,59,98,.045);

}

.project-card:nth-child(9) .image-placeholder{

    background:rgba(156,187,218,.18);

}



/* =========================================================
   PROJECT TEXT
========================================================= */

.project-meta{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:10px;

}

.project-number{

    font-family:var(--code);

    font-size:11px;

    opacity:.65;

}

.project-category{

    font-family:var(--code);

    font-size:11px;

    line-height:1.2;

    padding:3px 7px;

    background:var(--pink);

    color:var(--white);

}

.project-title{

    font-size:24px;

    line-height:1.15;

    font-weight:600;

    letter-spacing:-.5px;

    margin-bottom:6px;

}

.project-subtitle{

    font-family:var(--code);

    font-size:12px;

    line-height:1.5;

    opacity:.72;

}



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

@media (max-width:1000px){

    .page-header{

        padding:60px 5% 45px;

    }

    .projects{

        padding:0 5% 80px;

    }

    .project-grid{

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

        gap:40px 22px;

    }

    .project-title{

        font-size:22px;

    }

}



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

@media (max-width:650px){

    .page-header{

        padding:45px 6% 35px;

    }

    .page-kicker{

        font-size:11px;

    }

    .page-title{

        font-size:52px;

        letter-spacing:-2px;

    }

    .page-description{

        font-size:15px;

    }

    .projects{

        padding:0 6% 65px;

    }

    .project-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .project-image{

        aspect-ratio:1.2 / 1;

        border-radius:22px;

    }

    .project-title{

        font-size:24px;

    }

    .project-subtitle{

        font-size:11px;

    }

}



/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width:400px){

    .page-title{

        font-size:44px;

    }

    .project-title{

        font-size:21px;

    }

}


/* Project Pages */


.case-study{

    max-width:1300px;

    margin:auto;

    padding:70px 4.5% 120px;

}

.project-hero{

    gap:60px;

    align-items:center;

    margin-bottom:80px;

}

.project-category{

    font-family:var(--code);

    font-size:12px;

    letter-spacing:1px;

    margin-bottom:18px;

    opacity:1;

    width: fit-content; 

}

.project-hero h1{

    font-size:clamp(42px,4.5vw,72px);

    line-height:.95;

    font-weight:600;

    letter-spacing:-3px;

    margin-bottom:15px;

}

.hero-description{

    max-width:470px;

    font-size:18px;

    line-height:1.6;

}

.hero-image{

    aspect-ratio:1.2/1;

    border-radius:30px;

    overflow:hidden;

    background:rgba(5,32,46,.04);

}

.section-heading{

    font-size:34px;

    font-weight:700;

    margin-bottom:50px;

    border-bottom:2px solid rgba(5,32,46,.15);

    padding-bottom:14px;

}

.overview{

    margin-bottom:120px;

}

.overview-grid{

    display:grid;

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

    gap:45px;

}

.overview h3{

    margin-bottom:12px;

}

.process{

    margin-bottom:120px;

}

.process-step{

    display:grid;

    grid-template-columns:90px 1fr 450px;

    gap:40px;

    align-items:center;

    padding: 0px 0;

    border-bottom:1px solid rgba(5,32,46,.12); 

}

.no-border {
    border: none; 
    border-bottom: none; 
}

.process2 {
     grid-template-columns: 450px 90px 1fr;
}

.process-number{

    font-size:72px;

    font-weight:800;

    color:var(--pink);

}

.process-content h2{

    font-size:34px;

    margin-bottom:18px;

}

.process-content p{

    max-width:550px;

    line-height:1.7;

}

.process-image{

    aspect-ratio:6/4;

    border-radius: 0px;

    width: 100%; 
    height: 100%; 

    overflow:hidden;

    background:rgba(5,32,46,.04);

}

.projects1 {
    margin-top: 80px; 
}

.process-top {
    margin-bottom: 0px; 
}

.gallery{

    margin-bottom:120px;

}

.gallery-grid{

    display:grid;

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

    gap:22px;

}

.gallery-image{

    aspect-ratio:6/4;

    border-radius:10px;

    overflow:hidden;

    background:rgba(5,32,46,.04);

}

.results-grid{

    display:grid;

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

    text-align:center;

    gap:40px;

}

.results h2{

    font-size:72px;

    color:var(--pink);

}

.image-placeholder{

    width:100%;

    height:100%;

    background:rgba(5,32,46,.03);

}

@media(max-width:900px){

.project-hero{

grid-template-columns:1fr;

}

.process-step{

grid-template-columns:1fr;

}

.process-number{

font-size:50px;

}

.process-image{

width:100%;
height: fit-content; 

}

.gallery-grid{

grid-template-columns:1fr;

}

.overview-grid{

grid-template-columns:1fr;

}

.results-grid{

grid-template-columns:1fr;

}

}




/* text animations */
@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;600&family=Poppins:wght@100;500;600;800;900&family=Lobster+Two:ital,wght@0,400;0,700;1,400&display=swap");
/* GLOBAL CONFIG RESET */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Poppins", sans-serif; }

select:focus, input:focus, button:focus {
  outline: none; }

/* -------- BODY DISPLAY --------- */
.text_section {
  background-color: #05202e;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; }

/* -------- TYPE SELECTORS --------- */
/* -------- CLASS --------- */
.container {
  display: flex;
  justify-content: center;
  align-items: center; }
  .container .box {
    transform-style: preserve-3d;
    animation: animate 7s ease-in-out infinite alternate; }
    .container .box span {
      background: linear-gradient(90deg, rgba(9, 5, 46, 0.1), rgba(5, 14, 49, 0.198) 90%, transparent);
      text-transform: uppercase;
      line-height: 0.76em;
      position: absolute;
      color: #fff;
      font-size: 3.5em;
      white-space: nowrap;
      font-weight: bold;
      padding: 0px 10px;
      transform-style: preserve-3d;
      text-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
      transform: translate(-50%, -50%) rotateX(calc(var(--i) * 22.5deg)) translateZ(109px); }
      .container .box span i {
        font-style: initial; }
        .container .box span i:nth-child(1) {
          color: #b43b62; }
        .container .box span i:nth-child(2) {
          color: #79a9dd; }

@keyframes animate {
  0% {
    transform: perspective(500px) rotateX(0deg) rotate(5deg); }
  100% {
    transform: perspective(50px) rotateX(360deg) rotate(5deg); } }