/* --- style.css (Complete - with Modal Close Button Fix) --- */

:root {
    /* Base Colors */
    --awb-color1: #ffffff;
    --awb-color5: #ff4081; /* Main accent color */
    --awb-color8: #101015;

    /* Typography */
    --awb-typography3-font-family: Poppins;
    --awb-typography3-font-weight: 600;
    --awb-typography3-font-style: normal;
    --awb-typography3-letter-spacing: 2px;
    --awb-typography3-text-transform: uppercase;
    --awb-color-light-blue: #ADD8E6; /* Consider removing if not used */

    /* Logo */
    --awb-logo-width: 400px;
    --awb-logo-height: 132px;

    /* --- Poster Section --- */
    --poster-bg: rgba(16, 16, 21, 0.9);
    --poster-border: 1px solid rgba(255, 64, 129, 0.6); /* Stronger border */
    --poster-shadow: 0 10px 30px rgba(255, 64, 129, 0.3); /* More pronounced shadow */
    --button-gradient: linear-gradient(135deg, #ff4081, #ff80ab); /* Lighter, more vibrant gradient */
    --button-shadow: 0 6px 20px rgba(255, 64, 129, 0.5);
    --button-hover-scale: scale(1.08);  /* More noticeable scale */
    --button-text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Text shadow on button text */

    /* --- General Sections --- */
    --section-heading-color: #ff6b9b; /* Lighter, brighter pink */
    --section-bg-dark: rgba(8, 8, 12, 0.97); /* Even darker */
     /* Very light, removed */
    --section-text-color: #eee;
    --section-padding: 6rem 0; /* More padding */
    --section-border-radius: 25px; /* More rounded */

    /* --- Footer --- */
    --footer-bg: #08080c;
    --footer-text-color: #ccc; /* Slightly lighter */
    --footer-link-color: #ff80ab;
    --footer-link-hover-bg: rgba(255, 128, 171, 0.3);

    /* --- Modal --- */
    --modal-bg: rgba(12, 12, 18, 0.97);  /* Darker */
    --modal-text-color: #eee;
    --modal-heading-color: #ff6b9b;
     /*--modal-title-color: ; /*Was not been declared, using h2 color is enough*/
    --modal-border-color: rgba(255, 107, 155, 0.5); /* Stronger border */
    --input-focus-glow: 0 0 12px rgba(255, 128, 171, 0.8); /* More pronounced glow */

    /* Typography */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Montserrat', sans-serif;

    /* ---Form Inputs ---*/
     --input-bg: #333;          /* Dark background for inputs, like select fields */
     --input-text-color: #fff;  /* Light text color */
     --input-border-color: #555;/* Darker border */
     /* --- Modal Customization --- */
      --modal-intro-color:  #ddd;
       --modal-title-color: #f63c81; /*Use our pink*/
}
/* --- Basic Reset and Body Styles --- */

body {
    margin: 0;
    font-family: var(--font-body);
    background-color: #050508; /* Very dark background */
    color: #fff;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

/* --- Headings --- */

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 700;  /* Bolder headings */
    margin: 0;
    line-height: 1.2;  /* Tighter line height for headings */
}

h2 {
    text-align: center;
    color: var(--section-heading-color);
    text-shadow: 0 0 15px rgba(255, 64, 129, 0.9); /* Stronger glow */
    font-size: 2.8rem; /* Larger */
    margin-bottom: 2.5rem;
    position: relative; /* For underline */
    display: inline-block;
    padding-bottom: 0.6rem;
    font-weight: bold;
}
.hero-content h2 {
    color: white;
     text-shadow: 0 0 8px rgba(255, 64, 129, 0.6);/*Removed no shadows*/

}

/* --- Global Animations --- */
/*KeyFrames no need to be changed*/
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* --- Hero Section --- */
/*No Changed Added Initial Animate Positioning*/
/* --- Hero Section --- */
/*No Changed Added Initial Animate Positioning*/
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0; /*Start hidden, as scroll-animation*/
   transform: translateY(50px);  /* Start below */
   transition: opacity 0.8s ease-out, transform 0.8s ease-out;

}

/*Show All element*/
.hero-section.is-visible{
   opacity: 1;
    transform: translateY(0);

}

.hero-image-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    z-index: 1;
}

.hero-image {
    max-height: 80vh;
    width: 60%;
    object-fit: contain;
    display: block;
}

.background1-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('background1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}


.light-blue-line {
    height: 4px;
    width: 32%;
    background: linear-gradient(to left, var(--awb-color-light-blue), transparent);
    margin: 0 auto;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.hero-content {
    text-align: center;
    padding: 8px;
    width: 90%;
    max-width: 60%;
    background: rgba(0, 0, 0, 0.2);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* --- Header and Navigation --- */

.fusion-header {
    background-color: transparent;
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    padding: 20px 0;
}
/* Ensure logo is centered (Desktop). */
.fusion-header .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -10px;
}

.fusion-header .logo img {
  width: var(--awb-logo-width); /* Variable */
  height: var(--awb-logo-height); /* Variable */
  vertical-align: middle;
  object-fit: contain;
  animation: fadeIn 2s ease-in-out;
}

/* Navbar Links (No Changes) */
.navbar-dark .navbar-nav .nav-link {
    color: var(--awb-color1);
    text-decoration: none;
    font-weight: 600;
    padding: 10px 12px;
    display: block;
    transition: color 0.3s ease;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: var(--awb-typography3-font-family);
    font-style: var(--awb-typography3-font-style);
    position: relative;
}

/* Navbar link hover/active underline */
.navbar-dark .navbar-nav .nav-link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background-color: var(--awb-color5);
    transition: width 0.3s ease;
}

.navbar-dark .navbar-nav .nav-link:hover::before,
.navbar-dark .navbar-nav .nav-link.active::before {
    width: 100%;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--awb-color5);
}

