/* ========================================
   GLOBAL RESPONSIVE STYLES - IROKO TOURS
   ======================================== */

/* Base responsive utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 1400px) {
    .container {
        max-width: 1140px;
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: 960px;
        padding: 0 20px;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px;
        padding: 0 15px;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 540px;
        padding: 0 15px;
    }
}

@media (max-width: 576px) {
    .container {
        max-width: 100%;
        padding: 0 15px;
    }
}

/* Responsive text utilities */
@media (max-width: 768px) {
    h1 { font-size: 1.8rem !important; }
    h2 { font-size: 1.6rem !important; }
    h3 { font-size: 1.3rem !important; }
    h4 { font-size: 1.1rem !important; }
    p { font-size: 0.95rem !important; }
}

@media (max-width: 576px) {
    h1 { font-size: 1.5rem !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.2rem !important; }
    h4 { font-size: 1rem !important; }
    p { font-size: 0.9rem !important; }
}

/* Hide/Show utilities */
.hide-mobile { display: block; }
.show-mobile { display: none; }

@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }
}

/* Spacing utilities */
@media (max-width: 768px) {
    .section-padding {
        padding: 50px 0 !important;
    }
}

@media (max-width: 576px) {
    .section-padding {
        padding: 40px 0 !important;
    }

    .mb-5, .my-5 {
        margin-bottom: 2rem !important;
    }

    .mt-5, .my-5 {
        margin-top: 2rem !important;
    }
}

/* Button responsive */
@media (max-width: 576px) {
    .btn {
        padding: 10px 18px !important;
        font-size: 0.9rem !important;
    }

    .btn-lg {
        padding: 12px 24px !important;
        font-size: 1rem !important;
    }
}

/* Grid responsive */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col-12 { flex: 0 0 100%; max-width: 100%; padding: 0 15px; }
.col-6 { flex: 0 0 50%; max-width: 50%; padding: 0 15px; }
.col-4 { flex: 0 0 33.333%; max-width: 33.333%; padding: 0 15px; }
.col-3 { flex: 0 0 25%; max-width: 25%; padding: 0 15px; }

@media (max-width: 768px) {
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }

    .col-4, .col-3, .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .col-sm-12, .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Image responsive */
img {
    max-width: 100%;
    height: auto;
}

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

/* Form responsive */
@media (max-width: 576px) {
    .form-control {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }

    select.form-control {
        font-size: 16px !important;
    }
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

* {
    max-width: 100%;
}