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

body{

    margin:0;
    padding:0;
    font-family:'Manrope', sans-serif;
    color:#222;
    background:#fff;
    overflow-x:hidden;
}

.navbar{

    width:100%;

    height:90px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 8%;

    background:white;

    position:fixed;

    top:0;

    left:0;

    z-index:999;

    box-shadow:0 5px 20px rgba(0,0,0,.05);

}

.logo{
    font-size:32px;
    font-family:'Josefin Sans',sans-serif;
    font-weight:600;
    color:#A57135;
}

.main-navigation{

    display:flex;

    align-items:center;

    gap:35px;

    margin-left:auto;

}

nav a{

    text-decoration:none;

    color:#222;

    font-weight:500;

    transition:.3s;

}

nav a:hover{

    color:#A57135;

}

.btn{

    background:#A57135;

    color:white;

    text-decoration:none;

    padding:14px 28px;

    border-radius:50px;

    margin-left:25px;

    flex-shrink:0;

    transition:.3s;

}

.btn:hover{

    background:#8d5e2c;

}
/* HERO SECTION */
.hero{
    min-height:100vh;
    background:
        linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0)),
        url("../images/hero.jpg");
    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;

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

    padding:0 8%;
    position:relative;
    overflow:hidden;
}

.hero h1{

    font-family:'Josefin Sans', sans-serif;
    font-size:80px;
    font-weight:400;
    line-height:1;
    margin-bottom:30px;
    letter-spacing:-2px;

}

.hero-overlay{

    position:absolute;

    width:100%;

    height:100%;

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

    left:0;

    top:0;

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:700px;

    color:white;

}

.studio{

    letter-spacing:4px;

    font-size:14px;

    margin-bottom:20px;

}

.hero-text{

    width:620px;

    font-size:20px;

    line-height:1.8;

    margin-bottom:40px;

}

.hero-buttons{

     margin-top:30px;

}

.primary-btn{

    background:white;

    color:#A57135;

    padding:20px 38px;

    border-radius:30px;

    text-decoration:none;

    transition:.3s;

}

.primary-btn:hover{

    background:#592e18;

    color:white;

}

.hero-mark{

    display:none;

}

/* ========================= */
/* WHY PUSH LINE DESIGNS */
/* ========================= */

.why-section{

    position:relative;

    height:100vh;

    background:
        linear-gradient(
            rgba(0,0,0,0),
            rgba(0,0,0,0)
        ),
        url("../images/white-wood.jpg");

    background-size:550px;

    background-repeat:repeat;

    background-position:center;

}

.why-container{

    position:sticky;

    top:0;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

/*Intro*/

.why-intro{

    position:absolute;

    width:700px;

    text-align:center;

    z-index:5;

}

.why-intro h2{

    font-size:78px;

    line-height:1.05;

    color:#3A2A1F;

    margin:35px 0;

}

.why-description{

    font-size:22px;

    line-height:1.8;

    color:#666;

}



/* CARD */

.why-cards{

    position:relative;

    width:760px;

    height:520px;

}

.why-card{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,0),
            rgba(0,0,0,0)
        ),
        url("../images/hero1.jpg");

    border-radius:35px;

    padding:70px;

    box-shadow:0 35px 80px rgba(0,0,0,.08);

    opacity:0;

    transform:translateY(180px) scale(.9);

}

/* Active card */

/* ICON BOX */

.card-icon{

    width:100px;

    height:100px;

    border-radius:22px;

    background:#f7f4ef;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:40px;

}

/* ICON */

.card-icon img{

    width:55px;

}

/* HEADING */

.why-card h3{

    font-size:48px;

    line-height:1.2;

    color:#f9f7f6;

    margin-bottom:28px;

    font-weight:600;

}

/* DESCRIPTION */

.why-card p{

    font-size:22px;

    line-height:1.9;

    color:#f9f7f6;

}

/* ========================= */
/* CARDS WRAPPER */
/* ========================= */

.cards-wrapper{

    position:relative;

    width:100%;

    height:100%;

}

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

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

.services-section{

    padding:140px 8%;

    background:
    linear-gradient(
        rgba(0,0,0,0),
        rgba(0,0,0,0)
    ),
    url("../images/hero1.jpg");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;

}

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

.services-header{

    max-width:900px;

    margin:0 auto 90px;

    text-align:center;

}

.services-header .section-number{

    display:block;

    font-size:18px;

    letter-spacing:8px;

    color:#C89A63;

    font-weight:700;

    margin-bottom:25px;

}

.services-header h2{

    font-size:82px;

    line-height:1.05;

    color:#ffffff;

    font-weight:600;

    margin-bottom:30px;

}

.services-description{

    font-size:22px;

    line-height:1.8;

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

}

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

.services-grid{

    display:grid;

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

    gap:35px;

    max-width:1450px;

    margin:auto;

}

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

.flip-card{

    height:330px;

    perspective:1500px;

}

.flip-card-inner{

    position:relative;

    width:100%;

    height:100%;

    transition:transform .8s;

    transform-style:preserve-3d;

}

.flip-card:hover .flip-card-inner{

    transform:rotateY(180deg);

}

/*=========================
     FRONT & BACK
==========================*/

.flip-card-front,
.flip-card-back{

    position:absolute;

    width:100%;

    height:100%;

    border-radius:22px;

    backface-visibility:hidden;

    overflow:hidden;

}

/*=========================
        FRONT
==========================*/

.flip-card-front{

    background:
    linear-gradient(
        rgba(255,255,255,.95),
        rgba(255,255,255,.95)
    ),
    url("../images/white-wood.jpg");

    background-size:cover;

    background-position:center;

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.35s;

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

}

.flip-card:hover .flip-card-front{

    transform:translateY(-10px);

    box-shadow:0 35px 80px rgba(0,0,0,.18);

}

.flip-card-front img{

    width:62px;

    height:62px;

    margin-bottom:35px;

    filter:brightness(.8);

}

