@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Tangerine&display=swap');
@import url('https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');

:root {
  --primary-color: #05036e; /* logo matched color */
  --secondary-color: #4a0082; /* Green color for background effects */
  --highlight-color: #1b6b3f; 
  --second-navbar-color: #4a0082; /* second navbar background */
  --second-navbar-dropdown-bg: #ff724f; /* second navbar dropdown background-color */
  --second-navbar-text-color: #fff; /* second navbar text color */
  --second-navbar-hover-text-color: #fff; /* second navbar text color */
  --footer-hover-text-color: #ff724f;
  --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;
}

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

.about_shadow {
  box-shadow: var(--about-shadow);
}

::selection {
  background-color: var(--read-more-shade-one);
  color: #ffffff;
}

.cursiveHeading {
  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;
}

/* 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);
  z-index: 999;
}

#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;
    width: max-content;
  }
}

/* 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: #ffffff;
  height: 100%;
  color: #000000;
  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: #000000;
}

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

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

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

.first-letter {
  color: var(--primary-color);
}

.second-letter {
  background: linear-gradient(to right, blue 0%, blue 8%, red 8%, red 16%, blue 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 56px;
}