@import url('https://fonts.googleapis.com/css2?family=Smooch+Sans:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

.eventBody {
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

*{
  box-sizing: border-box;
}

body{
  background: linear-gradient(135deg, #000 0%, #201434 40%, #000 100%);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

html {
  scroll-behavior: smooth;
}

html, body {
  height: auto;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}


/* let the header grow with content; don't crop the gradient */
header {
  width: 100%;
  height: 80px;
  top: 0;
  z-index: 1030;
  position: sticky;

  /* glassy background with your undertone */
  background: rgba(32, 20, 52, 0.75);   /* #201434 with ~75% opacity */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);  /* Safari support */

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ensure the navbar doesn’t paint over the gradient */
.navbar {
  background: transparent !important;
}

/* nice spacing so header has some height */
header .navbar {
  padding-top: 0;
  padding-bottom: 0;
}

.navbar-nav .nav-link {
  display: flex;
  align-items: center;  /* vertical centering */
  height: 100%;         /* stretch inside li */
  padding-bottom: 19px;
}


/* Moblie font size */
.navbar-nav .nav-link {
  font-size: 45px;
}

.eventsWrapper {
  width: 85vw; /* Responsive width */
  max-width: 1100px; /* Prevents it from being too wide */
  max-height: 675px;
  margin: 1px auto; /* Centers it on the page */
  padding-top: 35px; /* Adjusts inner spacing */
  background: linear-gradient(316deg, #001a12 0%, #001f3f 74%);
        /* Dark background like in the reference image */
  border-radius: 30px; /* Rounded corners */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Subtle shadow */
  text-align: center;
  position: relative;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  top: -10px;
}

.eventCardsWrapper{
  overflow: scroll;
  padding-top: 10px;
  padding-bottom: 10px;
  height: 400px;
  width: 100vw;
}


#headerLogo{
  position: absolute;
  top: 10px;
  left: 60px;
  width: 185px;
  height: 60px;
}

.connect-with-us-mobile{
  display:none;
}

/* Event Cards Styling */
.eventsSectionContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 125px;
  padding-top: 50px;
}

.offcanvas-body{
  background: rgba(32, 20, 52, 0.75);   /* #201434 with ~75% opacity */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);  /* Safari support */
  color: #dcdcdc;
  font-family: Inter;
}

.offcanvas-header {
  background: rgba(32, 20, 52, 0.75);   /* #201434 with ~75% opacity */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);  /* Safari support */
}

@media (min-width: 992px) {
  /*Desktop font size*/
  .navbar-nav .nav-link { margin-top: -25px; font-size: 16.5px; color: #dcdcdc;}

    .social-links img {
      position: relative;
      height: 26px;
      width: 26px;
      top: 15px;
      right: 25px;
    }
}

.navbar-toggler {
  align-self: center;   /* center it within flex parent */
  margin-top: 25px;        /* reset any top spacing */
}


@media (max-width: 991px){
  .connect-with-us{
    display: none;
  }

  .connect-with-us-mobile{
    display:inline-block;
  }

  .navbar-nav .nav-item:not(:last-child) .nav-link::after {
    display: none;
  }

  #ourEventsSpaces{
    text-align: center;
  }

  #headerLogo{
    position: absolute;
    left: 20px;
    width: 206px;
    height: 68px;
  }

  header{
    height: 90px;
  }

  html, body, header {
    overflow-x: hidden; /* Prevent horizontal scrolling */
    width: 100%; /* Ensures no extra width */
  }

  .eventsSectionContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
    padding-top: 30px;
  }

  #ourEventsSpaces::after {
    display: none;
  }

  /*Event Calendar*/
  #iframe-wrapper{
    align-items: center;
    justify-content: center;
    display: flex;
    width: 100%;
  }

  #iframe-calendar{
    height: 360px !important;
    width: 360px !important;
  }

  /*Event Page*/
  .full-event-post-title {
    margin-left: -5px !important;
    font-size: 35px !important;
    width: 95%;
  }

  .full-event-post-desc{
    margin-left: -5px !important;
    margin-bottom: 20px;
    font-size: 14px !important;
  }

  .full-event-post-img{
    left: 37px !important;
  }

  .full-event-post-details{
    left: 75px !important;
  }
}

@media(min-width: 991px){
  .nav-link {
    text-decoration: none;
    color: white;
    font-weight: light;
    font-family: Inter;
    font-size: 14.5px;
    top: 50px;
    position: relative; /* Keeps existing positioning */
    transition: color 0.3s ease-in-out; /* Smooth text color change */
  }
}

.connect-with-us-mobile {
  display: none;
}

@media (max-width: 991px) {
  .connect-with-us-mobile {
    display: flex;
    align-items: center;
    gap: 10px;          /* space between icons */
    /* Remove any extra margin/padding that Bootstrap might add: */
    margin: 0;
    padding: 0;
    position: absolute; /* take them out of the normal <ul> flow */
    left: 35px;
    bottom: -35px;       /* adjust as needed to “stick” them toward the bottom of the sidebar */
    transform: translateX(-50%);
  }

  /* 3) Icon‐specific rules (size and any vertical offset) */
  .connect-with-us-mobile img {
    width: 23px;
    height: 23px;
    /* If you still need to bump them down from the top of the sidebar,
       adjust this top value. If you want them “stuck” to the bottom (as above),
       you can remove top entirely. */
    position: relative;
    top: 147px;
  }
}

