:root {
    --font-primary: "Euclid Circular A", sans-serif;
    --font-secondary: "Space Grotesk", serif;
    --font-tertiary: "felidae", serif;

    /* Color Variables */
    --p1: lch(66 86.49 57.86) !important; /* Primary color (black) */
    --p2: 255, 255, 255; /* Secondary color (white) */
    --n1: 255, 255, 255; /* Neutral color (white) */
    --n2: 0, 0, 0; /* Neutral color (black) */
    --n3: 255, 255, 255; /* Neutral color (white) */
    --n4: 0, 0, 0; /* Neutral color (black) */
    --n5: 100, 100, 100; /* Gray color */
    
    /* Hex Colors */
    --p1-hex: #000000; /* Black */
    --p2-hex: #FFFFFF; /* White */
    --n1-hex: #FFFFFF; /* White */
    --n4-hex: #000000; /* Black */
}


a {
    color: rgba(var(--n1), 1); /* White links */
}

a:hover {
    color: rgba(var(--p2), 1); /* Change link color on hover to black */
}

h1, h2, h3, h4, h5, h6 {
    color: rgba(var(--n1), 1); /* White headings */
}

.button {
    background-color: rgba(var(--p2), 1); /* White button */
    color: rgba(var(--p1), 1); /* Black text on button */
}

.button:hover {
    background-color: rgba(var(--p1), 1); /* Black button on hover */
    color: rgba(var(--p2), 1); /* White text on button hover */
}

/* Additional styles for other elements can be added similarly */

.banner-section.index-three::before {
    content: "";
    position: absolute;
    background-color: rgba(var(--n4), 1);
    background: linear-gradient(180deg, rgb(0 0 0 / 40%) 0%, rgba(215, 0, 7, 0) 90%)}
    @font-face {
  font-family: 'Phosphor';
  src: url('../webfonts/phosphor.woff2') format('woff2');
}
.lis_color li {
                color: #000 !important;
            }
            .text-gradient {
                opacity: 0.5;
                background: linear-gradient(180deg, #f97a004d 0%, rgba(215, 0, 7, 0) 91%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: rgba(0, 0, 0, 0);
                animation: fadeInOut 3s ease-in-out infinite;
            }
            .banner-section.index-three::before {
                background: none !important;
                background-size: cover;
            }
            .banner-img_tyle {
                height: 600px !important;
            }
            .margin-slider-heading {
                margin-left: 5%;
                width: 50%;
            }
            @media only screen and (min-width: 1px) and (max-width: 520px) {
                .margin-slider-heading {
                    margin-left: 5%;
                    width: 80%;
                }
                .margin-slider-heading h2 {
                    font-size: 22px !important;
                }
                .banner-img_tyle {
                    height: 401px !important;
                }
                .margin-slider-heading {
                    margin-top: 40%;
                    margin-left: 10%;
                }
                .index-slider-cars-edit {
                    margin-top: 0% !important;
                    z-index: 99;
                }
                .mobile_phone_gap {
                    margin-top: 40px;
                }
            }
            .swiper-slide.banner-img_tyle {
                position: relative;

                justify-content: center left;
                background-size: cover;
                background-position: center;
                min-height: 500px; /* adjust as needed */
                color: #fff;
            }

            .swiper-slide .overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.4); /* dark overlay */
                z-index: 1;
            }

            .margin-slider-heading {
                position: relative;
                z-index: 2;
                max-width: 800px;
            }

            .margin-slider-heading h2 {
                font-size: 2.5rem;
                margin-bottom: 10px;
            }

            .margin-slider-heading p {
                font-size: 1.1rem;
                line-height: 1.6;
            }
            .n4-color {
                color: #f97a00;
            }
            .travel-card {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.travel-card-img {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 450px;
}

.travel-card-overlay {
    position: absolute;
    inset: 0;
    background: #f2f2f2;
    color: #000;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto; /* Scrollable content */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #000 !important; /* Firefox */
}

/* Scrollbar for Chrome/Edge */
.travel-card-overlay::-webkit-scrollbar {
    width: 6px;
}
.travel-card-overlay::-webkit-scrollbar-track {
    background: transparent;
}
.travel-card-overlay::-webkit-scrollbar-thumb {
    background: black;
    border-radius: 5px;
}

/* Headings & Badge */
.travel-card-overlay h4 {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 5px;
}

.travel-card-overlay .badge {
    background: #f97a00;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.85rem;
    margin-left: 10px;
}

.travel-card-overlay h5 {
    color: #f97a00;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Active State */
.travel-card.active .travel-card-overlay {
    background: #000; /* black overlay */
    color: #fff;      /* white text */
}
.travel-card.active .badge {
    background: #fff;
    color: #000;
}


            .place-list {
                flex: 1;
                overflow-y: auto;
                padding-right: 5px;
                max-height: 230px;
            }

            .place-list ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }

            .place-list ul li {
                margin-bottom: 5px;
                padding-left: 15px;
                position: relative;
            }

            .place-list ul li::before {
                content: "•";
                color: #000 !important;
                position: absolute;
                left: 0;
            }

            .btn-group {
                display: flex;
                gap: 10px;
            }

            .place-btn {
                background: #f97a00;
                color: #fff;
                padding: 8px 14px;
                border-radius: 20px;
                text-decoration: none;
                font-weight: bold;
                transition: 0.3s;
            }

            .place-btn:hover {
                background: #e06900;
            }
            .pt-100 {
                padding-top: 100px !important;
            }
            .pb-80 {
                padding-bottom: 80px !important;
            }
            .card img {
                object-fit: cover;
            }
            .btn-orange {
                background-color: #f97a00;
                color: white;
                border: none;
            }
            .btn-orange:hover {
                background-color: #d96500;
            }
            .card-title {
                font-weight: bold;
                font-size: 1rem;
            }
            .p1-bg-color{
                background-color: #f97a00 !important;
            }
            ..p1-3rd-bg-color{
                background-color: #f97a00 !important;
            }