/* Equal left and right spacing */
.container,
.container-fluid {
    padding-left: clamp(16px, 4vw, 60px);
    padding-right: clamp(16px, 4vw, 60px);
}

/* Reduce max content width for better readability */
.col-lg-9 .container {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}


/* =========================
RESPONSIVE FONT SCALING
========================= */

h1 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
}

h2 {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
}

h3,
h4 {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
}

.fs-5 {
    font-size: clamp(0.95rem, 1.2vw, 1.15rem) !important;
}

.nav-link {
    font-size: clamp(0.9rem, 1vw, 1rem);
}

.bi {
    font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important;
}


/* =========================
SECTION SPACING FIX
========================= */

/* Reduce excessive height on mobile */
@media (max-width: 991px) {

    section.min-vh-100 {
        min-height: auto !important;
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

}

/* Extra small devices */
@media (max-width: 576px) {

    section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

}


/* =========================
SIDEBAR FIX
========================= */

@media (max-width: 991px) {

    .position-sticky {
        position: relative !important;
        min-height: auto !important;
        padding: 20px !important;
    }

}


/* =========================
REMOVE EXTRA WHITESPACE
========================= */

.row {
    margin-left: 0;
    margin-right: 0;
}

[class*="col-"] {
    padding-left: 12px;
    padding-right: 12px;
}


/* =========================
BETTER MOBILE CONTENT SPACING
========================= */

@media (max-width: 768px) {

    .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .col-lg-9 {
        padding-left: 0;
        padding-right: 0;
    }

}


/* =========================
ICON ALIGNMENT FIX
========================= */

.list-unstyled li {
    align-items: flex-start;
}

.list-unstyled li i {
    margin-top: 3px;
}


/* =========================
PREVENT CONTENT OVERFLOW
========================= */

body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}