/* Custom Toggler Icon */
.navbar-toggler {
    border: none;
    padding: 0;
    &:focus {
        outline: none;
        box-shadow: none;
    }
}

.custom-toggler-icon {
    display: inline-block;
    width: 1.8em;
    height: 1.5em;
    vertical-align: middle;
    position: relative;
    transition: transform 0.3s ease-in-out;
}

.custom-toggler-icon span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: var(--awb-color5);
    border-radius: 4px;
    opacity: 1;
    left: 0;
    transition: .25s ease-in-out;
}

.custom-toggler-icon span:nth-child(1) {
    top: 0px;
}

.custom-toggler-icon span:nth-child(2) {
    top: 0.5rem;
}

.custom-toggler-icon span:nth-child(3) {
    top: 1rem;
}

.navbar-toggler[aria-expanded="true"] .custom-toggler-icon span:nth-child(1) {
    top: 0.5rem;
    transform: rotate(135deg);
}

.navbar-toggler[aria-expanded="true"] .custom-toggler-icon span:nth-child(2) {
    opacity: 0;
    left: -60px;
}

.navbar-toggler[aria-expanded="true"] .custom-toggler-icon span:nth-child(3) {
    top: 0.5rem;
    transform: rotate(-135deg);
}
/* Animation for Opening/Closing (No Changes) */

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}
.navbar-collapse.show {
    animation: slideIn 0.3s forwards;
}

.navbar-collapse.hide {
    animation: slideOut 0.3s forwards;
}
/* --- Lines (Keep) --- */
.header-line{
   background: linear-gradient(to right, var(--awb-color5), transparent);
   position: relative; /*Keep*/
   width: 100%; /*Keep*/
}

/* --- Mobile Header (CORRECTED) --- */
@media (max-width: 991px) {
    .fusion-header .navbar {
        flex-direction: row; /* Keep as row for toggler/logo */
        align-items: center; /* Vertically center */
        justify-content: space-between; /* Space out toggler and logo */
        padding: 10px 15px; /* Add padding */
    }

    .navbar-brand {
        margin-bottom: 0; /* Remove previous margin-bottom */
    }

   .fusion-header .logo img {
        width: auto;         /* Let it adjust based on height */
        max-width: 116%;
        max-height: 158px;
        margin-top: -54px;    }


    .navbar-toggler {
        order: -1;        /* Toggler to the LEFT */
        margin-right: auto;  /* Push to left, leaving space for logo */
        margin-bottom: 0;
        z-index: 1050; /*Keep as previous */
    }
    .navbar-collapse{
      position: fixed;
      top: 0px; /*Changed, keep close button top right*/
      left: 0px;  /*Changed, keep close button top right*/
      width: 80%;
      height: 100vh; /* Use vh, more consistent */
      background-color: rgba(0, 0, 0, .9);
      padding: 40px 20px 20px; /* Space for close button */
      z-index: 1040; /* was above content. */
      transform: translateX(-100%);
      transition: transform 0.4s ease-in-out;
    }

      .navbar-collapse.show {
        transform: translateX(0);
    }
    .navbar-nav {
        margin-top: 50px;
    }
    .navbar-nav .nav-item {
        margin-bottom: 20px;
    }
    .navbar-nav .nav-link {
       color: var(--awb-color1);
        font-size: 18px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: color 0.3s ease;
    }

     .container-fluid {
        /* No longer needed, keep things simple */
       /* flex-direction: column;
        align-items: center; */
    }

      .d-none.d-lg-flex {
        display: none !important; /* Correct */
    }
}
/* --- Sections (Enhanced) --- */

.avada-section {
    padding: var(--section-padding);
    border-radius: var(--section-border-radius);
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden; /* For background and animations */
    transition: transform 0.6s ease, box-shadow 0.4s ease;
    /* Gradients for depth */
    background: linear-gradient(150deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.08) 100%);
}

.avada-section:hover {
    transform: translateY(-8px); /* More lift */
    box-shadow: 0 12px 40px rgba(255, 64, 129, 0.25); /* Stronger shadow */
}

/* Section-Specific Backgrounds */
#posters {
    background: linear-gradient(150deg, var(--section-bg-dark) 0%, rgba(30, 30, 40, 0.9) 100%);
}

 #about {
   background: linear-gradient(150deg, var(--section-bg-dark) 0%, rgba(30, 30, 40, 0.9) 100%);
   /*Glassmorphism*/
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

