/*
Theme Name: Camping
Author: Vikas
Version: 1.0
*/
/* 1) Set the root font size */
html {
    font-size: 16px; /* 1rem = 16px */
}

/* ============================================= */
/*            COLOR VARIABLES                    */
/* ============================================= */

:root {
    /* Brand Colors */
    --brand-primary: #007bff;
    --brand-secondary: #6c757d;
    --brand-success: #28a745;
    --brand-info: #17a2b8;
    --brand-warning: #ffc107;
    --brand-danger: #dc3545;
    --brand-white: #ffffff;
    --brand-black: #000000;

    /* Gray Scale */
    --gray-darker: #1e1e1e;
    --gray-dark: #3a3a3a;
    --gray: #6c757d;
    --gray-light: #adb5bd;
    --gray-lighter: #dee2e6;
    --gray-white: #f8f9fa;

    /* Standard Colors */
    --red: #ff0000;
    --green: #008000;
    --blue: #0000ff;
    --yellow: #ffff00;
    --orange: #ffa500;
    --purple: #800080;
    --pink: #ff69b4;
    --cyan: #00ffff;
    --teal: #008080;
    --brown: #8b4513;
    --indigo: #4b0082;
    --violet: #ee82ee;
    --gold: #ffd700;
    --silver: #c0c0c0;
    --lime: #00ff00;
    --olive: #808000;
    --navy: #000080;
    --maroon: #800000;
    --rose: #ff007f;
    --beige: #f5f5dc;
    --mint: #98ff98;
    --skyblue: #87ceeb;

    /* Accents */
    --green-pea: #20632a;
    --old-gold: #cfb62d;
    --wedgewood: #537ab0;
    --dark-navy: #0f1b2d;
    --body-bg: #fff;

    /* Neutrals */
    --white: #fff;
    --gray-50: #f9f9f9;
    --gray-100: #e9e9e9;
    --gray-200: #ddd;
    --gray-300: #ccc;
    --gray-400: #aaa;

    /* Text Colors */
    --text-dark: #1e1e1e;
    --text-color: #333;
    --text-gray: #484848;
    --text-light: #f8f9fa;

    /* Special Section Backgrounds */
    --bg-light-yellow: #fcebb5; /* Soft Pastel Yellow */
    --bg-cream: #fff5cc; /* Light Cream */
    --bg-peach: #ffdfba; /* Soft Peach */
    --bg-light-orange: #ffd8a8; /* Light Orange */
    --bg-light-pink: #ffe0e0; /* Light Pink */
    --bg-soft-rose: #f8c8dc; /* Soft Rose */
    --bg-light-lavender: #e6e6fa; /* Light Lavender */
    --bg-light-purple: #e0d7f0; /* Existing Light Purple */
    --bg-skyblue: #0dcaf0; /* Light Blue */
    --bg-light-blue: #b3e0ff; /* Soft Pastel Blue */
    --bg-powder-blue: #d0e2ff; /* Powder Blue */
    --bg-light-cyan: #ccf5ff; /* Light Cyan */
    --bg-pale-green: #d4f8d4; /* Pale Green */
    --bg-mint-green: #c0f0c0; /* Soft Mint Green */
    --bg-green: #8dff8d; /* Existing Light Green */
    --bg-tea-green: #d9f7c9; /* Tea Green */
    --bg-light-mint: #e0ffe0; /* Light Mint */
    --bg-light-turquoise: #b2ebf2; /* Light Turquoise */
    --bg-soft-beige: #f5f5dc; /* Soft Beige */
    --bg-light-cream: #fff9e6; /* Light Creamy White */
    --bg-sand: #f4e1c9; /* Soft Sand */
    --bg-mellow-yellow: #f8e897; /* Mellow Yellow */
    --bg-light-gold: #ffedb5; /* Light Golden */
    --bg-light: #fff; /* Default Light */
}


/* ============================================= */
/*                 GLOBAL STYLES                */
/* ============================================= */
* {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    margin: 0; /* If you prefer reset approach, else remove. */
    padding: 0; /* If you prefer reset approach, else remove. */
}

body {
    font-family: 'Montserrat', Helvetica, Arial, sans-serif;
    background-color: var(--body-bg);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    transition: background-color 0.3s ease, color 0.3s ease;
}

p,
a,
div,
span {
    font-size: 1rem; /* equals 16px if html is 16px */
    line-height: 1.5;
}

/* 4) Headings in rems */
h1 {
    font-size: 2rem;   /* 32px if base is 16px */
    line-height: 1.2;
}
h2 {
    font-size: 1.75rem; /* 28px */
    line-height: 1.25;
}
h3 {
    font-size: 1.5rem;  /* 24px */
    line-height: 1.3;
}
h4 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.3;
}
h5 {
    font-size: 1.125rem; /* 18px */
    line-height: 1.4;
}
h6 {
    font-size: 1rem;    /* 16px */
    line-height: 1.4;
}

