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

@media (max-width: 2000px) {}

@media (max-width: 1920px) {}

@media (max-width: 1800px) {}

@media (max-width: 1700px) {}

@media (max-width: 1600px) {
    .main-container {
        padding: 0 60px;
    }

    .right-container {
        padding-right: 60px;
    }

    .left-container {
        padding-left: 60px;
    }

    .common-heading h2 {
        font-size: var(--font-42px);
    }

    .common-heading p {
        font-size: var(--font-16px) !important;
    }

    .site-header .header-container {
        padding: 0 50px;
    }

    .hero-section .hero-title {
        font-size: var(--font-54px);
    }

    .discover-section .discover-title {
        font-size: var(--font-40px);
    }

    .spot-badge {
        padding: 14px 20px;
    }

    .spot-badge .spot-badge-ic {
        width: 25px;
        height: 17px;
        object-fit: contain;
    }

    .spot-badge .spot-badge-content h6 { 
        font-size: var(--font-16px);
    }

    .spot-badge .spot-badge-content span { 
        font-size: var(--font-14px);
    }

    .brunch-section .discover-grid .common-heading h2 {
        font-size: var(--font-40px);
    }
}

@media (max-width: 1500px) {
    .site-header .header-container {
        padding: 0 45px;
    }

    .site-header .nav-list {
        gap: 18px;
    }
}

@media (max-width: 1440px) {
    .hero-section .hero-title {
        font-size: var(--font-48px);
    }
}

@media (max-width: 1400px) {
    .site-header .header-container {
        padding: 0 40px;
    }

    .spot-badge.right {
        right: 0;
    }
}

@media (max-width: 1300px) {
    .site-header .nav-list {
        gap: 16px;
    }

    .site-header .header-socials {
        margin-left: 16px;
    }
}

@media (max-width: 1240px) {
    .site-header .header-container {
        padding: 0 30px;
    }
}

@media (max-width: 1200px) {
    .hero-section .hero-title {
        font-size: var(--font-44px);
    }

    .hero-section {
        padding: 130px 24px 80px;
    }

    .discover-section .discover-grid {
        gap: 50px;
    }

    .discover-section .discover-title {
        font-size: var(--font-36px);
    }
}

@media (max-width: 1140px) {
    .site-header .nav-list {
        gap: 14px;
    }

    .site-header .nav-link {
        font-size: var(--font-12px);
    }
}

@media (max-width: 1024px) {
    .hero-section .hero-title {
        font-size: var(--font-42px);
    }
}