.flip-card-front h3{

    font-size:28px;

    line-height:1.35;

    text-align:center;

    text-transform:uppercase;

    letter-spacing:1px;

    color:#2D2118;

    font-weight:600;

}

/*=========================
          BACK
==========================*/

.flip-card-back{

    background:
    linear-gradient(
        rgba(0,0,0,0),
        rgba(0,0,0,0)
    ),
    url("../images/white-wood.jpg");

    background-size:cover;

    background-position:center;

    transform:rotateY(180deg);

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:35px;

    box-shadow:0 30px 70px rgba(0,0,0,.18);

}

flip-card-back h4::before{

    content:"";

    display:block;

    width:60px;

    height:3px;

    background:#A57135;

    margin-bottom:18px;

    border-radius:20px;

}

.flip-card-back p{

    font-size:18px;

    line-height:1.8;

    color:#a57135;

}

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

@media(max-width:1200px){

.services-grid{

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

}

}

@media(max-width:768px){

.services-section{

    padding:90px 25px;

}

.services-header h2{

    font-size:54px;

}

.services-description{

    font-size:18px;

}

.services-grid{

    grid-template-columns:1fr;

}

.flip-card{

    height:300px;

}

}

/* =====================================================
   OUR PROCESS SECTION
===================================================== */

/* =========================================================
   OUR PROCESS
========================================================= */

.process-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    background:

        linear-gradient(
            rgba(0,0,0,0),
            rgba(0,0,0,0)
        ),

        url("../images/white-wood.jpg");

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

    padding: 90px 6vw;

    overflow: hidden;

}


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

.process-container {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        28%
        37%
        35%;

    align-items: center;

    gap: 20px;

}


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

.process-intro {

    padding-right: 30px;

}


.process-intro .section-number {

    display: block;

    font-size: 18px;

    letter-spacing: 8px;

    color: #A57135;

    font-weight: 700;

    margin-bottom: 35px;

}


.process-intro h2 {

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

    line-height: .95;

    color: #3A2A1F;

    margin: 0 0 35px;

    font-weight: 600;

    letter-spacing: -2px;

}


.process-intro p {

    max-width: 420px;

    font-size: 20px;

    line-height: 1.8;

    color: #666;

    margin: 0;

}


/* =========================================================
   PROCESS LIST
========================================================= */

.process-list {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 12px;

}


/* vertical timeline */

.process-list::before {

    content: "";

    position: absolute;

    left: 43px;

    top: 42px;

    bottom: 42px;

    width: 1px;

    background: rgba(58,42,31,.25);

}


/* =========================================================
   PROCESS ITEM
========================================================= */

.process-item {

    position: relative;

    width: 100%;

    min-height: 88px;

    border: none;

    background: transparent;

    padding: 8px 0;

    display: grid;

    grid-template-columns:
        88px
        70px
        1fr;

    align-items: center;

    text-align: left;

    cursor: pointer;

    font-family: inherit;

}


/* remove default button styles */

.process-item:focus {

    outline: none;

}


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

.process-icon {

    position: relative;

    z-index: 2;

    width: 70px;

    height: 70px;

    border-radius: 50%;

    background: #A57135;

    border: 7px solid #FAF7F2;

    box-shadow:
        0 5px 15px rgba(0,0,0,.08);

    display: flex;

    align-items: center;

    justify-content: center;

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

}


.process-icon img {

    width: 34px;

    height: 34px;

    object-fit: contain;

}


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

.process-number {

    width: 64px;

    height: 64px;

    background: #3A2A1F;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    font-weight: 600;

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

}


/* =========================================================
   PROCESS NAME
========================================================= */

.process-name {

    padding-left: 18px;

    font-size: 19px;

    line-height: 1.35;

    font-weight: 600;

    color: #3A2A1F;

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

}


/* =========================================================
   ACTIVE PROCESS
========================================================= */

.process-item.active .process-icon {

    background: #3A2A1F;

    transform: scale(1.08);

}


.process-item.active .process-number {

    background: #A57135;

    transform: scale(1.05);

}


.process-item.active .process-name {

    color: #A57135;

    transform: translateX(5px);

}


/* =========================================================
   RIGHT DETAIL BOX
========================================================= */

.process-detail {

    position: relative;

    width: 100%;

    min-height: 500px;

    background:

        linear-gradient(
            rgba(0,0,0,0),
            rgba(0,0,0,0)
        ),

        url("../images/hero1.jpg");

    background-size: cover;

    background-position: center;

    border-radius: 30px;

    box-shadow:
        0 30px 70px rgba(0,0,0,.18);

    overflow: hidden;

    display: flex;

    align-items: center;

}


/* =========================================================
   DETAIL INNER
========================================================= */

.process-detail-inner {

    width: 100%;

    padding: 70px;

    color: #fff;

}


/* =========================================================
   DETAIL STEP
========================================================= */

.detail-step {

    display: block;

    font-size: 16px;

    letter-spacing: 6px;

    font-weight: 700;

    color: #E3B36E;

    margin-bottom: 30px;

}


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

.process-detail h3 {

    font-size: clamp(38px, 3vw, 58px);

    line-height: 1.05;

    text-transform: uppercase;

    color: #fff;

    margin: 0 0 35px;

    font-weight: 600;

}


/* =========================================================
   DETAIL LINE
========================================================= */

.detail-line {

    width: 70px;

    height: 3px;

    background: #C89A63;

    margin-bottom: 35px;

}


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

.process-detail p {

    max-width: 520px;

    font-size: 20px;

    line-height: 1.8;

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

    margin: 0;

}


/* =========================================================
   DETAIL ANIMATION
========================================================= */

.process-detail-inner {

    animation: processDetailIn .5s ease;

}


