/* 
 * RESPONSIVE STYLES 
 * Auto-extracted from style.css
 */

@media (min-width: 992px) {

    .main-header.nav-transparent:not(.is-sticky) .nav-link,
    .main-header.nav-transparent:not(.is-sticky) .lang-current,
    .main-header.nav-transparent:not(.is-sticky) .lang-current .fas {
        color: #ffffff;
    }

    .main-header.nav-transparent:not(.is-sticky) .nav-link:hover {
        color: var(--primary-100);
        opacity: 0.9;
    }

    .main-header.nav-transparent:not(.is-sticky) .lang-current {
        border-color: rgba(255, 255, 255, 0.3);
    }

    .main-header.nav-transparent:not(.is-sticky) .lang-current:hover {
        background: rgba(255, 255, 255, 0.1);
    }

    /* Toggle logo blocks instead of CSS content replacement */
    .main-header.nav-transparent:not(.is-sticky) .nav-logo .logo-default {
        display: none;
    }

    .main-header.nav-transparent:not(.is-sticky) .nav-logo .logo-transparent {
        display: block;
    }

    .navbar-custom.nav-menu-center .nav-menu {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
    }

    .navbar-custom.nav-logo-center .nav-logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
    }

    .navbar-custom.nav-logo-center .nav-menu-left {
        margin-right: auto;
    }

    .navbar-custom.nav-logo-center .nav-right-wrapper {
        margin-left: auto;
    }

    .main-header.nav-transparent:not(.is-sticky) .search-toggle {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.3);
    }

    .main-header.nav-transparent:not(.is-sticky) .search-toggle:hover,
    .main-header.nav-transparent:not(.is-sticky) .nav-search.active .search-toggle {
        background: rgb(255 255 255 / 70%);
        border-color: #fff;
        color: #fff;
    }

    .navbar-custom .dropdown-menu-list {
        min-width: 200px;
        background: #fff;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-xl);
        padding: 0.8rem 0;
        border: 1px solid var(--neutral-100);
    }

    .navbar-custom .dropdown-link {
        padding: 1rem 1.5rem;
        font-size: 1.4rem;
        font-weight: var(--fw-medium);
        color: var(--neutral-700);
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-decoration: none;
        transition: var(--transition-fast);
    }

    .navbar-custom .dropdown-link:hover {
        background: var(--neutral-50);
        color: var(--primary-500);
        padding-left: 3rem;
    }


    /* Recreate the uppercase, bold, dark, small text style */
    .header-with-topbar .nav-menu .nav-link {
        text-transform: uppercase;
        font-weight: var(--fw-bold);
        font-size: var(--fs-xs);
        color: var(--neutral-800) !important;
        /* text-dark */
    }

    .header-with-topbar.nav-transparent:not(.is-sticky) .nav-menu .nav-link {
        color: var(--neutral-800) !important;
        /* Force dark even when transparent, because background is white */
    }

    .header-with-topbar .nav-menu .nav-link:hover {
        color: var(--primary-500) !important;
    }
}