@media (max-width: 993px) {
    .main-container {
        padding: 0 24px;
    }
    .image-fix {
        width: 100%;
        padding-bottom: 30px;
    }

    .left-container {
        padding: 0 24px;
    }

    .right-container {
        padding: 0 24px;
    }

    .common-heading h2 {
        font-size: var(--font-40px);
    }

    .common-heading p {
        font-size: var(--font-18px);
    }

    .section-padding-top {
        padding-top: 35px;
    }

    .section-padding-bottom {
        padding-bottom: 35px;
    }

    .common-heading h2 br {
        display: none;
    }

    .common-heading p br {
        display: none;
    }

    /* Header */
    .site-header {
        padding: 14px 0;
    }

    .site-header .header-container {
        padding: 0 24px;
    }

    .site-header .main-nav,
    .site-header .header-socials {
        display: none;
    }

    .site-header .hamburger {
        display: flex;
    }

    .site-header .site-logo img {
        max-width: 120px;
        max-height: 56px;
    }

    .site-header.is-sticky {
        padding: 8px 0;
    }

    .site-header.is-sticky .site-logo img {
        max-width: 110px;
        max-height: 50px;
    }

    /* Hero */
    .hero-section {
        padding: 110px 24px 70px;
        min-height: 80vh;
    }

    .hero-section .hero-title {
        font-size: var(--font-40px);
    }

    /* Discover */
    .discover-section .discover-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .discover-section .discover-content {
        max-width: 100%;
        order: 1;
    }

    .discover-section .discover-media {
        order: 2;
        margin: 0 auto;
    }

    .discover-section .discover-image {
        max-width: 420px;
    }

    .discover-section .discover-title {
        font-size: var(--font-36px);
    }

    .secondary-heading p {
        max-width: 100%;
    }

    /* .breakfast-cafe-section .card-grid {
        padding-top: 90px;
    } */

    .flex-direction-reverse {
        flex-direction: column-reverse;
    }

    .breakfast-cafe-section .secondary-heading {
        margin-top: 60px;
    }

    .spot-badge.left {
        left: 0;
    }

    .spot-badge.right {
        right: 0;
        bottom: 140px;
    }

    .luxury-brunch-images {
        margin-top: 24px;
    }

    .luxury-brunch-section .common-heading {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .common-heading h2,
    .heading-col-right h2 {
        font-size: var(--font-36px) !important;
    }

    .common-heading p {
        font-size: var(--font-16px);
        margin-top: 10px;
    }

    .custom-card .custom-card-top img {
        height: 300px;
    }

    .hero-section {
        padding: 100px 22px 60px;
        min-height: 78vh;
    }

    .hero-section .hero-title {
        font-size: var(--font-36px);
        margin-bottom: 28px;
    }

    .hero-section .hero-badge {
        font-size: var(--font-12px);
        padding: 7px 14px;
        margin-bottom: 20px;
    }

    .hero-section .btn {
        padding: 12px 24px;
        font-size: var(--font-13px);
    }

    .discover-section .discover-grid {
        gap: 40px;
    }

    .discover-section .discover-title {
        font-size: var(--font-32px);
    }

    .discover-section .discover-eyebrow {
        font-size: var(--font-16px);
    }

    .discover-section .discover-image {
        max-width: 380px;
        border-radius: 22px;
    }

    .discover-section .discover-image-caption .caption-bottom {
        font-size: var(--font-28px);
    }

    .discover-section .rating-card {
        right: -6px;
        padding: 12px 14px;
        min-width: 118px;
    }

    .discover-section .rating-card .rating-score {
        font-size: var(--font-22px);
    }

    .spot-badge.right {
        bottom: 115px;
    }
}

@media (max-width: 670px) {
    .main-heading {
        font-size: 34px;
    }

    .hero-section .hero-title {
        font-size: var(--font-32px);
    }

    .hero-section .hero-title br {
        display: none;
    }
}

@media (max-width: 600px) {
    .hero-section {
        padding: 96px 20px 56px;
    }

    .hero-section .hero-title {
        font-size: var(--font-30px);
    }
}

@media (max-width: 576px) {
    .site-header .header-container {
        padding: 0 20px;
    }

    .site-header .site-logo img {
        max-width: 110px;
        max-height: 52px;
    }

    .hero-section .hero-buttons {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 300px;
    }

    .hero-section .btn {
        width: 100%;
    }

    .spot-badge.right {
        bottom: 90px;
    }

    .carousel-section .single img,
    .carousel-section .overlay {
        border-radius: 20px !important;
    }
}

@media (max-width: 480px) {
    .primary-btn,
    .secondary-btn {
        font-size: var(--font-14px);
    }

    .common-heading h2 br {
        display: none;
    }

    .common-heading h2 {
        font-size: var(--font-28px) !important;
    }

    .common-heading h6 {
        font-size: var(--font-16px);
    }

    .site-header .header-container {
        padding: 0 18px;
    }

    .site-header .site-logo img {
        max-width: 100px;
        max-height: 48px;
    }

    .mobile-menu {
        width: 280px;
    }

    .hero-section {
        padding: 90px 18px 56px;
        min-height: 70vh;
    }

    .hero-section .hero-title {
        font-size: var(--font-28px);
        margin-bottom: 24px;
    }

    .hero-section .hero-badge {
        letter-spacing: 1px;
    }

    .hero-section .hero-buttons {
        max-width: 260px;
    }

    .hero-section .btn {
        padding: 11px 20px;
        font-size: var(--font-13px);
    }

    .discover-section .discover-title {
        font-size: var(--font-28px);
    }

    .discover-section .discover-eyebrow {
        font-size: var(--font-14px);
    }

    .discover-section .discover-features {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .discover-section .discover-image {
        max-width: 100%;
        border-radius: 20px;
        aspect-ratio: 5 / 6;
    }

    .discover-section .discover-image-caption {
        top: 16px;
        left: 16px;
    }

    .discover-section .discover-image-caption .caption-bottom {
        font-size: var(--font-24px);
    }

    .discover-section .rating-card {
        top: 20px;
        right: 0;
        padding: 10px 12px;
        min-width: 108px;
        border-radius: 12px;
    }

    .discover-section .rating-card .rating-score {
        font-size: var(--font-20px);
    }

    .discover-section .rating-card .rating-text {
        font-size: 11px;
    }

    .custom-faq .accordion-body {
        padding: 0 24px 20px 60px;
    }

    .custom-faq .accordion-body {
        font-size: var(--font-14px);
    }

    .custom-faq .accordion-button {
        padding: 15px 15px;
        font-size: var(--font-16px);
    }
}

@media (max-width: 426px) {
    .common-heading p {
        font-size: var(--font-14px);
    }

    .common-heading h2 {
        font-size: var(--font-26px);
    }

    .site-header .site-logo img {
        max-width: 92px;
        max-height: 44px;
    }

    .hero-section .hero-title {
        font-size: var(--font-26px);
    }

    .hero-section .hero-badge span {
        letter-spacing: 0.6px;
    }

    .discover-section .discover-title {
        font-size: var(--font-26px);
    }

    .discover-section .rating-card {
        top: 16px;
        padding: 8px 10px;
        min-width: 96px;
    }

    .discover-section .rating-card .rating-score {
        font-size: var(--font-18px);
    }

    .spot-badge .spot-badge-content h6 {
        font-size: var(--font-14px);
    }

    .spot-badge .spot-badge-content span {
        font-size: var(--font-12px);
    }

    .spot-badge.left {
        top: 35px;
    }

    .spot-badge.right {
        bottom: 65px;
    }

    .spot-badge .spot-badge-ic {
        width: 20px;
        height: auto;
    }
}

@media (max-width: 390px) {
    .common-heading h2 {
        font-size: var(--font-24px);
    }

    .site-header .header-container {
        padding: 0 14px;
    }

    .hero-section {
        padding: 84px 16px 48px;
    }

    .hero-section .hero-title {
        font-size: var(--font-24px);
    }

    .mobile-menu {
        width: 260px;
    }
}

@media (max-width: 360px) {
    .hero-section .hero-title {
        font-size: var(--font-22px);
    }

    .hero-section .hero-badge {
        font-size: 11px;
        padding: 6px 12px;
    }

    .hero-section .btn {
        padding: 10px 18px;
        font-size: var(--font-12px);
    }
}

@media (max-width: 320px) {
    .site-header .site-logo img {
        max-width: 84px;
        max-height: 40px;
    }

    .hero-section {
        padding: 78px 14px 42px;
    }

    .hero-section .hero-title {
        font-size: var(--font-20px);
        margin-bottom: 20px;
    }

    .hero-section .hero-badge {
        font-size: 10px;
        letter-spacing: 0.5px;
    }

    .hero-section .hero-buttons {
        max-width: 100%;
    }

    .mobile-menu {
        width: 240px;
    }
}

/* ============================================ */
/* **********   LANDSCAPE / SHORT  ********** */
/* ============================================ */
@media (max-height: 600px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 100px 24px 60px;
    }

    .hero-section .hero-title {
        font-size: var(--font-32px);
        margin-bottom: 22px;
    }

    .hero-section .hero-badge {
        margin-bottom: 16px;
    }
}

@media (max-height: 480px) and (orientation: landscape) {
    .hero-section {
        padding: 90px 24px 50px;
    }

    .hero-section .hero-title {
        font-size: var(--font-26px);
        margin-bottom: 18px;
    }
}