@keyframes processDetailIn {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


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

@media (max-width: 1100px) {

    .process-section {

        padding: 80px 4vw;

    }

    .process-container {

        grid-template-columns:
            26%
            39%
            35%;

    }

    .process-item {

        grid-template-columns:
            70px
            60px
            1fr;

    }

    .process-icon {

        width: 60px;

        height: 60px;

    }

    .process-number {

        width: 55px;

        height: 55px;

    }

    .process-name {

        font-size: 16px;

    }

    .process-detail {

        min-height: 460px;

    }

    .process-detail-inner {

        padding: 50px;

    }

}


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

@media (max-width: 800px) {

    .process-section {

        min-height: auto;

        padding: 90px 25px;

    }

    .process-container {

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 50px;

    }


    /* INTRO */

    .process-intro {

        padding: 0;

        text-align: center;

    }

    .process-intro h2 {

        font-size: 58px;

    }

    .process-intro p {

        margin: 0 auto;

    }


    /* PROCESS LIST */

    .process-list {

        width: 100%;

    }

    .process-list::before {

        left: 34px;

    }

    .process-item {

        grid-template-columns:
            68px
            60px
            1fr;

        min-height: 80px;

    }

    .process-icon {

        width: 58px;

        height: 58px;

        border-width: 5px;

    }

    .process-icon img {

        width: 28px;

        height: 28px;

    }

    .process-number {

        width: 52px;

        height: 52px;

        font-size: 16px;

    }

    .process-name {

        font-size: 15px;

        padding-left: 10px;

    }


    /* DETAIL */

    .process-detail {

        min-height: 420px;

        border-radius: 24px;

    }

    .process-detail-inner {

        padding: 40px 30px;

    }

    .process-detail h3 {

        font-size: 36px;

    }

    .process-detail p {

        font-size: 17px;

    }

}

/* =====================================================
   PROJECTS SECTION
===================================================== */

/* =========================================================
   PROJECTS SECTION
========================================================= */

.projects-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    background:
        linear-gradient(
            rgba(0,0,0,0),
            rgba(0,0,0,0)
        ),
        url("../images/hero1.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    overflow: hidden;

}


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

.projects-container {

    position: relative;

    width: 100%;

    height: 100vh;

    box-sizing: border-box;

    padding:
        65px
        6vw
        45px;

}


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

.projects-intro {

    width: 100%;

    display: grid;

    grid-template-columns: 42% 58%;

    align-items: center;

    gap: 30px;

    margin-bottom: 25px;

}


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

.projects-number {

    display: block;

    margin-bottom: 12px;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 6px;

    color: #E2B16A;

}


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

.projects-heading h2 {

    margin: 0;

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

    line-height: .88;

    letter-spacing: -2px;

    font-weight: 600;

    color: #FFFFFF;

}


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

.projects-story {

    max-width: 600px;

    padding-top: 5px;

}


.story-label {

    display: block;

    margin-bottom: 12px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 5px;

    color: #E2B16A;

}


.projects-story p {

    margin: 0;

    max-width: 580px;

    font-size: 16px;

    line-height: 1.55;

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

}


/* =========================================================
   PROJECT DISPLAY
========================================================= */

.projects-display {

    position: relative;

    width: 100%;

    height: calc(
        100vh - 250px
    );

    min-height: 470px;

    max-height: 590px;

}


/* =========================================================
   PROJECT SLIDE
========================================================= */

.project-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(300px, .7fr);

    gap: 25px;

    opacity: 0;

    visibility: hidden;

    transform: translateX(25px);

    transition:
        opacity .4s ease,
        transform .4s ease;

}


.project-slide.active {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

}


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

.project-image {

    width: 100%;

    height: 100%;

    min-height: 470px;

    overflow: hidden;

    border-radius: 25px;

    background: #3A2A1F;

}


.project-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

}


/* =========================================================
   PROJECT INFORMATION / DIALOGUE BOX
========================================================= */

.project-info {

    width: 100%;

    height: 100%;

    min-height: 470px;

    box-sizing: border-box;

    padding: 40px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-radius: 25px;

    background:
        linear-gradient(
            rgba(0,0,0,0),
            rgba(0,0,0,0)
        ),
        url("../images/white-wood.jpg");

    background-size: cover;

    background-position: center;

}


/* =========================================================
   PROJECT COUNT
========================================================= */

.project-count {

    margin-bottom: 18px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 5px;

    color: #A57135;

}


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

.project-info h3 {

    margin: 0;

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

    line-height: .94;

    letter-spacing: -1px;

    font-weight: 600;

    color: #3A2A1F;

}


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

.project-location {

    margin-top: 20px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2.5px;

    color: #A57135;

}


/* =========================================================
   PROJECT LINE
========================================================= */

.project-line {

    width: 50px;

    height: 2px;

    margin: 22px 0;

    background: #A57135;

}


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

.project-info p {

    max-width: 400px;

    margin: 0;

    font-size: 16px;

    line-height: 1.65;

    color: #5F554E;

}


/* =========================================================
   PROJECT CONTROLS
   CENTERED WITH PROJECT DISPLAY
========================================================= */

.projects-controls {

    position: absolute;

    left: 6vw;

    right: 6vw;

    /*
       This places the controls around
       the vertical centre of the project area.
    */

    top: 50%;

    transform: translateY(-50%);

    height: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    z-index: 100;

    pointer-events: none;

}


/* =========================================================
   PROJECT ARROWS
========================================================= */

.project-arrow {

    width: 54px;

    height: 54px;

    padding: 0;

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

    border-radius: 50%;

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

    color: #3A2A1F;

    font-size: 22px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

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

    pointer-events: auto;

}


.project-arrow:hover {

    background: #A57135;

    color: #FFFFFF;

    transform: scale(1.08);

}


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

.project-progress {

    position: absolute;

    left: 50%;

    top: 0;

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

    display: flex;

    align-items: center;

    gap: 12px;

    color: #FFFFFF;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;

    pointer-events: none;

}


.progress-current {

    color: #E2B16A;

}


.progress-line {

    width: 60px;

    height: 1px;

    background: #E2B16A;

}


/* =========================================================
   CURATED COLLECTION CTA
========================================================= */

.projects-cta {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    box-sizing: border-box;

    padding: 40px;

    border-radius: 25px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    background:
        linear-gradient(
            rgba(0,0,0,0),
            rgba(0,0,0,0)
        ),
        url("../images/hero1.jpg");

    background-size: cover;

    background-position: center;

    opacity: 0;

    visibility: hidden;

    transform: translateX(25px);

    transition:
        opacity .4s ease,
        transform .4s ease;

}


