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

.contactHero{
    position:relative;
    padding:170px 0 90px;
    text-align:center;
}

.contactHero h1{

    margin-top:20px;
    font-size:56px;
    font-weight:800;
    line-height:1.1;
    color:#fff;

}

.contactHero p{

    max-width:700px;
    margin:24px auto 0;
    font-size:18px;
    line-height:1.8;
    color:#a3a3a3;

}

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

.contactSection{

    position:relative;
    overflow:hidden;
    padding:90px 0 140px;

}

.contactGlow{

    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    filter:blur(140px);
    opacity:.08;
    pointer-events:none;

}

.contactGlowOne{

    top:-120px;
    left:-150px;
    background:#22c55e;

}

.contactGlowTwo{

    bottom:-180px;
    right:-150px;
    background:#16a34a;

}

.contactWrapper{

    display:grid;
    grid-template-columns:360px 1fr;
    gap:40px;
    align-items:start;

}

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

.contactLeft{

    display:flex;
    flex-direction:column;
    gap:24px;

}

.contactCard{

    display:flex;
    align-items:flex-start;
    gap:18px;

    padding:28px;

    background:#111;
    border:1px solid rgba(255,255,255,.07);
    border-radius:22px;

}

.contactIcon{

    width:58px;
    height:58px;

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

    flex-shrink:0;

    border-radius:18px;

    background:linear-gradient(135deg,#22c55e,#16a34a);
    color:#fff;
    font-size:22px;

}

.contactCard h3{

    margin-bottom:8px;
    font-size:19px;
    color:#fff;

}

.contactCard p{

    color:#b4b4b4;
    line-height:1.7;

}

.contactSideCard{

    margin-top:10px;
    padding:34px;

    background:linear-gradient(180deg,#171717,#0d0d0d);

    border:1px solid rgba(255,255,255,.07);
    border-radius:26px;

}

.contactSideCard h3{

    margin-bottom:14px;
    font-size:26px;
    color:#fff;

}

.contactSideCard p{

    color:#a8a8a8;
    line-height:1.8;
    margin-bottom:28px;

}

.contactSecondaryBtn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:52px;
    padding:0 28px;

    border-radius:14px;

    background:#fff;
    color:#111;

    text-decoration:none;
    font-weight:700;
    transition:.25s;

}

.contactSecondaryBtn:hover{

    transform:translateY(-2px);

}

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

.contactRight{

    padding:45px;

    background:#111;

    border:1px solid rgba(255,255,255,.07);
    border-radius:30px;

}

.contactGrid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;

}

.contactField{

    display:flex;
    flex-direction:column;
    gap:10px;

}

.contactField.full{

    grid-column:1/-1;

}

.contactField label{

    color:#fff;
    font-weight:600;
    font-size:15px;

}

.contactField input,
.contactField textarea{

    width:100%;

    padding:16px 18px;

    border:none;
    outline:none;

    border-radius:16px;

    background:#1a1a1a;

    color:#fff;
    font-size:15px;

    transition:.25s;

}

.contactField textarea{

    resize:vertical;
    min-height:180px;

}

.contactField input::placeholder,
.contactField textarea::placeholder{

    color:#7d7d7d;

}

.contactField input:focus,
.contactField textarea:focus{

    background:#202020;
    box-shadow:0 0 0 2px rgba(34,197,94,.35);

}

.contactActions{

    margin-top:34px;

}

.contactSubmit{

    width:100%;
    height:62px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    border:none;
    border-radius:16px;

    cursor:pointer;

    background:linear-gradient(135deg,#22c55e,#16a34a);

    color:#fff;
    font-size:16px;
    font-weight:700;

    transition:.25s;

}

.contactSubmit svg{

    width:20px;
    height:20px;

}

.contactSubmit:hover{

    transform:translateY(-2px);
    box-shadow:0 16px 40px rgba(34,197,94,.28);

}

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

@media(max-width:1000px){

    .contactWrapper{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .contactHero{

        padding:140px 0 70px;

    }

    .contactHero h1{

        font-size:40px;

    }

    .contactHero p{

        font-size:16px;

    }

    .contactRight{

        padding:28px;

    }

    .contactGrid{

        grid-template-columns:1fr;

    }

    .contactField.full{

        grid-column:auto;

    }

}