/* Responsive Scaling for 1400x900, 1366x768, 1280x800 */
/* Reference Design: 1600x900 */

/* ========== Global Base ========== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

/* Footer logo: prevent overflow on all screens */
.footer-bottom-wrap img[alt="Logo"] {
    max-width: 230px;
    width: 100% !important;
    height: auto !important;
}

/* ========== 1400x900 - Scale: 87.5% ========== */
@media screen and (max-width: 1400px) and (min-width: 1367px) {
    :root {
        --scale-factor: 0.875;
    }

    html {
        font-size: 87.5%;
    }

    .container {
        max-width: 1225px;
    }

    .tw-container-1750-px {
        max-width: 1225px;
    }

    .banner-two-area {
        min-height: 787.5px;
    }

    .banner-two-title {
        font-size: calc(var(--heading-one) * 0.875);
    }

    .header .logo img,
    .max-w-200-px {
        max-width: 175px;
    }

    .py-120 {
        padding-top: 105px;
        padding-bottom: 105px;
    }
}

/* ========== 1366x768 - Scale: 85.375% ========== */
@media screen and (max-width: 1366px) and (min-width: 1281px) {
    :root {
        --scale-factor: 0.85375;
    }

    html {
        font-size: 85.375%;
    }

    .container {
        max-width: 1195px;
    }

    .tw-container-1750-px {
        max-width: 1195px;
    }

    .banner-two-area {
        min-height: 768px;
    }

    .banner-two-title {
        font-size: calc(var(--heading-one) * 0.85375);
    }

    .header .logo img,
    .max-w-200-px {
        max-width: 170px;
    }

    .py-120 {
        padding-top: 102px;
        padding-bottom: 102px;
    }
}

/* ========== 1280x800 - Scale: 80% ========== */
@media screen and (max-width: 1280px) and (min-width: 1200px) {
    :root {
        --scale-factor: 0.8;
    }

    html {
        font-size: 80%;
    }

    .container {
        max-width: 1120px;
    }

    .tw-container-1750-px {
        max-width: 1120px;
    }

    .banner-two-area {
        min-height: 720px;
    }

    .banner-two-title {
        font-size: calc(var(--heading-one) * 0.8);
    }

    .header .logo img,
    .max-w-200-px {
        max-width: 160px;
    }

    .py-120 {
        padding-top: 96px;
        padding-bottom: 96px;
    }
}

/* ========== Common Adjustments for 1200-1400px ========== */
@media screen and (max-width: 1400px) and (min-width: 1200px) {
    body {
        overflow-x: hidden;
    }

    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    .row {
        margin-left: -12px;
        margin-right: -12px;
    }

    .row > * {
        padding-left: 12px;
        padding-right: 12px;
    }

    .swiper-slide img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .whatsapp-button {
        bottom: 70px;
    }

    .call-button {
        bottom: 140px;
    }

    .whatsapp-button img,
    .call-button img {
        transform: scale(0.9);
    }
}