.nav-link:hover {
  color: #04fc84 !important; /* Change this to your preferred color */
}

/* Underline effect */
.nav-link::after {
  content: "";
  position: absolute;
  bottom: 4.05px; /* Adjusts spacing under text */
  left: 50%; /* Starts from the center */
  width: 0%; /* Initially invisible */
  height: 0.5px;
  background: #04fc84; /* Light grey underline */
  transition: width 0.4s ease-in-out, left 0.4s ease-in-out;
  transform-origin: center;
}

/* Expand underline on hover */
.nav-link:hover::after {
  width: 100%; /* Expands to full width */
  left: 0; /* Moves left to align properly */
}


/* Event Page Styling */
.events-header {
  position: absolute;
  top: 115px;
  width: 100%; /* Ensures full width */
  text-align: center; /* Centers text */
  padding: 20px 0; /* Adds space above & below */
}

.eventPostHREF {
  text-decoration: none;
  transition: transform 0.4s ease-in-out;
}

.eventPostHREF:hover {
  transform: scale(1.04);
  cursor: pointer;
}

.eventCards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 115px;
  width: 100%;
  opacity: 0;
  transform: translate3d(-50px, 0, 0);
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.slideIn{
  transform: translate3d(-50px, 0, 0);
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-50px, 0, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.eventText {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow:auto;
  width: 225px;
  height: 105px;
  position: relative;
  color: #093868;
  text-align: center;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
  font-family: Inter;
  padding-top: 10px;
  font-weight: 600;
  background-color: ghostwhite;
  border: 1px solid gray;
}

.eventCards img {
  width: 225px;  /* Set a fixed width */
  height: 225px; /* Make it a perfect square */
  object-fit: cover; /* Ensures the image crops properly without distortion */
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border: 0.5px solid rgb(71, 71, 71);
  box-shadow: -5px -5px 10px rgba(0, 0, 0, 0.3);}

#eventInfoButton{
  position: relative;
  font-family:smooch sans;
  font-weight: bold;
  border-radius:5px;
  text-align: center;
  background-color: #5347FA;
  color: #fff;
  border: 0px;
  font-size: 18.5px;
  padding: 2px;
}

.join-button {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 9px;
  color: whitesmoke;
  text-decoration: none;
  padding: 7px;
  border-radius: 30px;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  top: 20px;
  font-weight: bolder;

  /* Multi-Color Gradient Border */
  border: 2px solid transparent;
  background-image: linear-gradient(rgba(0, 0, 0, 0.800), rgba(0, 0, 0, 0.800)),
                    linear-gradient(45deg, #4f00ff, #8a2be2, #ff006a, #ff7300, #ffcc00);
  background-origin: border-box;
  background-clip: padding-box, border-box;

transition: transform 0.3s ease, filter 0.3s ease;
}

.join-button:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
  transition: transform 0.3s ease, filter 0.3s ease;
}

#eventsCalendarContainer{
  background-color: #041424;
  width: 92vw !important;
  max-width: none;
  margin: 20px auto 35px;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  position: relative;
}

.eventsCalendar {
  padding: 60px 0;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
padding-bottom: 100px;
}

.eventsCalenderContent {
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

 #iframe-calendar{
  width: 800px;
  height: 600px;
 }

#eventsAnimation{
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100vh;
}

.aboutUsAnimation{
  display: grid;
  place-items: center;
  align-content: center;
}

.modal {
  display: none;
  position: fixed;
  top:    0;
  left:   0;
  width:  100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  text-align: left;
  z-index: 1000;
}

.modalHome {
  display: none;
  position: fixed;
  top:    0;
  left:   0;
  width:  100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: left;
  z-index: 1000;
}

.modalHome.open {
  display: flex;
}

.modal.open {
  display: flex;
}

.modal-inner {
  background: ghostwhite;
  border-radius: 8px;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

.modal-inner .buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.hidden{
  opacity: 0;
  filter: blur(5px);
  transition: all 1s;
  transform: translateX(-100%);
}

.show{
  opacity: 1;
  filter: blur(0);
  transform: translateX(0%);
}

@media(prefers-reduced-motion){
  .hidden{
    transition: none;
  }
}


.full-event-post-title {
  display: inline-block;
  font-size: 45px;
  font-weight: 300;
  font-family: Inter;       /* lighter weight than bold */
  padding-bottom: 0.2em;   /* space between text and line */
  margin-bottom: 0.4em;    /* space after the line */
  margin-left: 20px;
  border-bottom: 1px solid grey;
  background: linear-gradient(
    to right,
    #2ef7b4,   /* mint */
    #6f98ff,   /* sky */
    #c97eff    /* lavender, etc. */
  );

  /* 2. tell the background to clip to the text */
  -webkit-background-clip: text;
  background-clip: text;

  /* 3. make the text itself transparent */
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.event-buttons-container {
  transition: opacity 0.3s ease, transform 0.3s ease;
  opacity: 1;
}

.event-buttons-container.hidden {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

@keyframes slow-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

footer{
  /* glassy background with your undertone */
  background: rgba(32, 20, 52, 0.75);   /* #201434 with ~75% opacity */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);  /* Safari support */

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}