/* ==================================================
   HORIZONTAL OVERFLOW FIX
   Prevent content bleeding outside viewport
   ================================================== */

/* Prevent horizontal scroll but allow vertical */
html {
    overflow-x: hidden;
    overflow-y: auto;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
    max-width: 100vw;
}

/* Ensure all containers don't overflow */
.container,
.container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

/* NAVBAR - Allow dropdown to show */
.navbar,
.navbar .container {
    overflow: visible !important;
}

.dropdown,
.dropdown-menu {
    overflow: visible !important;
}

/* ==================================================
   PILAR BATAS SECTION - SPECIFIC FIXES
   ================================================== */
.pilar-batas-section {
    overflow-x: hidden !important;
    width: 100%;
}

.pilar-content {
    overflow-x: hidden !important;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}

.pilar-illustration {
    max-width: 100%;
    flex-shrink: 0;
    position: relative;
}

.globe-icon {
    position: relative;
    max-width: 100%;
    overflow: visible;
}

/* Constrain arrows to stay within bounds */
.arrow {
    position: absolute;
    max-width: 100px !important;
}

.arrow-1 {
    left: auto !important;
    right: 100% !important;
    margin-right: 1rem !important;
}

.arrow-2 {
    right: auto !important;
    left: 100% !important;
    margin-left: 1rem !important;
}

.pilar-list {
    max-width: 100%;
    overflow-x: hidden !important;
    flex: 1;
    min-width: 0;
}

.pilar-item {
    max-width: 100%;
    overflow-x: hidden !important;
    word-wrap: break-word;
}

.pilar-info {
    max-width: 100%;
    overflow-wrap: break-word;
}

.pilar-info h3,
.pilar-info p {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ==================================================
   OTHER SECTIONS
   ================================================== */

/* Fix news carousel overflow */
.news-carousel-wrapper {
    overflow-x: hidden;
    max-width: 100%;
}

/* Ensure sections don't overflow */
section {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Fix specific sections */
.hero-slider,
.services-section,
.stats-section,
.news-section,
.facilities-section,
.about-section {
    max-width: 100vw;
    overflow-x: hidden;
}

/* ==================================================
   RESPONSIVE FIXES
   ================================================== */
@media (max-width: 1200px) {
    .pilar-content {
        flex-direction: column;
        align-items: center;
    }

    .pilar-list {
        width: 100%;
    }

    .pilar-illustration {
        margin-bottom: 2rem;
    }

    /* Hide arrows on smaller screens to prevent overflow */
    .arrow {
        display: none !important;
    }
}

@media (max-width: 768px) {

    /* Ensure padding doesn't cause overflow */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .pilar-item {
        padding: 1rem;
    }

    /* Fix news carousel for mobile */
    .news-carousel {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 480px) {
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}