/* Section Headings */
.avada-section h2 {
   color: var(--section-heading-color);
    text-shadow: 0 0 15px rgba(255, 64, 129, 0.9); /* Stronger glow */
    font-size: 2.8rem; /* Larger */
    margin-bottom: 2.5rem;
    position: relative; /* For underline */
    display: inline-block;
    padding-bottom: 0.6rem;
    font-weight: bold;
}

/* Underline Effect (More Refined) */
.avada-section h2::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, var(--section-heading-color), transparent);
    border-radius: 5px;
      transform: scaleX(0);   /* Start with underline hidden*/
      transform-origin: left; /* Animate from left to right */
      transition: transform 0.4s ease-out; /*Smooth Transition*/
}
/*Hover and is-visible class effects*/
.avada-section:hover h2::after,
.avada-section.is-visible h2::after
{
    transform: scaleX(1); /* Show underline */
}

.avada-section p {
    color: var(--section-text-color);
     font-size: 1.1rem;       /*Increase Font Size*/
}

/* --- Poster Section --- */
/*Improved Responsiveness, no duplicate properties, more efficient selectors*/
.poster-card {
    background: var(--poster-bg);
    border: var(--poster-border);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--poster-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 1.5rem;
    position: relative;
}

.poster-card:is(:hover, :focus) {
  transform: translateY(-10px);
    box-shadow: 0 12px 35px rgba(255, 64, 129, 0.3);
}
.poster-card img {
   width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
    border-bottom: var(--poster-border); /* Add border below image */
}

.poster-card:is(:hover, :focus) img {
    transform: scale(1.05);
}

.poster-card .poster-details {
    padding: 15px;
    text-align: center;
}
.poster-details :is(h3, p, strong){
 margin-bottom: 0.5rem;  /* Consistent Spacing */
}
.poster-card .poster-details h3 {
    margin-top: 0;
    color: #FF4081;
   font-size: 1.35rem;       /*  Smaller Font Size, was too big for mobile*/
}

.poster-card .poster-details p {
    font-size: 1rem;     /* Made a little bigger, good lecture size */
    color: #eee;

}
.poster-card .poster-details strong{
   color: #f63c81
}
.poster-clickable-area {
    cursor: pointer;
}

/* Remove blue underline and default link styling for poster links */
.poster-clickable-area {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color from parent */
}

.poster-clickable-area:hover {
    text-decoration: none; /* Ensure no underline on hover */
    color: inherit; /* Keep text color unchanged on hover */
}

/* Add shadow effect to the poster image */
.single-poster img {
    animation: glow 2.5s infinite; /* Add glowing animation */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* Subtle shadow for depth */
    border-radius: 10px; /* Slightly rounded corners */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.single-poster img:hover {
    transform: scale(1.05); /* Slight zoom on hover */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8); /* Enhanced shadow on hover */
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6); /* Normal shadow */
    }
    50% {
        box-shadow: 0 8px 30px rgba(255, 64, 129, 0.8); /* Glow effect */
    }
}
.single-poster p {
    color: #ddd;
    line-height: 1.6;
    text-align: center; /* Align text for better readability */
    word-wrap: break-word; /* Ensure long words break properly */
    overflow-wrap: break-word; /* Additional support for word breaking */
    margin: 0 auto;
    max-width: 90%; /* Keep text within the container */
}

/* --- Buttons (Refined) --- */
/*Creative, glowing, and fully responsive. Consistent with the rest.*/
.btn-primary {
  background: var(--button-gradient);
    border: none;
    color: white;
    padding: 10px 22px;
    border-radius: 50px;  /*Even more rounded!*/
    font-weight: 600;
    text-shadow: var(--button-text-shadow);
    box-shadow: var(--button-shadow);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    overflow: hidden; /*Critical for the pseudo-element*/
    display: inline-block; /*Important, centering and adapt to the text inside the buttons*/
    
}

.poster-card .btn-primary {
    width: auto;
    margin: 1rem auto; /*Autocenter and give space around */
    display: block; /*Needed for centering*/
}

.btn-primary:is(:hover, :focus){
    background: var(--button-gradient); /*Avoid different BG*/
   transform: var(--button-hover-scale);
    box-shadow: 0 8px 25px rgba(255, 64, 129, 0.7); /* Bigger, brighter glow */
    color: white;  /*Force White*/
    border: none;   /*Force NO Border*/
}

/* Cool glowing effect using ::before (more pronounced) */
.btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     background: rgba(255, 255, 255, 0.2); /* Stronger highlight */
    z-index: -1;
    transition: opacity 0.4s ease; /* Smoother transition */
    opacity: 0;
      border-radius: 50px; /*To keep consistent*/
}
/* State pseudo-selector in the same rule*/
.btn-primary:is(:hover, :focus)::before {
   opacity: 1;
}
/* --- Button Positioning --- */
.poster-card .btn-container {
   text-align: center; /*Easy center the button now!*/
    padding-bottom: 1rem; /*Space between the content and the button*/
    animation: neonPulse 1.5s infinite alternate ease-in-out;

}
/* Video Background */
.welcome-section video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: -1;
  }

/* --- About Section --- */

#about .about-content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
     color: var(--section-text-color);
    padding: 1rem;
    text-align: justify;
}
#about  p {
  margin-bottom: 15px;
}

