*{
padding: 0;
margin: 0;
text-decoration: none;

}

@media (min-width: 0px) and (max-width: 320px) {
    .banner {
        padding: 60px; /* Reduce padding for smaller screens */
        background-size: cover;
    }

    .text-content h1 {
        font-size: 1.8rem; /* Smaller font size for heading */
        margin-bottom: 8px;
    }

    .text-content p {
        font-size: 1rem; /* Smaller font size for paragraph */
        margin-bottom: 15px;
    }

    .search-bar {
        width: 100%; /* Full width on smaller screens */
        margin-bottom: 15px;
    }

    .fancy-search {
        padding: 10px; /* Reduced padding for better fit */
        font-size: 16px; /* Adjust font size for readability */
    }

    #searchResults {
        max-height: auto; /* No scrolling allowed */
        padding: 7px 10px; /* Adds space for better readability */
        width: 100%; /* Makes the dropdown take the full width of its container */
        box-sizing: border-box; /* Ensures padding is included in width */
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        z-index: 9999;
        border-radius: 4px;
    }

    .dropdown-item {
        padding: 10px;
        white-space: normal; /* Allows text to wrap onto the next line */
        word-wrap: break-word; /* Breaks long words to the next line if necessary */
        overflow-wrap: break-word; /* Ensures breaking words within a long string */
        font-size: 12px;
        word-break: break-word; /* Breaks long words within the string */
        line-height: 1.4; /* Adds spacing between lines for better readability */
    }

    .why-choose-us {
        padding: 20px 10px; /* Reduce padding for small screens */
    }

    /* Title Styling */
    .why-choose-us-title {
        font-size: 1.5em; /* Smaller font size for better fit */
        margin-bottom: 15px;
    }

    /* USP Section Layout */
    .usp-section {
        display: flex;
        flex-direction: column; /* Stack the cards vertically */
        justify-content: flex-start;
        align-items: center;
        gap: 15px;
        overflow-x: visible; /* Disable horizontal scrolling */
        padding: 15px 0; /* Reduce padding for mobile */
    }

    /* USP Card Layout */
    .usp-card {
        width: 100%; /* Full width on small screens */
        min-height: auto; /* Remove fixed height */
        max-height: none; /* Allow card to expand as needed */
        text-align: center;
        padding: 15px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Smaller shadow */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .usp-card:hover {
        transform: translateY(-5px); /* Smaller hover effect */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Smaller shadow on hover */
    }

    /* Icon Styling */
    .usp-card-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 10px;
        background-size: cover;
        background-position: center;
        border-radius: 50%;
    }

    /* Card Title Styling */
    .usp-card-title {
        font-size: 1.1em; /* Smaller title size */
        font-weight: 600;
        color: #333;
        margin: 8px 0 4px;
        white-space: nowrap; /* Prevent text wrapping */
        overflow: hidden;
        text-overflow: ellipsis; /* Add ellipsis for long text */
    }

    /* Card Description Styling */
    .usp-card-desc {
        font-size: 0.85em; /* Smaller font size */
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 3em; /* Limit height */
        display: -webkit-box;
        -webkit-line-clamp: 2; /* Allow only two lines of text */
        -webkit-box-orient: vertical;
    }
    .promo-section {
        background-image: url('/images/camel-ride-desert-safari.jpg');
        background-size: cover;
        background-position: center;
        color: #7A430C;
        padding: 60px 20px; /* Reduced padding for smaller screens */
        margin-bottom: 30px;
        text-align: center;
        background-attachment: scroll; /* Prevent fixed background behavior */
    }

    /* Promo Card Styling */
    .promo-card {
        background-color: rgba(255, 255, 255, 0.9);
        padding: 30px; /* Reduced padding for mobile screens */
        border-radius: 8px;
        display: block; /* Stack cards vertically */
        max-width: 90%; /* Ensure card fits well on small screens */
        margin: 0 auto; /* Center the card */
    }

    /* Promo Title Styling */
    .promo-title {
        font-size: 1.8rem; /* Reduced font size for smaller screens */
        font-weight: 700;
        color: #D76E00; /* Color adjustment */
        margin-bottom: 15px;
    }

    /* Promo Subtitle Styling */
    .promo-subtitle {
        color: #6c757d;
        font-style: italic;
        margin-bottom: 15px; /* Reduced space for better fit */
        font-size: 1.1rem; /* Slightly smaller font size */
    }

        /* Marquee container styling */
        .marquee {
            overflow: hidden; /* Prevents any content from overflowing outside the container */
            white-space: nowrap; /* Ensures the text stays in a single line (no wrapping) */
            display: flex; /* Uses flexbox to align the content horizontally */
            position: relative; /* Allows stacking of other content (if needed) */
            background-color: #f9f9f9; /* Sets the background color for contrast */
            padding: 5px 0; /* Reduced padding on top and bottom to save space on small screens */
            z-index: 1; /* Makes sure the marquee content stays above other elements */
        }
    
        /* Title container styling (if any title exists above marquee) */
        .title {
            position: relative; /* Ensures the title is on the same stacking context */
            z-index: 1; /* Keeps the title above other elements */
        }
    
        /* Marquee content styling */
        .marquee-content {
            display: inline-block; /* Ensures the content stays in one line horizontally */
            padding-right: 20px; /* Reduced padding on the right for smaller screens (less space between repeats) */
            font-size: 14px; /* Smaller font size to ensure the text fits on small screens */
            font-weight: bold; /* Keeps the text bold */
            color: #333; /* Text color */
            animation: marqueeAnimation 10s linear infinite; /* Sets animation to move the text from right to left in 10 seconds */
        }

        
        .table {
            display: block; /* Makes the table behave like a block element */
            width: 100%;
        }
    
        /* Hide table headers */
        .table thead {
            display: none;
        }
    
        /* Stack each row vertically */
        .table tbody tr {
            display: flex;
            flex-direction: column;
            border: 1px solid #ddd;
            margin-bottom: 10px;
            padding: 10px;
            border-radius: 5px;
            background-color: #f9f9f9; /* Optional: add a background for card style */
        }
    
        /* Display each cell as a separate row inside the "card" */
        .table tbody tr td {
            display: flex;
            justify-content: space-between;
            padding: 5px 0;
            border-bottom: 1px solid #ddd;
        }
    
        /* Remove the last border in each row */
        .table tbody tr td:last-child {
            border-bottom: none;
        }
    
        /* Make form controls and buttons take full width */
        .form-control, .btn-block {
            width: 100%;
            margin-top: 5px;
        }
    
        /* Adjust font sizes for small screens */
        h2 {
            font-size: 1.2rem;
        }
        h3, h4 {
            font-size: 1rem;
        }
        /* Keyframes for marquee animation */
        @keyframes marqueeAnimation {
            0% {
                transform: translateX(100%); /* Starts the text from the right side (outside of the view) */
            }
            100% {
                transform: translateX(-100%); /* Moves the text to the left side (completely out of view) */
            }
        }

           /* Adjust the position and speed of the jeep for small screens */
    .jeep-animation {
        bottom: 10px; /* Slightly reduce the bottom distance for smaller screens */
        left: -80px; /* Adjust start position to slightly outside the screen */
        animation: moveJeep 8s linear infinite; /* Increase animation duration for smoother movement */
    }

    /* Resize the jeep image to fit smaller screen width */
    .jeep-animation img {
        width: 60px; /* Resize the jeep image to 60px on small screens */
        height: auto; /* Keep aspect ratio */
    }
}