/* ============================================= */
/*         SPECIAL BACKGROUND CLASSES           */
/* ============================================= */

.bg-transparent{ background-color: transparent !important; }
.bg-light-yellow { background-color: var(--bg-light-yellow) !important; }
.bg-cream { background-color: var(--bg-cream) !important; }
.bg-peach { background-color: var(--bg-peach) !important; }
.bg-light-orange { background-color: var(--bg-light-orange) !important; }
.bg-light-pink { background-color: var(--bg-light-pink) !important; }
.bg-soft-rose { background-color: var(--bg-soft-rose) !important; }
.bg-light-lavender { background-color: var(--bg-light-lavender) !important; }
.bg-light-purple { background-color: var(--bg-light-purple) !important; }
.bg-skyblue { background-color: var(--bg-skyblue) !important; }
.bg-light-blue { background-color: var(--bg-light-blue) !important; }
.bg-powder-blue { background-color: var(--bg-powder-blue) !important; }
.bg-light-cyan { background-color: var(--bg-light-cyan) !important; }
.bg-pale-green { background-color: var(--bg-pale-green) !important; }
.bg-mint-green { background-color: var(--bg-mint-green) !important; }
.bg-green { background-color: var(--bg-green) !important; }
.bg-tea-green { background-color: var(--bg-tea-green) !important; }
.bg-light-mint { background-color: var(--bg-light-mint) !important; }
.bg-light-turquoise { background-color: var(--bg-light-turquoise) !important; }
.bg-soft-beige { background-color: var(--bg-soft-beige) !important; }
.bg-light-cream { background-color: var(--bg-light-cream) !important; }
.bg-sand { background-color: var(--bg-sand) !important; }
.bg-mellow-yellow { background-color: var(--bg-mellow-yellow) !important; }
.bg-light-gold { background-color: var(--bg-light-gold) !important; }
.bg-light { background-color: var(--bg-light) !important; }

.txt-light-yellow { color: var(--bg-light-yellow) !important; }
.txt-cream { color: var(--bg-cream) !important; }
.txt-peach { color: var(--bg-peach) !important; }
.txt-light-orange { color: var(--bg-light-orange) !important; }
.txt-light-pink { color: var(--bg-light-pink) !important; }
.txt-soft-rose { color: var(--bg-soft-rose) !important; }
.txt-light-lavender { color: var(--bg-light-lavender) !important; }
.txt-light-purple { color: var(--bg-light-purple) !important; }
.txt-skyblue { color: var(--bg-skyblue) !important; }
.txt-light-blue { color: var(--bg-light-blue) !important; }
.txt-powder-blue { color: var(--bg-powder-blue) !important; }
.txt-light-cyan { color: var(--bg-light-cyan) !important; }
.txt-pale-green { color: var(--bg-pale-green) !important; }
.txt-mint-green { color: var(--bg-mint-green) !important; }
.txt-green { color: var(--bg-green) !important; }
.txt-tea-green { color: var(--bg-tea-green) !important; }
.txt-light-mint { color: var(--bg-light-mint) !important; }
.txt-light-turquoise { color: var(--bg-light-turquoise) !important; }
.txt-soft-beige { color: var(--bg-soft-beige) !important; }
.txt-light-cream { color: var(--bg-light-cream) !important; }
.txt-sand { color: var(--bg-sand) !important; }
.txt-mellow-yellow { color: var(--bg-mellow-yellow) !important; }
.txt-light-gold { color: var(--bg-light-gold) !important; }
.txt-light { color: var(--bg-light) !important; }

/* =================================== */
/* 2) TABLETS (e.g., 768px–991px)      */
/* =================================== */
@media (max-width: 991.98px) {
    /* Slightly reduce base font size on tablets */
    html {
        font-size: 15px; /* 1rem = 15px */
    }
    /* You can also fine-tune headings if you prefer */
    h1 { font-size: 1.875rem; /* ~28px */ }
    h2 { font-size: 1.625rem; /* ~24px */ }
    /* etc. */
}

/* =================================== */
/* 3) MOBILE (e.g., below 576px)       */
/* =================================== */
@media (max-width: 575.98px) {
    /* Further reduce base font size on mobile */
    html {
        font-size: 14px; /* 1rem = 14px */
    }
    /* Optionally reduce headings further */
    h1 { font-size: 1.75rem; /* ~24.5px */ }
    h2 { font-size: 1.5rem;  /* 21px */ }
    /* etc. */
}
.text-justify {
    text-align: justify; /* 'justify-all' isn't widely supported */
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

a {
    color: var(--brand-primary);
    text-decoration: none;
}
a:hover {
    color: var(--old-gold);
    text-decoration: underline;
}

/* ============================================= */
/*               BUTTON STYLES                   */
/* ============================================= */
.btn {
    display: inline-block;
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
    text-decoration: none !important;
    cursor: pointer;
}

/* Primary Button */
.btn-primary {
    background-color: var(--green-pea);
    border-color: var(--green-pea);
    color: var(--white);
}
.btn-primary:hover {
    background-color: var(--brand-secondary);
    border-color: var(--brand-secondary);
    color: var(--text-dark);
}

/* Secondary Button */
.btn-secondary {
    background-color: var(--old-gold);
    border-color: var(--old-gold);
    color: var(--white);
}
.btn-secondary:hover {
    background-color: var(--wedgewood);
    border-color: var(--wedgewood);
    color: var(--white);
}

/* Success Button */
.btn-success {
    background-color: #28a745;
    border-color: #28a745;
    color: var(--white);
}
.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* Danger Button */
.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: var(--white);
}
.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* Warning Button */
.btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: var(--text-dark);
}
.btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}

