html {
    box-sizing: border-box;
    scroll-behavior: smooth;
  }
  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  
  
  body {
    margin: 0 auto;
    padding: 0;
    overflow-y: visible;
    overflow-x: hidden;
    
    width: 100%;
    height: 100vh;
  
    background-color: var(--BackgroundColour);
    font-family: 'Ailerion';
    font-weight: 100;
  }

  #admin {
    background: #f5f7fa;
    margin: 0;
    padding: 2rem;
    display: flex;
    justify-content: center;
  }
  :root {
    --BackgroundColour: #000;
    --MarkyBlue: #00bfff;
    --MarkyPink: #ff00b5;
    --MarkyYellow: #fff000;
    --text-color:#fff;
}

  @font-face {
    font-family: "Ailerion";
    src: url("Assets/Fonts/Aileron/Aileron-Light.otf");
    font-weight: 100;
  }
  @font-face {
    font-family: "Ailerion";
    src: url("Assets/Fonts/Aileron/Aileron-Heavy.otf");
    font-weight: 600;
  }
  @font-face {
    font-family: "Ailerion";
    src: url("Assets/Fonts/Aileron/Aileron-Black.otf");
    font-weight: 700;
  }
  .anton-regular {
    font-family: "Anton", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  .xxx-large {
    font-size: xxx-large;
  }

  ::-webkit-scrollbar {
    background-color: var(--BackgroundColour);
    width: 5px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: var(--MarkyPink);
    border-radius: 50px;
  }

  /* CUSTOM ANIMATIONS */
  @keyframes slideIn {
      from { transform: translateX(100%); }
      to { transform: translateX(0); }
  }
  @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
  }
  .cart-slide-in {
      animation: slideIn 0.3s ease-out forwards;
  }
  .fade-in {
      animation: fadeIn 0.5s ease-in;
  }



  /* GLOBAL */
  .main {
    position: relative;
    height: auto;
    width: 100vw;
    max-width: 100%;
  }
  .button-style {
    background-color: var(--MarkyBlue);
    color: var(--text-color);
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: large;
  }
  .button-style:hover:not(:disabled) {
    background-color: transparent;
    color: var(--MarkyBlue);
    border: 3px solid var(--MarkyBlue);
  }
  .button-style:active:not(:disabled) {
    color: var(--MarkyPink);
    border: 3px solid var(--MarkyPink);
    transform: scale(0.9);
    transition: 0.3 ease-in-out;
  }
  .main-child {
    width: 100vw;
    text-align: center;
  }
  .w100 {
    width: 100%;
    max-width: 1000px;
  }

  .hidden {
    opacity: 0;
    cursor: none;
  }

  



  /* HEADER */
  .header {
    position: fixed;
    top: 0;
    height: 10vh;
    width: 100vw;
    display: flex;
    z-index: 999;
    background-color: var(--BackgroundColour);
    background: linear-gradient(180deg,rgba(0, 0, 0, 1) 25%, rgba(255, 255, 255, 0) 85%);
  }
  .header-content {
    height: 100%;
    width: 90%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header-asset {
    height: 40%;
    width: 15%;
    justify-content: center;
    vertical-align: middle;
  }
  .shop-btn {
    cursor: pointer;
  }
  .disabled {
    background-color: #555;
    cursor: not-allowed;
    opacity: 0.7;
  }

  .logo {
    height: 85%;
    width: auto;
    margin: auto;
    z-index: 999;
  }
  #DJmarkylogo:hover {
    cursor: pointer;
    transform: scale(1.1);
  }
  #DJmarkylogo:active {
    cursor: pointer;
    transform: scale(0.9);
  }

  .shop-cart {
    display: flex;
    cursor: pointer;
    background-color: var(--MarkyBlue);
    border-radius: 50%;
    margin: auto;
    width: 50px;
    height: 50px;
  }
  .cart {
    fill: white;
    height: 45%;
    width: auto;
    margin: auto;
  }
  .cart-count {
    margin-left: 40px;
    position: absolute;
    height: 20px;
    width: 20px;
    background-color: var(--MarkyPink);
    border-radius: 50%;
    text-align: center;
  }




  /* FOOTER */
  footer {
    display: flex;
    position: relative;
    height: 15vh;
    background-color: var(--BackgroundColour);
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 91%, rgba(255, 255, 255, 0) 99%);
    overflow-y: visible;
    padding-top: 15px;
    width: auto;
    color: white;
    justify-content: center;
  }
  .social-icons {
    height: 35px;
    margin: 25px;
    width: auto;
    fill: white;
    cursor: pointer;
  }
  .social-icons:hover {
    transform: scale(1.1);
    fill: var(--MarkyBlue);
  }
  .social-icons:active {
    transform: scale(0.9);
    fill: var(--MarkyPink);
  }



  /* HIGHLIGHT SLIDER */
  #highlight-slider {
    position: relative;
    height: 575px;
    width: 100vw;
    top: 30px;
    z-index: 4;
    overflow: hidden;
  }
  .slider-frame {
    position: absolute;
    width: 100%;
    height: 100%;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: color;
    overflow: hidden;
  }
  #frame-front {
    background-image: url(Assets/Slider/MarkyHero01B.png);
    z-index: 3;
  }
  #frame-back {
    background-image: url(Assets/Slider/MarkyHero01C.png);
    z-index: 1;
  }
  .slides {
    display: flex;
    position: absolute;
    min-height: 100%;
    transition: transform 0.5s ease;
    width: 200%; /* number of slides times 100% */
    z-index: 2;
  }
  .slide {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: white;

    background-size: contain;
    background-repeat: no-repeat;
    background-position: top;
    background-blend-mode: overlay;
  }

  @media screen and (max-width: 665px) {
    #highlight-slider {
      height: 288px;
    }
    .slide {
      background-size: cover;
    }
  }

  #slide01 {
    background-image: url(Assets/Slider/IMG-DJM-001.png);
  }
  #slide02 {
    background-image: url(Assets/Slider/IMG-DJM-002.png);
  }
  #slide03 {
    background-image: url(Assets/Slider/ );
  }
  #slide04 {
    background-image: url(Assets/Slider/ );
  }

  .slider-btn {
    position: absolute;
    top: 50%;
    color: white;
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
  }
  #prev {
      left: 10px;
  }
  #next {
      right: 10px;
  }




  /* EVENT LISTING */
  #upcoming-performances {
    position: relative;
    height: auto;
    min-height: 100px;
    width: 100%;
    z-index: 5;
    background-color: var(--BackgroundColour);
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 75%, rgba(255, 255, 255, 0) 98%);
    overflow-y: visible;
    top: -100px;
  }
  .title {
    color: white;
    margin-bottom: 0;
  }
  .event-listing {
    margin: auto;
    width: 100%;
    height: inherit;
    overflow-y: scroll;
  }
  .event-list {
    margin: auto;
    width: 95%;
    border-collapse: collapse;
    max-width: 850px;
  }
  td {
    padding: 2px;
    text-align: left;
    color: white;
  }
  tr {
    border-top: 1px solid;
  }
  tr:nth-child(even) {
    border-top-color: var(--MarkyPink);
  }
  tr:nth-child(odd) {
    border-top-color: var(--MarkyBlue);
  }
  .centre {
    text-align: center;

  }
  #ticket-button {
    width: 100%;
  }
  .nested-table {
    margin: 0;
    padding: 0;
  }


  /* CONTACT */
  #contact {
    height: auto;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }
  #contact-button, #publishBtn {
    height: 50px;
    font-size: x-large;
    padding: 0 20px;
    margin: 5px;
  }
  #instagram-feed-widget {
    width: 75%;
    margin: auto;
  }
  @media screen and (max-width: 665px) {
    #instagram-feed-widget {
      width: 100%;
      margin: auto;
    }
  }
  .socials {
    display: flex;
    position: relative;
    height:650px;
    padding: 0 5%;
    background-image: url("Assets/Socials-Background.png");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: hard-light;
    background-color: rgba(0, 0, 0, 1);
    color: white;
  }

  /* FORM */
  form {
    background-color: rgba(0, 0, 0, 0.5);
    border: var(--MarkyPink) solid 1px;
    margin: auto;
    padding: 20px;
    width: 100%;
    max-width: 750px;
  }
  form > h2 {
    margin: 0;
  }
  input, select, textarea {
    position: relative;
    background-color: transparent;
    height: 40px;
    margin-top: 6px;
    padding: 0 12px;
    border: 1px solid var(--MarkyBlue);
    font-size: 1em;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
    color: white;
  }

  input[type="name"],
  input[type="tel"],
  input[type="email"],
  input[type="eventdate"],
  input[type="number"],
  input[type="time"],
  input[type="text"],
  select, textarea {
    width: 100%;
  }
  input[type="eventdate"],
  input[type="number"],
  input[type="time"],
  input[type="date"] {
    width: 50%;
  }
  input[type="url"] {
    width: 80%;
  }
  input[type="url"]:disabled {
    width: 80%;
    border-color: #aaa;
    cursor: not-allowed;
  }
  textarea {
    min-height: 160px;
    padding: 12px;
  }
  input[type="date"]::placeholder, input[type="date"]::-webkit-input-placeholder,
  input[type="date"]::-moz-placeholder, input[type="date"]::-ms-input-placeholder {
    color: #888;
  }

  ::-webkit-datetime-edit-text { color: #888; }
  ::-webkit-datetime-edit-year-field[aria-valuetext=blank] { color: #888; }
  ::-webkit-datetime-edit-year-field:not([aria-valuenow]) { color: #888; }
  ::-webkit-datetime-edit-year-field:not([aria-valuetext]) { color: #888; }


  select:invalid {
    color: #888;
  }
  .info-wrap {
    display: flex;
    justify-content: space-between;
  }




  /* EVENT MANAGER CODE */

  .manager {
    padding: 2.5%;
  }
  
  label, input[type="checkbox"] {
    color: white;
    margin: auto;
    padding: 0 5px;
  }

  #output {
    margin-top: 2rem;
    border-top: 2px solid #e0e0e0;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }




  /* SHOP */

  .splash {
    position: relative;
    height: 350px;
    width: 100%;
    background-image: url(shop/Assets/MarkyWontDieShirtMockUp.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #000;
  }
  .marky {
    position: absolute;
    bottom: 0;
    height: 85%;
    transition: transform 0.3s ease;
  }
  @media (max-width: 768px) {
    .marky {
    right: 35px;
    }
  }
  @media (max-width: 499px) {
    .marky {
    right: 10px;
    }
  }

  #merch-title {
   position: relative;
   margin: auto; 
   text-align: center;
   font-size: xx-large;
   z-index: 100;
   padding-bottom: 15px;
  }

  /*-------grid for products------*/

  .shop-bg {
    position: absolute;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 2%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 100%);
    width: 100%;
    height: 100%;
    z-index: 5;
  }
  .shop {
    position: relative;
    padding: 0 50px 0;
    height: auto;
    margin: auto;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Align items to start, adjust spacing */
    gap: 15px;
  }
  /* First row: Products 1 and 2 (2 across) */
  .product-card:nth-child(1),
  .product-card:nth-child(2) {
      flex: 1 1 49%;
  }
  /* Second row: Products 3, 4, and 5 (3 across) */
  .product-card:nth-child(3),
  .product-card:nth-child(4),
  .product-card:nth-child(5) {
      flex: 1 1 31%; 
  }
  /* Responsive adjustments (similar to original media queries) */
  @media (max-width: 768px) {
      .product-card:nth-child(1),
      .product-card:nth-child(2),
      .product-card:nth-child(3),
      .product-card:nth-child(4),
      .product-card:nth-child(5) {
          flex: 1 1 100%; /* Stack vertically on mobile */
          max-width: 100%;
      }
  }

  /* .shop {
    position: relative;
    top: -200px;
    padding: 225px 50px 0;
    height: auto;
    margin: auto;
    max-width: 1000px;
    background-color: var(--BackgroundColour);
    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 85%, rgba(255, 255, 255, 0) 98%);
    background-size: 1000%;

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    grid-gap: 15px;
  } */
  .product-card {
    background-color: var(--BackgroundColour);
    color: white;
    transition: all 0.3s ease;
    border: solid 1px;
    min-width: 290px;
  }
  .product-card.border-primary {
    border-color: var(--MarkyPink);
  }
  .product-card.border-secondary {
    border-color: var(--MarkyBlue);
  }
  .product-card:hover {
    transform: translateY(-5px);
    border-color: var(--MarkyYellow);
  }

  .product-image-container {
    position: relative;
    overflow: hidden;
}
  .product-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
    position: absolute;
    transition: transform 0.3s ease;
    opacity: 0;
  }
  .product-image.active {
    opacity: 1;
    position: relative;
  }
  .product-info {
    padding: 5px 5px 15px; 
  }
  .product-name {
    margin: 0;
  }
  .product-description {
    margin: 0;
    font-size: small;
  }
  .size-select {
    cursor: pointer;
    margin-top: 10px;
    width: 100%;
  }
  .quantity-counter {
    display: flex;
    margin: auto;
    height: 50px;
    margin-top: 10px;
    font-size: xx-large;
    font-weight: 900;
  }
  .quantity-increase, .quantity-decrease {
    margin: auto;
    cursor: pointer;
    width: 20%;
    height: 35px;
    color: var(--MarkyBlue);
    background-color: transparent;
    border: 1px var(--MarkyPink) solid;
    font-size: large;
  }
  .quantity-increase:hover, .quantity-decrease:hover {
    border-color: var(--MarkyYellow);
    transform: scale(1.1);
  }
  .quantity-increase:active, .quantity-decrease:active {
    border-color: var(--MarkyYellow);
    transform: scale(0.9);
    background-color: var(--MarkyPink);
    color: white;
  }
  .quantity-value {
    margin: auto;
    width: 40%;
  }
  .product-footer {
    margin-top: 10px;
  }
  .product-price {
    font-size: x-large;
  }


  .slider-prev,
  .slider-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0);
      color: var(--MarkyBlue);
      border: none;
      padding: 10px;
      cursor: pointer;
      z-index: 10;
  }
  .slider-prev:hover {
    color: var(--MarkyPink);
  }
  .slider-next:hover {
    color: var(--MarkyPink);
  }

  .slider-prev {
      left: 10px;
  }

  .slider-next {
      right: 10px;
  }

  .slider-dots {
      position: absolute;
      bottom: 10px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: 5px;
  }

  .slider-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--MarkyBlue);
      cursor: pointer;
  }

  .slider-dot.active {
      background: var(--MarkyPink);
  }

  .add-to-cart {
    margin-top: 10px;
    width: 100%;
    height: 3em;
  }

  /* #cart-toggle {
    opacity: 0;
    cursor: none;
  } */


