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

.contact-hero{

    padding:120px 80px 120px;

    background:#111;

    text-align:center;

    position:relative;

    overflow:hidden;
}

.contact-hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at center,
    rgba(198,161,110,0.08),
    transparent 60%);

    pointer-events:none;
}

.contact-hero h1{

    font-size:clamp(60px,8vw,100px);

    line-height:0.95;

    max-width:1100px;

    margin:auto auto 30px;

    font-weight:400;

    color:#fff;

    position:relative;

    z-index:2;
}

.contact-hero p{

    max-width:700px;

    margin:auto;

    line-height:1.9;

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

    position:relative;

    z-index:2;
}

.hero-subtitle{

    color:var(--primary-color) !important;

    letter-spacing:4px;

    margin-bottom:25px !important;

    text-transform:uppercase;

    font-size:14px;
}


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

.contact-intro{

    padding:40px 80px 40px;

    background:#F5F1EA;

    display:grid;

    grid-template-columns:0.5fr 1.5fr;

    gap:80px;
}

.contact-intro-left{

    display:flex;

    align-items:flex-start;
}

.contact-intro-right h2{

    font-size:clamp(25px,5vw,40px);

    line-height:1.08;

    font-weight:400;
}


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

.contact-grid{

    padding:0 80px 40px;

    background:#fff;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

    align-items:start;
    margin-top: 50px;
}

.contact-grid h1{

    grid-column:1/-1;

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

    line-height:1;

    margin-bottom:20px;

    font-weight:400;
}


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

.contact-form-card{

    background:#111;

    padding:70px;

    border-radius:30px;

    box-shadow:
    0 30px 80px rgba(0,0,0,0.18);
}

.contact-form-card .section-tag{

    margin-bottom:50px;

    color:var(--primary-color);
}

.form-group{

    margin-bottom:25px;
}

.form-group input,
.form-group textarea{

    width:100%;

    background:transparent;

    border:none;

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

    padding:18px 0;

    color:#fff;

    font-size:16px;

    outline:none;

    transition:0.4s ease;
}

.form-group textarea{

    resize:none;

    height:140px;
}

.form-group input::placeholder,
.form-group textarea::placeholder{

    color:rgba(255,255,255,0.45);
}

.form-group input:focus,
.form-group textarea:focus{

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


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

.contact-info-wrapper{

    display:flex;

    flex-direction:column;

    gap:40px;
}

.contact-info-card{

    background:#F5F1EA;

    padding:70px;

    border-radius:30px;

    border:1px solid rgba(0,0,0,0.05);

    height:100%;
}

.contact-info-card .section-tag{

    margin-bottom:50px;
}

.contact-item{

    margin-bottom:35px;

    padding-bottom:25px;

    border-bottom:1px solid rgba(0,0,0,0.06);
}

.contact-item:last-child{

    margin-bottom:0;

    padding-bottom:0;

    border-bottom:none;
}

.contact-item h4{

    font-size:14px;

    letter-spacing:3px;

    margin-bottom:15px;

    color:var(--primary-color);
}

.contact-item p{

    font-size:18px;

    line-height:1.9;

    color:#444;
}


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

.contact-map{

    padding:0 80px 40px;

    background:#fff;
}

.contact-map iframe{

    width:100%;

    height:650px;

    border:none;

    border-radius:35px;

    filter:grayscale(100%) contrast(1.05);

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

    transition:0.6s ease;
}

.contact-map iframe:hover{

    filter:grayscale(20%) contrast(1.05);

    transform:scale(1.01);
}


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

.contact-cta{

    padding:160px 80px;

    background:#111;

    text-align:center;
}

.contact-cta h2{

    max-width:1000px;

    margin:auto auto 40px;

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

    line-height:1.05;

    font-weight:400;

    color:#fff;
}


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

@media(max-width:1100px){

    .contact-intro,
    .contact-grid{

        grid-template-columns:1fr;
    }

    .contact-intro{

        gap:40px;
    }

    .contact-grid{

        padding-bottom:100px;
    }
}



@media(max-width:768px){

    .contact-hero,
    .contact-intro,
    .contact-grid,
    .contact-map,
    .contact-cta{

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

    .contact-hero{

        padding-top:180px;

        padding-bottom:100px;
    }

    .contact-hero h1{

        line-height:1.05;
    }

    .contact-hero p{

        font-size:15px;
    }

    .contact-intro{

        padding-top:50px;

        padding-bottom:60px;
    }

    .contact-grid{

        padding-top:20px;

        padding-bottom:80px;
    }

    .contact-grid h1{

        line-height:1.1;
    }

    .contact-form-card,
    .contact-info-card{

        padding:35px 25px;

        border-radius:22px;
    }

    .contact-item p{

        font-size:16px;
    }

    .contact-map iframe{

        height:420px;

        border-radius:25px;
    }

    .contact-cta{

        padding-top:100px;

        padding-bottom:100px;
    }

    .contact-cta h2{

        line-height:1.15;
    }
}