/* Info Button */
.btn-info {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: var(--white);
}
.btn-info:hover {
    background-color: #138496;
    border-color: #117a8b;
}

/* Light Button */
.btn-light {
    background-color: var(--gray-50);
    border-color: var(--gray-100);
    color: var(--text-dark);
}
.btn-light:hover {
    background-color: var(--gray-100);
    border-color: var(--gray-200);
}

/* Dark Button */
.btn-dark {
    background-color: var(--dark-navy);
    border-color: var(--dark-navy);
    color: var(--white);
}
.btn-dark:hover {
    background-color: #0b1425;
    border-color: #0a1120;
}

/* Outlined Buttons */
.btn-outline-primary {
    background-color: transparent;
    border-color: var(--green-pea);
    color: var(--green-pea);
}
.btn-outline-primary:hover {
    background-color: var(--green-pea);
    color: var(--white);
}

.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--old-gold);
    color: var(--old-gold);
}
.btn-outline-secondary:hover {
    background-color: var(--old-gold);
    color: var(--white);
}

/* Disabled Button */
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Block-Level Button */
.btn-block {
    display: block;
    width: 100%;
}

/* Small Button */
.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
    border-radius: 0.3rem;
}

/* Large Button */
.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
    border-radius: 0.5rem;
}

/* ============================================= */
/*                    NAVBAR                     */
/* ============================================= */
.navbar {
    background-color: #fff;
    border-bottom: 2px solid var(--dark-navy);
    max-height: 80px;
}
.navbar .navbar-brand img {
    max-height: 100px;
    height: 80px;
    width: auto;
    margin-top: 40px;
}

.nav-link {
    color: var(--dark-navy); /* Dark text for better contrast on yellow */
    text-decoration: none;
    font-weight: bold;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.navbar .nav-link:hover {
    color: var(--brand-primary);
    text-decoration: none;
}

@media (max-width: 769px) {

    .navbar-collapse {
        background-color: #c9d1d9; /* match navbar color or choose another */
    }
    .navbar-nav .nav-link {
        font-size: 1rem;       /* ~16px */
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #aaa;
    }
    .navbar-nav .nav-link:not(:last-child) {
        margin-bottom: 5px;
    }
    .navbar .navbar-brand img {
        /* Keep the logo from growing too large on mobile */
        height: 60px;    /* adjust as needed */
        width: auto;
        margin-top: 0;
    }
    .sticky-top.relative{
        position: relative !important;
    }
}

/* ============================================= */
/*                PAGE HEADING                   */
/* ============================================= */
#page-heading {
    margin: 0;
    padding: 0 0 30px 0;
    text-align: center;
    color: var(--text-dark);
    background-color: #ffffff;
}
#page-heading h1{
    padding: 40px 0 10px 0;
}

/* ============================================= */
/*                  SECTION BASICS               */
/* ============================================= */
section,footer {
    padding:4rem 1rem
}
section.alternate {
    background-color: var(--white);
}

/* ============================================= */
/*                SECTION TITLE                  */
/* ============================================= */
.section-title {
    margin-bottom: 30px;
    text-align: center;
}
.section-title h2 {
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 10px;
}
.section-title p {
    font-size: 1.2rem;
    color: var(--text-gray); /* Replaced #555 with var(--text-gray) */
    margin: 0;
}

/* ============================================= */
/*              RESPONSIVE: GENERAL             */
/* ============================================= */
@media (max-width: 769px) {
    .section-title h2 {
        font-size: 2rem;
    }
    .section-title p {
        font-size: 1rem;
    }
}

/* ============================================= */
/*                    FOOTER                     */
/* ============================================= */
footer {
    background-color: var(--dark-navy);
    color: var(--text-light);
}
footer h2,
footer h5 {
    color: var(--old-gold);
    font-weight: 700;
}
footer p,
footer a {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}
footer a:hover {
    color: var(--brand-primary);
    text-decoration: underline;
}
footer .list-unstyled li {
    margin-bottom: 8px;
}
footer .list-unstyled li a {
    transition: color 0.3s ease;
}
footer .col-md-3 p {
    margin-bottom: 8px;
}
footer .col-md-3 a {
    font-weight: 500;
}
footer .text-center {
    font-size: 0.9rem;
    text-align: center;
    color: var(--gray-300);
}
footer .social-icons i{
    color: var(--brand-primary);
    font-size: x-large;
}
@media (max-width: 769px) {
    footer .col-md-3 {
        margin-bottom: 20px;
    }
    footer .text-center {
        font-size: 0.85rem;
    }
}