@media (max-width: 991px) {
    .main-header.nav-transparent:not(.is-sticky) .toggle-bar {
        background-color: #ffffff;
    }

    .main-header.nav-transparent:not(.is-sticky) .nav-logo .logo-default {
        display: none;
    }

    .main-header.nav-transparent:not(.is-sticky) .nav-logo .logo-transparent {
        display: block;
    }

    .main-header.nav-transparent:not(.is-sticky) .lang-current,
    .main-header.nav-transparent:not(.is-sticky) .lang-current .fas {
        color: #ffffff;
    }

    .main-header.nav-transparent:not(.is-sticky) .lang-current {
        border-color: rgba(255, 255, 255, 0.3);
    }

    .search-dropdown {
        position: fixed;
        top: 8rem;
        left: 2rem;
        right: 2rem;
        width: auto;
    }

    .main-header.nav-transparent:not(.is-sticky) .search-toggle {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.3);
    }

    .nav-toggle {
        display: flex;
        align-items: flex-start;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 340px;
        height: 100vh;
        background: var(--primary-500);
        flex-direction: column;
        align-items: flex-start;
        padding: 50px 30px;
        transition: var(--transition-slow);
        box-shadow: var(--shadow-xl);
        z-index: 1080;
        gap: 1.5rem;
        overflow-y: auto;
        /* Fix: Allow scrolling if menu is tall */
    }

    .nav-menu.active {
        right: 0;
    }

    /* Contrasting text colors for mobile primary background */
    .nav-menu .nav-link,
    .nav-menu .dropdown-link,
    .nav-menu .megamenu-subtitle {
        color: #fff;
    }

    .nav-menu .nav-link:hover,
    .nav-menu .dropdown-link:hover {
        color: var(--neutral-100);
    }

    .nav-menu .chevron-icon {
        color: rgba(255, 255, 255, 0.7);
    }

    /* Mobile Level 3 / Nested items fix: No click, auto open, no chevron */
    .dropdown-item.has-dropdown>.dropdown-link {
        pointer-events: none;
    }

    .dropdown-item.has-dropdown>.dropdown-link .chevron-icon {
        display: none !important;
    }

    .nav-menu .dropdown-item {
        padding: 1rem 2.6rem;
    }

    .dropdown-menu-list,
    .megamenu-panel {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        display: none;
        padding-left: 1.5rem;
        /* Indent for hierarchy */
        width: 100%;
        background: var(--primary-500);
        /* Differentiate submenu on mobile */
        border-radius: var(--radius-sm);
        margin-top: 1rem;
        padding: 1rem 1.5rem;
    }

    /* Reset Nested Levels for Mobile */
    .dropdown-menu-list .dropdown-menu-list {
        top: 0;
        left: 100%;
        margin-top: 0;
        transform: none;
    }

    .megamenu-panel {
        padding-left: 1.5rem;
        margin-top: 1.5rem;
    }

    .megamenu-sub-group {
        margin-bottom: 2.5rem;
    }

    .megamenu-col {
        margin-bottom: 3rem;
        width: 100%;
    }

    .megamenu-list li {
        margin-bottom: 1rem;
    }

    .megamenu-title {
        color: #fff;
        border-color: rgba(255, 255, 255, 0.2);
        font-size: 1.8rem;
    }

    .megamenu-list a {
        color: rgba(255, 255, 255, 0.9);
        padding: 0.5rem 0;
    }

    .megamenu-list a i {
        color: #fff !important;
    }

    .nav-item.active .dropdown-menu-list,
    .nav-item.active .megamenu-panel {
        display: block;
    }

    .header-with-topbar .nav-menu {
        display: flex !important;
        /* Ensure offcanvas works */
        margin-right: 0;
        gap: 2rem;
    }


    /* Ensure offcanvas uses the same primary color as navbar-solid */
    .header-with-topbar .nav-menu {
        background: var(--primary-500) !important;
    }

    /* Expand submenu background should match primary-500 explicitly */
    .header-with-topbar .nav-menu .dropdown-menu-list {
        background: var(--primary-500) !important;
        border: none !important;
    }

    .header-with-topbar .nav-menu .chevron-icon,
    .header-with-topbar .nav-menu .fas {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .hero-slider-wrapper h1.hero-slide-title,
    .hero-slider-wrapper h2.hero-slide-title {
        font-size: var(--fs-3xl);
    }

    .hero-contact-card {
        display: none;
    }

    .hero-swiper-prev,
    .hero-swiper-next {
        display: none;
    }

    .hero-swiper-pagination {
        left: 0 !important;
        right: auto !important;
        transform: none !important;
    }
}

@media (max-width: 768px) {
    .video-modal-close {
        top: -4.5rem;
        right: 0;
    }
}

