/* PAGE SPECIFIC STYLES - tjenester.css */

.hero-tjenester {
    padding-top: 1rem; /* Adjusted for better spacing below header */
    padding-bottom: 3rem;
    text-align: center; /* Keep this section centered */
}

.hero-tjenester .section-title {
    color: var(--color-primary); /* Ensures the title is green */
    margin-bottom: 1.5rem;
}

.hero-tjenester p {
    color: var(--color-primary); /* Ensures the paragraph text is green */
    font-size: 1.4rem;
    line-height: 1.6;
    max-width: 800px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto;
}

.services-grid-section {
    padding-top: 3rem;
    padding-bottom: 1rem;
}

/* Specific styling for CTA in tjenester.html to left-align text and adjust sizes */
.cta-bottom-section { /* Flyttet padding-top/bottom til selve seksjonen */
    padding-top: 0rem; /* Gir luft over innholdet i CTA-seksjonen */
    padding-bottom: 10rem; /* Gir luft under innholdet i CTA-seksjonen */
    text-align: left; /* Behold denne for å sikre venstrejustering av innholdet i containeren */
}

.cta-bottom-section.light-beige-bg {
    /* Bakgrunnsfargen skal fortsatt gjelde for hele seksjonen */
    background-color: var(--color-background-light); /* Eller var(--color-beige); */
}


.cta-bottom-section .section-title {
    color: var(--color-primary);
    text-align: left;
}

.cta-bottom-section .cta-description {
    color: var(--color-primary);
    font-size: 1.5rem;
    max-width: 50rem;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

.cta-bottom-section .btn-primary {
    font-size: 1.4rem;
    padding: 1rem 2.5rem;
    margin-top: 3rem;
    /* Fjernet: text-align: center; (fordi den skal på forelderen) */
}

/* OVERSTYRER margin-top: auto på .main-footer fra layout.css
   KUN for tjenester.html (eller sider der du vil ha fast mellomrom) */
.main-footer {
    margin-top: 5rem; /* Gir et fast mellomrom på 5rem over footeren */
}

/* Responsive adjustments for tjenester.css specific elements */
@media (max-width: 992px) {
    .hero-tjenester {
        padding-top: 8rem;
    }
    .hero-tjenester .section-title {
        font-size: 2.5rem;
    }

    .hero-tjenester p {
        font-size: 1.1rem;
    }

    .cta-bottom-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .cta-bottom-section .cta-description {
        font-size: 1.2rem;
    }
    .cta-bottom-section .btn-primary {
        font-size: 1.1rem;
        padding: 0.9rem 2rem;
    }

    .main-footer {
        margin-top: 4rem; /* Juster for nettbrett */
    }
}

@media (max-width: 767px) {
    .hero-tjenester {
        padding-top: 2rem;
    }
    .hero-tjenester .section-title {
        font-size: 2rem;
    }
    .hero-tjenester p {
        font-size: 1rem;
        padding: 0 15px;
    }

    .cta-bottom-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
        text-align: center; /* VELDIG VIKTIG: Denne sentrerer knappen! */
    }

    .cta-bottom-section .cta-description {
        font-size: 1.1rem;
        text-align: center; /* Senter beskrivelsen */
    }
    .cta-bottom-section .btn-primary {
        font-size: 1rem;
        padding: 0.8rem 1.8rem;
        display: inline-block; /* Denne er også nødvendig for at text-align på forelderen skal virke */
        /* Fjernet: text-align: center; */
    }

    .main-footer {
        margin-top: 3rem; /* Juster for mobil */
    }
}

@media (max-width: 480px) {
    .hero-tjenester {
        padding-top: 0rem;
    }
    .hero-tjenester .section-title {
        font-size: 1.5rem;
    }
    .hero-tjenester p {
        font-size: 1.1rem;
    }

    .cta-bottom-section {
        padding-top: 1rem;
        padding-bottom: 2rem;
        text-align: center; /* VELDIG VIKTIG: Denne sentrerer knappen! */
    }

    .cta-bottom-section .section-title {
        text-align: center;
    }
    .cta-bottom-section .cta-description {
        font-size: 1rem;
        text-align: center;
    }
    .cta-bottom-section .btn-primary {
        font-size: 0.9rem;
        padding: 0.7rem 1.5rem;
        display: inline-block; /* Denne er også nødvendig for at text-align på forelderen skal virke */
        /* Fjernet: text-align: center; */
    }

    .main-footer {
        margin-top: 2rem; /* Juster for små mobiler */
    }
}