/* ============================================= */
/*               CALENDAR STYLES                */
/* ============================================= */
.calendar-container {
    max-width: 500px;
    margin: 20px auto;
    padding: 10px;
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    font-family: 'Arial', sans-serif;
}
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--brand-primary);
    padding: 10px 20px;
    border-radius: 8px;
}
.calendar-header * {
    color: var(--text-light) !important;
}
.calendar-header .btn-next {
    color: var(--white);
    font-size: 1.2rem;
    border: none;
    background: none;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.calendar-header .btn-next:hover {
    transform: scale(1.5);
}
.calendar-grid {
    margin-top: 10px;
}
.calendar-weekdays,
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    text-align: center;
    margin-bottom: 10px;
}
.calendar-weekday {
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--text-dark);
    text-transform: uppercase;
    padding: 8px 0;
    border-bottom: 2px solid var(--gray-300);
}
.calendar-day {
    padding: 0.5rem;
    font-size: 1rem;
    color: var(--text-color);
    cursor: pointer;
    background-color: var(--gray-50);
    border-radius: 5px;
    transition: transform 0.2s ease, background-color 0.3s ease;
}
.calendar-day:hover {
    transform: scale(1.1);
    background-color: var(--old-gold);
    color: var(--white);
}
.calendar-day.disabled {
    background-color: var(--gray-100);
    color: var(--gray-400);
    cursor: not-allowed;
    pointer-events: none;
}
.calendar-day.selected {
    background-color: var(--green-pea);
    color: var(--white);
    font-weight: bold;
}
#bookingDate {
    font-size: 1rem;
    font-weight: bold;
    background: var(--gray-50);
    text-align: center;
    color: var(--text-dark);
}
#bookingDate:focus {
    box-shadow: 0 0 5px var(--old-gold);
    outline: none;
}
@media (max-width: 576px) {
    .calendar-container {
        padding: 10px;
    }
    .calendar-header span {
        font-size: 1rem;
    }
    .calendar-day {
        padding: 8px;
        font-size: 0.85rem;
    }
    #bookingDate {
        font-size: 0.9rem;
        padding: 8px;
    }
}

.bg-featured{
    background-color: var(--old-gold);
}

.text-mid{
    line-height: 2;
    vertical-align: middle;
}

.wave-border{
    position: relative;
    background-color: var(--dark-navy);
}

.wave-border::before {
    content: "";
    width: 100%;
    height: 40px;
    position: absolute;
    margin-top: -38px;
    /*bottom: -0.3%;*/
    left: 0;
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 38vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%230f1b2d'/></svg>");
}
.wave-border.reverse::before{
    margin-top: 0;
    transform: rotateX(180deg);
}

.wave-border.small{
    height: 5vh;
}

.wave-border.big{
    height: 10vh;
}

.wave-border.bigger{
    height: 15vh;
}

.wave-border.biggest{
    height: 20vh;
}

.wave-border.light-yellow::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23fcebb5'/></svg>");
}

.wave-border.brand-white::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23fff'/></svg>");
}

.wave-border.light-turquoise::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23b2ebf2'/></svg>");
}

.wave-border.soft-beige::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23f5f5dc'/></svg>");
}

.wave-border.cream::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23fff5cc'/></svg>");
}

.wave-border.peach::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23ffdfba'/></svg>");
}

.wave-border.light-orange::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23ffd8a8'/></svg>");
}

.wave-border.light-pink::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23ffe0e0'/></svg>");
}

.wave-border.soft-rose::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23f8c8dc'/></svg>");
}

.wave-border.light-lavender::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23e6e6fa'/></svg>");
}

.wave-border.light-purple::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23e0d7f0'/></svg>");
}

.wave-border.skyblue{
    background-color: skyblue;
}

.wave-border.skyblue::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%2387ceeb'/></svg>");
}

.wave-border.light-blue::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23b3e0ff'/></svg>");
}

.wave-border.powder-blue::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23d0e2ff'/></svg>");
}

.wave-border.light-cyan::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23ccf5ff'/></svg>");
}

.wave-border.pale-green::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23d4f8d4'/></svg>");
}

.wave-border.mint-green::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23c0f0c0'/></svg>");
}

.wave-border.light-gold::before {
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 95' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 69L50 65C100 61 200 52 300 35C400 18 500 -7 600 1C700 10 800 52 900 69C1000 86 1100 78 1150 74L1200 69V95H1150C1100 95 1000 95 900 95C800 95 700 95 600 95C500 95 400 95 300 95C200 95 100 95 50 95H0V69Z' fill='%23ffedb5'/></svg>");
}