@media (max-width: 1199.98px) {
    .header-with-topbar.nav-transparent .container {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .header-with-topbar.nav-transparent .navbar-custom {
        border-radius: 0 !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .header-with-topbar.nav-transparent .topbar {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* -------------------------------------------------------------------------- */
/* ABOUT + SERVICES RESPONSIVE                                                */
/* -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .as-logo-float {
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        bottom: -5rem;
    }

    .as-image-wrapper {
        margin-bottom: 7rem;
    }

    .as-about-row {
        margin-bottom: 5rem;
    }

    .as-heading {
        font-size: 2.9rem !important;
    }

    .mb-8rem {
        margin-bottom: 4.0rem !important;
    }

    .as-swiper-nav {
        margin-top: 2rem;
        justify-content: flex-start;
    }
}

/* -------------------------------------------------------------------------- */
/* PROJECT SECTION RESPONSIVE                                                 */
/* -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .project-content-col {
        padding-left: 5rem;
        padding-right: 3rem;
    }

    .nav-link-light {
        font-size: var(--fs-sm);
        font-weight: var(--fw-bold);
    }
}

@media (max-width: 991px) {
    .project-content-col {
        padding: 6rem var(--spacing-container) !important;
    }

    .project-img-wrapper {
        min-height: 300px;
    }
}

@media (max-width: 575px) {
    .about-services-section {
        padding-top: 6rem;
    }

    .as-services-block {
        padding: 4rem 0 6rem;
    }

    .as-cta-group {
        flex-direction: inherit;
        align-items: flex-start;
    }
}

/* 
 * RESPONSIVE STYLES 
 * Auto-extracted from style.css
 */

@media (max-width: 991px) {
    .project-img-wrapper {
        position: relative;
        width: 100%;
        height: 400px;
        margin-top: 4rem;
    }

    .project-main-img {
        object-fit: contain;
        object-position: center;
    }



    .milestone-year {
        font-size: 2.2rem;
        top: -45px;
    }

    .milestone-container {
        padding-top: 20px;
    }
}

@media (min-width: 768px) {
    .footer-social-links {
        justify-content: flex-end;
    }
}

/* -------------------------------------------------------------------------- */
/* GLightbox Customizations                                                   */
/* -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* .gslide-description.description-bottom {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        background: transparent !important;
        padding: 1.5rem 0 !important;
    } */
    .glightbox-mobile .glightbox-container .gslide-description {
        height: auto !important;
        width: 100%;
        position: absolute;
        bottom: 50px;
        padding: 20px 16px;
        max-width: 100vw !important;
        -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
        order: 2 !important;
        max-height: 78vh;
        overflow: auto !important;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, .75)));
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.75) 100%);
        -webkit-transition: opacity .3s linear;
        transition: opacity .3s linear;
        padding-bottom: 0;
    }

    .gslide-description.description-bottom,
    .gslide-description.description-bottom * {
        color: #ffffff !important;
    }
}

/* Utilities Styles */
@media (min-width: 992px) {
    .glightbox-container .gslide-media.gslide-inline {
        border-radius: 4rem;
        overflow: hidden;
        background: #fff;
        width: 80vw !important;
        /*Default for smaller screens */
        max-width: 980px !important;
    }
}

@media (max-width: 575px) {
    .mgmt-bio-content {
        padding: 2.4rem 0 !important;
    }
}

@media (max-width: 768px) {
    .at-section-title {
        font-size: var(--fs-2xl);
        line-height: var(--lh-tight);
    }

    .pl-title {
        font-family: var(--font-secondary);
        font-size: var(--fs-2xl);
        font-weight: var(--fw-bold);
        color: var(--secondary-900);
        line-height: var(--lh-tight);
        margin-bottom: 0;
    }

    /* textKiriKanan Mobile Fixes */
    .textKiriKanan {
        padding-right: calc(var(--bs-gutter-x) * .5);
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    .textKiriKanan .row {
        margin-bottom: 30px;
    }

    .textKiriKanan:nth-child(odd) .img,
    .textKiriKanan:nth-child(even) .img {
        order: 1 !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
        aspect-ratio: 16 / 9;
    }

    .textKiriKanan:nth-child(odd) .txtSide,
    .textKiriKanan:nth-child(even) .txtSide {
        order: 2 !important;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
        padding: 30px 20px !important;
    }

    /* Hide Swiper Navigation on Mobile */
    .hero-slider .swiper-button-prev,
    .hero-slider .swiper-button-next {
        display: none !important;
    }
}