/* CART SIDEBAR STYLES */

.cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 998; /* Below sidebar, above main content */
    transition: opacity 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

.cart-overlay.active { /* Use .active class for visibility */
    opacity: 1;
    visibility: visible;
}

.cart-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 40vw; /* Adjust as needed */
    max-width: 100%; /* Max width for smaller screens */
    height: 100%;
    background-color: var(--BackgroundColour); /* Use your defined background color */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
    z-index: 998;
    transform: translateX(100%); /* Initially hidden off-screen */
    transition: transform 0.3s ease-out;
    display: flex; /* Use flex for internal layout */
    flex-direction: column;
    color: var(--text-color); /* Ensure text is visible */
}

.cart-sidebar.cart-slide-in { /* Class added by JS for animation */
    transform: translateX(0);
}

.cart-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 15px;
}

.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--MarkyBlue); /* Use your theme colors */
    margin-top: 10vh;
    margin-bottom: 15px;
}

.cart-title {
    margin: 0;
    font-size: 1.5em;
    color: var(--MarkyYellow); /* Highlight title */
    font-family: 'Ailerion', sans-serif; /* Use your font */
    font-weight: 600;
}

.cart-close-btn {
    background: none;
    border: none;
    color: var(--text-color);
    font-size: 1.8em;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease;
}

