/* Contact section */

.contact {
    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        linear-gradient(
            160deg,
            var(--bg-color) 0%,
            #142906 100%
        );
}


.contact-container {
    display: grid;

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

    align-items: center;

    gap: var(--space-xl);

    width:
        min(
            100%,
            var(--container-width)
        );

    margin-inline: auto;
}


.contact-box h2 {
    font-size:
        clamp(3.2rem, 5vw, 4.5rem);

    line-height: 1.2;
}


.contact-box .desc {
    margin:
        var(--space-sm)
        0
        var(--space-md);

    font-size:
        var(--font-size-base);

    line-height: 1.7;
}


/* Contact details */

.contact-detail {
    display: flex;
    align-items: center;

    gap: var(--space-sm);

    margin-block:
        var(--space-md);
}


.contact-detail i {
    display: inline-flex;

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

    flex-shrink: 0;

    width: 5.5rem;
    height: 5.5rem;

    background:
        var(--second-bg-color);

    border-radius:
        var(--border-radius-sm);

    color:
        var(--main-color);

    font-size: 3rem;
}


.contact-detail .detail p {
    font-size:
        var(--font-size-base);

    line-height: 1.5;
}


.contact-detail .detail p:first-child {
    color:
        var(--main-color);

    font-weight: 600;
}


.contact-detail .detail a {
    transition:
        color var(--transition-normal);
}


.contact-detail .detail a:hover {
    color:
        var(--main-color);
}


/* WhatsApp CTA */

.contact-action-box {
    display: flex;

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

    min-height: 30rem;

    padding:
        var(--space-xl)
        var(--space-md);

    background:
        var(--second-bg-color);

    border:
        0.2rem solid transparent;

    border-radius:
        var(--border-radius-md);

    text-align: center;

    transition:
        border-color var(--transition-normal);
}


.contact-action-box:hover {
    border-color:
        var(--main-color);
}


.cta-content {
    width:
        min(
            100%,
            50rem
        );
}


.cta-content h3 {
    margin-bottom:
        var(--space-sm);

    font-size:
        var(--font-size-subheading);

    line-height: 1.2;
}


.cta-content p {
    margin-bottom:
        var(--space-lg);

    font-size:
        var(--font-size-base);

    line-height: 1.7;
}


.whatsapp-btn {
    display: inline-flex;

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

    gap: var(--space-xs);

    min-height: 5rem;

    padding-inline: var(--space-md);

    max-width: 100%;

    border:
        0.2rem solid
        var(--main-color);

    border-radius:
        var(--border-radius-sm);

    background:
        var(--main-color);

    color:
        var(--bg-color);

    font-size:
        var(--font-size-base);

    font-weight: 600;

    white-space: normal;
    text-align: center;

    transition:
        background var(--transition-normal),
        color var(--transition-normal);
}


.whatsapp-btn:hover {
    background: transparent;

    color:
        var(--main-color);
}


.whatsapp-btn i {
    font-size: 2.4rem;
}


/* Tablet */

@media (max-width: 768px) {

    .contact-container {
        grid-template-columns: 1fr;

        gap:
            var(--space-lg);
    }


    .contact-box:first-child {
        width:
            min(
                100%,
                60rem
            );

        margin-inline: auto;
    }


    .contact-action-box {
        width:
            min(
                100%,
                60rem
            );

        min-height: auto;

        margin-inline: auto;
    }
}


/* Mobile */

@media (max-width: 520px) {

    .contact-container {
        gap:
            var(--space-md);
    }


    .contact-box .desc,
    .contact-detail .detail p,
    .cta-content p {
        font-size:
            var(--font-size-small);
    }


    .contact-detail i {
        width: 4.8rem;
        height: 4.8rem;

        font-size: 2.6rem;
    }


    .contact-action-box {
        padding:
            var(--space-lg)
            var(--space-sm);
    }


    .whatsapp-btn {
        width: 100%;

        white-space: normal;
    }
}