@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: #e70ae7;  */
  --primary-color: #002F93;  /* logo matched color*/
  --secondary-color: #00bf8f; /* Green color for background effects */
  --highlight-color: #1b6b3f;
  --second-navbar-color: #00bf8f; /*second navbar background */
  --second-navbar-dropdown-bg: #c6bc0c; /*second navbar dropdown background-color*/
  --second-navbar-text-color: white; /*second navbar text color */
  --dark-text-color: #0d1a36f3; /*dark text navbar */
  --about-image-shadow: #0d1a36f3; /*dark text navbar */
  --read-more-shade-one: #002F93;
  --read-more-shade-two: #000293;
  --about-shadow: 0px 3px 23px 10px #bee3f8;



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

* {
  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;
  }
}