/**
 * Typography Styles
 * Section titles, headings, and text styles
 */

/* Section Titles */
.section-title {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 120%;
    color: var(--color-black);
    margin-bottom: 50px;
}

.section-title-white {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: 60px;
    line-height: 120%;
    color: var(--color-white);
    margin-bottom: 50px;
}

/* Responsive Typography */
@media (max-width: 1440px) {
    .section-title,
    .section-title-white {
        font-size: 55px;
        margin-bottom: 45px;
    }
}

@media (max-width: 1366px) {
    .section-title,
    .section-title-white {
        font-size: 52px;
        margin-bottom: 42px;
    }
}

@media (max-width: 1280px) {
    .section-title,
    .section-title-white {
        font-size: 51px;
        margin-bottom: 41px;
    }
}

@media (max-width: 1200px) {
    .section-title,
    .section-title-white {
        font-size: 50px;
        margin-bottom: 40px;
    }
}

@media (max-width: 1024px) {
    .section-title,
    .section-title-white {
        font-size: 48px;
    }
}

@media (max-width: 768px) {
    .section-title,
    .section-title-white {
        font-size: 45px;
        line-height: 120%;
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    .section-title,
    .section-title-white {
        font-size: 32px;
        margin-bottom: 25px;
    }
}