/* ========== Tablet (992px - 1199px) ========== */
@media screen and (max-width: 1199px) {
    /* Header: hide phone call widget at tablet */
    .header-call {
        display: none !important;
    }

    .header-right {
        gap: 16px !important;
    }

    /* About section: remove large left margin */
    .about-two-cursor-content.tw-ms-12,
    .cursor-content.tw-ms-12 {
        margin-left: 0 !important;
    }

    /* Contact cards: reduce horizontal padding */
    .contact-two-wrap.tw-px-16 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* CTA: reduce horizontal margin */
    .cta-area.tw-mx-11 {
        margin-left: 1rem !important;
        margin-right: 1rem !important;
    }

    /* Form: fix asymmetric padding */
    .contact-two-form.tw-pe-20 {
        padding-right: 1.5rem !important;
    }

    /* About right wrapper */
    .about-wrapper.tw-ps-14 {
        padding-left: 1.5rem !important;
    }

    /* Feature wrapper: allow wrap on tablet */
    .feature-wrapper.d-flex {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    .feature-wrapper .feature-item {
        flex: 1 1 calc(50% - 1rem) !important;
        min-width: 200px;
    }
}

/* ========== Mobile (max 991px) ========== */
@media screen and (max-width: 991px) {
    /* Global */
    body {
        overflow-x: hidden;
    }

    /* Images */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Sections */
    .py-120 {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .pt-120 {
        padding-top: 70px;
    }

    .pb-120 {
        padding-bottom: 70px;
    }

    /* Header */
    .header-call {
        display: none !important;
    }

    .header-right {
        gap: 12px !important;
    }

    .header .logo img,
    .max-w-200-px {
        max-width: 140px;
    }

    /* About two section: remove left offset on cursor content */
    .about-two-cursor-content,
    .cursor-content.tw-ms-12 {
        margin-left: 0 !important;
    }

    /* Feature wrapper: stack on mobile */
    .feature-wrapper.d-flex {
        flex-direction: column !important;
        gap: 1rem !important;
    }

    .feature-wrapper .feature-item {
        flex: unset !important;
        width: 100% !important;
        padding-right: 1rem !important;
    }

    /* Feature items: fix asymmetric padding-end on mobile */
    .feature-item.tw-pe-20 {
        padding-right: 1.25rem !important;
    }

    /* CTA section: remove horizontal margin that breaks mobile */
    .cta-area.tw-mx-11 {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
        border-radius: 1rem !important;
    }

    /* Contact form: fix asymmetric padding */
    .contact-two-form {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* Contact right wrapper: remove large left margin */
    .contact-two-right.tw-ms-10 {
        margin-left: 0 !important;
    }

    /* Contact info cards: reduce padding */
    .contact-two-wrap {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Footer logo: cap size */
    .footer-bottom-wrap img[alt="Logo"] {
        width: 160px !important;
        max-width: 100%;
    }

    /* Footer bottom: stack items */
    .footer-bottom-wrap {
        justify-content: center !important;
        text-align: center;
        gap: 1rem !important;
    }

    /* About wrapper: remove large padding */
    .about-wrapper.tw-ps-14 {
        padding-left: 0 !important;
        margin-top: 2rem;
    }

    /* Gallery slider container */
    .gallery-two-slider {
        overflow: hidden;
    }

    /* Room detail slider: cap height at tablet (768-991px) */
    .room-details-active img {
        height: 380px !important;
    }

    /* Email: allow wrapping on tablet too */
    .no-wrap-email {
        white-space: normal !important;
        word-break: break-all !important;
        word-wrap: break-word !important;
    }

    /* Gallery uniform grid: reduce height at tablet */
    .gallery-ip-wrapper img[style*="height: 350px"] {
        height: 260px !important;
    }
}

/* ========== Small Mobile (max 767px) ========== */
@media screen and (max-width: 767px) {
    /* Sections: reduce padding more aggressively */
    .py-120 {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .pt-120 {
        padding-top: 50px;
    }

    .pb-120 {
        padding-bottom: 50px;
    }

    /* Email: allow wrapping on small screens */
    .no-wrap-email {
        white-space: normal !important;
        word-break: break-all !important;
        word-wrap: break-word !important;
    }

    /* Contact card: ensure text wraps */
    .contact-two-wrap {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Service two thumb: consistent image height */
    .service-two-thumb img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    /* Experience thumb images */
    .experience-thumb img {
        width: 100%;
        height: 220px;
        object-fit: cover;
    }

    /* About thumb image */
    .about-two-thumb img,
    .about-thumb img {
        width: 100%;
        height: auto;
        border-radius: 12px;
    }

    /* CTA: remove margin entirely on small screens */
    .cta-area.tw-mx-11 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-radius: 0 !important;
    }

    /* Room detail slider: reduce fixed height */
    .room-details-active img {
        height: 320px !important;
    }

    /* Floating buttons: reduce size on mobile */
    .whatsapp-button img {
        width: 55px !important;
        height: 55px !important;
    }

    .call-button img {
        width: 40px !important;
        height: 40px !important;
    }

    .whatsapp-button {
        bottom: 65px !important;
        right: 8px !important;
    }

    .call-button {
        bottom: 130px !important;
        right: 16px !important;
    }

    /* Banner: reduce minimum height */
    .banner-two-area {
        min-height: 500px;
    }

    /* Feature two slider area */
    .feature-two-area .cursor-text {
        font-size: 1.25rem !important;
        line-height: 1.6 !important;
    }

    /* Counter: reduce large font */
    .counter-two-title {
        font-size: 1.75rem !important;
    }

    /* Breadcrumb: reduce title size */
    .breadcrumb-title {
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
    }

    /* Tourist cards: ensure full width on xs */
    .tourist-card {
        margin-bottom: 0;
    }

    /* Footer */
    .footer-bottom-wrap img[alt="Logo"] {
        width: 130px !important;
    }

    /* About section list items: prevent overflow */
    .about-list li {
        white-space: normal;
        word-break: break-word;
    }

    /* Header button: reduce padding */
    .header-button .tw-px-14 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ========== Extra Small Mobile (max 575px) ========== */
@media screen and (max-width: 575px) {
    /* Global container */
    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Sections */
    .py-120 {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .pt-120 {
        padding-top: 40px;
    }

    .pb-120 {
        padding-bottom: 40px;
    }

    /* Banner */
    .banner-two-area {
        min-height: 420px;
    }

    /* Service room cards: consistent image */
    .service-two-thumb img {
        height: 200px;
    }

    /* Room badge tags: wrap better */
    .service-two-thumb ul.d-flex {
        flex-wrap: wrap;
        gap: 4px !important;
    }

    .service-two-thumb ul li {
        font-size: 0.7rem;
        padding: 3px 10px !important;
    }

    /* Feature two slider: fix padding */
    .feature-two-wrapper {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Gallery section header: stack CTA button */
    .gallery-two-btn {
        justify-content: flex-start !important;
    }

    /* Contact form */
    .contact-two-form {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Footer: center everything */
    .footer-bottom-wrap {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* About feature cards: full width */
    .feature-two-item {
        margin-bottom: 1rem;
    }

    /* Cursor text in hero sections */
    .cursor-text {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
    }

    /* Floating buttons: ensure not hidden by content */
    .whatsapp-button {
        bottom: 60px !important;
        right: 5px !important;
    }

    .call-button {
        bottom: 120px !important;
        right: 12px !important;
    }

    /* Amenity cards: full padding */
    .amenity-card {
        padding: 1.25rem 0.75rem !important;
    }

    /* Tourist card padding */
    .tourist-card-icon.tw-p-8 {
        padding: 1.25rem !important;
    }

    /* Header: Book Now button text  */
    .header-button a {
        font-size: 0.85rem;
    }

    /* Gallery uniform grid: reduce fixed height on small screens */
    .gallery-ip-wrapper img[style*="height: 350px"] {
        height: 220px !important;
    }

    /* Room detail slider: reduce height on small screens */
    .room-details-active img {
        height: 260px !important;
    }
}