.projects-cta.active {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

}


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

.cta-label {

    margin-bottom: 18px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 6px;

    color: #E2B16A;

}


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

.projects-cta h3 {

    max-width: 800px;

    margin: 0 0 18px;

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

    line-height: 1.05;

    color: #FFFFFF;

}


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

.projects-cta p {

    max-width: 700px;

    margin: 0 0 8px;

    font-size: 16px;

    line-height: 1.6;

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

}


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

.projects-cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-top: 22px;

    padding: 16px 28px;

    background: #C58A3A;

    color: #FFFFFF;

    text-decoration: none;

    border-radius: 5px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

}


.projects-cta-button span {

    font-size: 20px;

}


/* =========================================================
   CTA NOTE
========================================================= */

.cta-note {

    margin-top: 10px;

    font-size: 9px;

    letter-spacing: 3px;

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

}


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

@media (max-width: 1000px) {

    .projects-container {

        padding:
            55px
            5vw
            40px;

    }


    .projects-intro {

        grid-template-columns: 1fr 1fr;

        gap: 20px;

    }


    .projects-heading h2 {

        font-size: 52px;

    }


    .projects-story p {

        font-size: 15px;

    }


    .projects-display {

        height: calc(
            100vh - 230px
        );

    }


    .project-slide {

        grid-template-columns:
            minmax(0, 1.4fr)
            minmax(280px, .7fr);

    }


    .project-info {

        padding: 30px;

    }


    .projects-controls {

        left: 4vw;

        right: 4vw;

        top: 50%;

    }

}


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