/*
.slider-wave-border {
    height: 80px;
    margin-top: -80px;
    margin-bottom: 40px;
    background-color: transparent;
    position: relative;
}

.slider-wave-border::before {
    content: "";
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: -0.3%;
    left: 0;
    z-index: 999;
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 38vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 98L50 92C100 86 200 74 300 50C400 26 500 -10 600 2C700 14 800 74 900 98C1000 122 1100 110 1150 104L1200 98V134H1150C1100 134 1000 134 900 134C800 134 700 134 600 134C500 134 400 134 300 134C200 134 100 134 50 134H0V98Z' fill='%23ffffff'/></svg>");
}

@media(max-width:850px) {
    .slider-wave-border::before {
        height: 42px
    }
    .wave-border::before {
        height: 20px
    }
}*/

.map-container {
    margin: 20px 0;      /* spacing above and below the map */
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    overflow: hidden;    /* ensure the iframe corners match the container */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    max-height: 280px;
}

.official-banner {
    background-color: var(--old-gold); /* or another highlight color */
    padding: 0.5rem 0;                /* vertical spacing */
    color: var(--dark-navy);          /* ensure good contrast against background */
    font-weight: 600;
    font-size: 1rem;                  /* adjust as needed */
    border-top: 2px solid var(--dark-navy);
    border-bottom: 2px solid var(--dark-navy);
}

.official-banner p {
    margin: 0;
    line-height: 1.5;
}

/* Example for the "Verified" badge (using Bootstrap classes for reference) */
.official-banner .badge {
    font-size: 0.8rem;
    vertical-align: middle;
}

.book-now-btn {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #FF4E50, #F9D423);
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    transition: 0.4s;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.book-now-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    transition: 0.4s;
}

.book-now-btn:hover::before {
    left: 100%;
}

.book-now-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

.book-now-btn:active {
    transform: translateY(2px);
}

#multi-image-carousel {
    background-color: var(--white); /* or any background you prefer */
}

#multi-image-carousel .img-fluid {
    object-fit: cover;      /* ensures images fit nicely, if you want a crop effect */
    max-height: 400px;      /* limit height if images are large */
}

/* Position the contact bar at the bottom */
.sticky-contact {
    display: block;
    position: fixed;
    width: min-content;
    bottom: 0;
    right: 0;
    background-color: transparent;
    z-index: 9999;
}

/* Container inside the bar: center the icons horizontally */
.sticky-contact .container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: self-end;
}

.sticky-contact.show{
    display: block;
}

.sticky-contact .contact-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;       /* circle diameter */
    height: 52px;
    border-radius: 50%;
    color: #fff;       /* icon color */
    text-decoration: none;
    font-size: 1.5rem; /* icon size */
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, opacity 0.3s ease;
}
.sticky-contact .contact-icon:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

.sticky-contact .call-icon {
    background-color: var(--brand-primary);  /* or your brand's primary color */
}
.sticky-contact .whatsapp-icon {
    background-color: #25D366; /* typical WhatsApp green */
}

@media (max-width: 769px) {
    #multi-image-carousel .row.g-3 {
        row-gap: 10px;        /* adjust spacing on smaller screens if needed */
    }
    #multi-image-carousel .img-fluid {
        max-height: 300px;    /* reduce height for mobile */
    }
}

@media (max-width: 769px) {
    /* Show these containers (override d-none) */
    #sticky-calendar {
        display: block !important;
    }

    /* STICKY CONTACT BAR */





    /* STICKY CALENDAR BAR */
    .sticky-calendar-container {
        position: fixed;
        bottom: 5px;
        left: 0;
        right: 0;
        background-color: #efefef;
        border-top: 3px solid var(--brand-primary);
        border-bottom: 3px solid var(--brand-primary);
        z-index: 9999; /* ensure it stays above the sticky-contact if they overlap */
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
    }

    .sticky-calendar-container .calendar-compact {
        flex: 1; /* let the date input grow */
        max-width: 50%;
    }

    .sticky-calendar-container .btn {
        font-size: 1rem;
    }



    /* sfgsjs */
    #hero-section{
        height: 300px !important;
        align-content:center;
    }
    .-h1{
        font-size: 26px !important;
    }



}

/* ============================================= */
/*            MARGIN & PADDING CLASSES          */
/* ============================================= */

/* Margins */
.m-0 { margin: 0 !important; }
.m-1 { margin: 5px !important; }
.m-2 { margin: 10px !important; }
.m-3 { margin: 15px !important; }
.m-4 { margin: 20px !important; }
.m-5 { margin: 30px !important; }

/* Padding */
.p-0 { padding: 0 !important; }
.p-1 { padding: 5px !important; }
.p-2 { padding: 10px !important; }
.p-3 { padding: 15px !important; }
.p-4 { padding: 20px !important; }
.p-5 { padding: 30px !important; }

/* Responsive Margins */
@media (max-width: 992px) {
    .m-lg-0 { margin: 0 !important; }
    .m-lg-1 { margin: 5px !important; }
    .m-lg-2 { margin: 10px !important; }
    .m-lg-3 { margin: 15px !important; }
    .m-lg-4 { margin: 20px !important; }
    .m-lg-5 { margin: 30px !important; }
}

