/* ===========================
   RESPONSIVE STYLES
   =========================== */

/* ===== HEADER & NAV ===== */

/* ≤1400px */
@media (max-width: 1400px) {
    .container {
        max-width: 1140px;
    }
}

/* ≤1200px */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }

    .header-logo-wrapper h3 {
        font-size: 42px;
    }
}

/* ≤992px — Tablet */
@media (max-width: 992px) {
    .header-logo-wrapper h3 {
        font-size: 32px;
    }

    .nav-list {
        gap: 24px;
    }

    .nav-link {
        font-size: 16px;
    }

    .main-nav {
        display: none;
    }

    .hamburger {
        display: flex;
    }
}

/* ===== BANNER SECTION ===== */

/* ≤1400px */
@media (max-width: 1400px) {
    .banner-sec {
        min-height: 650px;
    }

    .banner-content-wrapper h1 {
        font-size: 46px;
    }
}

/* ≤1200px */
@media (max-width: 1200px) {
    .banner-sec {
        min-height: 580px;
        padding: 60px 0;
    }

    .banner-content-wrapper h1 {
        font-size: 42px;
    }

    .banner-content-wrapper p {
        max-width: 75%;
        font-size: 17px;
    }
}

/* ≤992px */
@media (max-width: 992px) {
    .banner-sec {
        min-height: 500px;
        padding: 50px 0;
    }

    .banner-content-wrapper h1 {
        font-size: 36px;
        line-height: 1.4;
    }

    .banner-content-wrapper p {
        font-size: 16px;
        max-width: 85%;
    }

    .banner-content-wrapper a {
        padding: 13px 24px;
        font-size: 13px;
    }
}

/* ≤768px */
@media (max-width: 768px) {
    .banner-sec {
        min-height: 420px;
        padding: 40px 0;
    }

    .banner-content-wrapper h1 {
        font-size: 28px;
        line-height: 1.35;
    }

    .banner-content-wrapper p {
        font-size: 15px;
        max-width: 95%;
        margin-bottom: 16px;
    }

    .banner-content-wrapper a {
        padding: 12px 22px;
        font-size: 13px;
    }
}

/* ≤576px */
@media (max-width: 576px) {
    .listing-search-wrapper {grid-template-columns: 1fr;}
    .banner-sec {
        min-height: 360px;
        padding: 35px 0;
    }

    .banner-content-wrapper h1 {
        font-size: 24px;
    }

    .banner-content-wrapper p {
        font-size: 14px;
        line-height: 1.6;
    }

    .banner-content-wrapper a {
        padding: 11px 20px;
        font-size: 12px;
    }
}

/* ===== ABOUT SECTION ===== */

/* ≤1400px */
@media (max-width: 1400px) {
    .about-img img {
        min-height: 600px;
    }
}

/* ≤1200px */
@media (max-width: 1200px) {
    section.about-sec {
        padding: 100px 0 21px;
    }

    .about-heading-wrapper h2 {
        font-size: 42px;
    }

    .about-img img {
        min-height: 540px;
    }

    .about-content-wrapper img {
        height: 420px;
    }
}

/* ≤992px — Tablet */
@media (max-width: 992px) {
    section.about-sec {
        padding: 80px 0 16px;
    }

    .about-heading-wrapper h2 {
        font-size: 36px;
    }

    .about-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .about-img img {
        min-height: 420px;
        max-height: 500px;
    }

    .about-content-wrapper img {
        height: 360px;
    }

    .about-content-wrapper p {
        font-size: 16px;
    }
}

/* ≤768px — Mobile */
@media (max-width: 768px) {
    section.about-sec {
        padding: 60px 0 12px;
    }

    .about-heading-wrapper h5 {
        font-size: 13px;
        letter-spacing: 2px;
    }

    .about-heading-wrapper h2 {
        font-size: 28px;
    }

    .about-wrapper {
        gap: 24px;
    }

    .about-img img {
        min-height: 320px;
        max-height: 400px;
    }

    .about-tabs-wrapper {
        padding: 12px;
    }

    .about-tabs {
        font-size: 12px;
        padding: 10px 14px;
    }

    .about-content-wrapper img {
        height: 280px;
    }

    .about-content-wrapper p {
        font-size: 15px;
        line-height: 1.55;
    }
}

