/* ==========================================================================
   RESPONSIVE FIXES FOR AUTOMOBILES MAPS OF INDIA
   Preserves desktop layout exactly, fixes mobile/tablet views
   ========================================================================== */

/* ==========================================================================
   MOBILE FIRST APPROACH - Base mobile styles
   ========================================================================== */

/* Mobile (≤576px) */
@media (max-width: 576px) {
    
    /* ==========================================================================
       CRITICAL MOBILE LAYOUT FIXES
       ========================================================================== */
    
    /* Force proper viewport and prevent horizontal scroll */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative;
    }
    
    * {
        box-sizing: border-box !important;
    }
    
    /* ==========================================================================
       NAVIGATION FIXES - Complete mobile redesign
       ========================================================================== */
    .nav-wrapper {
        padding: 8px 0 !important;
        background-color: #F1F8F9 !important;
        position: relative !important;
        width: 100% !important;
    }
    
    .nav-wrapper .nav-component {
        flex-direction: column !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 10px !important;
        gap: 8px !important;
    }
    
    /* Logo first */
    .nav-wrapper .nav-component .middle-components {
        order: -1 !important;
        margin-bottom: 8px !important;
        text-align: center;
    }
    
    .nav-wrapper .nav-component .middle-components img {
        height: 35px !important;
        margin: 0 auto;
        max-width: 150px;
    }
    
    /* Main nav links - horizontal scrollable */
    .nav-wrapper .nav-component .left-components {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        padding: 5px 0 !important;
        margin-bottom: 5px !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .nav-wrapper .nav-component .left-components::-webkit-scrollbar {
        display: none;
    }
    
    .nav-wrapper .nav-component .left-components a {
        flex: 0 0 auto !important;
        min-width: auto !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        white-space: nowrap;
        background-color: #d7e4ef;
        color: #000 !important;
        border-radius: 15px !important;
        text-decoration: none;
    }
    
    /* Right components - stacked */
    .nav-wrapper .nav-component .right-components {
        width: 100% !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: stretch !important;
    }
    
    .nav-wrapper .nav-component .right-components a {
        flex: 0 0 auto !important;
        min-width: auto !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
        white-space: nowrap;
        background-color: #d7e4ef;
        color: #000 !important;
        border-radius: 15px !important;
        text-decoration: none;
    }
    
    /* Search component */
    .nav-input-component {
        width: 100% !important;
        display: flex !important;
        border: 1px solid #ccc !important;
        border-radius: 0px !important;
        overflow: hidden;
    }
    .nav-input-component form{
            width:100% !important;
        }
    .nav-input-search {
        flex: 1 !important;
        border: none !important;
        padding: 10px 15px !important;
        font-size: 14px !important;
    }
    
    .nav-search-button {
        padding: 10px 15px !important;
        border: none !important;
        background-color: #d7e4ef !important;
        color: #000 !important;
        cursor: pointer;
    }
    
    /* ==========================================================================
       CRITICAL CONTAINER AND LAYOUT FIXES
       ========================================================================== */
    .main-container,
    .containers {
        max-width: 100% !important;
        width: 100% !important;
        margin: 5px auto !important;
        padding: 0 8px !important;
        box-sizing: border-box !important;
    }
    
    /* Override ALL fixed width containers */
    [style*="width: 1200px"],
    [style*="width:1200px"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 8px !important;
    }
    
    .car-comparison-section,
    .bike-comparison-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px 8px !important;
        margin: 10px 0 !important;
    }
    
    /* ==========================================================================
       SIDEBAR ACCORDION MOBILE FIXES - Prevent dominating screen
       ========================================================================== */
    .containers {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .sidebar {
        width: 100% !important;
        order: 2 !important;
        margin-top: 15px !important;
        padding: 12px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        background-color: #d7e4ef !important;
        border-radius: 8px !important;
    }
    
    /* Collapse accordion by default on mobile */
    .sidebar ul {
        list-style-type: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .sidebar > ul > li {
        margin-bottom: 8px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        padding-bottom: 8px !important;
    }
    
    .sidebar a {
        text-decoration: none !important;
        color: #000000 !important;
        display: block !important;
        padding: 10px 12px !important;
        font-size: 14px !important;
        border-radius: 5px !important;
        transition: background-color 0.3s !important;
    }
    
    .sidebar a:hover {
        background-color: #d7e4ef !important;
    }
    
    /* Nested submenus - collapsed by default */
    .sidebar ul ul {
        background-color: #fff !important;
        max-height: 150px !important;
        overflow: auto !important;
        transition: max-height 0.3s ease-out !important;
        margin: 5px 0 0 0 !important;
        border-radius: 5px !important;
    }
    
    .sidebar li:hover > ul {
        max-height: 200px !important;
        overflow-y: auto !important;
    }
    
    .sidebar ul ul a {
        padding-left: 25px !important;
        font-size: 13px !important;
        background-color: transparent !important;
    }
    
    .main-content {
        width: 100% !important;
        order: 1 !important;
    }
    
    .cta-section .d-flex{
        flex-direction: column !important;
    }
    .car-hero .car-hero-image-wrapper{
width: 98%;
margin-top: 3rem;
    }
    /* ==========================================================================
       CAR/BIKE CARD FIXES
       ========================================================================== */
    .car-box-3,
    .car-card,
    .bike-card {
        margin-bottom: 20px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .car-thumbnail,
    .car-image-container,
    .bike-image-container {
        height: 200px !important;
    }
    
    .car-info-row,
    .car-location-details {
        flex-direction: column;
        gap: 10px;
    }
    
    .car-title-price {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    /* ==========================================================================
       BANNER AND HERO SECTION MOBILE FIXES
       ========================================================================== */
    .banner {
        position: relative !important;
        min-height: 250px !important;
        overflow: hidden !important;
    }
    
    .banner .carousel-item {
        height: 250px !important;
    }
    
    .banner .carousel-item img {
        height: 250px !important;
        object-fit: cover !important;
        width: 100% !important;
    }
    
    .banner .carousel-content {
        position: absolute !important;
        top: 50% !important;
        left: 20px !important;
        transform: translateY(-50%) !important;
        right: 20px !important;
        z-index: 10 !important;
    }
    
    .banner h3 {
        font-size: 20px !important;
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
        color: white !important;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
    }
    
    .banner h5 {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
        color: white !important;
        text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
    }
    
    .banner-heading {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }
    
    /* Fix search overlay positioning */
    .vehicle-search-container {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        max-width: 100% !important;
        margin: 15px 0 !important;
        padding: 0 8px;
    }
    
    .search-overlay {
        display: none !important;
    }
    
    .search-content {
        position: relative !important;
        float: none !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 15px !important;
        height: auto !important;
        background: #ffffff !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
    }
    
    .search-title {
        font-size: 16px !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }
    
    /* ==========================================================================
       FORM AND SEARCH ELEMENTS MOBILE FIXES
       ========================================================================== */
    .form-control {
        height: 45px !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
        border-radius: 20px !important;
        border: 1px solid #ddd !important;
        margin-bottom: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .form-select {
        height: 45px !important;
        padding: 12px 15px !important;
        font-size: 14px !important;
        margin-bottom: 12px !important;
        border-radius: 20px !important;
        border: 1px solid #ddd !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background-color: white !important;
        color: #333 !important;
    }
    
    .btn-search,
    .btn-theme {
        padding: 12px 20px !important;
        font-size: 14px !important;
        border-radius: 20px !important;
        width: 100% !important;
        margin-top: 10px !important;
        box-sizing: border-box !important;
    }
    
    .form-group {
        margin-bottom: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .form-row {
        margin-bottom: 0 !important;
        width: 100% !important;
    }
    
    /* ==========================================================================
       COMPARISON SECTIONS MOBILE FIXES
       ========================================================================== */
    .comparison-title {
        font-size: 20px !important;
        margin-top: 15px !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }
    
    .car-card,
    .bike-card {
        margin-bottom: 15px !important;
        padding: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .car-image-container,
    .bike-image-container {
        height: 180px !important;
        margin-bottom: 15px !important;
        overflow: hidden !important;
        border-radius: 8px !important;
    }
    
    .car-image-container img,
    .bike-image-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    .versus-icon {
        display: block !important;
        text-align: center !important;
        margin: 15px 0 !important;
        font-size: 18px !important;
    }
    
    /* Stack comparison cards vertically */
    .row.justify-content-center {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .col-md-5 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
    
    .col-md-2 {
        width: 100% !important;
        order: -1 !important;
        margin-bottom: 10px !important;
    }
    
    /* ==========================================================================
       AUTO MENU MOBILE FIXES
       ========================================================================== */
    .auto-menu {
        padding: 12px 8px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        margin: 10px 0 !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    
    .auto-menu::-webkit-scrollbar {
        display: none;
    }
    
    .auto-menu-item {
        margin: 0 !important;
        flex: 0 0 auto !important;
        min-width: 120px !important;
    }
    
    .auto-menu-item a {
        padding: 8px 12px !important;
        font-size: 12px !important;
        border-radius: 15px !important;
        white-space: nowrap !important;
        display: block !important;
        text-align: center !important;
    }
    
    /* ==========================================================================
       HERO SECTION MOBILE FIXES
       ========================================================================== */
    .hero-section {
        padding: 20px 8px !important;
        text-align: center !important;
        background-color: #ffffff !important;
        border-radius: 8px !important;
        margin: 10px 0 !important;
    }
    
    .hero-section h1 {
        font-size: 20px !important;
        margin-bottom: 10px !important;
        color: #282828 !important;
    }
    
    .hero-content p {
        padding: 0 8px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin: 15px 0 !important;
        color: #4b5563 !important;
    }
    
    .button {
        padding: 10px 20px !important;
        font-size: 14px !important;
        border-radius: 20px !important;
        margin-top: 10px !important;
        display: inline-block !important;
    }
    
    /* ==========================================================================
       FINAL MOBILE SAFETY FIXES
       ========================================================================== */
    
    /* Ensure all images are responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix any remaining overflow issues */
    .banner-slider-inner,
    .carousel-inner,
    .carousel-item {
        overflow: hidden !important;
    }
    
    /* Ensure proper spacing between sections */
    .main-container > *,
    .containers > * {
        margin-bottom: 15px !important;
    }
    
    /* Fix radio buttons and form elements */
    .radio-container {
        display: flex !important;
        align-items: center !important;
        margin: 5px 0 !important;
    }
    
    .radio-container input[type="radio"] {
        margin-right: 8px !important;
    }
    
    .radio-container label {
        font-size: 14px !important;
        margin-bottom: 0 !important;
    }
    
    /* Fix select dropdowns */
    .select-one {
        flex-direction: row !important;
        gap: 10px !important;
        margin-bottom: 15px !important;
    }
     .logo-container {
   flex-direction:column !important;
}
.logo-container .logo-section h3{
    color: #000000 !important;
    text-shadow: none !important;
    font-size: 27px !important;
    margin-bottom: 4vmin !important;
}
.news-item h3{
    color: #000000 !important;
    text-shadow: none !important;
}
.car-info {
    margin-top: 10vmin !important;
}
.overview-bgi:before {
    background: #ffffff !important;
      left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}
.help-from-expert-wrapper .card-body{
    box-shadow: none !important;
}
.sub-banner .breadcrumb-area{
    display: none !important;
}
.form-container .card-container{
    padding: 20px !important;
}
.search-box-4 h5 {
                color: #000000 !important;
                font-size: 27px !important;
                text-shadow: none !important;
            }
.content-details-container {
    padding: 35px 0 !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
}
.form-container form {
    padding: 0 !important;
}
.cta-section {
    padding: 1.5rem !important;
}
}

/* Tablet (577px–991px) */
@media (min-width: 577px) and (max-width: 991px) {
    
    /* ==========================================================================
       NAVIGATION FIXES
       ========================================================================== */
    .nav-wrapper .nav-component {
        padding: 0 20px;
    }
    
    .nav-wrapper .nav-component .left-components {
        width: 35%;
    }
    
    .nav-wrapper .nav-component .right-components {
        width: 35%;
    }
    
    /* ==========================================================================
       CONTAINER FIXES
       ========================================================================== */
    .main-container,
    .containers {
        max-width: 100% !important;
        padding: 0 20px;
    }
    
    .car-comparison-section,
    .bike-comparison-section {
        width: 100% !important;
        padding: 30px 20px !important;
    }
    
    /* ==========================================================================
       SIDEBAR FIXES
       ========================================================================== */
    .containers {
        flex-direction: column !important;
    }
    
    .sidebar {
        width: 100% !important;
        order: 2 !important;
        margin-top: 20px;
    }
    
    .main-content {
        width: 100% !important;
        order: 1 !important;
    }
    
    /* ==========================================================================
       CAR/BIKE CARD FIXES
       ========================================================================== */
    .car-thumbnail,
    .car-image-container,
    .bike-image-container {
        height: 220px !important;
    }
    
    /* ==========================================================================
       BANNER FIXES
       ========================================================================== */
    .banner h3 {
        font-size: 32px !important;
    }
    
    .banner h5 {
        font-size: 16px !important;
    }
    
    .hero-section h1 {
        font-size: 28px;
    }
    
    /* ==========================================================================
       COMPARISON SECTION FIXES
       ========================================================================== */
    .comparison-title {
        font-size: 28px !important;
    }
    
    /* ==========================================================================
       SEARCH FORM FIXES
       ========================================================================== */
    .search-content {
        max-width: 500px !important;
        margin: 20px auto;
    }
    
    /* ==========================================================================
       AUTO MENU FIXES
       ========================================================================== */
    .auto-menu-item {
        margin: 8px;
    }
    
    .auto-menu-item a {
        padding: 10px 15px;
        font-size: 14px;
    }
}

/* Large Tablet (768px–991px) specific fixes */
@media (min-width: 768px) and (max-width: 991px) {
    
    /* ==========================================================================
       CAR GRID FIXES
       ========================================================================== */
    .car-box-3,
    .car-card {
        margin-bottom: 20px;
    }
    
    /* ==========================================================================
       NAVIGATION IMPROVEMENTS
       ========================================================================== */
    .nav-wrapper .nav-component .left-components,
    .nav-wrapper .nav-component .right-components {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   DESKTOP PROTECTION (≥992px) - Preserve original layout
   ========================================================================== */
@media (min-width: 992px) {

    .container {
        max-width: 1140px;
    }
}
    
    /* Ensure desktop layout remains exactly as original */
    .main-container {
        max-width: 1100px !important;
        margin: 0 auto !important;
    }
    
    .containers {
        max-width: 1100px !important;
        margin: 20px auto !important;
        flex-direction: row ;
    }
    
    .sidebar {
        width: 25% ;
        order: 1 !important;
    }
    
    .main-content {
        width: 75% !important;
        order: 2 !important;
    }
    
    .nav-wrapper .nav-component {
        max-width: 1100px !important;
    }
    
    .nav-wrapper .nav-component .left-components {
        width: 30% ;
    }
    
    .nav-wrapper .nav-component .right-components {
        width: 40%;
    }
    
    .car-comparison-section,
    .bike-comparison-section {
        width: 1100px !important;
        margin: 0 auto !important;
    }
    
    /* Preserve all original desktop sizing */
    .car-thumbnail,
    .car-image-container,
    .bike-image-container {
        height: 250px !important;
    }
    
    .banner h3 {
        font-size: 50px !important;
    }
    
    .banner h5 {
        font-size: 20px !important;
    }
    
    .comparison-title {
        font-size: 35px !important;
    }
    
    .hero-section h1 {
        font-size: 2.5rem !important;
    }


/* ==========================================================================
   UNIVERSAL FIXES (All screen sizes)
   ========================================================================== */

/* Prevent horizontal scrolling universally */
* {
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

/* Fix image responsiveness */
img {
    max-width: 100%;
    height: auto;
}

/* Fix table responsiveness */
.table {
    width: 100%;
    overflow-x: auto;
    display: block;
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
}

/* Fix any remaining overflow issues */
.container-fluid,
.row,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    box-sizing: border-box;
}

/* ==========================================================================
   SPECIAL COMPONENT FIXES
   ========================================================================== */

/* Fix bike grid responsiveness */
@media (max-width: 576px) {
    .bike-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    .bike-card {
        padding: 15px;
    }
    
    .brand-list {
        flex-direction: column;
        gap: 10px;
    }
    
    .brand-button {
        width: 100%;
        padding: 12px;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .bike-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }
}

/* Fix comparison components */
@media (max-width: 576px) {
    .comparison-header {
        width: 100% !important;
        padding: 15px;
        margin: 0 0 20px 0;
    }
    
    .comparison-container {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .car-title {
        font-size: 1.1em;
        padding: 10px;
        margin-bottom: 20px;
    }
}

/* Fix dropdown menus on mobile */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static !important;
        width: 100% !important;
        transform: none !important;
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* Fix modal responsiveness */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .modal-body {
        padding: 15px;
    }
}

/* Fix carousel responsiveness */
@media (max-width: 576px) {
    .carousel-item {
        height: 300px;
    }
    
    .carousel-item img {
        height: 300px;
        object-fit: cover;
    }
}

/* Fix pagination */
@media (max-width: 576px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pagination .page-item {
        margin: 2px;
    }
    
    .pagination .page-link {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* ==========================================================================
   PRINT STYLES (Optional)
   ========================================================================== */
@media print {
    .nav-wrapper,
    .sidebar,
    .btn,
    .carousel {
        display: none !important;
    }
    
    .main-content {
        width: 100% !important;
    }
    
    body {
        font-size: 12px;
        line-height: 1.4;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1100px !important;
    }
}