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

.contact{

    padding:120px 0;

    background:#ffffff;

}


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

.contact-grid{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:60px;

    align-items:start;

    margin-top:70px;

}


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

.contact-info{

    display:flex;

    flex-direction:column;

    gap:25px;

}


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

.contact-card{

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:28px;

    background:#fff;

    border-radius:20px;

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

    transition:.35s ease;

}

.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(0,0,0,.12);

}


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

.contact-icon{

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:var(--primary);

    color:#fff;

    font-size:28px;

    flex-shrink:0;

}


/* ==========================================
   CARD CONTENT
========================================== */

.contact-card h3{

    font-size:20px;

    margin-bottom:8px;

    color:var(--dark);

}

.contact-card p{

    color:var(--gray);

    line-height:1.8;

}


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

.contact-form-wrapper{

    background:#fff;

    padding:40px;

    border-radius:24px;

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

}


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

.contact-form{

    display:flex;

    flex-direction:column;

    gap:22px;

}


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

.form-group{

    width:100%;

}


/* ==========================================
   INPUTS
========================================== */

.contact-form input,
.contact-form select,
.contact-form textarea{

    width:100%;

    padding:18px 20px;

    border:1px solid #d9d9d9;

    border-radius:14px;

    font-family:inherit;

    font-size:16px;

    color:var(--dark);

    background:#fff;

    transition:.3s ease;

    resize:none;

}


/* ==========================================
   FOCUS
========================================== */

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(255,120,0,.15);

}


/* ==========================================
   PLACEHOLDER
========================================== */

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

    color:#9ca3af;

}


/* ==========================================
   SELECT
========================================== */

.contact-form select{

    cursor:pointer;

}


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

.contact-btn{

    align-self:flex-start;

    padding:16px 42px;

    border:none;

    cursor:pointer;

}


/* ==========================================
   BUTTON HOVER
========================================== */

.contact-btn:hover{

    transform:translateY(-3px);

}


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

@media (max-width:992px){

    .contact{

        padding:100px 0;

    }

    .contact-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

}


@media (max-width:768px){

    .contact{

        padding:80px 0;

    }

    .contact-form-wrapper{

        padding:30px;

    }

    .contact-card{

        padding:24px;

    }

}


@media (max-width:480px){

    .contact{

        padding:70px 0;

    }

    .contact-form-wrapper{

        padding:22px;

        border-radius:18px;

    }

    .contact-card{

        padding:20px;

        border-radius:18px;

    }

    .contact-icon{

        width:55px;

        height:55px;

        font-size:24px;

    }

    .contact-btn{

        width:100%;

        text-align:center;

    }

}


/* ==========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion:reduce){

    .contact-card,
    .contact-btn,
    .contact-form input,
    .contact-form select,
    .contact-form textarea{

        transition:none !important;

    }

}

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

.contact-link{

    display:inline-block;

    margin-top:8px;

    color:var(--primary);

    font-weight:600;

    transition:.3s;

}

.contact-link:hover{

    letter-spacing:.5px;

}


/* ==========================================
   SOCIAL
========================================== */

.contact-social{

    margin-top:15px;

}

.contact-social h3{

    margin-bottom:18px;

    font-size:22px;

}


/* ==========================================
   SOCIAL ICONS
========================================== */

.social-icons{

    display:flex;

    gap:15px;

}

.social-icons a{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:.35s ease;

}

.social-icons a:hover{

    transform:translateY(-5px);

    box-shadow:0 12px 25px rgba(0,0,0,.15);

}

/* ==========================================
   CONTACT BUTTON LOADING
========================================== */

.contact-btn{

    min-width:190px;

    transition:.3s ease;

}

.contact-btn:disabled{

    opacity:.8;

    cursor:not-allowed;

}

.alert{

    padding:15px;

    border-radius:8px;

    margin-bottom:20px;

}

.alert-success{

    background:#dcfce7;

    color:#166534;

}

.alert-danger{

    background:#fee2e2;

    color:#991b1b;

}

/* ==========================================
   GOOGLE RECAPTCHA
========================================== */

.recaptcha-wrapper {
    margin-top: 5px;
    margin-bottom: 25px;
}

.recaptcha-wrapper .g-recaptcha {
    display: inline-block;
}