/* --- Footer --- */
.avada-footer {
    background: var(--footer-bg);
    color: var(--footer-text-color);
    text-align: center;
    padding: 2rem 0;
    box-shadow: none;
    position: relative;
    margin-top: auto;
    width: 100%;
}

.avada-footer p {
    margin: 0.5rem 0;
}

.avada-footer a {
    color: var(--footer-link-color);
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease; /* Add bg transition */
    padding: 0.5rem;
    display: inline-block;
    margin: 0 0.5rem;
    border-radius: 4px;
}

.avada-footer a:hover,
.avada-footer a:focus {
    text-decoration: underline;
    background-color: var(--footer-link-hover-bg); /* Use variable */
}

/* --- Modal Styles --- */

.modal-content {
    background: var(--modal-bg);
    padding: 35px; /* More padding */
    border: 2px solid var(--modal-border-color); /* Stronger border */
    color: var(--modal-text-color);
    border-radius: 20px; /* More rounded */
    box-shadow: 0 15px 40px rgba(255, 64, 129, 0.3); /* Stronger shadow */
    position: relative;
    z-index: 1001;
}

.modal-content h2 {
      color: var(--modal-heading-color);
      font-size: 2.2rem;
    margin-bottom: 1.5rem;/*Reduce a bit and keep H2 sizes rules*/
      text-align: center;
}
/*Modal Header Custom*/
.modal-content .modal-header{
border-bottom: 1px solid var(--modal-border-color);
    display: flex;          /*Important: Use flex for all this */
    justify-content: space-between;  /*  Space out content (title and close)*/
   align-items: center;      /* Center vertically */
}

/*Intro text top of Contact Form, align as design reference */
.contact-intro {
    font-size: 1rem;   /*Was to big a little */
    color: var(--modal-intro-color);
    margin-bottom: 1.5rem;
    text-align: left; /*Reference image Style */
}
.contact-info {
    margin-bottom: 2rem; /* Space between info and social links */
}

.contact-info h3,
.modal-content .modal-header .modal-title{ /*Important. ALL h3 of contact info*/
    text-align: left;  /*As reference*/
    color:  var(--modal-title-color); /*Better hierarchy*/
}

/*Each detail design (Email, Phone...)*/
.contact-info p{
    display:flex;
    align-items: center;/*Vertical Allignment for icon - text*/
    margin-bottom: 0.8rem;
    line-height: 1.4;
    justify-content: flex-start;/*Ensure icon to left*/

}

.contact-info a {
    color: var(--modal-text-color);
    text-decoration: none;
    transition: color 0.3s ease;
     margin-left: 0.5rem; /* Space label - text*/
     font-size: 15px; /*Small, but readable*/

}

.contact-info a:hover {
    color: var(--awb-color5);
 /*   text-decoration: underline;  NO underline style in example */
}
/*Icons email/phone distance*/
.contact-info i {
     /*margin-right: 0.7rem; /* was using me-2 of boostrap class, but better control over that, to fit all icons, screens...*/
    color: var(--awb-color5);
    font-size: 1.2rem;
    width: 28px; /*Important fixed, to keep good design*/
    text-align: center; /*Center and all at same distance! GOOD */
}

/* ---Social Media --- */
/* Style as a large, prominent button*/
.social-links h3{/*The h3 on "Follow Us */
 text-align: left;
}

.btn-instagram {
  /* No more Gradient for that modal to get similar look*/
    background: var(--awb-color5); /*Changed a more appropriate for you brand */
    border: none;
    color: white;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 8px;  /*Match Style*/
    display: inline-flex; /*Change display, easier to position inside your design */
    align-items: center;    /* Center icon and text vertically */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-top: .8rem; /*Because label needs it.*/
     width: 100%;/*Full width*/
}

/*Font awesome icon, distance using me-1 class in the span is fine.*/
.btn-instagram .fab{
    font-size: 1.5rem ; /*Little bigger*/
}

 .btn-instagram:hover{
  color: #fff;  /*Good Practice, ensure style even with gradients*/
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Subtle shadow on hover*/
 }
/*Style close button properly, remove all unnecessary things inline style: position...etc*/

 .close-button {  /*This close button class affects everywhere it exists on your page*/
    color: #aaa;
    font-size: 30px;   /* removed float right: that must be done by position-absolute (in your modal, already is it */
    font-weight: bold;/*correct */
    cursor: pointer;
    transition: color 0.3s ease, opacity 0.3s ease;
     z-index: 10001;  /* Ensure its very topmost element. 10001 is fine */
     animation: neonPulse 1.5s infinite alternate ease-in-out;

}
/*Set style always, to keep consistency, easy changes*/

.close-button:hover,
.close-button:focus {
    color: #ff4081; /*Your brand Style*/
    text-decoration: none;
     opacity: 1; /*Full*/
}
/*Now bootstrap styles works well.*/

 .modal-header .btn-close{
  margin: 0; /*Reset Margin, better for positioning to work (very important now*/
  padding: 0;
}
.btn-close {
     color: #ff4081;  /*GOOD*/
     /* float: right; /*Unnecessary to define close position!*/
      font-size: 30px;  /* keep your conf */
    font-weight: bold; /*correct font weight*/
      cursor: pointer;  /*This too */
      transition: color 0.3s ease, opacity 0.3s ease;
    opacity: .5;  /* Reduce it. This fit better in you example*/
     z-index: 10001;  /*On Top.*/
 }
 /* Hover and focus in same declaration, with transition*/
