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

.contact-section{

    position:relative;

    padding:8rem 0;

}

.contact-content{

    display:grid;

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

    gap:2rem;

    margin-top:4rem;

}

.contact-card{

    background:rgba(255,255,255,0.03);

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

    backdrop-filter:blur(20px);

    border-radius:24px;

    padding:2rem;

    transition:all .35s ease;

}

.contact-card:hover{

    transform:translateY(-6px);

    border-color:rgba(89,163,255,.35);

    box-shadow:0 20px 50px rgba(36,110,255,.15);

}

.contact-card h3{

    margin-bottom:1.5rem;

    font-size:1.3rem;

}

.availability-list{

    display:flex;

    flex-direction:column;

    gap:1rem;

    list-style:none;

    padding:0;

    margin:0;

}

.availability-list li{

    color:var(--text-secondary);

}

.contact-links{

    display:flex;

    flex-direction:column;

    gap:1.25rem;

}

.contact-link{

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-decoration:none;

    color:inherit;

    padding-bottom:.75rem;

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

    transition:.25s ease;

}

.contact-link:last-child{

    border-bottom:none;

}

.contact-link:hover{

    color:var(--accent-color);

}

.contact-label{

    color:var(--text-secondary);

    font-size:.95rem;

}

.contact-value{

    font-weight:600;

}

.contact-actions{

    display:flex;

    justify-content:center;

    gap:1rem;

    margin-top:2rem;

    flex-wrap:wrap;

}

.primary-button,
.secondary-button{

    padding:1rem 2rem;

    border-radius:14px;

    text-decoration:none;

    transition:.3s ease;

}

.primary-button{

    background:var(--accent-color);

    color:#fff;

}

.primary-button:hover{

    transform:translateY(-3px);

}

.secondary-button{

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

    color:var(--text-primary);

}

.secondary-button:hover{

    border-color:var(--accent-color);

    color:var(--accent-color);

}

@media (max-width:900px){

    .contact-content{

        grid-template-columns:1fr;

    }

    .contact-link{

        flex-direction:column;

        align-items:flex-start;

        gap:.35rem;

    }

    .contact-actions{

        flex-direction:column;

    }

    .primary-button,
    .secondary-button{

        width:100%;

        text-align:center;

    }

}