/* Responsive Padding */
@media (max-width: 992px) {
    .p-lg-0 { padding: 0 !important; }
    .p-lg-1 { padding: 5px !important; }
    .p-lg-2 { padding: 10px !important; }
    .p-lg-3 { padding: 15px !important; }
    .p-lg-4 { padding: 20px !important; }
    .p-lg-5 { padding: 30px !important; }
}

/* Mobile-specific */
@media (max-width: 769px) {
    .m-sm-0 { margin: 0 !important; }
    .m-sm-1 { margin: 5px !important; }
    .m-sm-2 { margin: 10px !important; }
    .m-sm-3 { margin: 15px !important; }
    .m-sm-4 { margin: 20px !important; }
    .m-sm-5 { margin: 30px !important; }

    .p-sm-0 { padding: 0 !important; }
    .p-sm-1 { padding: 5px !important; }
    .p-sm-2 { padding: 10px !important; }
    .p-sm-3 { padding: 15px !important; }
    .p-sm-4 { padding: 20px !important; }
    .p-sm-5 { padding: 30px !important; }
}


/* ============================================= */
/*            BACKGROUND COLOR CLASSES          */
/* ============================================= */

/* Brand Colors */
.bg-brand-primary { background-color: var(--brand-primary) !important; }
.bg-brand-secondary { background-color: var(--brand-secondary) !important; }
.bg-brand-success { background-color: var(--brand-success) !important; }
.bg-brand-info { background-color: var(--brand-info) !important; }
.bg-brand-warning { background-color: var(--brand-warning) !important; }
.bg-brand-danger { background-color: var(--brand-danger) !important; }
.bg-brand-white { background-color: var(--brand-white) !important; }
.bg-brand-black { background-color: var(--brand-black) !important; }

/* Gray Scale */
.bg-gray-darker { background-color: var(--gray-darker) !important; }
.bg-gray-dark { background-color: var(--gray-dark) !important; }
.bg-gray { background-color: var(--gray) !important; }
.bg-gray-light { background-color: var(--gray-light) !important; }
.bg-gray-lighter { background-color: var(--gray-lighter) !important; }
.bg-gray-white { background-color: var(--gray-white) !important; }

/* Standard Colors */
.bg-red { background-color: var(--red) !important; }
.bg-green { background-color: var(--green) !important; }
.bg-blue { background-color: var(--blue) !important; }
.bg-yellow { background-color: var(--yellow) !important; }
.bg-orange { background-color: var(--orange) !important; }
.bg-purple { background-color: var(--purple) !important; }
.bg-pink { background-color: var(--pink) !important; }
.bg-cyan { background-color: var(--cyan) !important; }
.bg-teal { background-color: var(--teal) !important; }
.bg-brown { background-color: var(--brown) !important; }
.bg-indigo { background-color: var(--indigo) !important; }
.bg-violet { background-color: var(--violet) !important; }
.bg-gold { background-color: var(--gold) !important; }
.bg-silver { background-color: var(--silver) !important; }
.bg-lime { background-color: var(--lime) !important; }
.bg-olive { background-color: var(--olive) !important; }
.bg-navy { background-color: var(--navy) !important; }
.bg-maroon { background-color: var(--maroon) !important; }
.bg-rose { background-color: var(--rose) !important; }
.bg-beige { background-color: var(--beige) !important; }
.bg-mint { background-color: var(--mint) !important; }
.bg-skyblue { background-color: var(--skyblue) !important; }

/* Transparent */
.bg-transparent { background-color: transparent !important; }