.btn-close:is(:hover, :focus) {
    color: #ff4081;   /*<--------HERE WAS THE FIX. -------*/
    text-decoration: none;
    opacity: 1;      /*Fully Visible */
 }
.modal-content label {
    color: var(--modal-text-color);
    font-weight: 600; /* Bolder labels */
}

.modal-content input,
.modal-content select {
    background: #333; /* Dark background */
    color: #fff;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 10px 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus Styles (Consistent and More Pronounced) */
.modal-content input:focus,
.modal-content select:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--awb-color5);
    box-shadow: var(--input-focus-glow);
    outline: none;
}

/* --- Forms --- */
.form-group {
    margin-bottom: 1.5rem; /* More space */
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 18px; /* More padding */
    border: 1px solid #555;
    border-radius: 8px;
    background: #333;
    color: #fff;
    font-size: 1rem;  /* Larger font */
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* --- Remaining Styles --- */
/*ANIMATIONS ALREADY DECLARED, but used*/
.scroll-animation {
   opacity: 0;
   transform: translateY(30px); /* Start below */
   transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}
/*Class added when the section is on viewport*/
.scroll-animation.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* --- Number Input Spinner (Desktop Only) --- */
/* Default is No Spinners in general form inputs */

  /* Chrome, Safari, Edge, Opera.  Hide them. */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox. Hide them. */
  input[type=number] {
    -moz-appearance: textfield;
     appearance: textfield;
  }
/*-------      ----------    ----------     ---------*/
@media (min-width: 992px) { /*  <-- Targets desktop (lg breakpoint) and larger*/
    /* Restore default appearance for number inputs *inside* the modal on DESKTOP ONLY*/
     .modal-content input[type="number"]{
         -webkit-appearance: auto;
         -moz-appearance: auto;
         appearance: auto;

     }
       /*Two Colums for Contact displays Correctly!*/
    .contact-info,
   .social-links{
    width: 50%;
    float: left;  /* Float them side-by-side on larger screens */
   }
}
/* Breakpoints: */
@media (max-width: 768px) {
    .avada-section {
        padding: 4rem 0; /* Less padding */
    }
     .avada-section h2 {
        font-size: 2.2rem; /* Smaller headings */
    }
    /* Modal adjustments*/
     .modal-content{
        padding: 25px;
    }
     /*Change to One Column to ensure always is in order.
      Two columns only heigher, ensure every filter/column fit,*/
   .contact-info,
    .social-links{
     width: 100%;

   }
}
@media (max-width: 576px) {
   .avada-section h2 {
    font-size: 2rem;
   }
   /*Modal even smaller*/
   .modal-content {
    padding: 20px;
   }

    /*Inputs in the form take full width on mobile*/
   .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
    }
    .welcome-images.phone-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        gap: 0.5rem; /* Adjust spacing between items */
    }
}

/* Keep Media Queries that increase/control WIDTH  */
/* in the same breakpoint for better organization */
@media (min-width: 1200px) {

        .modal-dialog{
            max-width: 960px;   /*Maximum for wider Viewports */
      }

}
.poster-image{
cursor: pointer;
}

/*Make sure the following posterModal class z-index is LESSER than our current .modal z-index*/
#posterModal{
 z-index: 1000;
}
/* Guest Checkin Specific Styles (from club_checkin.css) */

.search-container {
    position: relative;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.search-button {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 10px;
    transition: color 0.3s ease;
    position: absolute;
    left: 10px;
    z-index: 2;
}

.search-button:hover,
.search-button:focus {
    color: #FF4081;
}

.search-button.hidden {
    display: none;
}

.search-input {
    width: 100%;
    padding: 12px 20px 12px 40px;
    border: 1px solid #555;
    border-radius: 6px;
    background: #333;
    color: #fff;
    font-size: 16px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    z-index: 1;
    position: relative;
}

.search-input:focus {
    border-color: #FF4081;
    outline: none;
    box-shadow: 0 0 8px rgba(255, 64, 129, 0.3);
}

.search-input.active {
}

/* Guest List */
.guest-list {
    margin-top: 20px;
}

.guest-list h2 {
    color: #FF4081;
    margin-bottom: 10px;
    font-size: 20px;
}

.guest-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #555;
}

.guest-item span {
    flex-grow: 1;
}
.promoter-group{
  margin-bottom: 15px;
}

.attended-button {
    background: linear-gradient(45deg, #FF4081, #C2185B);
    border: none;
    color: #fff;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(255, 64, 129, 0.3);
}

.attended-button:hover,
.attended-button:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 64, 129, 0.4);
}

