/* --- General Responsive Layout --- */

/* Tablets & Below (max-width: 991px) */
@media (max-width: 991px) {
    .navbar .navbar-brand picture {
        width: clamp(120px, 12vw, 150px);
    }

    /* Offcanvas Styling */
    .offcanvas-end {
        width: 100% !important;
        background-color: #101e30 !important;
        /* Dark Theme matching header/footer */
        border-left: none;
    }

    .offcanvas-header {
        padding: 1.5rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .offcanvas-header .btn-close {
        filter: brightness(0) invert(1);
        font-size: 1.25rem;
        opacity: 0.8;
    }

    .offcanvas-header .navbar-brand img {
        filter: brightness(0) invert(1);
        height: 35px;
        /* Clean, smaller logo for mobile */
        width: auto;
    }

    .offcanvas-body {
        padding: 0 !important;
        /* Crucial for full-width borders */
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow-x: hidden;
    }

    #navigation_bar .navbar-nav {
        display: flex;
        flex-direction: column;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        height: 100%;
    }

    #navigation_bar .navbar .nav-item {
        width: 100% !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Remove border from the last nav item before the button */
    #navigation_bar .navbar-nav .nav-item:nth-last-child(2) {
        border-bottom: none;
    }

    /* Vertical Centering logic for the links block */
    #navigation_bar .navbar .nav-item:first-child {
        margin-top: auto;
    }

    #navigation_bar .navbar .nav-item:nth-last-child(2) {
        margin-bottom: auto;
    }

    #navigation_bar .navbar .nav-item {
        display: block !important;
        height: auto !important;
    }

    #navigation_bar .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        opacity: 1 !important;
        visibility: visible !important;
        display: none;
        transform: none !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-top: 0 !important;
        border: none !important;
        transition: none !important;
    }

    #navigation_bar .dropdown-menu.show {
        display: block !important;
    }

    #navigation_bar .dropdown-item {
        padding: 1rem 2.5rem !important;
        color: rgba(255, 255, 255, 0.8) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        font-size: 1rem !important;
    }

    #navigation_bar .dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
        color: #fff !important;
        padding-left: 2.8rem !important;
    }

    #navigation_bar .dropdown-toggle::after {
        float: right;
        margin-top: 5px;
    }

    #navigation_bar .navbar .nav-link {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 1.1rem;
        font-weight: 500;
        letter-spacing: 0.03em;
        padding: 1.25rem 1.5rem !important;
        /* Padding inside the link */
        width: 100%;
        transition: all 0.3s ease;
        display: block;
    }

    #navigation_bar .navbar .nav-link:hover,
    #navigation_bar .navbar .nav-link.active {
        color: #fff !important;
        background-color: rgba(255, 255, 255, 0.03);
        padding-inline-start: 1.8rem !important;
    }

    /* Proper Full Pill Action Button */
    #navigation_bar .navbar .contact-us-btn {
        margin-top: auto !important;
        padding: 2.5rem 1.5rem !important;
        width: 100% !important;
        background-color: transparent !important;
        border: none !important;
    }

    #navigation_bar .navbar .contact-us-btn a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background-color: #fff !important;
        color: #101e30 !important;
        width: 100% !important;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        border-radius: 50px !important;
        /* Perfect Pill */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    #navigation_bar .navbar .contact-us-btn:hover a {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        border: 1px solid #fff !important;
        transform: translateY(-3px);
    }

    #navigation_bar .navbar .nav-item:not(:last-child)::after {
        display: none;
    }

    /* About Responsive */
    .about-section {
        padding: 80px 0;
    }

    .about-top-row {
        margin-bottom: 2.5rem;
        flex-direction: column;
    }

    .about-main-title {
        margin-top: 0.75rem;
        font-size: 2rem;
    }

    .about-text-content,
    .about-landscape-wrapper {
        padding-left: 0;
    }

    .portrait-col {
        margin-bottom: 2rem;
    }

    .about-text-content {
        margin-bottom: 2.5rem;
    }

    .about-portrait-wrapper {
        margin-inline-start: 0;
    }

    /* Hero Responsive */
    .hero-section br {
        display: none !important;
    }

    .hero-content-container {
        padding-top: 80px;
        padding-bottom: 15vh;
    }

    .hero-right-side {
        position: absolute !important;
        left: var(--container-offset);
        right: var(--container-offset);
        bottom: 170px;
        width: auto;
        text-align: left;
        z-index: 50;
    }

    .hero-info-text p {
        max-width: 100%;
        margin-bottom: 25px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 1rem;
    }

    .hero-pagination {
        right: 1.5rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .bottom-cta-bar {
        width: 100%;
        height: 100px;
    }

    /* Systems & QA Responsive */


    .systems-section,
    .qa-section {
        padding: 80px 10px;
    }

    .systems-top-bar,
    .qa-top-bar {
        padding: 0 1.5rem;
        margin-bottom: 2.5rem !important;
    }

    .systems-accordion-col,
    .qa-accordion {
        padding: 0 1.5rem;
    }

    .systems-accordion-col {
        padding-bottom: 3rem;
    }

    .system-item,
    .qa-item {
        padding: 1.5rem 0;
    }

    .system-title {
        font-size: 1.5rem;
    }

    .qa-title {
        font-size: 1.3rem;
    }

    .qa-title span {
        margin-right: 0;
    }

    /* Contact Section Responsive */
    .contact-section {
        padding: 80px 0;
    }

    .contact-content-col {
        text-align: center;
    }

    .contact-title {
        margin-bottom: 1.5rem;
    }

    .contact-description p {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .project-form {
        padding-left: 0;
    }

    /* Footer Responsive */
    .footer {
        padding: 80px 0 40px;
    }

    .footer-brand-col,
    .footer-links-col,
    .footer-social-col {
        text-align: center;
    }

    .footer-logo {
        margin-bottom: 2rem;
    }

    .footer-description p {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-title {
        margin-bottom: 1.5rem;
        margin-top: 1rem;
    }

    .footer-social-links {
        justify-content: center;
    }

    /* Featured Projects Responsive */
    .projects-featured-section {
        padding: 80px 0;
        text-align: center;
    }

    .projects-featured-title {
        margin-bottom: 2rem;
    }

    .projects-featured-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-bottom {
        text-align: center;
        padding-top: 2rem;
    }

    .offcanvas {
        height: 100vh;
    }
}

/* Landscape Mobile (max-width: 991px) */
@media (max-width: 991px) and (orientation: landscape) {
    .hero-section {
        height: 100vh;
        min-height: 320px;
    }

    .hero-content-container {
        padding-top: 50px !important;
        padding-bottom: 60px !important;
    }

    .hero-title h1,
    .hero-title h2 {
        font-size: clamp(1.5rem, 5vh + 10vw, 2rem) !important;
        margin-bottom: 0.25rem !important;
    }

    .hero-subtitle p {
        font-size: 0.85rem !important;
        margin-top: 0 !important;
    }

    .hero-right-side {
        bottom: 90px !important;
        left: var(--container-offset) !important;
        right: var(--container-offset) !important;
        max-width: calc(100% - 40px) !important;
        text-align: left !important;
        position: absolute !important;
    }
    
    .banner-progress-outer {
        bottom: 70px !important;
        left: 15px !important;
    }

    .hero-info-text p {
        font-size: 0.7rem !important;
        margin-bottom: 0 !important;
        line-height: 1.3 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .hero-pagination {
        right: 15px !important;
        top: 45% !important;
        gap: 8px !important;
    }

    .bottom-cta-bar {
        height: 60px !important;
    }

    .cta-item span {
        font-size: 0.8rem !important;
    }
}

/* Small Devices Portrait (max-width: 575px) */
@media (max-width: 575px) {
    .about-section {
        padding: 60px 0;
    }

    .about-main-title {
        font-size: 1.7rem;
    }

    .hero-content-container {
        padding-bottom: 28vh;
    }

    .hero-right-side {
        bottom: 150px;
        left: 20px;
        right: 20px;
        max-width: calc(100% - 40px);
    }

    .hero-info-text p {
        font-size: 0.85rem;
    }

    .hero-pagination {
        bottom: 110px !important;
        right: 1.2rem !important;
        top: auto !important;
        transform: none !important;
        flex-direction: row;
        gap: 10px;
    }

    .bottom-cta-bar {
        height: 80px;
    }

    .systems-section,
    .qa-section {
        padding: 60px 10px;
    }

    .systems-top-bar,
    .qa-top-bar {
        padding: 0 1rem;
        margin-bottom: 2rem !important;
    }

    .systems-accordion-col,
    .qa-accordion {
        padding: 0 1rem;
    }

    .systems-accordion-col {
        padding-bottom: 2.5rem;
    }

    .system-item,
    .qa-item {
        padding: 1.25rem 0;
    }

    .system-title {
        font-size: 1.3rem;
    }

    .qa-title {
        font-size: 1.2rem;
    }

    .system-link {
        font-size: 0.7rem;
    }

    .qa-body p {
        max-width: 100%;
        font-size: 0.95rem;
    }

    /* Contact Section Mobile */
    .contact-section {
        padding: 60px 0;
    }

    .contact-title {
        font-size: 1.75rem;
    }

    .btn-submit-project {
        width: 100%;
        padding: 1.125rem 2rem;
    }

    .popup-content {
        padding: 2.5rem 1.5rem;
    }
}

/* Big Screen & Ultrawide Constraints (1600px+) */
@media (min-width: 1600px) {
    .hero-content-container .container {
        max-width: 1400px;
    }

    .hero-right-side {
        right: calc((100% - 1400px) / 2 + 20px);
    }

    .hero-pagination {
        right: calc((100% - 1400px) / 2 + 40px) !important;
    }
}

/* Mac Smoothness & Global Safety - Removal of backdrop-filter to prevent Chrome flickering */
.hero-slide-bg::after {
    backdrop-filter: none !important;
    background-color: rgba(0, 0, 0, 0.15);
    /* Alternative darkening for Mac */
}

/* Global Mac Chrome Anti-Flicker Logic */
.hero-slider,
.swiper-wrapper,
.swiper-slide,
section,
.hero-section,
.system-banner,
.contact-banner {
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    isolation: isolate;
}

/* Prevent white flash between preloader and site content on load */
html,
body {
    background-color: #0b1c31;
    /* Match preloader color */
}

/* --- Added Mobile & Browser Optimizations --- */

/* Touch Optimizations */
@media (hover: none) {
    .series-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    .choose-item:hover {
        transform: none !important;
        background-color: transparent !important;
    }
}

/* Ensure full height on mobile browsers */
.hero-section,
.system-banner,
.contact-banner {
    min-height: 80vh;
    min-height: -webkit-fill-available;
}

/* Fix for Safari/Chrome flickering */
.banner-bg img,
.hero-slide-bg img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* Smooth Accordion / Tab Transitions */
.tab-content>.tab-pane {
    transition: opacity 0.35s linear;
}

.accordion-collapse {
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}