/* KBFC UAE - Complete Mobile-First Responsive Solution */\n\n/* Global Reset and Base Styles */\n* {\n    box-sizing: border-box;\n}\n\nhtml, body {\n    overflow-x: hidden;\n    width: 100%;\n    max-width: 100vw;\n}\n\nbody {\n    font-size: clamp(0.875rem, 2.5vw, 1rem);\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    -ms-text-size-adjust: 100%;\n}\n\n/* Container Responsive */\n.container {\n    width: 100%;\n    max-width: 100%;\n    padding: clamp(0.5rem, 2vw, 1.5rem);\n    margin: 0 auto;\n}\n\n@media (min-width: 1200px) {\n    .container {\n        max-width: 1200px;\n    }\n}\n\n/* Prevent Horizontal Scrolling */\n.row {\n    margin-left: 0;\n    margin-right: 0;\n    max-width: 100%;\n}\n\n.col,\n[class*=\"col-\"] {\n    padding-left: clamp(0.5rem, 1.5vw, 0.75rem);\n    padding-right: clamp(0.5rem, 1.5vw, 0.75rem);\n}\n\n/* Navigation Mobile-First */\n.navbar {\n    padding: clamp(0.5rem, 1.5vw, 1rem) 0;\n    min-height: auto;\n}\n\n.navbar-brand {\n    font-size: clamp(0.9rem, 3vw, 1.6rem) !important;\n    letter-spacing: clamp(1px, 0.5vw, 2px) !important;\n}\n\n.navbar-brand img {\n    height: clamp(40px, 8vw, 80px) !important;\n    width: auto;\n    max-width: 100%;\n}\n\n.navbar-nav .nav-link {\n    font-size: clamp(0.75rem, 2vw, 0.85rem) !important;\n    padding: clamp(0.5rem, 1.5vw, 0.6rem) clamp(0.6rem, 1.8vw, 0.8rem) !important;\n    letter-spacing: clamp(0.5px, 0.3vw, 1.5px) !important;\n}\n\n/* Mobile Navigation Collapse */\n@media (max-width: 768px) {\n    .navbar-toggler {\n        border: 1px solid rgba(255, 255, 255, 0.3);\n        padding: 0.5rem;\n    }\n    \n    .navbar-collapse {\n        background: rgba(10, 15, 28, 0.95);\n        border-radius: 8px;\n        padding: 1rem;\n        margin-top: 0.5rem;\n        width: 100%;\n    }\n    \n    .navbar-nav .nav-link {\n        padding: 0.75rem 1rem !important;\n        margin: 0 !important;\n        border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n        width: 100%;\n        text-align: left;\n    }\n    \n    .navbar-nav .nav-link:last-child {\n        border-bottom: none;\n    }\n}\n\n/* Hero Section Responsive */\n.hero-title {\n    font-size: clamp(1.6rem, 6vw, 3rem) !important;\n    letter-spacing: clamp(1px, 0.8vw, 4px) !important;\n    line-height: 1.2;\n    margin-bottom: clamp(1rem, 3vw, 2rem);\n    word-break: keep-all;\n    hyphens: none;\n    overflow-wrap: normal;\n}\n\n.hero-subtitle {\n    font-size: clamp(1rem, 3.5vw, 1.5rem) !important;\n    letter-spacing: clamp(0.5px, 0.4vw, 2px) !important;\n    margin-bottom: clamp(0.75rem, 2vw, 1.25rem);\n}\n\n.hero-tagline {\n    font-size: clamp(0.9rem, 2.8vw, 1.3rem) !important;\n    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);\n}\n\n/* Prevent Text Breaking on Mobile */\n@media (max-width: 768px) {\n    .hero-title {\n        font-size: clamp(1.4rem, 7vw, 2.2rem) !important;\n        letter-spacing: clamp(0.5px, 1vw, 2px) !important;\n        line-height: 1.1;\n        word-break: normal;\n        overflow-wrap: break-word;\n        hyphens: auto;\n    }\n    \n    .hero-title br {\n        display: none;\n    }\n}\n\n/* Card Responsive */\n.card {\n    border-radius: clamp(10px, 2vw, 20px);\n    margin-bottom: clamp(1rem, 4vw, 2.5rem);\n    width: 100%;\n    max-width: 100%;\n}\n\n.card-header {\n    padding: clamp(1.5rem, 4vw, 2.5rem);\n    border-radius: clamp(10px, 2vw, 20px) clamp(10px, 2vw, 20px) 0 0 !important;\n}\n\n.card-body {\n    padding: clamp(1.5rem, 4vw, 2.5rem);\n}\n\n.card-header h3 {\n    font-size: clamp(1.2rem, 3.5vw, 1.8rem);\n    letter-spacing: clamp(1px, 0.5vw, 3px);\n}\n\n/* Form Elements Mobile-First */\n.form-control, .form-select {\n    padding: clamp(0.75rem, 2.5vw, 1rem);\n    font-size: clamp(0.875rem, 2.5vw, 1rem);\n    border-radius: clamp(8px, 2vw, 12px);\n    width: 100%;\n    max-width: 100%;\n}\n\n.form-label {\n    font-size: clamp(0.8rem, 2.2vw, 1rem);\n    letter-spacing: clamp(0.5px, 0.2vw, 1px);\n    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);\n}\n\n/* Button Responsive */\n.btn {\n    padding: clamp(0.75rem, 2.5vw, 1rem) clamp(1.5rem, 4vw, 2rem);\n    font-size: clamp(0.8rem, 2.2vw, 1rem);\n    border-radius: clamp(6px, 1.5vw, 8px);\n    max-width: 100%;\n    word-wrap: break-word;\n    min-height: 44px; /* Touch target size */\n}\n\n.btn-primary {\n    border-radius: clamp(8px, 2vw, 12px);\n    letter-spacing: clamp(1px, 0.5vw, 3px);\n}\n\n.cta-button {\n    padding: clamp(1rem, 3.5vw, 1.125rem) clamp(2rem, 6vw, 2.5rem);\n    font-size: clamp(0.9rem, 2.5vw, 1.1rem);\n    border-radius: clamp(8px, 2vw, 12px);\n    letter-spacing: clamp(1px, 0.5vw, 3px);\n    text-decoration: none;\n    display: inline-block;\n    text-align: center;\n}\n\n@media (max-width: 768px) {\n    .cta-button {\n        width: 100%;\n        margin-bottom: 1rem;\n    }\n}\n\n/* Image Responsive */\nimg {\n    max-width: 100%;\n    height: auto;\n    display: block;\n}\n\n.img-fluid {\n    max-width: 100%;\n    height: auto;\n}\n\n/* Section Headings */\nh5 {\n    font-size: clamp(1.1rem, 3vw, 1.4rem);\n    letter-spacing: clamp(1px, 0.4vw, 2px);\n    margin-top: clamp(1.5rem, 4vw, 2rem);\n    margin-bottom: clamp(1rem, 3vw, 1.25rem);\n}\n\n/* Table Responsive */\n.table-responsive {\n    font-size: clamp(0.75rem, 2vw, 0.85rem);\n    overflow-x: auto;\n    -webkit-overflow-scrolling: touch;\n}\n\n/* Mobile Specific Adjustments */\n@media (max-width: 768px) {\n    /* Reduce spacing for mobile */\n    .mb-5 {\n        margin-bottom: 2rem !important;\n    }\n    \n    .mt-5 {\n        margin-top: 2rem !important;\n    }\n    \n    .py-5 {\n        padding-top: 2rem !important;\n        padding-bottom: 2rem !important;\n    }\n    \n    /* Hero section mobile spacing */\n    .row.align-items-center.mb-5 {\n        margin-bottom: 2rem !important;\n    }\n    \n    .col-lg-8, .col-lg-4 {\n        margin-bottom: 1.5rem;\n    }\n    \n    /* Internal cards mobile */\n    .internal-card {\n        padding: 1.5rem;\n        margin-bottom: 1rem;\n    }\n    \n    /* Form mobile improvements */\n    .form-check-inline {\n        display: block;\n        margin-bottom: 0.5rem;\n    }\n    \n    .form-check-input {\n        width: 1.25em;\n        height: 1.25em;\n        margin-right: 0.5rem;\n    }\n    \n    .row .col-md-6,\n    .row .col-md-4,\n    .row .col-md-12 {\n        margin-bottom: 1rem;\n    }\n    \n    /* Jersey details mobile fix */\n    .col-md-4 .form-label {\n        font-size: 0.85rem;\n    }\n    \n    .col-md-4 .form-control,\n    .col-md-4 .form-select {\n        font-size: 0.9rem;\n        padding: 0.75rem;\n    }\n}\n\n/* Small Mobile Adjustments */\n@media (max-width: 480px) {\n    .container {\n        padding: 0.5rem;\n    }\n    \n    .hero-title {\n        font-size: 1.3rem !important;\n        letter-spacing: 0.5px !important;\n    }\n    \n    .hero-subtitle {\n        font-size: 0.95rem !important;\n    }\n    \n    .hero-tagline {\n        font-size: 0.85rem !important;\n    }\n    \n    .card-header,\n    .card-body {\n        padding: 1rem;\n    }\n    \n    .internal-card {\n        padding: 1rem;\n    }\n    \n    .cta-button {\n        padding: 0.875rem 1.5rem;\n        font-size: 0.9rem;\n    }\n}\n\n/* Footer Mobile */\n@media (max-width: 768px) {\n    .footer-section {\n        padding: 2rem 0;\n    }\n    \n    .footer-section .row {\n        text-align: center;\n    }\n    \n    .footer-section .col-md-3 {\n        margin-bottom: 1.5rem;\n    }\n    \n    .footer-section img {\n        max-height: 50px;\n    }\n}\n\n/* Text Content Improvements */\n.card-body p,\n.card-body div {\n    word-wrap: break-word;\n    overflow-wrap: break-word;\n    hyphens: auto;\n}\n\n/* Performance Optimizations for Mobile */\n@media (max-width: 768px) {\n    .hero-section::before {\n        animation: none;\n    }\n    \n    .card-header::before {\n        animation: none;\n    }\n    \n    @keyframes titleGlow {\n        0%, 100% { \n            filter: none;\n            transform: none;\n        }\n    }\n}\n\n/* Ensure proper text rendering */\n@media (max-width: 768px) {\n    body {\n        text-rendering: optimizeLegibility;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n    }\n}\n\n/* Input Group Mobile Fix */\n@media (max-width: 768px) {\n    .input-group {\n        flex-wrap: wrap;\n    }\n    \n    .input-group > .form-control,\n    .input-group > .form-select {\n        flex: 1 1 100%;\n        width: 100%;\n    }\n}\n\n/* Background Image Mobile Fix */\n@media (max-width: 768px) {\n    body {\n        background-attachment: scroll;\n        background-size: cover;\n    }\n}\n
/* Additional Mobile Enhancements */
@media (max-width: 576px) {
    /* Extra small devices */
    .container {
        padding: 0.25rem;
    }
    
    .card {
        margin: 0.5rem 0;
        border-radius: 8px;
    }
    
    .card-header, .card-body {
        padding: 0.75rem;
    }
    
    .navbar-brand img {
        height: 35px !important;
    }
    
    .hero-title {
        font-size: 1.1rem !important;
        line-height: 1.2;
    }
    
    .btn {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }
}

/* Touch-friendly interactions */
@media (hover: none) and (pointer: coarse) {
    .btn, .form-control, .form-select {
        min-height: 44px;
        min-width: 44px;
    }
    
    .navbar-toggler {
        min-height: 44px;
        min-width: 44px;
    }
    
    .form-check-input {
        width: 1.5em;
        height: 1.5em;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-title {
        font-size: 1.5rem !important;
    }
    
    .card-header, .card-body {
        padding: 1rem;
    }
}

/* Prevent zoom on input focus (iOS Safari) */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Print styles */
@media print {
    .navbar, .btn, footer {
        display: none !important;
    }
    
    .card {
        border: 1px solid #000;
        box-shadow: none;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}