/* ==================================================
   Responsive CSS
   ================================================== */

/*
 * 1. STYLES FOR ALL SMALLER SCREENS (TABLETS & PHONES)
 * This block targets any screen up to 991px wide.
*/
@media (max-width: 991px) {
    /* Layout & Visibility */
    .col-lg-9.active {
        display: none !important;
    }
    ul.top-list-1,
    .tp-mega-full,
    .header-menu .tp-mega-full {
        display: none;
    }
    .icon-bars-card {
        display: block;
    }
    .payment-method {
        float: left;
    }

    .top-header ul.top-list-1 li {
        display: none;
    }

    /* Hero Section */
    .hero-section .hero-content h1,
    .hero-screen .hero-content h1 {
        font-size: 20px;
    }
    .hero-section .hero-content p {
        font-size: 9px;
    }
    .hero-section .hero-content .btn.theme-btn {
        font-size: 10px;
        padding: 9px 30px;
    }
    .hero-screen {
        padding: 80px 0px;
    }

    /* General Section & Component Adjustments */
    .home_1 .search-card {
        position: relative;
        bottom: 0px;
        padding: 80px 0;
    }
    .about-section {
        padding: 20px 0px 60px 0px;
    }
    .footer-widget-card {
        padding: 40px 20px 0px 20px;
    }
    .breadcrumb-section .breadcrumb-card h2 {
        font-size: 30px;
    }
    .sidebar .widget-card .widget-body ul.gallery-card li {
        width: 100%;
    }
    .home_1 .search-card .search-card-inner .search-btn {
        margin-top: 0px;
    }
    .newsletter-card .newsletter-form .newsletter-btn {
        padding: 8px 10px;
    }
    .newsletter-card .newsletter-form input.form-control {
        padding: 10px 110px 10px 10px;
    }
    .modal_newsletter_card .modal-body .newsletter-card {
        padding: 0px;
    }
    .cookie_consent_card.left {
        left: 0px;
    }
    .cookie_consent_card.right {
        right: 0px;
    }
    .cookie_consent_card {
        max-width: 100%;
        bottom: 10px;
    }
    .newsletter-card {
        padding: 30px;
    }
}

/*
 * 2. STYLES ONLY FOR MOBILE
 * This block targets screens 767px and smaller.
*/
@media (max-width: 767px) {
    .image-gallery img.main-image {
        object-fit: contain !important;
    }
    .about-section .col-lg-5 > .row:last-of-type {
        display: flex;
        gap: 15px;
        margin-left: 0;
        margin-right: 0;
    }
    .about-section .col-lg-5 > .row:last-of-type > .col-12 {
        flex: 1;
        padding: 0;
    }
    .about-section .about-img img {
        border-radius: 8px;
    }
    .about-card .row.mb40 {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .about-card .row.mb40 .info-card {
        border-radius: 10px;
    }
}

/*
 * 3. STYLES ONLY FOR TABLETS
 * This block targets the tablet range specifically.
*/
@media (min-width: 768px) and (max-width: 991px) {
    .contact-info .row > .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}


/*
 * 4. STYLES FOR ALL LARGER SCREENS (DESKTOP)
 * This block targets any screen 992px or wider.
*/
@media (min-width: 992px) {
    .col-12.col-md-6.col-lg-4 {
        width: 33%;
    }
    .col-sm-12.col-md-6.col-lg-4 {
        width: 25%;
    }
}