/* ≤576px */
@media (max-width: 576px) {
    section.about-sec {
        padding: 45px 0 10px;
    }

    .about-heading-wrapper h2 {
        font-size: 24px;
    }

    .about-img img {
        min-height: 260px;
        max-height: 340px;
    }

    .about-top-tabs,
    .about-bottom-tabs {
        gap: 8px;
    }

    .about-tabs {
        font-size: 11px;
        padding: 8px 12px;
    }

    .about-bottom-tabs {
        padding-right: 22px;
    }

    .about-content-wrapper img {
        height: 220px;
    }

    .about-content-wrapper p {
        font-size: 14px;
        margin: 12px 0;
    }

    .about-content-wrapper a {
        padding: 13px 24px;
        font-size: 13px;
    }
}

/* ===== COUNTER SECTION ===== */

/* ≤992px — Tablet */
@media (max-width: 992px) {
    .counter-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 30px;
    }

    .counter-number,
    .counter-suffix {
        font-size: 42px;
    }
}

/* ≤768px */
@media (max-width: 768px) {
    .counter-sec {
        padding: 60px 0;
    }

    .counter-number,
    .counter-suffix {
        font-size: 38px;
    }

    .counter-label {
        font-size: 16px;
    }
}

/* ≤576px — Mobile */
@media (max-width: 576px) {
    .counter-sec {
        padding: 45px 0;
    }

    .counter-wrapper {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .counter-number,
    .counter-suffix {
        font-size: 40px;
    }

    .counter-label {
        font-size: 15px;
        margin-top: 8px;
    }
}

/* ===== FOOTER SECTION ===== */

/* ≤992px — Tablet */
@media (max-width: 992px) {
    .footer-sec {
        padding: 50px 0 40px;
    }

    .footer-first-row {
        padding-bottom: 30px;
    }

    .footer-second-row {
        grid-template-columns: auto 1fr;
        gap: 30px;
        padding-top: 30px;
    }

    .quick-links:last-child {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* ≤768px — Mobile */
@media (max-width: 768px) {
    .footer-sec {
        padding: 40px 0 35px;
    }

    .footer-first-row {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }

    .footer-social-icon {
        justify-content: center;
    }

    .footer-second-row {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 35px;
    }

    .quick-links:last-child {
        justify-self: center;
    }

    .subscribe-newsletter form {
        justify-content: center;
    }

    .subscribe-newsletter input[type="email"] {
        min-width: 180px;
    }
}

/* ≤576px — Small Mobile */
@media (max-width: 576px) {
    .footer-sec {
        padding: 35px 0 30px;
    }

    .footer-logo-wrapper h2 {
        font-size: 26px;
    }

    .quick-links h3 {
        font-size: 20px;
    }

    .quick-links ul li a {
        font-size: 15px;
    }

    .subscribe-newsletter input[type="email"] {
        min-width: 150px;
        padding: 10px 14px;
        font-size: 14px;
    }

    .subscribe-newsletter button {
        padding: 10px 20px;
        font-size: 14px;
    }

    .copyright-text {
        font-size: 14px;
    }
}

/* ===== LISTING PAGE ===== */

/* ≤992px — Tablet */
@media (max-width: 992px) {
    .alphabet-btn {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }

    .listing-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* ≤768px — Mobile */
@media (max-width: 768px) {
    .alphabet-filter {
        gap: 6px;
    }

    .alphabet-btn {
        width: 36px;
        height: 36px;
        font-size: 13px;
    }

    .listing-search-wrapper {
        margin-bottom: 30px;
    }

    .listing-search-input input {
        padding: 12px 16px 12px 42px;
        font-size: 14px;
    }

    .listing-wrapper {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .listing-sec {
        padding: 60px 0 50px;
    }

    .listing-heading-wrapper h2 {
        font-size: 28px;
    }
}

/* ≤576px — Small Mobile */
@media (max-width: 576px) {
    .alphabet-btn {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .listing-heading-wrapper h2 {
        font-size: 24px;
    }

    .listing-sec {
        padding: 45px 0 40px;
    }
}