@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
@import "https://unpkg.com/swiper/swiper-bundle.min.css";
/* tangerine font */
@import url("https://fonts.googleapis.com/css?family=Tangerine");
@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

:root {
    /* --primary-color: #002F93;  */
    --primary-color: #502850; /* logo matched color*/
    /* --secondary-color: #00bf8f;  */
    --secondary-color: #4a0082; /* Green color for background effects */
    --highlight-color: #1b6b3f;
    --second-navbar-color: #4a0082; /*second navbar background */
    --second-navbar-dropdown-bg: #edf199; /*second navbar dropdown background-color*/
    --second-navbar-text-color: #e1ec2b; /*second navbar text color */
    --second-navbar-hover-text-color: #0d1a36f3; /*second navbar text color */

    --dark-text-color: #0d1a36f3; /*dark text navbar */
    --about-image-shadow: #0d1a36f3; /*dark text navbar */
    --read-more-shade-one: #502850;
    --read-more-shade-two: #3f1a3f;
    --about-shadow: 0px 3px 23px 10px #492749b7;
}
.about_shadow {
    box-shadow: var(--about-shadow);
}
::selection {
    background-color: #502850;
    color: white;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.cursiveHeading {
    /* font-family: "Great Vibes", cursive !important; */
    font-family: "Tangerine", serif !important;
}

#slide-menu {
    right: -100%; /* Initially hidden off-screen */
    top: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Dark overlay background */
    transition: right 0.3s ease; /* Smooth sliding animation */
    z-index: 1000;
}

/* Open state of the slide menu */
#slide-menu.open {
    right: 0; /* Bring it to full width */
}

/* Overlay (background) that will appear when the menu is open */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay */
    z-index: 999;
}

/* Show overlay when slide menu is open */
#overlay.show {
    display: block;
}
.dropdown:hover .dropdown-menu {
    display: block;
}
@media screen and (max-width: 768px) {
    .hamburger {
        margin-left: 3rem !important;
    }
}

@layer utilities {
    .mask-linear-gradient {
        mask-image: linear-gradient(
            to right,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 1) 20%,
            rgba(0, 0, 0, 1) 80%,
            rgba(0, 0, 0, 0)
        );
    }

    @keyframes scrollLeft {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-100%);
        }
    }

    .animate-scrollLeft {
        animation: scrollLeft 30s linear infinite;
    }

    .scroll-container {
        display: flex;
        gap: 1rem; /* Space between images */
        width: max-content;
    }
}

/* ------------------------------------------------- */
#mobileMenu {
    transition: transform 0.3s ease-in-out;
    background-color: #502850;
}

@media (max-width: 767px) {
    #mobileMenu {
        transform: translateX(-100%);
        height: 100vh;
        width: 80%;
        max-width: 300px;
        position: fixed;
        top: 0;
        left: 0;
        overflow-y: auto;
    }

    #mobileMenu.open {
        transform: translateX(0);
    }

    /* Hide dropdowns by default on mobile */
    .group > ul {
        position: static;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease;
        /* background-color: #81538f; */
        background-color: var(--second-navbar-dropdown-bg);
        box-shadow: none;
        padding: 0;
    }

    .group.open > ul {
        max-height: 700px;
        opacity: 1;
        padding: 1rem;
    }

    /* Hamburger icon animation */
    #hamburger .toggle.hidden {
        display: none;
    }
}

.websiteSwiper .swiper-slide-thumb-active {
    border: 2px solid #502850;
    border-radius: 4px;
    box-sizing: border-box;
}

/* =============================
 */
/* Swiper Container Styling */
.deck_Card_Swiper {
    width: 100%;
    max-width: 900px;
    height: 400px;
    margin: 20px auto;
    position: relative;
}

.deck_Card_Swiper .swiper-wrapper {
    height: 100%;
}

/* Slides Styling */
.deck_Card_Swiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    height: 100%;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    box-shadow: 0 0 20px #00000036;
    border-radius: 10px;
}

.deck_Card_Swiper
    .swiper-slide:not(.swiper-slide-prev):not(.swiper-slide-active):not(
        .swiper-slide-next
    ) {
    opacity: 0;
}

.deck_Card_Swiper .swiper-slide-prev,
.deck_Card_Swiper .swiper-slide-next {
    opacity: 0.3;
}

.deck_Card_Swiper .swiper-slide-active {
    opacity: 1;
    background-color: var(--primary-color);
}

.deck_Card_Swiper .swiper-button-prev,
.deck_Card_Swiper .swiper-button-next {
    color: #000;
}

.deck_Card_Swiper .swiper-pagination-bullet {
    background: #000;
}

/* Mobile Responsive Styling */
@media (max-width: 640px) {
    .deck_Card_Swiper {
        max-width: 100%;
        padding: 0 10px;
    }

    .deck_Card_Swiper .swiper-slide {
        width: 100% !important;
        max-width: none;
        margin: 0 auto;
    }

    .deck_Card_Swiper .swiper-slide-prev,
    .deck_Card_Swiper .swiper-slide-next {
        display: none;
    }
}
/* message-popup */
.message-box {
    height: 290px !important;
    width: 176px;
    position: fixed;
    z-index: 150;
    bottom: -300px;
    right: 10px;
    background-color: rgb(35 35 35 / 58%);
    /* padding-top: 60px; */
    transition: 0.1s;
    border-radius: 9px;
    /* box-shadow: 0px 0px 11px 4px #ccc; */
}
.slidetoup {
    bottom: 15px;
    transition: 2s;
}

.slidedown {
    bottom: -3150px;
    transition: 2s;
}

.inner-message-box {
    padding: 10px;
}

.message-popup-height {
    height: 335px;
}