/* ==========================================
   MOBILE RESPONSIVE STYLES
   Mkonze Tour, Hotel & Lodge
   ========================================== */

/* ===================
   Extra Small Devices: 320px - 480px (Mobile Phones)
   =================== */
@media (max-width: 480px) {
    /* Global Styles */
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 24px !important;
        line-height: 1.2;
    }

    h2 {
        font-size: 20px !important;
        line-height: 1.3;
    }

    h3 {
        font-size: 18px !important;
        line-height: 1.3;
    }

    h4 {
        font-size: 16px !important;
    }

    p {
        font-size: 14px;
        line-height: 1.6;
    }

    /* Header & Navigation */
    .header-area {
        padding: 10px 0 !important;
    }

    .main-header-area {
        flex-wrap: wrap;
    }

    .col-xl-5,
    .col-xl-2 {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .main-menu nav ul li {
        margin: 5px 0 !important;
    }

    .main-menu nav ul {
        flex-direction: column;
    }

    .logo-img {
        text-align: center;
        padding: 10px 0;
    }

    .logo-img img {
        max-width: 120px !important;
        height: auto;
    }

    /* Book A Room Button - Mobile */
    .book_room {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 12px 8px !important;
        gap: 10px;
    }

    .book_room .book_btn {
        margin-left: 0 !important;
        width: 100% !important;
        order: 1;
    }

    .book_room .book_btn a {
        display: block;
        width: 100% !important;
        padding: 12px 15px !important;
        background: #681016 !important;
        color: white !important;
        font-size: 14px !important;
        font-weight: 600;
        border: none !important;
        border-radius: 4px;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .book_room .book_btn a:hover {
        background: #fff !important;
        color: #681016 !important;
        border: 2px solid #681016 !important;
    }

    .book_room .socail_links {
        width: 100%;
        text-align: center;
        order: 2;
    }

    .book_room .socail_links ul {
        display: flex !important;
        justify-content: center;
        gap: 12px;
    }

    /* Slider */
    .slider_area {
        height: auto !important;
        min-height: 400px;
    }

    .slider_text h3 {
        font-size: 18px !important;
        margin: 10px 0;
    }

    .slider_text p {
        font-size: 12px !important;
        margin: 0;
    }

    .single_slider {
        padding: 40px 15px !important;
    }

    /* Container Padding */
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* About Section */
    .about_area {
        padding: 30px 0 !important;
    }

    .about_info {
        margin-bottom: 20px !important;
    }

    .about_thumb {
        flex-direction: column;
    }

    .about_thumb .img_1,
    .about_thumb .img_2 {
        width: 100% !important;
        margin: 10px 0 !important;
    }

    .about_thumb img {
        width: 100% !important;
        height: auto;
    }

    /* Section Title */
    .section_title h3 {
        font-size: 18px !important;
    }

    .section_title span {
        font-size: 12px;
    }

    /* Offers / Pricing */
    .offers_area {
        padding: 30px 0 !important;
    }

    .single_offers {
        margin-bottom: 20px !important;
        padding: 15px !important;
    }

    .single_offers h3 {
        font-size: 16px !important;
    }

    .single_offers ul li {
        font-size: 13px;
        padding: 5px 0;
    }

    .row {
        margin-right: -6px !important;
        margin-left: -6px !important;
    }

    .col-xl-4,
    .col-md-4,
    .col-lg-4 {
        padding-right: 6px !important;
        padding-left: 6px !important;
    }

    /* Video Section */
    .video_area {
        padding: 40px 15px !important;
    }

    .video_area_inner span {
        font-size: 12px;
    }

    .video_area_inner h3 {
        font-size: 16px !important;
    }

    .video_btn {
        width: 50px !important;
        height: 50px !important;
        font-size: 18px !important;
    }

    /* Features Room */
    .features_room {
        padding: 30px 0 !important;
    }

    .rooms_here {
        flex-wrap: wrap;
    }

    .single_rooms {
        width: 100% !important;
        margin: 10px 0 !important;
    }

    .room_thumb img {
        width: 100%;
        height: auto;
    }

    /* For Query Section */
    .forQuery {
        padding: 20px 0 !important;
    }

    .Query_border {
        padding: 15px !important;
        border-radius: 8px;
    }

    .Query_text p {
        font-size: 14px;
        margin: 10px 0;
    }

    .phone_num {
        text-align: center !important;
    }

    .mobile_no {
        font-size: 16px;
        font-weight: bold;
    }

    /* Instagram Area */
    .instragram_area {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .single_instagram {
        width: 100% !important;
        height: 150px;
        overflow: hidden;
    }

    /* Footer */
    .footer {
        padding: 30px 0 !important;
    }

    .footer_widget {
        margin-bottom: 20px !important;
    }

    .footer_title {
        font-size: 14px !important;
    }

    .footer_text {
        font-size: 12px;
    }

    .socail_links ul {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .socail_links ul li a {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .copy_right {
        font-size: 12px;
    }

    /* Newsletter Form */
    .newsletter_form {
        flex-direction: column;
    }

    .newsletter_form input,
    .newsletter_form button {
        width: 100% !important;
        margin: 5px 0 !important;
    }

    .newsletter_text {
        font-size: 12px;
        text-align: center;
    }

    /* Buttons */
    .line-button,
    .boxed-btn3,
    .book_now,
    .book_btn a {
        padding: 8px 15px !important;
        font-size: 12px !important;
        display: inline-block;
    }

    /* Forms */
    .popup_box {
        width: 95% !important;
        padding: 15px !important;
        margin: 0 auto;
    }

    .popup_inner h3 {
        font-size: 16px !important;
    }

    .popup_inner form input,
    .popup_inner form select {
        width: 100% !important;
        padding: 12px 10px !important;
        margin-bottom: 15px !important;
        font-size: 14px;
        border: 1px solid #ddd;
        border-radius: 4px;
        display: block;
    }

    .form-select {
        width: 100% !important;
    }

    /* Improved spacing for form columns */
    .popup_inner form .row {
        margin-right: -5px !important;
        margin-left: -5px !important;
    }

    .popup_inner form .col-12,
    .popup_inner form .col-md-6 {
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 5px !important;
    }

    /* Table for booking form */
    .col-12 {
        width: 100% !important;
        margin: 10px 0 !important;
    }

    /* Book Room Form */
    .book_room {
        width: 100%;
        text-align: center;
    }

    .book_btn a {
        display: block;
        margin-top: 10px;
    }

    /* Social Links */
    .socail_links {
        text-align: center;
    }

    /* Overlay */
    .ovrelay {
        background: rgba(0, 0, 0, 0.7);
    }

    /* Responsive Text */
    .d-flex {
        flex-direction: column !important;
    }

    .justify-content-between {
        justify-content: center !important;
    }

    .text-center {
        text-align: center !important;
    }

    /* Alignment */
    .align-items-center {
        align-items: center !important;
    }

    /* Spacing adjustments */
    .mb-20px {
        margin-bottom: 15px !important;
    }

    .mb-100 {
        margin-bottom: 30px !important;
    }

    .container-fluid {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
}

/* ===================
   Small Devices: 481px - 768px (Large Phones & Tablets)
   =================== */
@media (min-width: 481px) and (max-width: 768px) {
    /* Global Styles */
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 28px !important;
    }

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

    h3 {
        font-size: 20px !important;
    }

    p {
        font-size: 14px;
        line-height: 1.7;
    }

    /* Header */
    .header-area {
        padding: 12px 0 !important;
    }

    .main-menu nav {
        display: block !important;
    }

    .main-menu nav ul li {
        display: block;
        margin: 0 10px;
    }

    .logo-img img {
        max-width: 140px !important;
    }

    /* Slider */
    .slider_area {
        min-height: 450px;
    }

    .slider_text h3 {
        font-size: 20px !important;
    }

    .slider_text p {
        font-size: 14px !important;
    }

    /* Container */
    .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* About & Offers */
    .about_area {
        padding: 40px 0 !important;
    }

    .offers_area {
        padding: 40px 0 !important;
    }

    .single_offers {
        margin-bottom: 25px !important;
        padding: 20px !important;
    }

    .single_offers h3 {
        font-size: 18px !important;
    }

    .about_thumb {
        flex-direction: column;
    }

    .about_thumb .img_1,
    .about_thumb .img_2 {
        width: 100% !important;
        margin: 10px 0 !important;
    }

    /* Section Title */
    .section_title h3 {
        font-size: 22px !important;
    }

    /* Features Room */
    .features_room {
        padding: 40px 0 !important;
    }

    .rooms_here {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .single_rooms {
        width: 100% !important;
    }

    /* Video Section */
    .video_area {
        padding: 50px 15px !important;
    }

    .video_area_inner h3 {
        font-size: 18px !important;
    }

    /* For Query */
    .forQuery {
        padding: 30px 0 !important;
    }

    .Query_border {
        flex-direction: column;
    }

    .Query_text,
    .phone_num {
        width: 100% !important;
        text-align: center;
        margin: 10px 0;
    }

    /* Instagram */
    .instragram_area {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .single_instagram {
        height: 200px;
    }

    /* Footer */
    .footer_top {
        padding: 40px 0 !important;
    }

    .footer_widget {
        margin-bottom: 25px !important;
    }

    .footer_title {
        font-size: 16px !important;
    }

    .footer_text {
        font-size: 13px;
    }

    .socail_links ul {
        justify-content: center;
        gap: 15px;
    }

    /* Forms */
    .popup_box {
        width: 90% !important;
        padding: 20px !important;
    }

    .popup_inner form input,
    .popup_inner form select {
        width: 100% !important;
        padding: 12px !important;
        margin-bottom: 15px !important;
        border: 1px solid #ddd;
        border-radius: 4px;
        display: block;
    }

    .popup_inner form .col-md-6 {
        padding: 8px !important;
        margin-bottom: 5px !important;
    }

    /* Buttons */
    .line-button,
    .boxed-btn3 {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }

    /* Newsletter Form */
    .newsletter_form {
        flex-direction: column;
    }

    .newsletter_form input,
    .newsletter_form button {
        width: 100% !important;
        margin: 8px 0 !important;
    }
}

/* ===================
   Medium Devices: 769px - 992px (Tablets)
   =================== */
@media (min-width: 769px) and (max-width: 992px) {
    h1 {
        font-size: 32px !important;
    }

    h2 {
        font-size: 28px !important;
    }

    h3 {
        font-size: 22px !important;
    }

    p {
        font-size: 15px;
        line-height: 1.7;
    }

    /* Header */
    .header-area {
        padding: 15px 0 !important;
    }

    .logo-img img {
        max-width: 160px !important;
    }

    /* Slider */
    .slider_area {
        min-height: 500px;
    }

    .slider_text h3 {
        font-size: 22px !important;
    }

    .slider_text p {
        font-size: 15px !important;
    }

    /* Container */
    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Sections */
    .about_area {
        padding: 50px 0 !important;
    }

    .offers_area {
        padding: 50px 0 !important;
    }

    .single_offers {
        margin-bottom: 25px !important;
    }

    /* About Images */
    .about_thumb {
        flex-direction: row;
    }

    .about_thumb .img_1,
    .about_thumb .img_2 {
        width: 48% !important;
        margin: 0 10px !important;
    }

    /* Features Room */
    .features_room {
        padding: 50px 0 !important;
    }

    .rooms_here {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* Instagram */
    .instragram_area {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .single_instagram {
        height: 250px;
    }

    /* Video */
    .video_area {
        padding: 60px 20px !important;
    }

    .video_area_inner h3 {
        font-size: 22px !important;
    }

    .video_btn {
        width: 70px !important;
        height: 70px !important;
        font-size: 28px !important;
    }

    /* For Query */
    .forQuery {
        padding: 40px 0 !important;
    }

    .Query_border {
        flex-direction: row;
    }

    .Query_text,
    .phone_num {
        width: 50% !important;
    }

    /* Footer */
    .footer_top {
        padding: 50px 0 !important;
    }

    .footer_widget {
        margin-bottom: 30px !important;
    }

    /* Forms */
    .popup_box {
        width: 85% !important;
        padding: 25px !important;
    }

    .popup_inner form input,
    .popup_inner form select {
        padding: 12px !important;
        margin-bottom: 15px !important;
        border: 1px solid #ddd;
        border-radius: 4px;
        display: block;
        width: 100% !important;
    }

    .popup_inner form .col-md-6 {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }

    .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ===================
   Large Devices: 993px - 1200px (Desktops)
   =================== */
@media (min-width: 993px) and (max-width: 1200px) {
    .container {
        max-width: 1170px !important;
    }

    h3 {
        font-size: 24px !important;
    }

    p {
        font-size: 15px;
    }

    .section_title h3 {
        font-size: 24px !important;
    }

    .single_offers {
        margin-bottom: 25px !important;
    }

    .rooms_here {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .video_area {
        padding: 70px 20px !important;
    }

    .video_btn {
        width: 80px !important;
        height: 80px !important;
        font-size: 32px !important;
    }

    .instragram_area {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
    }
}

/* ===================
   Form Spacing - All Devices
   =================== */
.popup_inner form .row {
    gap: 20px 15px !important;
    row-gap: 20px !important;
}

.popup_inner form input,
.popup_inner form select {
    width: 100% !important;
    display: block !important;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 20px !important;
    padding: 12px !important;
    height: 50px !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
}

/* Specific spacing for inputs within columns - ensures gap between vertically stacked inputs */
.col-md-6 input:not(:last-child),
.col-md-6 select:not(:last-child) {
    margin-bottom: 20px !important;
}

/* Large Devices: 993px - 1200px */
@media (min-width: 993px) and (max-width: 1200px) {
    .popup_inner form input,
    .popup_inner form select {
        padding: 14px !important;
        margin-bottom: 0 !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        display: block !important;
        width: 100% !important;
        line-height: 1.5 !important;
        height: 50px !important;
        box-sizing: border-box !important;
    }

    .col-md-6 input:not(:last-child),
    .col-md-6 select:not(:last-child) {
        margin-bottom: 25px !important;
    }

    .popup_inner form .col-md-6 {
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    .popup_inner form .row {
        gap: 25px 20px !important;
        row-gap: 25px !important;
    }
}

/* ===================
   Extra Large Devices: 1201px+ (Large Desktops)
   =================== */
@media (min-width: 1201px) {
    .container {
        max-width: 1200px !important;
    }

    .rooms_here {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
    }

    .instragram_area {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }

    .popup_inner form input,
    .popup_inner form select {
        padding: 14px !important;
        margin-bottom: 0 !important;
        border: 1px solid #ddd !important;
        border-radius: 4px !important;
        display: block !important;
        width: 100% !important;
        line-height: 1.5 !important;
        height: 50px !important;
        box-sizing: border-box !important;
    }

    .col-md-6 input:not(:last-child),
    .col-md-6 select:not(:last-child) {
        margin-bottom: 30px !important;
    }

    .popup_inner form .col-md-6 {
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    .popup_inner form .row {
        gap: 30px 25px !important;
        row-gap: 30px !important;
    }
}

/* ===================
   Mobile Menu Optimization
   =================== */
@media (max-width: 992px) {
    .d-lg-none {
        display: block !important;
    }

    .d-lg-block {
        display: none !important;
    }

    .mobile_menu {
        display: block !important;
    }

    .main-menu {
        display: none;
    }
}

@media (min-width: 993px) {
    .d-lg-block {
        display: block !important;
    }

    .d-lg-none {
        display: none !important;
    }

    .mobile_menu {
        display: none;
    }
}

/* ===================
   Image Optimization
   =================== */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
        display: block;
    }

    .img_1,
    .img_2 {
        width: 100% !important;
    }
}

/* ===================
   Touch-Friendly Adjustments
   =================== */
@media (hover: none) and (pointer: coarse) {
    a,
    button {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 15px;
    }

    .line-button,
    .boxed-btn3,
    .book_now {
        min-height: 44px;
        padding: 12px 20px;
    }

    .socail_links ul li a {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ===================
   Print Styles
   =================== */
@media print {
    .header-area,
    .footer,
    .video_area,
    .mobile_menu {
        display: none;
    }

    body {
        font-size: 12pt;
    }

    .container {
        max-width: 100%;
    }
}

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

@media (prefers-color-scheme: dark) {
    /* Optional: Add dark mode support here if needed */
}