@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: #dd5cdd;  /* 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; */
            background-color: var(--primary-color);
        }

        @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;
  } */
}