/* Page Content - Responsive Styles */

/* Tablet Large (1200px and below) */
@media (max-width: 1200px) {
    .page-content {
        padding-top: 25px;
        padding-left: 20px;
        padding-right: 20px;
    }

    .page-content h3 {
        font-size: 28px;
        margin-bottom: 18px;
    }

    .styled-container {
        font-size: 17px;
        line-height: 22px;
    }
}

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
    .page-content {
        padding-top: 20px;
    }

    .page-content h3 {
        font-size: 26px;
        margin-bottom: 16px;
    }

    .styled-container {
        font-size: 16px;
        line-height: 21px;
        letter-spacing: -0.8px;
    }
}

/* Tablet Small (768px and below) */
@media (max-width: 768px) {
    .page-content {
        padding-top: 20px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .page-content h3 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .styled-container {
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -0.6px;
        text-align: left;
    }
}

/* Mobile (576px and below) */
@media (max-width: 576px) {
    .page-content {
        padding-top: 15px;
    }

    .page-content h3 {
        font-size: 22px;
        margin-bottom: 14px;
    }

    .styled-container {
        font-size: 15px;
        line-height: 19px;
        letter-spacing: -0.4px;
    }
}

/* Mobile Small (480px and below) */
@media (max-width: 480px) {
    .page-content {
        padding-top: 12px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .page-content h3 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .styled-container {
        font-size: 14px;
        line-height: 18px;
        letter-spacing: -0.3px;
    }
}