/**
 * Mobile Responsive Fixes
 * Ensures perfect mobile experience with no horizontal scroll
 */

/* Force no horizontal scroll */
html,
body {
    max-width: 100vw;
    overflow-x: hidden !important;
}

* {
    max-width: 100%;
}

/* Container fixes */
.section,
.row {
    overflow-x: hidden;
    max-width: 100%;
}

/* Prevent rows from causing overflow */
.row {
    margin-left: -15px;
    margin-right: -15px;
}

@media (max-width: 768px) {
    .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    
    .col,
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Image and media fixes */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Slider/Swiper fixes */
.swiper,
.swiper-container {
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

.swiper-wrapper {
    max-width: 100%;
}

/* Package cards on mobile */
@media (max-width: 768px) {
    .package-card,
    .card {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }
}

/* Hero sections */
.hero-section,
.hero-banner {
    overflow: hidden;
    max-width: 100vw;
}

/* Navigation fixes */
@media (max-width: 992px) {
    .navbar {
        overflow: hidden;
    }
    
    .nav-menu {
        left: 0;
        right: 0;
        width: 100%;
    }
}

/* Footer fixes */
@media (max-width: 768px) {
    .footer {
        overflow-x: hidden;
    }
    
    .footer-widgets,
    .footer-bottom {
        width: 100%;
    }
}

/* Padding adjustments for mobile */
@media (max-width: 576px) {
    .section {
        padding: 40px 0;
    }
    
    /* Reduce section title sizes */
    .section-title h2 {
        font-size: 1.75rem;
    }
    
    .section-title p {
        font-size: 0.95rem;
    }
}

/* Button adjustments */
@media (max-width: 480px) {
    .btn-primary,
    .btn-secondary {
        padding: 12px 24px;
        font-size: 0.95rem;
    }
}

/* Prevent forms from causing overflow */
form {
    max-width: 100%;
}

input,
textarea,
select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Grid system mobile fixes */
@media (max-width: 768px) {
    .col-md-4,
    .col-md-6,
    .col-md-8,
    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Table responsiveness */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}