@media (max-width: 650px) {

    .projects-section {

        min-height: 100vh;

    }


    .projects-container {

        height: auto;

        min-height: 100vh;

        padding:
            65px
            20px
            85px;

    }


    .projects-intro {

        grid-template-columns: 1fr;

        gap: 15px;

        margin-bottom: 20px;

    }


    .projects-heading h2 {

        font-size: 48px;

    }


    .projects-story {

        padding: 0;

    }


    .projects-story p {

        font-size: 15px;

    }


    .projects-display {

        height: 590px;

        min-height: 0;

    }


    .project-slide {

        grid-template-columns: 1fr;

        grid-template-rows:
            300px
            270px;

        gap: 15px;

    }


    .project-image {

        min-height: 0;

        height: 300px;

        border-radius: 20px;

    }


    .project-info {

        min-height: 0;

        height: 270px;

        padding: 25px;

        border-radius: 20px;

    }


    .project-info h3 {

        font-size: 34px;

    }


    .project-info p {

        font-size: 14px;

    }


    /* =========================================
       MOBILE PROJECT CONTROLS
    ========================================= */

    .projects-controls {

        left: 10px;

        right: 10px;

        top: 57%;

        bottom: auto;

        transform: translateY(-50%);

    }


    .project-arrow {

        width: 46px;

        height: 46px;

        font-size: 19px;

    }


    .project-progress {

        font-size: 10px;

        gap: 8px;

    }


    .progress-line {

        width: 40px;

    }


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

    .projects-cta {

        padding: 25px;

        border-radius: 20px;

    }


    .projects-cta h3 {

        font-size: 30px;

    }


    .projects-cta p {

        font-size: 14px;

    }


    .projects-cta-button {

        padding: 14px 20px;

        font-size: 11px;

    }

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

.about-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    background:
        linear-gradient(
            rgba(0,0,0,0),
            rgba(0,0,0,0)
        ),
        url("../images/white-wood.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    overflow: hidden;

}


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

.about-container {

    position: relative;

    width: min(1400px, 88vw);

    margin: 0 auto;

    padding:
        120px
        0
        120px;

}


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

.about-intro {

    display: grid;

    grid-template-columns: 35% 65%;

    align-items: start;

    margin-bottom: 70px;

}


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

.about-number {

    display: block;

    padding-top: 12px;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 5px;

    color: #A57135;

}


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

.about-intro h2 {

    margin: 0;

    font-size: clamp(
        58px,
        7vw,
        105px
    );

    line-height: .88;

    letter-spacing: -4px;

    font-weight: 600;

    color: #3A2A1F;

}


/* =========================================================
   INTRODUCTION
========================================================= */

.about-introduction {

    width: 65%;

    margin-left: 35%;

    margin-bottom: 120px;

}


.about-lead {

    max-width: 850px;

    margin: 0 0 30px;

    font-size: clamp(
        22px,
        2vw,
        30px
    );

    line-height: 1.45;

    font-weight: 500;

    color: #3A2A1F;

}


.about-text {

    max-width: 760px;

    margin: 0;

    font-size: 18px;

    line-height: 1.8;

    color: #655B54;

}


/* =========================================================
   BRAND STATEMENT
========================================================= */

.about-statement {

    width: 100%;

    padding:
        80px
        7vw;

    box-sizing: border-box;

    margin-bottom: 120px;

    background:
        linear-gradient(
            rgba(0,0,0,0),
            rgba(0,0,0,0)
        ),
        url("../images/hero1.jpg");

    background-size: cover;

    background-position: center;

    border-radius: 30px;

}


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

.about-statement-label {

    display: block;

    margin-bottom: 30px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 5px;

    color: #E2B16A;

}


/* =========================================================
   TAGLINE
========================================================= */

.about-statement h3 {

    margin: 0;

    font-size: clamp(
        52px,
        7vw,
        100px
    );

    line-height: .9;

    letter-spacing: -3px;

    font-weight: 600;

    color: #FFFFFF;

}


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

.about-statement p {

    max-width: 650px;

    margin: 40px 0 0;

    font-size: 18px;

    line-height: 1.75;

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

}


/* =========================================================
   CLOSING
========================================================= */

.about-closing {

    display: grid;

    grid-template-columns: 55% 45%;

    align-items: end;

    gap: 40px;

}


.about-closing h3 {

    margin: 0;

    font-size: clamp(
        50px,
        6vw,
        90px
    );

    line-height: .9;

    letter-spacing: -3px;

    font-weight: 600;

    color: #3A2A1F;

}


.about-closing p {

    max-width: 500px;

    margin: 0;

    padding-bottom: 5px;

    font-size: 18px;

    line-height: 1.8;

    color: #655B54;

}


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

@media (max-width: 1000px) {

    .about-container {

        width: 88vw;

        padding:
            90px
            0
            90px;

    }


    .about-intro {

        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 55px;

    }


    .about-number {

        padding-top: 0;

    }


    .about-introduction {

        width: 80%;

        margin-left: 20%;

        margin-bottom: 90px;

    }


    .about-statement {

        padding: 60px;

        margin-bottom: 90px;

    }


    .about-closing {

        grid-template-columns: 1fr 1fr;

    }

}


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

@media (max-width: 650px) {

    .about-container {

        width: 88vw;

        padding:
            75px
            0
            75px;

    }


    .about-intro {

        display: block;

        margin-bottom: 45px;

    }


    .about-number {

        margin-bottom: 25px;

        font-size: 11px;

        letter-spacing: 4px;

    }


    .about-intro h2 {

        font-size: 53px;

        letter-spacing: -2px;

    }


    .about-introduction {

        width: 100%;

        margin-left: 0;

        margin-bottom: 70px;

    }


    .about-lead {

        font-size: 21px;

        line-height: 1.45;

    }


    .about-text {

        font-size: 16px;

        line-height: 1.75;

    }


    .about-statement {

        padding: 45px 30px;

        margin-bottom: 70px;

        border-radius: 20px;

    }


    .about-statement-label {

        font-size: 10px;

        letter-spacing: 4px;

        margin-bottom: 25px;

    }


    .about-statement h3 {

        font-size: 48px;

        letter-spacing: -2px;

    }


    .about-statement p {

        margin-top: 30px;

        font-size: 15px;

        line-height: 1.7;

    }


    .about-closing {

        display: block;

    }


    .about-closing h3 {

        font-size: 50px;

        letter-spacing: -2px;

    }


    .about-closing p {

        margin-top: 30px;

        font-size: 16px;

        line-height: 1.75;

    }

}

/* =========================================================
   CLIENT STORIES SECTION
========================================================= */
/* ========================================================= */
/* TESTIMONIALS SECTION */
/* ========================================================= */

.testimonials-section {

    position: relative;

    min-height: 100vh;

    background:
        linear-gradient(
            rgba(0,0,0,0),
            rgba(0,0,0,0)
        ),
        url("../images/hero1.jpg");

    background-size: cover;

    background-position: center;

    color: #ffffff;

}


.testimonials-container {

    width: min(1400px, 90vw);

    min-height: 100vh;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 100px 0 35px;

}


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

.testimonials-intro {

    text-align: center;

    margin-bottom: 35px;

}


.testimonials-intro .section-number {

    display: block;

    font-size: 15px;

    letter-spacing: 7px;

    color: #E2B66F;

    font-weight: 700;

    margin-bottom: 15px;

}


.testimonials-intro h2 {

    margin: 0;

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

    line-height: .95;

    font-weight: 600;

    letter-spacing: 1px;

    color: #ffffff;

}


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

.testimonial-slider {

    width: 100%;

    display: grid;

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

    justify-content: center;

    align-items: center;

    column-gap: 40px;

}


/* ========================================================= */
/* ARROWS */
/* ========================================================= */

.testimonial-arrow {

    width: 58px;

    height: 58px;

    border-radius: 50%;

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

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

    color: #3A2A1F;

    font-size: 25px;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

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

}


.testimonial-arrow:hover {

    transform: scale(1.08);

    background: #ffffff;

}


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

.testimonial-content {

    position: relative;

    min-height: 300px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.quote-mark {

    font-family: Georgia, serif;

    font-size: 82px;

    line-height: .5;

    color: #E2B66F;

    margin-bottom: 25px;

}


/* ========================================================= */
/* SLIDES */
/* ========================================================= */

.testimonial-slide {

    display: none;

    animation: testimonialFade .45s ease;

}


.testimonial-slide.active {

    display: block;

}


@keyframes testimonialFade {

    from {

        opacity: 0;

        transform: translateY(12px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ========================================================= */
/* TESTIMONIAL TEXT */
/* ========================================================= */

.testimonial-text {

    margin: 0;

    max-width: 850px;

    font-size: clamp(20px, 2vw, 27px);

    line-height: 1.55;

    font-weight: 400;

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

}


/* ========================================================= */
/* CLIENT */
/* ========================================================= */

.testimonial-client {

    display: flex;

    flex-direction: column;

    margin-top: 25px;

}


.testimonial-client strong {

    font-size: 14px;

    letter-spacing: 5px;

    color: #ffffff;

}


.testimonial-client span {

    margin-top: 7px;

    font-size: 12px;

    letter-spacing: 3px;

    color: #E2B66F;

}


/* ========================================================= */
/* COUNTER */
/* ========================================================= */

.testimonial-counter {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    margin-top: 28px;

    font-size: 12px;

    letter-spacing: 4px;

    color: #E2B66F;

}


.counter-line {

    width: 75px;

    height: 1px;

    background: rgba(226,182,111,.65);

}


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

.testimonial-cta {

    text-align: center;

    margin-top: 30px;

    padding-top: 28px;

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

}


.testimonial-cta > span {

    display: block;

    font-size: 12px;

    letter-spacing: 5px;

    color: #E2B66F;

    margin-bottom: 12px;

}


.testimonial-cta h3 {

    margin: 0 0 22px;

    font-size: clamp(24px, 3vw, 38px);

    line-height: 1.1;

    font-weight: 500;

    color: #ffffff;

}


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

/* ========================================================= */
/* FOOTER CONSULTATION BUTTON */
/* ========================================================= */

.testimonial-cta-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    padding: 15px 27px;

    background: #FFFFFF;

    color: #3A2A1F;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 1.5px;

    border-radius: 3px;

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

}


.testimonial-cta-button span {

    font-size: 20px;

    color: #3A2A1F;

}


.testimonial-cta-button:hover {

    background: #F3EEE8;

    color: #3A2A1F;

    transform: translateY(-2px);

}


.testimonial-cta-button:hover span {

    color: #3A2A1F;

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

.site-footer {

    margin-top: 32px;

    padding-top: 25px;

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

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;

}


.footer-brand h4 {

    margin: 0;

    font-size: 17px;

    letter-spacing: 2px;

    color: #ffffff;

}


.footer-brand p {

    margin: 7px 0 0;

    font-size: 12px;

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

}


.footer-links {

    display: flex;

    justify-content: flex-end;

    align-items: center;

    flex-wrap: wrap;

    gap: 22px;

}


.footer-links a {

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

    text-decoration: none;

    font-size: 12px;

    transition: color .3s ease;

}


.footer-links a:hover {

    color: #E2B66F;

}


.footer-bottom {

    grid-column: 1 / -1;

    display: flex;

    justify-content: space-between;

    padding-top: 18px;

    font-size: 10px;

    letter-spacing: 1px;

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

}


/* ========================================================= */
/* WHATSAPP FLOATING BUTTON */
/* ========================================================= */

.whatsapp-float {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: #25D366;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 25px;

    z-index: 9999;

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

    transition:
        transform .3s ease;

}


.whatsapp-float:hover {

    transform: scale(1.1);

}


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

@media (max-width: 900px) {

    .testimonials-container {

        width: 88vw;

        padding: 90px 0 25px;

    }


    .testimonial-slider {

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

        column-gap: 15px;

    }


    .testimonial-arrow {

        width: 48px;

        height: 48px;

        font-size: 20px;

    }


    .testimonial-text {

        font-size: 19px;

        line-height: 1.55;

    }


    .testimonial-content {

        min-height: 270px;

    }


    .site-footer {

        grid-template-columns: 1fr;

    }


    .footer-links {

        justify-content: flex-start;

    }


    .footer-bottom {

        flex-direction: column;

        gap: 8px;

    }

}


@media (max-width: 600px) {

    .testimonials-container {

        min-height: auto;

        padding: 90px 0 25px;

    }


    .testimonials-intro {

        margin-bottom: 20px;

    }


    .testimonials-intro h2 {

        font-size: 42px;

    }


    .testimonial-slider {

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

        column-gap: 8px;

    }


    .testimonial-arrow {

        width: 42px;

        height: 42px;

        font-size: 18px;

    }


    .quote-mark {

        font-size: 60px;

        margin-bottom: 15px;

    }


    .testimonial-content {

        min-height: 330px;

    }


    .testimonial-text {

        font-size: 17px;

    }


    .testimonial-counter {

        margin-top: 20px;

    }


    .testimonial-cta {

        margin-top: 20px;

        padding-top: 20px;

    }


    .testimonial-cta h3 {

        font-size: 25px;

    }


    .testimonial-cta-button {

        width: 100%;

        padding: 15px 18px;

    }


    .whatsapp-float {

        width: 52px;

        height: 52px;

        right: 18px;

        bottom: 18px;

    }

}

/* =========================================================
   CONSULTATION PAGE
========================================================= */

.consultation-page {

    min-height: 100vh;

    background:
        linear-gradient(
            rgba(58,42,31,.28),
            rgba(58,42,31,.28)
        ),
        url("../images/hero1.jpg");

    background-size: cover;

    background-position: center;

    color: #ffffff;

    position: relative;

    overflow: hidden;

}


.consultation-page-container {

    width: min(1200px, 88vw);

    min-height: 100vh;

    margin: 0 auto;

    padding: 70px 0;

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 90px;

    align-items: center;

}



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

.consultation-page-intro {

    max-width: 500px;

}


.consultation-page-number {

    display: block;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 5px;

    color: #E2B16A;

    margin-bottom: 28px;

}


.consultation-page-intro h1 {

    margin: 0;

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

    line-height: .94;

    letter-spacing: -2px;

    font-weight: 600;

}


.consultation-page-intro p {

    max-width: 430px;

    margin-top: 30px;

    font-size: 18px;

    line-height: 1.7;

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

}


.consultation-small-text {

    margin-top: 12px !important;

    font-size: 15px !important;

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

}


/* =========================================================
   WHATSAPP TEXT
========================================================= */

.consultation-whatsapp-link {

    display: inline-flex;

    flex-direction: column;

    gap: 6px;

    margin-top: 35px;

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

    text-decoration: none;

    font-size: 13px;

    letter-spacing: .5px;

}


.consultation-whatsapp-link span {

    color: #ffffff;

    font-weight: 600;

    transition: color .3s ease;

}


.consultation-whatsapp-link:hover span {

    color: #E2B16A;

}



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

.consultation-form-box {

    background:
        linear-gradient(
            rgba(255,255,255,.96),
            rgba(255,255,255,.96)
        ),
        url("../images/white-wood.jpg");

    background-size: cover;

    background-position: center;

    border-radius: 25px;

    padding: 45px;

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

}


.consultation-form {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

}



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

.consultation-field {

    display: flex;

    flex-direction: column;

}


.consultation-field label {

    margin-bottom: 9px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #6B513D;

}


.consultation-field input,
.consultation-field textarea {

    width: 100%;

    box-sizing: border-box;

    border: none;

    border-bottom: 1px solid #D5C9BB;

    background: transparent;

    padding: 12px 0;

    font-family: inherit;

    font-size: 15px;

    color: #3A2A1F;

    outline: none;

}


.consultation-field input:focus,
.consultation-field textarea:focus {

    border-bottom-color: #A57135;

}


.consultation-field input::placeholder,
.consultation-field textarea::placeholder {

    color: #9A9189;

}


.consultation-field textarea {

    resize: vertical;

    min-height: 90px;

}



/* =========================================================
   FULL WIDTH FIELD
========================================================= */

.consultation-full {

    grid-column: 1 / -1;

}



/* =========================================================
   PROJECT OPTIONS
========================================================= */

.consultation-options {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


.consultation-option {

    cursor: pointer;

}


.consultation-option input {

    position: absolute;

    opacity: 0;

    pointer-events: none;

}


.consultation-option span {

    display: block;

    padding: 10px 15px;

    border: 1px solid #D5C9BB;

    border-radius: 3px;

    color: #6B513D;

    font-size: 11px;

    letter-spacing: .5px;

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

}


.consultation-option input:checked + span {

    background: #3A2A1F;

    border-color: #3A2A1F;

    color: #ffffff;

}



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

.consultation-submit {

    grid-column: 1 / -1;

    justify-self: start;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    padding: 16px 28px;

    border: none;

    border-radius: 3px;

    background: #3A2A1F;

    color: #ffffff;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1.5px;

    cursor: pointer;

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

}


.consultation-submit span {

    font-size: 20px;

}


.consultation-submit:hover {

    background: #A57135;

    transform: translateY(-2px);

}



/* =========================================================
   PRIVACY
========================================================= */

.consultation-privacy {

    grid-column: 1 / -1;

    margin: -8px 0 0;

    font-size: 10px;

    line-height: 1.5;

    color: #8A8178;

}



/* =========================================================
   BACK TO WEBSITE
========================================================= */

.consultation-back {

    position: absolute;

    top: 30px;

    left: 35px;

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

    text-decoration: none;

    font-size: 11px;

    letter-spacing: 1px;

    transition: color .3s ease;

}


.consultation-back:hover {

    color: #E2B16A;

}



/* =========================================================
   FLOATING WHATSAPP
========================================================= */

.consultation-whatsapp {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 58px;

    height: 58px;

    border-radius: 50%;

    background: #25D366;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 24px;

    z-index: 9999;

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

    transition:
        transform .3s ease;

}


.consultation-whatsapp:hover {

    transform: scale(1.1);

}



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

@media (max-width: 900px) {

    .consultation-page-container {

        grid-template-columns: 1fr;

        gap: 45px;

        padding: 90px 0 60px;

    }


    .consultation-page-intro {

        max-width: 650px;

        text-align: center;

        margin: 0 auto;

    }


    .consultation-page-intro p {

        margin-left: auto;

        margin-right: auto;

    }


    .consultation-whatsapp-link {

        align-items: center;

    }


    .consultation-form-box {

        padding: 35px;

    }

}



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

@media (max-width: 600px) {

    .consultation-page-container {

        width: 88vw;

        gap: 35px;

        padding-top: 90px;

    }


    .consultation-page-intro h1 {

        font-size: 43px;

    }


    .consultation-form-box {

        padding: 28px 22px;

        border-radius: 18px;

    }


    .consultation-form {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .consultation-full {

        grid-column: auto;

    }


    .consultation-submit {

        grid-column: auto;

        width: 100%;

    }


    .consultation-privacy {

        grid-column: auto;

    }


    .consultation-options {

        gap: 8px;

    }


    .consultation-option span {

        padding: 9px 11px;

    }


    .consultation-back {

        left: 20px;

        top: 20px;

    }


    .consultation-whatsapp {

        width: 52px;

        height: 52px;

        right: 18px;

        bottom: 18px;

    }

}/* =========================================================
   CONTACT PAGE — FINAL SIZE & HEADER FIX
========================================================= */


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

.navbar {
    width: 100%;
    height: 90px;

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

    padding: 0 8%;

    background: #ffffff;

    position: fixed;
    top: 0;
    left: 0;

    z-index: 999;

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


/* LOGO */

.navbar .logo {
    font-size: 32px;
    line-height: 1;

    font-family: 'Josefin Sans', sans-serif;

    font-weight: 600;

    color: #A57135;

    white-space: nowrap;
}


/* NAVIGATION */

.navbar .main-navigation {
    display: flex;
    align-items: center;
    gap: 38px;
}


.navbar .main-navigation a {
    font-size: 16px;
    line-height: 1.2;

    text-decoration: none;

    color: #222222;

    font-weight: 500;

    white-space: nowrap;

    transition: 0.3s ease;
}


.navbar .main-navigation a:hover {
    color: #A57135;
}


/* BOOK CONSULTATION BUTTON */

.navbar .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;

    background: #A57135;

    color: #ffffff;

    text-decoration: none;

    padding: 14px 28px;

    border-radius: 50px;

    white-space: nowrap;

    transition: 0.3s ease;
}


.navbar .btn:hover {
    background: #8d5e2c;
}


/* =========================================================
   CONTACT PAGE CONTENT
========================================================= */


/* Prevent content from going underneath fixed header */

body {
    padding-top: 90px;
}


/* CONTACT HERO */

.contact-hero {
    min-height: calc(100vh - 90px);

    padding: 90px 8% 80px;

    box-sizing: border-box;
}


/* SMALL GOLD LABEL */

.contact-hero .section-label {
    font-size: 14px;

    letter-spacing: 5px;

    line-height: 1.4;

    margin-bottom: 25px;
}


/* MAIN CONTACT HEADING */

.contact-hero h1 {
    font-size: 64px;

    line-height: 0.98;

    letter-spacing: -2px;

    margin: 0 0 25px;

    max-width: 600px;
}


/* INTRO TEXT */

.contact-hero > p {
    font-size: 18px;

    line-height: 1.5;

    max-width: 650px;

    margin-bottom: 50px;
}


/* CONTACT INFORMATION */

.contact-info {
    font-size: 16px;

    line-height: 1.5;
}


/* CONTACT INFO HEADINGS */

.contact-info .info-label {
    font-size: 12px;

    letter-spacing: 4px;

    margin-bottom: 8px;
}


/* CONTACT DETAILS */

.contact-info p,
.contact-info a {
    font-size: 17px;

    line-height: 1.5;
}


/* =========================================================
   CONTACT PAGE IMAGE
========================================================= */

.contact-company-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;
}


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

@media (max-width: 1100px) {

    .navbar .main-navigation {
        gap: 25px;
    }

    .navbar .main-navigation a {
        font-size: 15px;
    }

    .navbar .logo {
        font-size: 28px;
    }

    .navbar .btn {
        font-size: 15px;
        padding: 12px 22px;
    }

    .contact-hero h1 {
        font-size: 54px;
    }
}


@media (max-width: 800px) {

    .navbar {
        height: 75px;
        padding: 0 5%;
    }

    .navbar .logo {
        font-size: 24px;
    }

    .navbar .main-navigation {
        gap: 15px;
    }

    .navbar .main-navigation a {
        font-size: 13px;
    }

    .navbar .btn {
        font-size: 13px;
        padding: 10px 16px;
    }

    body {
        padding-top: 75px;
    }

    .contact-hero {
        min-height: auto;
        padding: 60px 5%;
    }

    .contact-hero h1 {
        font-size: 44px;
    }

    .contact-hero > p {
        font-size: 16px;
    }
}

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

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 10px;
    border: 0;
    background: transparent;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: #3A2A1F;
    transition: transform .2s ease, opacity .2s ease;
}

.navbar.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navbar.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

.navbar.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1320px) {

    .nav-toggle {
        display: flex;
        position: relative;
        z-index: 2;
    }

    .navbar {
        height: 70px;
        padding: 0 20px;
    }

    .navbar .logo {
        font-size: 20px;
        letter-spacing: 0;
    }

    .navbar .main-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        margin: 0;
        padding: 8px 22px 20px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #ffffff;
        box-shadow: 0 18px 36px rgba(0, 0, 0, .12);
    }

    .navbar.nav-open .main-navigation {
        display: flex;
    }

    .navbar .main-navigation a {
        padding: 14px 0;
        border-bottom: 1px solid rgba(58, 42, 31, .08);
        font-size: 16px;
    }

    .navbar .main-navigation .btn {
        margin: 16px 0 0;
        width: 100%;
        text-align: center;
    }

    body {
        padding-top: 70px;
    }

}

@media (max-width: 800px) {

    .hero {
        width: 100%;
        min-height: calc(100dvh - 70px);
        height: auto;
        align-items: center;
        justify-content: flex-start;
        padding: 36px 22px 72px;
        overflow: visible;
        background-position: left center;
        background-size: cover;
    }

    .hero-mark {
        display: block;
        width: min(250px, 68vw);
        height: auto;
        margin-top: 28px;
        filter: drop-shadow(10px 14px 12px rgba(70, 40, 10, .35));
    }

    .hero-content,
    .hero h1,
    .hero-text {
        width: 100%;
        max-width: 100%;
    }

    .studio {
        font-size: 11px;
        letter-spacing: 2px;
    }

    .hero h1 {
        font-size: clamp(40px, 11vw, 58px);
        letter-spacing: -1px;
        margin-bottom: 18px;
    }

    .hero-text {
        font-size: 16px;
        line-height: 1.65;
        margin-bottom: 28px;
    }

    .primary-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 16px 26px;
    }

    .why-section {
        height: 100dvh;
        padding-top: 70px;
        box-sizing: border-box;
    }

    .why-container {
        height: 100%;
    }

    .why-intro {
        width: auto;
        left: 22px;
        right: 22px;
    }

    .why-intro h2 {
        font-size: clamp(38px, 10vw, 52px);
        margin: 18px 0;
    }

    .why-description {
        font-size: 16px;
        line-height: 1.6;
    }

    .why-cards {
        width: calc(100% - 36px);
        height: min(420px, calc(100dvh - 240px));
    }

    .why-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 28px 24px;
        overflow: hidden;
        border-radius: 24px;
    }

    .card-icon {
        width: 68px;
        height: 68px;
        margin-bottom: 16px;
    }

    .card-icon img {
        width: 36px;
    }

    .why-card h3 {
        font-size: 30px;
        margin-bottom: 12px;
    }

    .why-card p {
        font-size: 16px;
        line-height: 1.45;
    }

    .services-header h2 {
        font-size: clamp(40px, 12vw, 54px);
    }

    .flip-card.is-flipped .flip-card-inner {
        transform: rotateY(180deg);
    }

    .process-intro h2 {
        font-size: clamp(42px, 12vw, 58px);
    }

    .about-intro h2,
    .about-statement h3,
    .about-closing h3 {
        overflow-wrap: break-word;
    }

}

@media (max-width: 650px) {

    .projects-container {
        height: auto;
        min-height: 0;
        padding: 28px 18px 48px;
    }

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

    .projects-display {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .project-slide {
        height: auto;
        grid-template-rows: 250px auto;
    }

    .project-slide.active {
        position: relative;
    }

    .project-image,
    .project-image img {
        height: 250px;
        min-height: 0;
    }

    .project-info {
        height: auto;
        min-height: 0;
        padding: 22px 20px 26px;
        justify-content: flex-start;
    }

    .project-info h3 {
        font-size: clamp(30px, 8vw, 36px);
    }

    .project-info p {
        font-size: 13px;
        line-height: 1.55;
    }

    .projects-controls {
        top: 125px;
        left: 8px;
        right: 8px;
        transform: translateY(-50%);
    }

    .project-progress {
        background: rgba(42, 28, 18, .55);
        padding: 6px 12px;
        border-radius: 20px;
    }

    .projects-cta.active {
        position: relative;
        inset: auto;
        height: auto;
    }

}

@media (max-width: 600px) {

    .testimonial-slider {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "content content"
            "prev next";
        row-gap: 18px;
        column-gap: 12px;
        align-items: center;
    }

    .testimonial-content {
        grid-area: content;
        width: 100%;
        min-height: 0;
    }

    .testimonial-prev {
        grid-area: prev;
        justify-self: start;
    }

    .testimonial-next {
        grid-area: next;
        justify-self: end;
        margin-top: 0;
    }

    .testimonial-text {
        font-size: 16px;
        line-height: 1.6;
    }

    .footer-links {
        justify-content: flex-start;
        gap: 12px 18px;
    }

    .whatsapp-float {
        right: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }

}