@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap");

* {
  margin: 0;
  padding: 0;
}

:root {
  --font-family-cinzel: "Cinzel", serif;
}

ul,
li {
  list-style: none;
}

.banner-wrapper {
  background-image: url("/assets/images/bg.jpg");
}

.mobile-menu {
  display: none;
}

#menu-toggle:checked + .mobile-menu {
  display: block;
}

.card-style {
  background-color: #3d4d67;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.42);
}

.font-family-cinzel {
  font-family: var(--font-family-cinzel) !important;
}

.card-1 {
  background: linear-gradient(90deg, #e0ce9d 0%, #e0ce9d 0.01%, #b0a37f 28.3%, #e0ce9d 64.76%, #b0a37f 98.09%);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.42);
}

.card-2 {
  background: linear-gradient(90deg, #1033ad 0%, #3d4d67 0.01%, #000 28.3%, #3d4d67 64.76%, #000 98.09%);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.42);
  color: white;
}

.card-3 {
  background: linear-gradient(90deg, #1033ad 0%, #1033ad 0.01%, #0c2065 28.3%, #1033ad 64.76%, #0c2065 98.09%);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.42);
  color: white;
}

.card-4 {
  background: linear-gradient(90deg, #e4cf5d 0%, #e4cf5d 0.01%, #a69537 28.3%, #e4cf5d 64.76%, #a69537 98.09%);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.42);
}

.card-5 {
  background: linear-gradient(90deg, #901d0e 0%, #901d0e 0.01%, #47140d 28.3%, #901d0e 64.76%, #47140d 98.09%);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.42);
  color: white;
}

.card-6 {
  background: linear-gradient(90deg, #e2b400 0%, #e2b400 0.01%, #ab8800 28.3%, #e2b400 64.76%, #ab8800 98.09%);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.42);
}

.hero-wrapper {
  background-image: url("../images/bg.jpg");
}

.footer-wrapper {
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.42);
}

.container {
  width: 100%;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1023px){
  .nav-menu{
    position: fixed;
    width: 100%;
    top: -150%;
    left: 0;
    padding: 3.5rem 0;
    height: 100% !important;
    transition: .4s;
    z-index: 100;
    background-color: #3D4D67;
    border-radius: 0 0 1.5rem 1.5rem;
  }
}
.show-menu{
  top: 0;
}

@media (min-width: 300px) {
    .container {
      padding-left: 20px;
      padding-right: 20px;
    }
  }

@media (min-width: 640px) {
  .container {
    max-width: 640px !important;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px !important;
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: 1024px !important;
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: 1280px !important;
  }
}

#menu.slide-in {
  width: 400px; /* Adjust width as needed */
  transition: width 0.3s ease-in-out;
}

#menu.slide-out {
  width: 0;
  transition: width 0.3s ease-in-out;
}