/* ============================================================
   FULLY RESPONSIVE STYLES FOR PHONE AND TABLETS (INDEX.HTML)
   ============================================================ */

@media (max-width: 1199px) {

    /* --- Core Reset --- */
    * {
        max-width: 100%;
        box-sizing: border-box !important;
    }

    /* Exempt slider track from max-width restriction */
    .slides,
    .slides * {
        max-width: none !important;
    }

    body {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* --- Navbar Reset --- */
    #navbar {
        width: 100% !important;
        margin: 0 !important;
        height: auto !important;
        position: sticky !important;
        top: 0 !important;
        left: 0 !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px !important;
        gap: 10px !important;
        background: rgba(20, 20, 20, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 0 !important;
        z-index: 1000 !important;
        border-bottom: 2px solid rgba(255, 0, 0, 0.3) !important;
    }

    #navbar h1 {
        position: static !important;
        font-size: 18px !important;
        margin: 5px 0 !important;
        width: 100% !important;
        text-align: center !important;
        order: 1 !important;
    }

    #navbar img {
        position: static !important;
        height: 40px !important;
        width: auto !important;
        margin: 0 auto !important;
        display: block !important;
        order: 0 !important;
    }

    #navbar a {
        margin: 2px !important;
        padding: 6px 10px !important;
        font-size: 13px !important;
        order: 2 !important;
    }

    /* --- Hero Section --- */
    #hero {
        height: auto !important;
        min-height: auto !important;
        padding: 100px 20px 40px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        position: relative !important;
        overflow: visible !important;
    }

    #hero h1 {
        margin: 0 !important;
        font-size: 42px !important;
        line-height: 1.1 !important;
        width: 100% !important;
        text-align: center !important;
    }

    #hero h2 {
        position: static !important;
        margin: 15px 0 !important;
        font-size: 30px !important;
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        color: #fff !important;
    }

    #hero h3 {
        margin: 10px 0 !important;
        font-size: 18px !important;
        width: 100% !important;
        text-align: center !important;
    }

    #hero img {
        position: static !important;
        margin: 30px auto !important;
        width: 95% !important;
        max-width: 500px !important;
        height: auto !important;
        display: block !important;
        border-radius: 15px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    }

    #hero a {
        display: block !important;
        margin: 20px auto !important;
    }

    #hero button {
        position: static !important;
        margin: 0 auto !important;
        width: 180px !important;
        height: 50px !important;
        font-size: 20px !important;
    }

    /* --- Chat On WhatsApp Button --- */
    #btn {
        margin-top: 10px !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    #btn button {
        margin: 0 !important;
        width: 200px !important;
        height: 45px !important;
        font-size: 16px !important;
    }

    /* --- Stats Section --- */
    .stats {
        margin: 30px auto !important;
        padding: 0 10px !important;
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .stats span {
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* --- Slider --- */
    .slider {
        width: 95% !important;
        max-width: 800px !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
        margin: 30px auto !important;
        border-radius: 10px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .slides {
        width: 700% !important;
        /* Total width for 7 slides */
        display: flex !important;
        flex-direction: row !important;
        transition: transform 0.7s ease-in-out !important;
        animation: none !important;
        /* Disable autoSlide to prevent conflicts on mobile */
    }

    .slides img {
        width: 14.2857% !important;
        /* 100% / 7 slides */
        height: 100% !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }

    /* Force Radio Control Logic to work in nested media query */
    #s1:checked~.slides {
        transform: translateX(0) !important;
    }

    #s2:checked~.slides {
        transform: translateX(-14.2857%) !important;
    }

    #s3:checked~.slides {
        transform: translateX(-28.5714%) !important;
    }

    #s4:checked~.slides {
        transform: translateX(-42.8571%) !important;
    }

    #s5:checked~.slides {
        transform: translateX(-57.1429%) !important;
    }

    #s6:checked~.slides {
        transform: translateX(-71.4286%) !important;
    }

    #s7:checked~.slides {
        transform: translateX(-85.7143%) !important;
    }

    /* Fix Arrows for Mobile */
    .arrows label {
        display: none !important;
        /* Default hidden */
        font-size: 24px !important;
        padding: 6px 10px !important;
        background: rgba(0, 0, 0, 0.4) !important;
        border-radius: 50% !important;
    }

    /* Show active arrows based on checked radio */
    #s1:checked~.arrows .s1,
    #s2:checked~.arrows .s2,
    #s3:checked~.arrows .s3,
    #s4:checked~.arrows .s4,
    #s5:checked~.arrows .s5,
    #s6:checked~.arrows .s6,
    #s7:checked~.arrows .s7 {
        display: block !important;
    }

    /* --- Why Choose Us --- */
    #whychooseus {
        height: auto !important;
        margin-top: 50px !important;
        padding: 0 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    #whychooseus h1 {
        font-size: 32px !important;
        width: 100% !important;
        text-align: center !important;
    }

    #whychooseus h3 {
        margin: 15px 0 30px 0 !important;
        font-size: 16px !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: 0 !important;
    }

    #whychooseus .box1,
    #whychooseus .box2,
    #whychooseus .box3,
    #whychooseus .box4 {
        position: static !important;
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        min-height: 280px !important;
        margin: 15px 0 !important;
        padding: 20px 10px !important;
        left: auto !important;
        top: auto !important;
    }

    #whychooseus .card img {
        margin: 0 auto 15px auto !important;
        display: block !important;
    }

    #whychooseus .card h1 {
        font-size: 24px !important;
        padding: 0 !important;
        text-align: center !important;
    }

    #whychooseus .card h2 {
        font-size: 16px !important;
        padding: 0 10px !important;
        text-align: center !important;
    }

    /* --- Gallery --- */
    #ourgall {
        height: auto !important;
        margin-top: 60px !important;
        padding: 0 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    #ourgall h1 {
        font-size: 36px !important;
    }

    #ourgall h3 {
        margin: 10px 0 20px 0 !important;
        font-size: 16px !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: 0 !important;
    }

    #ourgall .img1,
    #ourgall .img2,
    #ourgall .img3,
    #ourgall .img4,
    #ourgall .img5,
    #ourgall .img6 {
        position: static !important;
        width: 100% !important;
        max-width: 450px !important;
        margin: 10px 0 !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
    }

    #ourgall img,
    #ourgall iframe,
    #ourgall video {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4/3 !important;
        margin: 0 !important;
        display: block !important;
        border-radius: 10px !important;
    }

    /* --- Testimonials --- */
    #woms {
        height: auto !important;
        margin-top: 60px !important;
        padding: 0 15px !important;
        width: 100% !important;
    }

    #woms h1 {
        width: 100% !important;
        margin: 0 auto !important;
        font-size: 28px !important;
        height: auto !important;
        padding: 10px !important;
        margin-left: 0 !important;
    }

    #woms h3 {
        margin: 15px 0 !important;
        font-size: 16px !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: 0 !important;
    }

    #woms .card1,
    #woms .card2,
    #woms .card3 {
        width: 100% !important;
        max-width: 600px !important;
        height: auto !important;
        margin: 20px auto !important;
        position: static !important;
        padding: 15px !important;
        margin-left: 0 !important;
    }

    #woms h2 {
        font-size: 16px !important;
        padding: 0 !important;
    }

    #woms h6 {
        font-size: 20px !important;
        margin-left: 0 !important;
        margin-top: 10px !important;
    }

    /* --- Fee Plan Section --- */
    #feeplan {
        height: auto !important;
        margin-top: 60px !important;
        padding: 20px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    #feeplan h1 {
        font-size: 32px !important;
    }

    #feeplan h3 {
        margin: 15px 0 !important;
        font-size: 20px !important;
        width: 100% !important;
        text-align: center !important;
        word-spacing: normal !important;
        margin-left: 0 !important;
    }

    #feeplan .fee1,
    #feeplan .fee2,
    #feeplan .fee3 {
        position: static !important;
        margin: 15px 0 !important;
        width: 100% !important;
        max-width: 290px !important;
        height: auto !important;
        padding-bottom: 25px !important;
        margin-left: 0 !important;
        top: auto !important;
    }

    #feeplan li {
        font-size: 20px !important;
    }

    #feeplan .get {
        position: static !important;
        margin: 40px auto !important;
        width: 85% !important;
        max-width: 300px !important;
        height: auto !important;
        padding: 0 !important;
        /* Padding moved to link for better click area */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 30px !important;
    }

    #feeplan .get a {
        display: block !important;
        width: 100% !important;
        padding: 15px 10px !important;
        font-size: 18px !important;
        text-align: center !important;
        text-decoration: none !important;
    }

    /* --- Chatbot Section --- */
    #ai-chatbot-section {
        width: 95% !important;
        margin: 50px auto !important;
    }

    /* --- Footer --- */
    #footer {
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        margin-top: 60px !important;
        padding: 40px 15px 30px 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        position: relative !important;
    }

    #footer h1 {
        margin: 0 !important;
        font-size: 32px !important;
        padding: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    #footer h2 {
        margin: 10px 0 !important;
        font-size: 22px !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    #footer h4 {
        margin: 10px 0 !important;
        font-size: 15px !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    #footer p {
        margin: 25px 0 !important;
        font-size: 13px !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    #footer .social-title {
        margin: 20px 0 10px 0 !important;
        width: 100% !important;
    }

    #footer .social-links {
        margin-top: 10px !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        gap: 15px !important;
    }

    #footer .social {
        width: 45px !important;
        height: 45px !important;
        font-size: 18px !important;
    }

    #footer .rate {
        position: static !important;
        margin: 30px 0 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        left: auto !important;
        top: auto !important;
    }

    #footer .rate h3 {
        position: static !important;
        margin: 0 0 10px 0 !important;
        font-size: 16px !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }

    #footer .rate img {
        position: static !important;
        margin: 0 !important;
        height: 100px !important;
        width: 100px !important;
        margin-left: 0 !important;
        top: auto !important;
    }
    #footer .rate iframe{
        position: static !important;
        margin: 0 !important;
        height: 300px !important;
        width: 400px !important;
        margin-left: 0 !important;
        top: auto !important;
    }

    #footer .address,
    #footer .phone,
    #footer .email {
        position: static !important;
        margin: 15px 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    #footer .address h3,
    #footer .phone h3,
    #footer .email h3 {
        position: static !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        font-size: 15px !important;
        padding: 0 !important;
        left: auto !important;
        top: auto !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        cursor: default !important;
    }
}

/* --- Small Phone Adjustments --- */
@media (max-width: 480px) {
    #navbar h1 {
        font-size: 16px !important;
    }

    #navbar a {
        font-size: 11px !important;
        padding: 5px 8px !important;
    }

    #hero h1 {
        font-size: 32px !important;
    }

    #hero h2 {
        font-size: 24px !important;
    }
}