.attended-button:disabled {
    background: #555;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.attended-button.attended {
    background: #4CAF50;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
.attended-button.attended:hover,
.attended-button.attended:focus{
  transform: none;
  box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}
/* Image Preview (for Edit Poster) */
#edit_poster_image_preview {
  max-width: 200px;
  max-height: 150px;
  margin-top: 10px;
  display: block;
}
/*Filter Styling*/
/* Filter Container */
.filter-container {
    display: flex;
    flex-wrap: wrap;       /* Wrap on smaller screens */
    justify-content: flex-start; /* Align to the start (left) */
    gap: 1rem;            /* Consistent spacing */
    margin-bottom: 2rem;  /* Space below the filters */
    align-items: flex-end;/*GOOD PRACTICE, ALWAYS use units of length unless you need it exactly zero!*/
}
/*targeting specifically this*/
.filter-container > * {
    flex: 1 1 160px;      /* Grow and shrink, min-width 160px */
    max-width: 250px;     /* ...but don't get TOO wide on desktop*/
}
#month-filter-container,
#week-filter-container {
    flex: 1 1 150px;     /* Adjust width as needed, they will follow previous declaration in small sizes*/
    max-width: 200px;    /* Limit width*/
    margin-top: 0.5rem; /*Align elements since i remove margin of flex child*/
}
/* Filter Labels */
.filter-container label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--section-text-color); /* Consistent color */
    font-weight: 600;       /* Slightly bolder labels */
}

/* Filter Select and Input Styles */
.filter-container select,
.filter-container input[type="month"],
.filter-container input[type="week"] {
    width: 100%;
    padding: 0.6rem 0.8rem; /* Slightly more padding */
    border: 1px solid #555;
    border-radius: 6px;   /* Slightly more rounded */
    background: #333;
    color: #fff;
    font-size: 0.9rem;   /* Slightly smaller font */
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    -webkit-appearance: none; /* Remove default styling */
    -moz-appearance: none;
    appearance: none;
}

.filter-container select:focus,
.filter-container input[type="month"]:focus,
.filter-container input[type="week"]:focus {
    border-color: var(--awb-color5);
    box-shadow: 0 0 8px rgba(255, 64, 129, 0.5); /* Consistent focus glow */
    outline: none;
}
.filter-container select{
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1.41 0L6 4.58L10.59 0L12 1.41L6 7.41L0 1.41L1.41 0z'/%3E%3C/svg%3E"); /* Custom dropdown arrow*/
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 0.65rem auto;/* Size of arrow icon, prevents overflowing or over spacing */
  padding-right: 2rem; /* Space at right*/
}

    /* Hide by default */
    #month-filter-container,
    #week-filter-container {
        display: none;
    }
/* ---Remove default spinner---- */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield; /* Standard property - good practice to include */
}

/* --- Custom Calendar Styles --- */

/* Specific Month/Week Input STYLES. Create new rule*/
.filter-container input[type="month"],
.filter-container input[type="week"]{
 background-color: var(--input-bg); /* Consistent with selects! */
  color: var(--input-text-color);  /* Consistent text color! */
  border: 1px solid var(--input-border-color); /*Use var*/
    /* Focus Styles Keep*/
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
     /* Add some space at Right, so the calendar icon don't overlap  */
     padding-right: 2.5rem;  /* More space, good looking */

     /* Remove arrows/icons and add your Custom if needed*/
     /* Standard, all browsers (IE too with ms-)*/
     appearance: none;

}
    /*input focus too*/
.filter-container input[type="month"]:focus,
.filter-container input[type="week"]:focus {
   box-shadow: var(--input-focus-glow); /* was defined */

}

/*Custom Calendar, more options ->  ::-webkit-calendar-picker-indicator*/

/* Chrome, Safari, Edge, Opera */

/*Calendar Button. Hide Default */
.filter-container input[type="month"]::-webkit-calendar-picker-indicator,
.filter-container input[type="week"]::-webkit-calendar-picker-indicator{
    /*Hide, if showPicker works as spected we dont need it anymore.*/
      display: none;

}

/* Dropdown Styles */
.dropdown-container {
 position: absolute;
 top: 10px;
 right: 10px;
 display: inline-block;
 z-index: 2;
}

.dropdown-button {
   background: transparent;
   border: none;
   color: #fff;
   font-size: 1.2em;
   cursor: pointer;
   padding: 5px;
   position: relative;
   z-index: 3;
}
.dropdown-button:hover, .dropdown-button:focus{
   color: #FF4081;
}

.dropdown-content {
 display: none;
 position: absolute;
 right: 0;
 top: 30px;
 background-color: #333;
 min-width: 180px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
 border-radius: 4px;
 padding: 5px 0;
}

/* Style for active dropdown */
.dropdown-content.show{
 display: block;
}
/* Style for buttons within the dropdown */
.dropdown-btn {
   display: block;
   width: 100%;
   text-align: left;
   padding: 8px 12px;
   margin: 0;
   border-radius: 0;
   background: linear-gradient(45deg, #FF4081, #C2185B);
   border: none;
   color: #fff;
   cursor: pointer;
   transition: transform 0.3s ease, box-shadow 0.3s ease,  background-color 0.3s ease;;
   font-size: 16px;
   text-transform: uppercase;
   letter-spacing: 1px;
   box-shadow: 0 4px 15px rgba(255, 64, 129, 0.3);
}
.dropdown-btn:hover,
.dropdown-btn:focus {
    transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(255, 64, 129, 0.4);
    background: linear-gradient(45deg, #C2185B, #FF4081);
}

/*LOADING INDICATOR */
#loadingIndicator {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1000;
}

.spinner {
   border: 4px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   border-top: 4px solid #fff;
   width: 50px;
   height: 50px;
   animation: spin 1s linear infinite;
}

@keyframes spin {
   0% {
       transform: rotate(0deg);
   }
   100% {
       transform: rotate(360deg);
   }
}

/* TABLES */
#promotersListContainer table,
#guestListContainer table,
#promoterPerformanceListContainer table{
   width: 100%;
   border-collapse: collapse;
   overflow-x: auto;

}