/* Keyframes for the jeep's animation */
@keyframes moveJeep {
    0% {
        left: -100px; /* Start position off-screen to the left */
    }
    100% {
        left: 100%; /* End position off-screen to the right */
    }


    
}
/* For screens between 321px and 425px (e.g., small tablets, larger phones in landscape) */
@media (min-width: 321px) and (max-width: 425px) {

    /* Banner */
    .banner {
        padding: 50px; /* Reduce padding for medium-sized screens */
        background-size: cover;
    }

    /* Text Content */
    .text-content h1 {
        font-size: 2rem; /* Increase font size slightly for headings */
        margin-bottom: 10px;
    }

    .text-content p {
        font-size: 1.2rem; /* Adjust font size for paragraphs */
        margin-bottom: 20px;
    }

    /* Search Bar */
    .search-bar {
        width: 100%; /* Full width for better use of space */
        margin-bottom: 20px; /* Add more space between elements */
    }

    .fancy-search {
        padding: 12px; /* Adjust padding for a more comfortable fit */
        font-size: 18px; /* Increase font size for readability */
    }

    #searchResults {
        max-height: auto;
        padding: 10px 15px; /* Add more padding for better readability */
        width: 100%;
        box-sizing: border-box;
        position: absolute;
        background-color: #fff;
        border: 1px solid #ccc;
        z-index: 9999;
        border-radius: 4px;
    }

    .dropdown-item {
        padding: 12px;
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
        font-size: 14px; /* Slightly larger font for medium screens */
        word-break: break-word;
        line-height: 1.5; /* Increase line height for readability */
    }

    /* Why Choose Us */
    .why-choose-us {
        padding: 30px 15px; /* Adjust padding for better fit */
    }

    /* Title Styling */
    .why-choose-us-title {
        font-size: 1.8em; /* Increase title size for better readability */
        margin-bottom: 20px;
    }

    /* USP Section Layout */
    .usp-section {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 20px; /* Increase gap for better spacing */
        overflow-x: visible;
        padding: 20px 0;
    }

    /* USP Card Layout */
    .usp-card {
        width: 100%;
        min-height: auto;
        max-height: none;
        text-align: center;
        padding: 20px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slightly larger shadow for medium screens */
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .usp-card:hover {
        transform: translateY(-8px); /* Slightly larger hover effect */
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Larger shadow on hover */
    }

    /* Icon Styling */
    .usp-card-icon {
        width: 70px; /* Increase icon size */
        height: 70px;
        margin: 0 auto 12px;
        background-size: cover;
        background-position: center;
        border-radius: 50%;
    }

    /* Card Title Styling */
    .usp-card-title {
        font-size: 1.2em; /* Increase title font size for readability */
        font-weight: 600;
        color: #333;
        margin: 10px 0 6px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Card Description Styling */
    .usp-card-desc {
        font-size: 0.95em; /* Slightly larger text for better readability */
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: 3.5em; /* Limit height */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* Promo Section */
    .promo-section {
        background-image: url('/images/camel-ride-desert-safari.jpg');
        background-size: cover;
        background-position: center;
        color: #7A430C;
        padding: 50px 30px; /* Adjust padding for medium-sized screens */
        margin-bottom: 40px;
        text-align: center;
        background-attachment: scroll;
    }

    /* Promo Card Styling */
    .promo-card {
        background-color: rgba(255, 255, 255, 0.9);
        padding: 35px; /* Slightly more padding for better fit */
        border-radius: 8px;
        display: block;
        max-width: 85%; /* Make sure it fits better on medium screens */
        margin: 0 auto;
    }

    /* Promo Title Styling */
    .promo-title {
        font-size: 2rem; /* Adjust title size for better readability */
        font-weight: 700;
        color: #D76E00;
        margin-bottom: 20px;
    }

    /* Promo Subtitle Styling */
    .promo-subtitle {
        color: #6c757d;
        font-style: italic;
        margin-bottom: 20px;
        font-size: 1.2rem; /* Slightly larger font size */
    }

    /* Marquee */
    .marquee {
        overflow: hidden;
        white-space: nowrap;
        display: flex;
        position: relative;
        background-color: #f9f9f9;
        padding: 10px 0;
        z-index: 1;
    }

    .title {
        position: relative;
        z-index: 1;
    }

    .marquee-content {
        display: inline-block;
        padding-right: 25px; /* Slightly more padding for space between repeats */
        font-size: 16px; /* Larger font size for better readability */
        font-weight: bold;
        color: #333;
        animation: marqueeAnimation 12s linear infinite; /* Slower animation */
    }

    .table {
        display: block;
        width: 100%;
    }

    /* Hide table headers to make it more mobile-friendly */
    .table thead {
        display: none;
    }

    /* Each table row acts like a card */
    .table tbody tr {
        display: flex;
        flex-direction: column;
        border: 1px solid #ddd;
        margin-bottom: 15px;
        padding: 10px;
        border-radius: 8px;
        background-color: #f7f7f7; /* Optional: for card-like appearance */
    }

    /* Display each table cell as a separate line in the card */
    .table tbody tr td {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #ddd;
    }

    /* Remove the last border in each row */
    .table tbody tr td:last-child {
        border-bottom: none;
    }

    /* Styling for form controls and buttons for full-width appearance */
    .form-control,
    .btn-block {
        width: 100%;
        margin-top: 8px;
    }

    /* Adjusting font sizes for better readability on mid-small screens */
    h2 {
        font-size: 1.4rem;
    }
    h3, h4 {
        font-size: 1.1rem;
    }

    /* Responsive adjustments for table columns like Image and Action buttons */
    .table tbody tr td img {
        width: 60px;
        height: 60px;
    }
    
    /* Center align text within cells for better readability */
    .table tbody tr td {
        text-align: left;
    }

    /* Keyframes for marquee animation */
    @keyframes marqueeAnimation {
        0% {
            transform: translateX(100%);
        }
        100% {
            transform: translateX(-100%);
        }
    }

    /* Jeep Animation */
    .jeep-animation {
        bottom: 15px; /* Adjust bottom distance for medium screens */
        left: -90px; /* Adjust start position */
        animation: moveJeep 8s linear infinite; /* Adjust animation duration */
    }

    .jeep-animation img {
        width: 70px; /* Resize jeep image */
        height: auto;
    }
}
/* For screens between 426px and 576px */
@media (min-width: 426px) and (max-width: 512px) {
/* Banner */
.banner {
    padding: 25px; /* Further reduced padding for smaller screens */
    background-size: cover;
}

/* Text Content */
.text-content h1 {
    font-size: 1.6rem; /* Further reduce font size for smaller screens */
    margin-bottom: 6px;
}

.text-content p {
    font-size: 0.9rem; /* Smaller font for paragraphs */
    margin-bottom: 12px;
}

/* Search Bar */
.search-bar {
    width: 100%;
    margin-bottom: 12px; /* Slightly reduced margin */
}

.fancy-search {
    padding: 8px; /* Further reduced padding */
    font-size: 14px; /* Smaller font size */
}

#searchResults {
    max-height: 150px; /* Limit height further */
    padding: 6px 10px;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 9999;
    border-radius: 4px;
}

.dropdown-item {
    padding: 8px;
    font-size: 12px; /* Smaller font size */
    line-height: 1.3; /* Slightly smaller line height */
}

/* Why Choose Us */
.why-choose-us {
    padding: 20px 8px; /* Adjust padding for smaller fit */
}

.why-choose-us-title {
    font-size: 1.4em; /* Further reduced font size */
    margin-bottom: 12px;
}

/* USP Section Layout */
.usp-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 12px; /* Reduced gap for smaller screens */
    padding: 12px 0;
}

/* USP Card Layout */
.usp-card {
    width: 95%; /* Increase width for better fit */
    min-height: auto;
    max-height: none;
    text-align: center;
    padding: 16px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08); /* Adjust shadow for smaller screens */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.usp-card:hover {
    transform: translateY(-4px); /* Reduced hover effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Reduced shadow on hover */
}

/* Icon Styling */
.usp-card-icon {
    width: 50px; /* Adjust icon size */
    height: 50px;
    margin: 0 auto 8px;
}

/* Card Title Styling */
.usp-card-title {
    font-size: 1em; /* Reduced title size */
    font-weight: 600;
    color: #333;
    margin: 6px 0 4px;
}

/* Card Description Styling */
.usp-card-desc {
    font-size: 0.85em; /* Smaller text */
    color: #666;
    max-height: 3em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Promo Section */
.promo-section {
    background-image: url('/images/camel-ride-desert-safari.jpg');
    background-size: cover;
    background-position: center;
    color: #7A430C;
    padding: 30px 15px; /* Adjust padding for smaller screens */
    margin-bottom: 30px;
    text-align: center;
}

/* Promo Card Styling */
.promo-card {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 8px;
    max-width: 95%; /* Fit the card better on smaller screens */
    margin: 0 auto;
}

/* Promo Title Styling */
.promo-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #D76E00;
    margin-bottom: 16px;
}

/* Promo Subtitle Styling */
.promo-subtitle {
    color: #6c757d;
    font-style: italic;
    margin-bottom: 16px;
    font-size: 0.95rem; /* Adjusted font size */
}

/* Marquee */
.marquee {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    position: relative;
    background-color: #f9f9f9;
    padding: 6px 0;
}

.title {
    position: relative;
    z-index: 1;
}

.marquee-content {
    display: inline-block;
    padding-right: 15px; /* Reduced padding between repeats */
    font-size: 12px; /* Smaller font size */
    font-weight: bold;
    color: #333;
    animation: marqueeAnimation 12s linear infinite;
}

/* Keyframes for marquee animation */
@keyframes marqueeAnimation {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Jeep Animation */
.jeep-animation {
    bottom: -9px; /* Further adjust bottom position */
    left: -60px; /* Adjusted start position */
    animation: moveJeep 8s linear infinite;
}

.jeep-animation img {
    width: 50px; /* Reduced size of jeep image */
    height: auto;
}


}

@media (min-width: 513px) and (max-width: 767px) {
/* For screens between 513px and 767px */


.container, .container-sm {
    max-width: 540px !important;
}
/* Banner */
/* .banner {
    padding: 40px; /* Slightly increase padding for better spacing */
    /* background-size: cover; */
} */

/* Text Content */
.text-content h1 {
    font-size: 2rem; /* Adjust font size for readability on tablets */
    margin-bottom: 10px;
}

.text-content p {
    font-size: 1.1rem; /* Increase font size slightly for readability */
    margin-bottom: 20px;
}

/* Search Bar */
.search-bar {
    width: 100%;
    margin-bottom: 20px; /* Slightly increased margin for spacing */
}

.fancy-search {
    padding: 12px; /* Adjust padding for better fit */
    font-size: 18px; /* Increase font size for better readability */
}

#searchResults {
    max-height: 250px; /* Increase max-height for better display of results */
    padding: 10px 15px;
    width: 100%;
    box-sizing: border-box;
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 9999;
    border-radius: 4px;
}