.cart-close-btn:hover {
    color: var(--MarkyPink);
}

.cart-items-list {
    flex-grow: 1; /* Allows this section to take available space */
    overflow-y: auto; /* Enable scrolling for items */
    padding-right: 5px; /* Space for scrollbar */
    margin: 5px 0 15px;
}

/* Custom Scrollbar for Cart Items */
.cart-items-list::-webkit-scrollbar {
    width: 8px;
}

.cart-items-list::-webkit-scrollbar-track {
    background: var(--BackgroundColour);
}

.cart-items-list::-webkit-scrollbar-thumb {
    background-color: var(--MarkyBlue);
    border-radius: 10px;
    border: 2px solid var(--BackgroundColour);
}

.empty-cart-message {
    text-align: center;
    padding: 50px 0;
    color: #aaa;
    font-size: 1.1em;
}

.empty-cart-message i {
    font-size: 3em;
    margin-bottom: 10px;
    color: #888;
}

.cart-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1); /* Subtle separator */
    animation: fadeIn 0.5s ease-in; /* Use your existing fadeIn animation */
}

.cart-item:last-child {
    border-bottom: none; /* No border for the last item */
}

.cart-item-image {
    width: 80px;
    height: 80px;
    margin-right: 15px;
    border-radius: 5px;
    overflow: hidden;
    flex-shrink: 0; /* Prevent image from shrinking */
}

.cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-item-details {
    flex-grow: 1; /* Allows details to take available space */
}

.cart-item-name {
    margin: 0 0 5px 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--text-color);
}

.cart-item-size {
    margin: 0 0 5px 0;
    font-size: 0.9em;
    color: #ccc;
}

.cart-item-price {
    margin: 0;
    font-size: 1em;
    font-weight: bold;
    color: var(--MarkyYellow);
}

.cart-item-quantity-controls {
    display: flex;
    align-items: center;
    margin: 0 15px;
    border: 1px solid var(--MarkyBlue);
    border-radius: 5px;
    overflow: hidden;
}

.cart-item-quantity-controls button {
    background-color: var(--MarkyBlue);
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s ease;
}

.cart-item-quantity-controls button:hover {
    background-color: var(--MarkyPink);
}

.cart-item-quantity {
    padding: 0 10px;
    font-weight: bold;
    color: var(--text-color);
    min-width: 25px;
    text-align: center;
}

.remove-item {
    background: none;
    border: none;
    color: #888;
    font-size: 1.2em;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s ease;
}

.remove-item:hover {
    color: var(--MarkyPink);
}

.cart-summary {
    padding-top: 15px;
    border-top: 1px solid var(--MarkyBlue);
    height: auto;
    width: 100%;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 1em;
    color: #ccc;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
    font-size: 1.3em;
    font-weight: bold;
    color: var(--MarkyYellow);
}