#promotersListContainer th,
#promotersListContainer td,
#guestListContainer th,
#guestListContainer td,
#promoterPerformanceListContainer th,
#promoterPerformanceListContainer td
{
   border: 1px solid #555;
   padding: 12px;
   color: #f0f0f0;
   text-align: left;
}

#promotersListContainer th,
#guestListContainer th,
#promoterPerformanceListContainer th {
   background-color: #333;
   color: #FF4081;
}

#promotersListContainer tr:nth-child(even),
#guestListContainer tr:nth-child(even),
#promoterPerformanceListContainer tr:nth-child(even) {
   background-color: #444;
}

#promotersListContainer tr:hover,
#guestListContainer tr:hover,
#promoterPerformanceListContainer tr:hover {
   background-color: #555;
}
@media print {
   .action-column {
       display: none;
   }
   #promotersListContainer table,
   #guestListContainer table,
   #promoterPerformanceListContainer table {
       width: 100%;
       border-collapse: collapse;
   }
   #promotersListContainer th,
   #promotersListContainer td,
   #guestListContainer th,
   #guestListContainer td,
   #promoterPerformanceListContainer th,
   #promoterPerformanceListContainer td
   {
    border: 1px solid #555;
    padding: 12px;
    color: #000;
}

#promotersListContainer th,
#guestListContainer th,
#promoterPerformanceListContainer th {
    background-color: #ddd;
    color: #000;
}

#promotersListContainer tr:nth-child(even),
#guestListContainer tr:nth-child(even),
#promoterPerformanceListContainer tr:nth-child(even)
{
    background-color: #f9f9f9;
}

#promotersListContainer tr:hover,
#guestListContainertr:hover,
#promoterPerformanceListContainer tr:hover
 {
    background-color: #f1f1f1;
}
}

/* CENTERED SECTION */
.centered-section {
text-align: center;
margin-top: 30px;
}

.centered-section h2 {
margin-bottom: 25px;
}

.centered-section .btn {
margin-top: 15px;
}
/*Media Queries for the dropdown*/
@media(max-width: 768px){
.dropdown-content{
    min-width: 150px;
}
}
@media(max-width: 480px){
.dropdown-content{
    min-width: 130px;
}
}

/* --- Media Queries --- */
/*Media Queries now affect the critical parts, adapting to small viewports: */

/* Keep your existing media query for desktop adjustments,*/
@media (min-width: 992px) {
.posters-container {
    /* Bootstrap handles the grid. */
}
  .posters-container:has(.poster-card:nth-child(2)) .poster-card {
    max-width: 500px;
}
  /* --- Number Input Spinner (Desktop Only) --- */
/*Default is No Spinners in general form inputs */

/* Chrome, Safari, Edge, Opera.  Hide them. */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
 -webkit-appearance: none;
    margin: 0;
}
/* Firefox. Hide them. */
input[type=number] {
-moz-appearance: textfield;
appearance: textfield;
}
/*-------      ----------    ----------     ---------*/

 /* Restore default appearance for number inputs *inside* the modal on DESKTOP ONLY*/
  .modal-content input[type="number"]{
     -webkit-appearance: auto;
     -moz-appearance: auto;
     appearance: auto;

 }
/*Two Colums for Contact displays Correctly!*/
.contact-info,
.social-links{
width: 50%;
float: left;  /* Float them side-by-side on larger screens */
}
/*Keep Best Width Here*/
  .modal-dialog {
        max-width: 850px;
        margin: 1.75rem auto;
 }
}
/* Breakpoints: */
@media (max-width: 768px) {
.avada-section {
    padding: 4rem 0; /* Less padding */
}
 .avada-section h2 {
    font-size: 2.2rem; /* Smaller headings */
}
/* Modal adjustments*/
 .modal-content{
    padding: 25px;
}

/*Change to One Column to ensure always is in order.
 Two columns only heigher, ensure every filter/column fit,*/

.contact-info,
.social-links{
 width: 100%;

}

}
@media (max-width: 576px) {
.avada-section h2 {
font-size: 2rem;
}
/*Modal even smaller*/
.modal-content {
padding: 20px;
}
.close-button{
  font-size: 24px;
  animation: neonPulse 1.5s infinite alternate ease-in-out;

}
/*Inputs in the form take full width on mobile*/
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
}
}

/*Keep control over max width, on the biggest screens.  */
@media (min-width: 1200px) {
.modal-dialog{
    max-width: 960px;   /*Maximum for wider Viewports */
}
}

/*poster image on click*/
.poster-image{
cursor: pointer;
}

/*Make sure the following posterModal class z-index is LESSER than our current .modal z-index*/
#posterModal{
z-index: 1000;
}