/* ============================================= */
/*               TEXT COLOR CLASSES             */
/* ============================================= */
.text-primary { color: var(--brand-primary) !important; }
.text-secondary { color: var(--brand-secondary) !important; }
.text-gray-darker { color: #1e1e1e !important; }
.text-gray-dark { color: #3a3a3a !important; }
.text-gray { color: #6c757d !important; }
.text-gray-light { color: #adb5bd !important; }
.text-gray-lighter { color: #dee2e6 !important; }
.text-gray-white { color: #f8f9fa !important; }
.text-success { color: #28a745 !important; }
.text-info { color: #17a2b8 !important; }
.text-warning { color: #ffc107 !important; }
.text-danger { color: #dc3545 !important; }
.text-white { color: #ffffff !important; }
.text-black { color: #000000 !important; }

/* ============================================= */
/*                FONT SIZE CLASSES             */
/* ============================================= */
.font-size-smallest { font-size: 14px !important; line-height: 1.35; }
.font-size-smaller { font-size: 15px !important; line-height: 1.33; }
.font-size-small { font-size: 20px !important; line-height: 1.35; }
.font-size-base { font-size: 16px !important; line-height: 1.35; }
.font-size-big { font-size: 24px !important; line-height: 1.33; }
.font-size-large { font-size: 28px !important; line-height: 1.35; }
.font-size-larger { font-size: 30px !important; line-height: 1.36; }
.font-size-largest { font-size: 40px !important; line-height: 1.35; }
.font-size-huge { font-size: 48px !important; line-height: 1.37; }
.font-size-jumbo { font-size: 60px !important; line-height: 1.2; }
.font-size-giant { font-size: 72px !important; line-height: 1.36; }

/* Responsive Font Sizes */
@media (max-width: 769px) {
    .font-size-huge { font-size: 40px !important; }
    .font-size-jumbo { font-size: 50px !important; }
    .font-size-giant { font-size: 60px !important; }
}

/* ============================================= */
/*              FONT WEIGHT CLASSES             */
/* ============================================= */
.font-light { font-weight: 300 !important; }
.font-regular { font-weight: 400 !important; }
.font-medium { font-weight: 500 !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.font-ultrabold { font-weight: 900 !important; }

/* ============================================= */
/*              DISPLAY CLASSES                  */
/* ============================================= */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.d-inline-grid { display: inline-grid !important; }

/* Responsive */
@media (max-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
}

@media (max-width: 769px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}

@media (max-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
}

/* ============================================= */
/*                FLEXBOX CLASSES                */
/* ============================================= */
.flex-row { flex-direction: row !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column { flex-direction: column !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }

.align-start { align-items: flex-start !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }
.align-baseline { align-items: baseline !important; }
.align-stretch { align-items: stretch !important; }

/* ============================================= */
/*                GRID CLASSES                   */
/* ============================================= */
.grid-1 { grid-template-columns: repeat(1, 1fr) !important; }
.grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
.grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
.grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
.grid-5 { grid-template-columns: repeat(5, 1fr) !important; }
.grid-6 { grid-template-columns: repeat(6, 1fr) !important; }

.gap-0 { gap: 0 !important; }
.gap-1 { gap: 5px !important; }
.gap-2 { gap: 10px !important; }
.gap-3 { gap: 15px !important; }
.gap-4 { gap: 20px !important; }
.gap-5 { gap: 30px !important; }

/* ============================================= */
/*             BORDER & RADIUS CLASSES          */
/* ============================================= */
.border { border: 1px solid #ccc !important; }
.border-0 { border: none !important; }
.border-top { border-top: 1px solid #ccc !important; }
.border-bottom { border-bottom: 1px solid #ccc !important; }
.border-left { border-left: 1px solid #ccc !important; }
.border-right { border-right: 1px solid #ccc !important; }

.rounded { border-radius: 8px !important; }
.rounded-sm { border-radius: 4px !important; }
.rounded-lg { border-radius: 16px !important; }
.rounded-xl { border-radius: 24px !important; }
.rounded-circle { border-radius: 50% !important; }

/* ============================================= */
/*            WIDTH & HEIGHT CLASSES            */
/* ============================================= */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }
.h-auto { height: auto !important; }

/* ============================================= */
/*                OPACITY CLASSES               */
/* ============================================= */
.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: 0.25 !important; }
.opacity-50 { opacity: 0.5 !important; }
.opacity-75 { opacity: 0.75 !important; }
.opacity-100 { opacity: 1 !important; }

/* ============================================= */
/*               SHADOW CLASSES                 */
/* ============================================= */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1) !important; }
.shadow { box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important; }
.shadow-lg { box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2) !important; }
.shadow-xl { box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.3) !important; }

/* ============================================= */
/*          VISIBILITY & OVERFLOW               */
/* ============================================= */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

.overflow-hidden { overflow: hidden !important; }
.overflow-auto { overflow: auto !important; }
.overflow-scroll { overflow: scroll !important; }


/* ============================================= */
/*             TRANSITION CLASSES               */
/* ============================================= */
.transition { transition: all 0.3s ease-in-out !important; }
.transition-fast { transition: all 0.2s ease-in-out !important; }
.transition-slow { transition: all 0.5s ease-in-out !important; }

/* ============================================= */
/*               Z-INDEX CLASSES                */
/* ============================================= */
.z-0 { z-index: 0 !important; }
.z-1 { z-index: 1 !important; }
.z-10 { z-index: 10 !important; }
.z-100 { z-index: 100 !important; }
.z-999 { z-index: 999 !important; }

/* ============================================= */
/*               HOVER EFFECTS                   */
/* ============================================= */
.hover-scale {
    transition: transform 0.3s ease-in-out;
}

.hover-scale:hover {
    transform: scale(1.1);
}

.hover-shadow {
    transition: box-shadow 0.3s ease-in-out;
}

.hover-shadow:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.hover-bg-primary:hover {
    background-color: var(--brand-primary) !important;
    color: var(--white) !important;
}

.hover-bg-secondary:hover {
    background-color: var(--brand-secondary) !important;
    color: var(--text-dark) !important;
}

.hover-text-primary:hover {
    color: var(--brand-primary) !important;
}

.hover-text-secondary:hover {
    color: var(--brand-secondary) !important;
}

.hover-opacity:hover {
    opacity: 0.7;
}

/* ============================================= */
/*           ANIMATIONS & TRANSITIONS           */
/* ============================================= */

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* Slide In */
@keyframes slideIn {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.slide-in {
    animation: slideIn 0.5s ease-in-out;
}

/* Bounce */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.bounce {
    animation: bounce 0.6s infinite;
}

/* Pulse */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.pulse {
    animation: pulse 1.5s infinite;
}

/* Rotate */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.rotate {
    animation: rotate 2s linear infinite;
}
/* ============================================= */
/*                 MODAL STYLES                  */
/* ============================================= */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    transition: opacity 0.3s ease-in-out;
}

.modal-content {
    background-color: var(--white);
    margin: 15% auto;
    padding: 20px;
    width: 60%;
    max-width: 500px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
    animation: modalFadeIn 0.4s ease-in-out;
}

/* Dark Mode Support */
.dark-mode .modal-content {
    background-color: var(--dark-card-bg);
    color: var(--dark-text);
}

/* Close Button */
.modal-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-dark);
}

.modal-close:hover {
    color: var(--brand-primary);
}

/* Fade-in Animation */
@keyframes modalFadeIn {
    from { transform: translateY(-30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 769px) {
    .modal-content{
        margin: auto;
        padding: 10px;
        width: 99%;
    }
}
/* ============================================= */
/*           PAGE TRANSITION EFFECTS            */
/* ============================================= */
.page-fade {
    opacity: 0;
    animation: fadeInPage 0.7s ease-in-out forwards;
}

@keyframes fadeInPage {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}
/* ============================================= */
/*         INTERACTIVE IMAGE HOVER EFFECTS      */
/* ============================================= */
.img-hover-zoom {
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}

.img-hover-zoom img {
    transition: transform 0.3s ease-in-out;
}

.img-hover-zoom:hover img {
    transform: scale(1.1);
}

.img-hover-grayscale {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
}

.img-hover-grayscale:hover {
    filter: grayscale(0%);
}

.img-hover-shadow {
    transition: box-shadow 0.3s ease-in-out;
}

.img-hover-shadow:hover {
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3);
}


/* Responsive Adjustments */
@media (max-width: 769px) {
    .parallax {
        height: 60vh;
        background-attachment: scroll;
    }
    .parallax-content h1 {
        font-size: 2rem;
    }
    .parallax-content p {
        font-size: 1rem;
    }
}

/* ============================================= */
/*           COUNTDOWN TIMER STYLES              */
/* ============================================= */
#countdown-section {
    text-align: center;
    padding: 50px 0;
    background-color: var(--bg-light-yellow);
}

#countdown {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.countdown-item {
    background: var(--brand-primary);
    color: white;
    padding: 20px;
    border-radius: 10px;
    width: 100px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out;
}

.countdown-item span {
    display: block;
    font-size: 2.5rem;
    font-weight: bold;
}

.countdown-item:hover {
    transform: scale(1.1);
}

/* Responsive */
@media (max-width: 769px) {
    #countdown {
        flex-wrap: wrap;
        gap: 10px;
    }
    .countdown-item {
        width: 80px;
        font-size: 1.2rem;
    }
    .countdown-item span {
        font-size: 2rem;
    }
}


.relative{
    position: relative;!important;
}
.absolute{
    position: absolute; !important;
}
.fixed{
    position: fixed; !important;
}

/* ============================================= */
/*                   HOMEPAGE                    */
/* ============================================= */
/* Hero Section */
#hero-section {
    position: relative;
    width: 100%;
    height: 80vh; /* Adjust height as needed */
    overflow: hidden;
}

/* Swiper Slider */
.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}

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

/* Hero Text Styling */
.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
}

.hero-text h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
}

.hero-text p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}


/* Quick Links Sticky - Mobile */
@media (max-width: 768px) {
    /* Hide the main navigation when scrolling */
    .navbar.hidden {
        transform: translateY(-100%);
        transition: transform 0.3s ease-in-out;
    }

    /* Quick Links Bar - Horizontal */
    #quick-links-bar {
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        background: linear-gradient(135deg, #0078d4, #005c99);
        padding: 10px 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        opacity: 0; /* Hidden by default */
        pointer-events: none;
    }

    /* Show when active */
    #quick-links-bar.show {
        opacity: 1;
        pointer-events: all;
    }

    /* Quick Links Buttons */
    #quick-links-bar a {
        font-size: 1rem;
        font-weight: bold;
        color: white;
        text-decoration: none;
        padding: 10px 15px;
        align-items: center;
        gap: 8px;
        border-radius: 20px;
        transition: background 0.3s ease, transform 0.2s ease;
        display: none;
    }

    /* Highlight the active section */
    #quick-links-bar a.active {
        background: rgba(255, 255, 255, 0.3);
        opacity: 1;
        transform: scale(1.1);
        display: flex;
    }
}

.fixed-main{
    position: fixed;
}



.invalid {
    border: 2px dashed red;
}