@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    /* Brand Colors */
    --color-primary: #3c5134;
    /* Ocean Blue */
    --color-primary-hover: #3c5134;
    --color-surface: #ffffff;
    --color-text-main: #0f172a;
    --color-text-muted: #64748b;
    --color-bg-light: #f8fafc;
    --color-accent: #f59e0b;
    /* Warm sun accent */
}

html {
    width: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--color-text-main);
    background-color: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
}

/* Utilities */
.text-primary {
    color: var(--color-primary);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-primary:hover {
    background-color: var(--color-primary-hover);
}

.text-accent {
    color: var(--color-accent);
}

/* Custom shadows for a modern, airy feel */
.shadow-soft {
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.05);
}

/* Prevents the browser from performing its own 'bounce' or 'zoom' actions on the slider */
.swiper {
    touch-action: pan-y;
    /* Allows vertical scrolling (Y-axis) but lets Swiper handle horizontal (X-axis) */
}

/* Optional: Smooth out the slide transition to prevent jitter */
.swiper-wrapper {
    transition-timing-function: ease-out;
}

.section {
    width: 100%;
    overflow-x: hidden;
}

/* Change the color of the active dot */
.swiper-pagination-bullet-active {
    background: #e99c6d !important;
    /* Sunset Peach */
    opacity: 1 !important;
}

/* Change the color of the inactive dots */
.swiper-pagination-bullet {
    background: #3c5134 !important;
    /* Forest Green */
    opacity: 0.3;
    /* Makes them subtle when not active */
}

/* If you are using dynamic bullets (the ones that change size) */
.swiper-pagination-active-main {
    background: #e99c6d !important;
}

#room-results > div:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#room-results h4:first-of-type {
    margin-top: 0 !important;
}

.roomhtml:last-child {
    border: 0;
}