.contact{
    padding:100px 0;
    background:var(--color-bg-light);
}

.contact-grid{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
    align-items:start;
}

.contact-info h2{
    font-size:2rem;
    font-weight:800;
    color:var(--color-heading);
    margin:20px 0;
}

.contact-info p{
    color:var(--color-text);
    line-height:1.7;
}

.contact-details{
    margin-top:30px;
    display:grid;
    gap:20px;
}

.contact-item{
    background:var(--color-white);
    padding:15px 20px;
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
    border:1px solid var(--color-border);
}

.contact-item strong{
    display:block;
    color:var(--color-heading);
    margin-bottom:5px;
}

.contact-item p{
    margin:0;
    color:var(--color-text-light);
}

/* Right card */
.contact-card{
    background:var(--color-white);
    padding:30px;
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-md);
    border:1px solid var(--color-border);
    position:sticky;
    top:100px;
}

.contact-card h3{
    font-size:1.3rem;
    font-weight:700;
    margin-bottom:10px;
}

.contact-card p{
    color:var(--color-text);
    margin-bottom:20px;
}

.contact-card .btn{
    width:100%;
    margin-bottom:10px;
    text-align:center;
}

.contact-note{
    margin-top:10px;
    font-size:0.85rem;
    color:var(--color-text-light);
    text-align:center;
}

@media (max-width: 1024px){

    .contact-grid{
        grid-template-columns:1.5fr 1fr;
        gap:25px;
    }

    .contact-card{
        top:80px;
    }
}

@media (max-width: 768px){

    .contact{
        padding:70px 0;
    }

    .contact-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .contact-card{
        position:relative; /* IMPORTANT: removes sticky on mobile */
        top:auto;
    }

    .contact-info h2{
        font-size:1.6rem;
    }

    .contact-card{
        padding:25px;
    }
}

@media (max-width: 480px){

    .contact{
        padding:60px 0;
    }

    .contact-item{
        padding:12px 15px;
    }

    .contact-card h3{
        font-size:1.2rem;
    }

    .contact-card p{
        font-size:0.95rem;
    }

    .btn{
        font-size:0.95rem;
        padding:12px 14px;
    }
}