.checkout-button {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    color: white;

    /* background-color: var(--MarkyPink);
    border: none;
    border-radius: 25px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    font-family: 'Ailerion', sans-serif; */
}

.checkout-button:hover {
    background-color: var(--MarkyBlue); /* Change on hover */
    transform: translateY(-2px);
}

.checkout-button:active {
    transform: scale(0.98);
}

.checkout-button:disabled {
    background-color: #555;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Animation for cart count pulse */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

#cart-count.pulse {
    animation: pulse 0.5s ease-in-out;
}

/* Media query for smaller screens */
@media (max-width: 999px) {
    .cart-sidebar {
        width: 80%; /* Full width on very small screens */
    }
}
@media (max-width: 635px) {
    .cart-sidebar {
        width: 100%; /* Full width on very small screens */
    }
}


/* CHECKOUT PAGE */
.checkout {
  position: fixed;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.checkout-cart {
  height: 100%;
  max-width: 785px;
  margin: auto;
  padding: 10vh 50px 50px;
  display: flex;
  flex-direction: column;
}
#checkout-title {
  margin-top: 0;
  margin-bottom: 5px;
}

#place-order {
  background-color: #000;
  margin: 0;
  padding-bottom: 15px;
}
.order-button {
  margin: 10px 0 0;
  width: 100%;
  height: 50px;
}
.order-button:disabled {
  background-color: #555;
  cursor: not-allowed;
  opacity: 0.7;
}
.info-collect {
  border: none;
  padding: 0;
  padding-bottom: 10px;
}
.info-collect > #phone, .info-collect > #email {
  width: 49.75%;
}
.info-collect > #city, .info-collect > #province, .info-collect > #postalCode {
  width: 33%;
}

@media (max-width: 743px) {
  .info-collect > #phone, .info-collect > #email, .info-collect > #city {
    width: 100%;
  }
  .info-collect > #province, .info-collect > #postalCode {
    width: 49.7%;
  }
}


/* Thank You Modal Styles */
.thank-you-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent overlay */
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth fade-in animation */
    display: flex;
    justify-content: center;
    align-items: center;
}

.show {
    opacity: 1;
    visibility: visible;
}
.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 90%;
    text-align: center;
    animation: modalSlideIn 0.3s ease-out; /* Optional slide-in animation */
}
@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}