/* --- Newsletter Section --- */

.newsletter-section {
    background: rgba(255, 255, 255, 0.05); /* Subtle background */
    border-top: 1px solid rgba(255, 64, 129, 0.2); /* Consistent border */
    padding: 3rem 0; /* More vertical padding */
    text-align: center; /* Center text */
     /* Removed border-radius, let the container handle it */
    margin-bottom: 1.5rem; /* Space below */
    /* Removed box-shadow, use on container for consistency */
    animation: slideUp 0.8s ease-out; /* Subtle slide-up animation */
}

/*Consistent With overall style*/

.newsletter-section .container{
   border-radius: 15px; /* Match overall style */
   box-shadow: 0 8px 20px rgba(0,0,0,0.2); /*Consistent*/
    padding: 2rem; /*Inside Container*/
}

.newsletter-heading {
    color: var(--footer-link-color);
    font-size: 2rem;  /* Slightly larger heading */
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.newsletter-description {
    color: var(--footer-text-color);
    margin-bottom: 1.5rem;
    font-size: 1.1rem; /* Slightly larger text */
}

/* Custom input styling (overriding Bootstrap defaults) */
.newsletter-input,
.newsletter-select {
    background: #ffffff87 !important; /* Use your variables, !important for override */
    color: var(--input-text-color) !important;
    border: 1px solid var(--input-border-color) !important;
    border-radius: 8px !important; /* Consistent rounding */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    padding: 0.7rem 1rem !important; /* Control padding, was defined globally */
    font-size: 1rem !important;       /*  Control font-size */
}

/* Focus states */
.newsletter-input:focus,
.newsletter-select:focus {
    border-color: var(--awb-color5) !important;
    box-shadow: var(--input-focus-glow) !important;
    outline: none;
}

/* Error state (for required fields) */
.newsletter-input.error,
.newsletter-select.error
{
    border-color: #dc3545 !important; /* Bootstrap's danger color */
    box-shadow: 0 0 5px rgba(220, 53, 69, 0.5) !important;
}
/*Custom Select Input*/
.newsletter-select{
  padding-right: 2rem !important; /* Space at right*/
   -webkit-appearance: none; /* Remove default styling */
    -moz-appearance: none;
    appearance: none;
}

/*Newsletter Input Date*/
.newsletter-section input[type="date"]{
 /* Add some space at Right, so the calendar icon don't overlap  */
     padding-right: 2.5rem !important;  /* More space, good looking */
     /* Remove arrows/icons and add your Custom if needed*/
     /* Standard, all browsers (IE too with ms-)*/
     appearance: none;

}
.newsletter-section input[type="date"]::-webkit-calendar-picker-indicator{
    /*Hide, if showPicker works as spected we dont need it anymore.*/
      display: none;

}

/* Animation */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.keep-hovered {
    color: var(--awb-color5); /* or pink, or any highlight color */
    border-bottom: 2px solid var(--awb-color5);
  }


  /* Club Information Section */
.club-info {
    margin-top: 20px;
    padding: 15px;
    background: linear-gradient(45deg, #2a2a2a, #1d1d1d);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: var(--text-light);
    font-size: 16px;
}

.club-info p {
    margin: 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.club-info i {
    color: var(--primary-gradient-start);
    font-size: 18px;
}

.club-info a {
    color: var(--primary-gradient-start);
    text-decoration: none;
    font-weight: bold;
}

.club-info a:hover {
    text-decoration: underline;
}

.club-info .btn {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 14px;
    text-transform: uppercase;
    background: linear-gradient(45deg, #ec38bc, #7303c0);
    color: var(--text-light);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.club-info .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    background: linear-gradient(45deg, #7303c0, #ec38bc);
}

.btn-gradient {
    background: linear-gradient(135deg, #43cea2, #185a9d);
    background-size: 300% 300%;
    color: #fff;
    border-radius: 12px;
    padding: 12px 24px;
    animation: gradientFlow 3s infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  @keyframes gradientFlow {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  .btn-gradient:hover {
    animation: none;
    transform: scale(1.1);
    box-shadow: 0 6px 15px rgba(67, 206, 162, 0.5);
  }

/* Poster Section Background */
#poster-section {
    background: url('../nightclub-bg.jpg') no-repeat center center;
    background-size: cover;
    padding: 50px 0; /* Add padding for spacing */
    color: #fff; /* Ensure text is readable */
}

/* Optional: Add a semi-transparent overlay for better text contrast */
#poster-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
    z-index: 1;
    
}

#poster-section .container {
    position: relative;
    z-index: 2; /* Ensure content is above the overlay */
}

/* Ensure the background image remains unchanged on hover */
#poster-section:hover {
    background: url('../nightclub-bg.jpg') no-repeat center center; /* Reapply the same background */
    background-size: cover;
    background-attachment: fixed;
}



.background1-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the video covers the entire section */
    z-index: 1;
}

.background1-video::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit; /* Use the same video as the background */
    filter: blur(20px); /* Apply blur for shadow effect */
    opacity: 0.5; /* Adjust opacity for a subtle effect */
    z-index: -1; /* Place it behind the video */
    transform: scale(1.1); /* Slightly enlarge to create the shadow effect */
}