/*@media (max-width: 1400px) {
    .hero-vertical-pagination {
        left: 2%;
    }
    .hero-slide {
        background-size: cover;
        background-position: center;
        padding: 100px 0 180px 0;
        min-height: 70vh;
        display: flex;
        align-items: center;
    }
    .navbar .mega-menu-container {
        left: 20%;
    }

}

@media (max-width: 1199px) {
    .hero-title {
        font-size: 3.2rem;
    }
    .hero-slide {
        padding: 120px 0 180px 0;
    }
}

@media (max-width: 991px) {
    .hero-title {
        font-size: 2.8rem;
    }
    .hero-slide {
        text-align: center;
        padding: 100px 0 160px 0;
    }
    .hero-slide .d-flex {
        justify-content: center !important;
    }
    .hero-desc {
        margin: 0 auto 2rem auto;
    }
    .hero-swiper-pagination.swiper-pagination-bullets {
        bottom: 60px !important;
    }
    .has-mega-menu {
        position: relative !important;
    }
    
    .navbar .mega-menu-container {
        position: static;
        width: 100%;
        margin-top: 0;
        padding: 15px;
        box-shadow: none;
        background-color: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
    }
    
    .mega-menu-col {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        padding-right: 0;
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
    
    .mega-menu-title {
        color: var(--primary-orange);
        margin-bottom: 10px;
    }
    
    .mega-link-list li a strong {
        color: #fff;
    }
    
    .mega-link-list li a span {
        color: rgba(255,255,255,0.6);
    }
    
    .mega-feature-card {
        background: rgba(0, 0, 0, 0.2);
        padding: 15px;
        border-radius: 8px;
    }
    .card-body-content h6 {
        color: #fff !important;
    }
    .card-body-content p {
        color: rgba(255,255,255,0.7) !important;
    }
    .navbar .mega-menu-container .col-lg-4.mega-menu-col {
        border-right: 1px solid rgba(0, 0, 0, 0.08);
        padding-right: 35px;
    }
    .border-end {
        border-end: none !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        padding-bottom: 15px;
        margin-bottom: 15px;
    }
}*/

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* 1. Large Desktops & Laptops (Max-width: 1400px) */
@media (max-width: 1400px) {
    .hero-vertical-pagination {
        left: 2%;
    }

    .hero-slide {
        background-size: cover;
        background-position: center;
        padding: 100px 0 180px 0;
        min-height: 70vh;
        display: flex;
        align-items: center;
    }

    .navbar .mega-menu-container {
        left: 20%;
    }
}

/* 2. Standard Desktops & Small Laptops (Max-width: 1199.98px) */
@media (max-width: 1199.98px) {
    .hero-title {
        font-size: 3.2rem;
    }

    .hero-slide {
        padding: 120px 0 180px 0;
    }
}

/* 3. Tablets & Mobile Navigation Trigger (Max-width: 991.98px) */
@media (max-width: 991.98px) {
    /* Hero Section Mobile/Tablet Alignment */
    .hero-title {
        font-size: 2.8rem;
    }

    .hero-slide {
        text-align: center;
        padding: 100px 0 160px 0;
    }

    .hero-slide .d-flex {
        justify-content: center !important;
    }

    .hero-desc {
        margin: 0 auto 2rem auto;
    }

    .hero-swiper-pagination.swiper-pagination-bullets {
        bottom: 60px !important;
    }

    /* Mega Menu Mobile Stacking */
    .has-mega-menu {
        position: relative !important;
    }

    .navbar .mega-menu-container {
        position: static;
        left: auto;
        width: 100%;
        margin-top: 0;
        padding: 15px;
        box-shadow: none;
        background-color: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
    }

    /* Columns & Borders fixed for dark theme context */
    .mega-menu-col,
    .navbar .mega-menu-container .col-lg-4.mega-menu-col {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-right: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .border-end {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding-bottom: 15px;
        margin-bottom: 15px;
    }

    /* Typography & Feature Cards */
    .mega-menu-title {
        color: var(--primary-orange);
        margin-bottom: 10px;
    }

    

    .mega-feature-card {
        background: rgba(0, 0, 0, 0.2);
        padding: 15px;
        border-radius: 8px;
    }

    .card-body-content h6 {
        color: #fff !important;
    }

    /*.card-body-content p {
        color: rgba(255, 255, 255, 0.7) !important;
    }*/
    .navbar-toggler{
        background: #f15823 !important; 
    }
    .offcanvas{
        background: #fff !important;
    }
    .mega-feature-card{
        display: none !important;
    }
    .cta-banner, .site-footer{
        overflow: hidden;
    }
    .btn-close{
        filter: inherit !important;
    }
    .navbar-brand strong {
        padding-left: 42px !important;
    }
    .navbar-brand img {
        height: 52px !important;
    }
}

/* 4. Large Mobile Devices (Max-width: 767.98px) */
@media (max-width: 767.98px) {
    .hero-wave-divider .hero-wave-desktop {
        display: none;
    }

    .hero-wave-divider .hero-wave-mobile {
        display: block;
    }

    .hero-title {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .hero-slide {
        padding: 80px 0 120px 0;
        min-height: 60vh;
    }

    .hero-vertical-pagination {
        display: none; /* Hide vertical pagination on mobile screens to prevent overlap */
    }

    .hero-swiper-pagination.swiper-pagination-bullets {
        bottom: 30px !important;
    }
    .btn i{
        display: none !important;
    }
    .w-50{
        width: 100% !important;
    }
}

/* 5. Small Mobile Devices (Max-width: 575.98px) */
@media (max-width: 575.98px) {
    .hero-title {
        font-size: 1.8rem;
    }

    .hero-slide {
        padding: 60px 15px 100px 15px;
    }

    .navbar .mega-menu-container {
        padding: 10px;
    }
}