:root {
    --contact-header-offset: 110px;
    --contact-header-offset-tablet: 100px;
    --contact-header-offset-mobile: 88px;
}

/* Page safety */
html {
    scroll-behavior: smooth;
}

body.contact-page {
    overflow-x: hidden;
}

/* Hero section fix */
.contact-hero {
    position: relative;
    min-height: 480px;   
    padding-top: calc(var(--contact-header-offset) + 20px); 
    padding-bottom: 50px;
    display: flex;
    align-items: flex-start; 
    justify-content: center;
}

.contact-hero__content {
    width: 100%;
}

/* Why section fix */
.why-section {
    padding-top: 72px;
    padding-bottom: 72px;
}

.why-section__image {
    min-height: 420px;
    max-height: 520px;
}

/* Prevent overlap on zoom and medium screens */
@media (max-width: 1024px) {
    .contact-hero {
        min-height: 450px;
        padding-top: calc(var(--contact-header-offset-tablet) + 15px);
    }

    .why-section {
        padding-top: 56px;
        padding-bottom: 56px;
    }

    .why-section__image {
        min-height: 360px;
    }
}

/* Mobile fix */
@media (max-width: 767px) {
    .contact-hero {
        min-height: 420px;
        padding-top: calc(var(--contact-header-offset-mobile) + 10px);
    }

    .why-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .why-section__image {
        min-height: 280px;
        max-height: 340px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .contact-hero {
        min-height: 460px;
        padding-top: calc(var(--contact-header-offset-mobile) + 28px);
        padding-bottom: 48px;
    }
}

/* In case navbar is fixed/sticky, this keeps first section visible */
.contact-page .contact-hero h1,
.contact-page .contact-hero p {
    word-break: break-word;
}

/* Better spacing when browser zoom is high */
@media (max-height: 750px) {
    .contact-hero {
        min-height: 540px;
        padding-top: calc(var(--contact-header-offset) + 48px);
    }
}