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

.contact-hero{

    padding-top:180px;
    padding-bottom:110px;

}

.contact-hero-content{

    max-width:760px;

    margin:0 auto;

    text-align:center;

}

.contact-hero h1{

    margin-top:20px;
    margin-bottom:28px;

    font-size:clamp(2.8rem,8vw,4.8rem);

    line-height:1.05;

    font-weight:900;

    letter-spacing:-.05em;

    color:var(--primary);

}

.contact-hero p{

    max-width:700px;

    margin:0 auto;

    color:#64748B;

    font-size:1.1rem;

    line-height:1.9;

}

.contact-hero-features{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:16px;

    margin-top:48px;

}

.contact-feature{

    display:flex;

    align-items:center;

    gap:12px;

    padding:16px 22px;

    border:1px solid #E2E8F0;

    border-radius:999px;

    background:var(--white);

    transition:all .35s ease;

}

.contact-feature:hover{

    transform:translateY(-4px);

    border-color:#CBD5E1;

    box-shadow:0 16px 40px rgba(15,23,42,.06);

}

.contact-feature svg{

    width:20px;

    height:20px;

    color:var(--secondary);

    flex-shrink:0;

}

.contact-feature span{

    font-size:.95rem;

    font-weight:700;

    color:var(--primary);

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

.contact{

    padding-bottom:var(--section-padding);

}

.contact-wrapper{

    display: grid;

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

    gap: 48px;

    align-items: start;

}

/* Left */


/* Right */

.contact-info{

    position: sticky;
    top: 120px;

    align-self: start;
    height: fit-content;

}
/* ===========================
   CONTACT FORM
=========================== */

.contact-form{

    width:100%;

    padding:48px;

    border:1px solid #E2E8F0;

    border-radius:28px;

    background:#FFFFFF;

    box-shadow:0 24px 60px rgba(15,23,42,.05);

}

.contact-form-header{

    margin-bottom:40px;
    min-height:170px;

}

.contact-form-header h2{

    margin-top:20px;
    margin-bottom:18px;

    color:var(--primary);

    font-size:2rem;

    line-height:1.2;

    font-weight:800;

    letter-spacing:-.03em;

}

.contact-form-header p{

    color:#64748B;

    font-size:1rem;

    line-height:1.8;

}

.form{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.form-row{

    display:grid;

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

    gap:24px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:10px;

    color:var(--primary);

    font-size:.95rem;

    font-weight:700;

}

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

    width:100%;

    padding:16px 18px;

    border:1px solid #CBD5E1;

    border-radius:14px;

    background:#FFFFFF;

    appearance:none;

    color:var(--primary);

    font-size:1rem;

    font-family:inherit;

    transition:
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s ease;

}

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

    color:#94A3B8;

}

.form-group textarea{

    min-height:190px;

    line-height:1.8;

    resize:vertical;

}

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

    border-color:#94A3B8;

}

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

    outline:none;

    border-color:var(--secondary);

    box-shadow:0 0 0 4px rgba(37,99,235,.10);

}

.contact-form .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:240px;

    margin-top:8px;

}

.contact-form .btn svg{

    width:18px;

    height:18px;

    transition:transform .3s ease;

}

.contact-form .btn:hover svg{

    transform:translateX(4px);

}
/* ===========================
   CONTACT INFORMATION
=========================== */

.contact-card{

    padding:40px;

    border:1px solid #E2E8F0;

    border-radius:28px;

    background:#FFFFFF;

    box-shadow:0 24px 60px rgba(15,23,42,.05);

}

.contact-card h2{

    margin-top:20px;
    margin-bottom:18px;

    color:var(--primary);

    font-size:2rem;

    line-height:1.2;

    font-weight:800;

    letter-spacing:-.03em;

}

.contact-card>p{

    min-height:58px;

    margin-bottom:36px;

    color:#64748B;

    line-height:1.8;

}

/* Contact List */

.contact-info-list{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-bottom:40px;

}

/* Item */

.contact-info-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:20px;

    border:1px solid #E2E8F0;

    border-radius:18px;

    transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;

}

.contact-info-item:hover{

    transform:translateY(-4px);

    border-color:#CBD5E1;

    box-shadow:0 18px 40px rgba(15,23,42,.06);

}

/* Icon */

.contact-info-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    flex-shrink:0;

    border-radius:16px;

    background:rgba(37,99,235,.08);

}

.contact-info-icon svg{

    width:22px;

    height:22px;

    color:var(--secondary);

}

/* Content */

.contact-info-content{

    flex:1;

}

.contact-info-content h3{

    margin-bottom:8px;

    color:var(--primary);

    font-size:1rem;

    font-weight:700;

}

.contact-info-content a,
.contact-info-content span{

    color:#64748B;

    font-size:.96rem;

    line-height:1.8;

    text-decoration:none;

    transition:color .3s ease;

}

.contact-info-content a:hover{

    color:var(--secondary);

}

/* Button */

.contact-card .btn{

    width:100%;

    justify-content:center;

    gap:10px;

}

.contact-card .btn svg{

    width:18px;

    height:18px;

    transition:transform .3s ease;

}

.contact-card .btn:hover svg{

    transform:translateX(4px);

}
/* ===========================
   CONTACT MAP
=========================== */

.contact-map{

    padding-bottom:var(--section-padding);

}

.map-wrapper{

    overflow:hidden;

    border:1px solid #E2E8F0;

    border-radius:28px;

    background:#FFFFFF;

    box-shadow:0 24px 60px rgba(15,23,42,.05);

}

.map-wrapper iframe{

    display:block;

    width:100%;

    height:520px;

    border:0;

}