.dropdown-item {
    padding: 12px;
    font-size: 16px; /* Slightly larger font size */
    line-height: 1.5; /* Increase line height for readability */
}

/* Why Choose Us */
.why-choose-us {
    padding: 30px 15px; /* Increase padding for better spacing */
}

.why-choose-us-title {
    font-size: 1.8em; /* Adjust title size for better visibility */
    margin-bottom: 20px;
}

/* USP Section Layout */
.usp-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 20px; /* Slightly increased gap */
    padding: 20px 0;
}

/* USP Card Layout */
.usp-card {
    width: 85%; /* Slightly reduce width for better fit */
    min-height: auto;
    max-height: none;
    text-align: center;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Slightly more pronounced shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.usp-card:hover {
    transform: translateY(-8px); /* Increased hover effect */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

/* Icon Styling */
.usp-card-icon {
    width: 70px; /* Adjust icon size to fit better */
    height: 70px;
    margin: 0 auto 15px;
}

/* Card Title Styling */
.usp-card-title {
    font-size: 1.2em; /* Slightly larger title font */
    font-weight: 600;
    color: #333;
    margin: 10px 0 8px;
}

/* Card Description Styling */
.usp-card-desc {
    font-size: 1em; /* Adjust text size */
    color: #666;
    max-height: 3.5em; /* Increase text limit for better readability */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Promo Section */
.promo-section {
    background-image: url('/images/camel-ride-desert-safari.jpg');
    background-size: cover;
    background-position: center;
    color: #7A430C;
    padding: 50px 30px; /* Adjust padding for better fit */
    margin-bottom: 40px;
    text-align: center;
}

/* Promo Card Styling */
.promo-card {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 8px;
    max-width: 85%; /* Fit the card better on medium screens */
    margin: 0 auto;
}

/* Promo Title Styling */
.promo-title {
    font-size: 2rem;
    font-weight: 700;
    color: #D76E00;
    margin-bottom: 25px;
}

/* Promo Subtitle Styling */
.promo-subtitle {
    color: #6c757d;
    font-style: italic;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

/* Marquee */
.marquee {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    position: relative;
    background-color: #f9f9f9;
    padding: 10px 0;
}

.title {
    position: relative;
    z-index: 1;
}

.marquee-content {
    display: inline-block;
    padding-right: 25px; /* Increased padding for better spacing */
    font-size: 16px; /* Larger text size for better readability */
    font-weight: bold;
    color: #333;
    animation: marqueeAnimation 12s linear infinite;
}

/* Keyframes for marquee animation */
@keyframes marqueeAnimation {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Jeep Animation */
.jeep-animation {
    bottom: -5px;
    left: -80px;
    animation: moveJeep 8s linear infinite;
}

.jeep-animation img {
    width: 75px; /* Adjusted size of jeep image */
    height: auto;
}



@media (min-width: 768px) and (max-width: 1024px) {
/* For screens between 768px and 1024px */

.container, .container-md {
    max-width: 720px !important;
}

/* Banner */
.banner {
    padding: 80px 20px; /* Reduce padding */
}

.text-content h1 {
    font-size: 2.5rem; /* Reduce font size */
}

.text-content p {
    font-size: 1.2rem; /* Reduce paragraph font size */
}

.search-bar {
    width: 100%; /* Full width on smaller screens */
    margin-bottom: 10px; /* Reduce margin */
}

.fancy-search {
    font-size: 16px; /* Adjust font size */
    padding: 12px; /* Adjust padding */
}

#searchResults {
    max-height: 150px; /* Smaller dropdown height */
}

.banner {
    background-position: center center; /* Ensure the image is always centered */
    height: 60vh; /* Adjust the height for smaller screens */
}

/* Why Choose Us */
.why-choose-us {
    padding: 40px 20px; /* Increase padding for better spacing */
}

.why-choose-us-title {
    font-size: 2em; /* Larger title font size */
    margin-bottom: 25px;
}

/* USP Section Layout */
.usp-section {
    flex-direction: row; /* Align items in a row for tablets */
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 40px 0;
}

/* USP Card Layout */
.usp-card {
    width: 48%; /* Adjust width for two-column layout */
    padding: 25px;
}

/* Icon Styling */
.usp-card-icon {
    width: 80px; /* Slightly larger icon size */
    height: 80px;
}

/* Promo Section */
.promo-section {
    padding: 60px 40px; /* Adjust padding for better fit */
    margin-bottom: 50px;
}

/* Promo Card Styling */
.promo-card {
    max-width: 80%; /* Adjust card width for better fit */
    padding: 35px;
}

/* Promo Title Styling */
.promo-title {
    font-size: 2.2rem;
    margin-bottom: 30px;
}

/* Marquee */
.marquee-content {
    font-size: 18px; /* Larger text size for readability */
    padding-right: 30px;
}

/* Jeep Animation */
.jeep-animation {
    bottom: 20px; /* Adjust bottom distance */
    left: -100px; /* Adjust start position for tablet */
}

.jeep-animation img {
    width: 85px; /* Slightly larger jeep size */
}
}


@media screen and (min-width: 1024px) and (max-width: 1440px) {
    /* Container */
    .container, .container-md {
        max-width: 90% !important; /* Slightly increase container width */
    }

    /* Banner */
    .banner {
        padding: 80px 40px; /* Add more padding for larger screens */
    }

    /* Text Content */
    .text-content h1 {
        font-size: 2.8rem; /* Adjust font size for readability */
    }

    .text-content p {
        font-size: 1.3rem; /* Slightly larger font size */
    }

    /* Search Bar */
    .fancy-search {
        font-size: 22px; /* Larger font size for better readability */
        padding: 18px; /* Increase padding */
    }

    /* USP Section Layout */
    .usp-section {
        flex-direction: row; /* Maintain row layout */
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 60px 20px; /* Increase padding for better spacing */
    }

    /* USP Card Layout */
    .usp-card {
        width: 48%; /* Maintain two-column layout */
        padding: 30px; /* Adjust padding */
    }

    /* Promo Section */
    .promo-section {
        padding: 80px 50px; /* Increase padding for better fit */
    }

    /* Promo Card Styling */
    .promo-card {
        max-width: 75%; /* Decrease width slightly */
        padding: 40px; /* Adjust padding */
    }

    /* Promo Title Styling */
    .promo-title {
        font-size: 2.4rem; /* Increase font size */
        margin-bottom: 35px;
    }

    /* Jeep Animation */
    .jeep-animation {
        left: -120px; /* Adjust jeep position */
    }

    .jeep-animation img {
        width: 100px; /* Larger jeep size */
    }
}


/* testomonial */

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .testimonial-container {
        flex-direction: column; /* Stack testimonials on smaller screens */
        align-items: center;
    }
  
    .testimonial-item {
        flex: 1 1 80%; /* More space on smaller screens */
        margin-bottom: 20px;
    }
    .table th, .table td {
        font-size: 12px;
        padding: 8px;
    }

    .table {
        font-size: 14px;
    }

    .table img {
        width: 30px; /* Adjust image size on smaller screens */
    }

    /* Make the quantity input and update button stack on small screens */
    .form-control, .btn {
        width: 100%; /* Full width on small screens */
        margin-bottom: 10px;
    }

    .row > .col-md-6 {
        margin-bottom: 20px; /* Add space between columns */
    }

    .cart-item {
        width: 100%; /* Full width for each item */
        display: block;
    }

    .cart-summary {
        text-align: center; /* Center text for smaller screens */
    }

    /* Adjust button width on smaller screens */
    .btn-block {
        width: 100%; /* Full width button on small screens */
    }

    /* Form Elements */
    .quantity {
        width: 100%; /* Full width input on mobile */
        margin-bottom: 10px;
    }
    /* .banner {
        padding: 80px 20px; /* Reduce padding for smaller screens */
    } */

    .banner {
        padding: 80px 20px; /* Reduce padding */
    }

    .text-content h1 {
        font-size: 2.5rem; /* Reduce font size */
    }

    .text-content p {
        font-size: 1.2rem; /* Reduce paragraph font size */
    }

    .search-bar {
        width: 100%; /* Full width on smaller screens */
        margin-bottom: 10px; /* Reduce margin */
    }

    .fancy-search {
        font-size: 16px; /* Adjust font size */
        padding: 12px; /* Adjust padding */
    }

    #searchResults {
        max-height: 150px; /* Smaller dropdown height */
    }

    .banner {
        background-position: center center; /* Ensure the image is always centered */
        height: 60vh; /* Adjust the height for smaller screens */
    }
  
  
  @media (max-width: 480px) {
    .section-title {
        font-size: 1.5rem; /* Reduce font size for smaller devices */
    }
  
    .testimonial-text {
        font-size: 0.9rem; /* Adjust text size */
    }
  
    .testimonial-author {
        font-size: 1rem; /* Adjust author font size */
    }
    .table th, .table td {
        font-size: 10px; /* Further reduce text size for very small screens */
        padding: 5px;
    }

    .section-title {
        font-size: 18px; /* Adjust font size for headings on small screens */
    }

    .form-control, .btn {
        font-size: 14px; /* Adjust font size of form elements */
    }

    .row > .col-md-6 {
        margin-bottom: 10px;
    }

    .text-right {
        text-align: left !important; /* Align total price on the left for very small screens */
    }
    .cart-item h5 {
        font-size: 16px; /* Adjust heading size */
    }

    .cart-item p {
        font-size: 12px; /* Adjust font size for small screens */
    }

    .cart-summary h3 {
        font-size: 16px;
    }

    .quantity {
        width: 100%; /* Ensure input is full-width on very small screens */
    }
    .banner {
        padding: 60px 10px; /* Further reduce padding */
    }

    .text-content h1 {
        font-size: 2rem; /* Further reduce font size of the heading */
    }

    .text-content p {
        font-size: 1rem; /* Reduce paragraph font size */
    }

    .search-bar {
        width: 100%;
        margin-bottom: 15px;
    }

    .fancy-search {
        font-size: 14px; /* Reduce font size of the search bar */
    }

    #searchResults {
        max-height: 100px; /* Smaller dropdown height */
    }
      .responsive-map iframe {
        width: 100%;  /* Make it take full width */
        height: 300px; /* Adjust height based on screen size */
        border: none;
    }
  }


  @media screen and (max-width: 800px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
    .column img {
      filter: grayscale(0) brightness(1);
    }
  }