* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 html,
 body {
     overflow-x: hidden !important;
 }
 
 body {
     font-family: Arial, sans-serif;
     /* background: #000; */
     color: #fff;
 }
 /* ✅ NAVBAR CONTAINER */
 
 .header {
     width: 100%;
     background: rgba(246, 244, 244, 0.5);
     position: absolute;
     top: 0;
     left: 0;
     z-index: 10;
 }
 
 .nav-container {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0px 2px;
 }
 /* ✅ LOGO */
 
 .logo {
     height: 100px;
     font-size: 22px;
     font-weight: bold;
     color: #fff;
 }
 
 .logo img {
     height: 97px;
 }
 /* ✅ NAV MENU */
 
 .nav-menu {
     display: flex;
     list-style: none;
     gap: 12px;
 }
 
 .nav-menu li {
     position: relative;
 }
 
 .nav-menu>li>a {
     color: #1f1e1e;
     text-decoration: none;
     padding: 10px;
     display: block;
     font-size: 13px;
     font-weight: bold;
 }
 /* ✅ DROPDOWN */
 
 .dropdown {
     display: none;
     position: absolute;
     top: 100%;
     /* removes hover gap issue */
     left: 0;
     background: rgba(0, 0, 0, 0.95);
     min-width: 180px;
     list-style: none;
     z-index: 999;
     transition: all 0.3s ease;
 }
 
 .dropdown li a {
     padding: 10px 16px;
     display: block;
     color: #fff;
     text-decoration: none;
     white-space: nowrap;
 }
 
 .dropdown li a:hover {
     background-color: #333;
 }
 /* show dropdown on hover (desktop) */
 
 .nav-menu li:hover .dropdown {
     display: block;
 }
 /* ✅ MOBILE MENU ICON */
 
 .menu-toggle {
     display: none;
     font-size: 24px;
     color: #151414;
     cursor: pointer;
     padding-right: 25px;
 }
 /* ✅ Login Button Styling */
 
 .btn-login {
     background: #4CAF50;
     /* Green button */
     color: #fff !important;
     padding: 8px 16px;
     border-radius: 6px;
     font-weight: bold;
     transition: background 0.3s ease;
     display: inline-block;
     text-decoration: none;
 }
 /* ✅ Hover effect */
 
 .btn-login:hover {
     background: #45a049;
     /* Slightly darker green */
     color: #fff;
 }
 /* ✅ SLIDER */
 /* ✅ Slider Arrow Styles */
 
 .slider-arrows {
     position: absolute;
     width: 100%;
     top: 50%;
     transform: translateY(-50%);
     display: flex;
     justify-content: space-between;
     padding: 0 30px;
     z-index: 10;
 }
 
 .slider-arrow {
     font-size: 13px;
     color: white;
     cursor: pointer;
     background: rgba(0, 0, 0, 0.3);
     padding: 10px 15px;
     border-radius: 50%;
     transition: 0.3s;
     user-select: none;
 }
 
 .slider-arrow:hover {
     background: rgba(0, 0, 0, 0.6);
     color: #ffd700;
     transform: scale(1.1);
 }
 
 .slider {
     position: relative;
     width: 100%;
     height: 100vh;
     overflow: hidden;
 }
 
 .slide {
     position: absolute;
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     opacity: 0;
     transition: opacity 1s ease-in-out;
 }
 
 .slide.active {
     opacity: 1;
     z-index: 1;
 }
 /* ✅ SLIDER OVERLAY TEXT */
 
 .slide-content {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     color: #fff;
     max-width: 887px;
     opacity: 0;
     transform: translate(-50%, -40%);
     transition: all 0.8s ease-out;
     background: #0000004f;
     padding: 10px;
 }
 
 .slider .slide-content {
     position: relative;
     z-index: 2;
     color: #fff;
     /* Keep text white */
     text-shadow: 0px 2px 8px rgba(0, 0, 0, 0.7);
     /* Better readability */
 }
 
 .slide.active .slide-content {
     opacity: 1;
     transform: translate(-50%, -50%);
     /* animate down */
 }
 
 .slide-content h2 {
     font-size: 50px;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 15px;
     animation: fadeInDown 1s ease forwards;
 }
 
 .slide-content p {
     font-size: 20px;
     line-height: 1.5;
     animation: fadeInUp 1s ease forwards;
 }
 /* ✅ Overlay background to make text readable */
 
 .slide::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     /* background: rgba(0,0,0,0.3); */
 }
 /* ✅ ANIMATIONS */
 
 @keyframes fadeInDown {
     0% {
         opacity: 0;
         transform: translateY(-30px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeInUp {
     0% {
         opacity: 0;
         transform: translateY(30px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }
 /* ✅ RESPONSIVE */
 
 @media (max-width: 992px) {
     .nav-menu {
         display: none;
         flex-direction: column;
         background: rgba(255, 255, 255, 0.9);
         position: absolute;
         top: 60px;
         right: 0;
         width: 220px;
     }
     .nav-menu li {
         width: 100%;
     }
     .nav-menu li a {
         padding: 12px 15px;
     }
     .menu-toggle {
         display: block;
     }
     .nav-menu.show {
         display: flex;
         gap: 5px;
     }
     .dropdown {
         position: static;
     }
     .nav-menu li:hover .dropdown {
         display: none;
         /* disable hover for mobile */
     }
     .nav-menu li.active .dropdown {
         display: block;
         /* toggle dropdown on click */
     }
     .slide-content h2 {
         font-size: 32px;
     }
     .slide-content p {
         font-size: 16px;
     }
 }
 
 .about-section {
     /* background-color: white; */
     display: flex;
     align-items: center;
     justify-content: space-between;
     max-width: 1200px;
     margin: 19px auto;
     padding: 0 0 60px 40px;
     gap: 40px;
     opacity: 1;
     transform: translateY(50px);
     transition: all 0.8s ease-in-out;
 }
 
 .about-section.visible {
     opacity: 1;
     transform: translateY(0);
 }
 
 .about-text {
     flex: 1;
 }
 
 .about-text h2 {
     font-size: 2.8rem;
     font-weight: bold;
     margin-bottom: 20px;
     color: black;
 }
 
 .about-text p {
     font-size: 1.1rem;
     color: #444;
 }
 
 .about-image {
     flex: 1;
     text-align: right;
 }
 
 .about-image img {
     width: 100%;
     max-width: 500px;
     border-radius: 8px;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 /* Responsive */
 
 @media (max-width: 992px) {
     .about-section {
         flex-direction: column;
         text-align: center;
     }
     .about-image {
         text-align: center;
     }
 }
 /* ✅ Animation Keyframes */
 
 @keyframes fadeSlideLeft {
     0% {
         opacity: 0;
         transform: translateX(-50px);
     }
     100% {
         opacity: 1;
         transform: translateX(0);
     }
 }
 
 @keyframes fadeSlideRight {
     0% {
         opacity: 0;
         transform: translateX(50px);
     }
     100% {
         opacity: 1;
         transform: translateX(0);
     }
 }
 /* ✅ Apply animation when section loads */
 
 .about-text {
     animation: fadeSlideLeft 1s ease-out forwards;
 }
 
 .about-image img {
     animation: fadeSlideRight 1s ease-out forwards;
     transition: transform 0.4s ease, box-shadow 0.4s ease;
 }
 /* ✅ Extra hover effect for image */
 
 .about-image img:hover {
     transform: scale(1.05);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
 }
 /* book  */
 
 .membership-section {
     display: flex;
     width: 100%;
     height: 500px;
 }
 /* Left Image */
 
 .membership-image {
     flex: 1;
     background: url('assets/images/aboutb2.jpg') center/cover no-repeat;
 }
 /* Right Content */
 
 .membership-content {
     flex: 1;
     background: #1d1f1b;
     color: #fff;
     padding: 60px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
 .membership-content h2 {
     font-size: 42px;
     font-weight: bold;
     margin-bottom: 20px;
 }
 
 .membership-content p {
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 40px;
     color: #ddd;
 }
 /* Buttons */
 
 .button-group {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
 }
 
 .btn {
     padding: 15px 30px;
     border-radius: 50px;
     font-weight: bold;
     text-transform: uppercase;
     text-decoration: none;
     font-size: 14px;
     cursor: pointer;
     transition: all 0.3s ease;
 }
 
 .btn-dark {
     background: #cfc8c0;
     color: #000;
 }
 
 .btn-dark:hover {
     background: #b3aaa3;
 }
 
 .btn-neon {
     background: #d3ff00;
     color: #000;
 }
 
 .btn-neon:hover {
     background: #baff00;
 }
 /* Responsive */
 
 @media (max-width: 900px) {
     .membership-section {
         flex-direction: column;
         height: auto;
     }
     .membership-image {
         height: 300px;
     }
     .membership-content {
         padding: 40px;
         text-align: center;
     }
     .button-group {
         justify-content: center;
     }
 }
 /* ✅ Section fade-in from both sides */
 /* ✅ Section zoom + fade-in */
 
 .membership-content,
 .membership-image {
     opacity: 0;
     transform: scale(0.95);
     animation: zoomFadeIn 1s ease forwards;
 }
 
 .membership-image {
     animation-delay: 0.3s;
     /* slight delay for stagger effect */
 }
 
 @keyframes zoomFadeIn {
     0% {
         opacity: 0;
         transform: scale(0.95);
     }
     100% {
         opacity: 1;
         transform: scale(1);
     }
 }
 /* ✅ Buttons - pulse + ripple hover */
 
 .buttons button {
     position: relative;
     overflow: hidden;
     transition: background 0.3s ease, transform 0.3s ease;
     animation: pulse 2s infinite ease-in-out;
     /* pulse effect */
 }
 
 .buttons button::after {
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
     opacity: 0;
 }
 /* ✅ Ripple hover animation */
 
 .buttons button:hover::after {
     width: 300%;
     height: 300%;
     opacity: 0;
 }
 /* ✅ Slight hover lift */
 
 .buttons button:hover {
     transform: translateY(-4px) scale(1.05);
 }
 /* ✅ Pulse keyframes */
 
 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
     }
     50% {
         transform: scale(1.02);
         box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
     }
     100% {
         transform: scale(1);
         box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
     }
 }
 /* ✅ Image subtle zoom on hover */
 
 .membership-section:hover .membership-image img {
     transform: scale(1.03);
     transition: transform 0.8s ease;
 }
 /* --cards */
 
 .cards-section {
     background: #fff;
     padding: 60px 20px;
     display: flex;
     flex-direction: column;
     gap: 80px;
     /* more space between row 1 and row 2 */
 }
 /* ✅ ROW STYLING */
 
 .card-row {
     display: flex;
     justify-content: center;
     gap: 30px;
     flex-wrap: wrap;
 }
 /* ✅ SPECIAL ROW CENTERING */
 
 .center-row {
     justify-content: center;
 }
 /* ✅ CARD BASE STYLE */
 
 .card {
     position: relative;
     width: 320px;
     height: 420px;
     overflow: hidden;
     border-radius: 12px;
     cursor: pointer;
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }
 
 .card::before {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));
     z-index: 1;
 }
 
 .card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
 }
 /* ✅ IMAGE ZOOM ON HOVER */
 
 .card:hover img {
     transform: scale(1.08);
 }
 /* ✅ OVERLAY ALWAYS SHOW TITLE */
 /* .card-overlay {
  position: absolute;
  bottom: 20px;
  left: 15px;
  z-index: 2;
  color: #fff; 
  text-shadow: 0px 2px 6px rgba(0,0,0,0.7); 
} */
 
 .card-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     padding: 20px;
     z-index: 2;
     color: #fff;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     background: rgba(0, 0, 0, 0);
     transition: background 0.4s ease-in-out;
     text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);
 }
 /* ✅ TITLE ALWAYS VISIBLE */
 
 .card-overlay h3 {
     font-size: 1.6rem;
     margin: 0;
 }
 /* ✅ PARAGRAPH INITIALLY HIDDEN */
 
 .card-overlay p {
     font-size: 1rem;
     line-height: 1.5;
     margin-top: 10px;
     opacity: 0;
     max-height: 0;
     overflow: hidden;
     transition: all 0.4s ease-in-out;
 }
 /* ✅ ON HOVER SHOW DETAILS */
 
 .card:hover .card-overlay {
     background: rgba(0, 0, 0, 0.75);
 }
 
 .card:hover .card-overlay p {
     opacity: 1;
     max-height: 200px;
     /* smooth expand */
 }
 /* ✅ CARD HOVER LIFT */
 
 .card:hover {
     transform: translateY(-8px);
 }
 /* ✅ RESPONSIVE */
 
 @media (max-width: 768px) {
  #loginForm .d-flex{display:block!important}
   .btn-login{width:100%!important}
  .login-link a{display: block;}
  .form-check-label {display: inline!important;}
.form-check-input[type=checkbox] {
    border-radius: .25em;
    border: 1px solid #000!important;
}
  .btn-submit{width: 100%!important;
    padding: 10px!important;}
  .contact-info-box{padding:10px}
  .btn-contact{width:100%!important}
     .card {
         width: 100%;
         max-width: 350px;
     }
 }
 /* ---tetimonials */
 /* Full-screen slider */
 
 .testimonial-slider {
     position: relative;
     width: 100%;
     height: 327px;
     /* FULL SCREEN */
     overflow: hidden;
 }
 /* Testimonial heading (on top of background) */
 
 .testimonial-heading {
     position: absolute;
     top: 50px;
     left: 80px;
     z-index: 5;
     color: #fff;
 }
 
 .testimonial-heading h2 {
     font-size: 2.5rem;
     margin-bottom: 10px;
 }
 
 .testimonial-heading p {
     font-size: 1rem;
     color: #ddd;
 }
 /* Background images */
 
 .testimonial {
     position: absolute;
     width: 100%;
     height: 100%;
     background-size: cover;
     background-position: center;
     opacity: 0;
     transition: opacity 1s ease-in-out;
 }
 
 .testimonial.active {
     opacity: 1;
 }
 /* Dark overlay for readability */
 
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 62%)!important;
    z-index: 1;
}
 /* Content styles */
 
 .testimonial-content {
     position: relative;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     max-width: 500px;
     z-index: 2;
 }
 /* Align LEFT */
 
 .testimonial-content.left-align {
     align-items: flex-start;
     text-align: left;
     margin-right: auto;
     padding-left: 80px;
 }
 
 .user-img {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     object-fit: cover;
     border: 3px solid #fff;
     margin-bottom: 15px;
 }
 
 .testimonial-content h3 {
     font-size: 1.8rem;
     margin-bottom: 5px;
     color: #fff;
 }
 
 .member-since {
     font-size: 1rem;
     color: #ddd;
     margin-bottom: 15px;
 }
 
 .testimonial-content blockquote {
     font-style: italic;
     font-size: 1.3rem;
     line-height: 1.6;
     color: #fff;
     max-width: 450px;
 }
 /* Dots */
 
 .dots {
     position: absolute;
     bottom: 30px;
     left: 80px;
     display: flex;
     gap: 8px;
     z-index: 3;
 }
 
 .dot {
     width: 6px;
     height: 6px;
     background: #ccc;
     border-radius: 50%;
     cursor: pointer;
     transition: 0.3s;
 }
 
 .dot.active {
     background: #fff;
     transform: scale(1.2);
 }
 /* Arrows */
 
 .arrows {
     position: absolute;
     width: 100%;
     top: 50%;
     transform: translateY(-50%);
     display: flex;
     justify-content: space-between;
     padding: 0 30px;
     z-index: 4;
 }
 
 .arrow {
     font-size: 15px;
     color: #fff;
     cursor: pointer;
     transition: 0.3s;
     user-select: none;
 }
 
 .arrow:hover {
     color: #ffd700;
     transform: scale(1.2);
 }
 /* Responsive */
 
 @media(max-width: 768px) {
     .testimonial-content {
         padding: 20px;
         align-items: center !important;
         text-align: center !important;
         margin: 0 auto;
     }
     .testimonial-heading {
         left: 50%;
         transform: translateX(-50%);
         text-align: center;
     }
     .dots {
         left: 50%;
         transform: translateX(-50%);
     }
 }
 /* upcoming events */
 /* Section background & title */
 
 .events-section {
     background: #fff;
     padding: 60px 20px;
     text-align: center;
 }
 
 .events-section h2 {
     font-size: 2.5rem;
     color: #111;
     margin-bottom: 50px;
 }
 /* Grid layout */
 
 .events-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 30px;
     max-width: 1200px;
     margin: 0 auto;
 }
 /* Event Card */
 
 .event-card {
     background: #fff;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     cursor: pointer;
     display: flex;
     flex-direction: column;
 }
 /* Event Image */
 
 .event-image {
     width: 100%;
     height: 200px;
     overflow: hidden;
 }
 
 .event-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
 }
 /* Hover zoom effect */
 
 .event-card:hover .event-image img {
     transform: scale(1.05);
 }
 /* Event Info */
 
 .event-info {
     padding: 20px;
     text-align: left;
 }
 
 .event-info h3 {
     font-size: 1.4rem;
     margin-bottom: 8px;
     color: #222;
 }
 
 .event-info .event-date {
     font-weight: bold;
     color: black;
     margin-bottom: 10px;
 }
 
 .event-info p {
     color: #555;
     font-size: 0.95rem;
     line-height: 1.5;
 }
 /* Card hover lift */
 
 .event-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
 }
 /* --call to action */
 
 .acta-section {
     position: relative;
     background: url('assets/images/calltoaction.jpg') center/cover no-repeat;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
     width: 90%;
     max-width: 1200px;
     margin: 50px auto;
 }
 /* Overlay for better text readability */
 
 .acta-overlay {
     background: rgba(0, 0, 0, 0.3);
     /* Dark transparent layer */
     padding: 80px 20px;
     text-align: center;
 }
 /* Text styles */
 
 .acta-content h2 {
     color: #fff;
     font-size: 2.5rem;
     font-weight: bold;
     margin-bottom: 15px;
 }
 
 .acta-content p {
     color: #f0f0f0;
     font-size: 1.2rem;
     margin-bottom: 30px;
 }
 /* Button styles */
 
 .acta-btn {
     display: inline-block;
     background: #fff;
     color: #000;
     padding: 12px 25px;
     font-size: 1rem;
     font-weight: bold;
     border-radius: 8px;
     text-decoration: none;
     transition: 0.3s ease;
 }
 
 .acta-btn:hover {
     background: #000;
     color: #fff;
 }
 /* ✅ Responsive */
 
 @media (max-width: 768px) {
     .acta-content h2 {
         font-size: 2rem;
     }
     .acta-content p {
         font-size: 1rem;
     }
 }
 /* footer  */
 
 .footer {
     background: #1f1e1e;
     /* same gray background */
     color: white;
     padding: 50px 20px 20px;
     font-family: Arial, sans-serif;
     position: relative;
 }
 
.footer-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 100%;
    margin: auto;
}
 
 .footer-logo img {
     max-width: 160px;
     margin-bottom: 10px;
     background-color: white;
 }
 
 .footer-logo p {
     margin: 10px 0;
    
 }
 footer h3{font-size:22px}
 
 .btn-primary {
     background: #004b7f;
     color: #fff;
     padding: 10px 20px;
     display: inline-block;
     margin-top: 10px;
     text-decoration: none;
     border-radius: 4px;
 }
 
 .btn-outline {
     border: 2px solid white;
     padding: 10px 20px;
     color: white;
     text-decoration: none;
     display: inline-block;
     margin-top: 15px;
     border-radius: 4px;
 }
 
 .footer-contact p {
     margin: 8px 0;
 }
 
 .footer-links h3 {
     margin-bottom: 15px;
 }
 
.footer-links ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
 
 .footer-links ul li {
     margin: 8px 0;
 }
 
 .footer-links ul li a {
     color: white;
     text-decoration: none;
 }
 
 .footer-award p {
     margin-bottom: 15px;
      text-align: justify;
 }
 
 .award-card {
     background: #003580;
     padding: 15px;
     border-radius: 5px;
 }
 
 .award-card strong {
     display: block;
     margin: 5px 0;
 }
 
 .award-card .rating {
     font-size: 28px;
     font-weight: bold;
     display: inline-block;
     background: #00264d;
     padding: 5px 10px;
     margin: 10px 0;
 }
 
 .footer-bottom {
     text-align: center;
     background: rgba(0, 0, 0, 0.2);
     padding: 15px;
     margin-top: 30px;
 }
 
 .footer-bottom a {
     color: #fff;
     text-decoration: underline;
 }
 /* Responsive */
 
 @media (max-width: 992px) {
     .footer-container {
         grid-template-columns: repeat(2, 1fr);
     }
 }
 
 @media (max-width: 600px) {
     .footer-container {
         grid-template-columns: 1fr;
         text-align: center;
     }
 }
 /* about page  */
 /* slider  */
 /* ✅ NAVBAR CONTAINER for About */
 
/* Default state for the header */
.header-about {
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    position: absolute; /* initial state */
    top: 0;
    left: 0;
    z-index: 999;
    transition: top 0.3s ease-in-out;
}

/* Fixed header when scrolling */
.header-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 1); /* Solid background when fixed */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

 
 .nav-container-about {
     max-width: 90%;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0px 2px;
 }
 /* ✅ LOGO */
 
 .logo-about {
     height: 100px;
     font-size: 22px;
     font-weight: bold;
     color: #fff;
 }
 
 .logo-about img {
     height: 97px;
 }
 /* ✅ NAV MENU */
 
 .nav-menu-about {
     display: flex;
     list-style: none;
     gap: 8px;
 }
 
 .nav-menu-about li {
     position: relative;
     font-size: 13px;
 }
 
 .nav-menu-about>li>a {
     color: #1f1e1e;
     text-decoration: none;
     padding: 10px;
     display: block;
     font-size: 15px;
     font-weight: bold;
 }
 /* ✅ DROPDOWN */
 
 .dropdown-about {
     display: none;
     position: absolute;
     top: 40px;
     left: 0;
     background: rgba(0, 0, 0, 0.9);
     min-width: 180px;
     list-style: none;
 }
 
 .dropdown-about li a {
     padding: 10px;
     display: block;
     color: #fff;
     text-decoration: none;
     font-size: 14px;
 }
 /* Show dropdown on hover (desktop) */
 
 .nav-menu-about li:hover .dropdown-about {
     display: block;
 }
 /* ✅ MOBILE MENU ICON */
 
 .menu-toggle-about {
     display: none;
     font-size: 24px;
     color: #151414;
     cursor: pointer;
     padding-right: 25px;
 }
 /* ✅ Login Button Styling */
 
 .btn-login-about {
     background: #1e1f1e;
     /* Green button */
     color: #fff !important;
     padding: 8px 16px;
     border-radius: 6px;
     font-weight: bold;
     transition: background 0.3s ease;
     display: inline-block;
     text-decoration: none;
 }
 
 .btn-login-about:hover {
     background: #949694;
     /* Slightly darker green */
     color: #fff;
 }
 /* ✅ RESPONSIVE NAV */
 
 @media (max-width: 992px) {
     .nav-menu-about {
         display: none;
         flex-direction: column;
         background: rgba(255, 255, 255, 0.9);
         position: absolute;
         top: 60px;
         right: 0;
         width: 220px;
     }
     .nav-menu-about li {
         width: 100%;
     }
     .nav-menu-about li a {
         padding: 12px 15px;
     }
     .menu-toggle-about {
         display: block;
     }
     .nav-menu-about.show {
         display: flex;
     }
     .dropdown-about {
         position: static;
     }
     .nav-menu-about li:hover .dropdown-about {
         display: none;
         /* disable hover for mobile */
     }
     .nav-menu-about li.active .dropdown-about {
         display: block;
         /* toggle dropdown on click */
     }
 }
 
 .about-hero {
     position: relative;
     width: 100%;
     height: 70vh;
     /* adjust height */
     background: url('your-about-bg.jpg') center center/cover no-repeat;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
 }
 /* Dark overlay for readability */
 
 .about-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
     /* dark transparent overlay */
 }
 /* Content on top of overlay */
 
 .about-content {
     position: relative;
     z-index: 2;
     color: #fff;
     max-width: 800px;
     padding: 20px;
     animation: fadeInUp 1s ease-out;
 }
 
 .about-content h1 {
     font-size: 4rem;
     font-weight: bold;
     margin-bottom: 20px;
 }
 
 .about-content p {
     font-size: 1.4rem;
     line-height: 1.6;
 }
 /* Fade-in Animation */
 
 @keyframes fadeInUp {
     0% {
         opacity: 0;
         transform: translateY(40px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }
 /* Responsive */
 
 @media (max-width: 768px) {
     .about-hero {
         height: 50vh;
     }
     .about-content h1 {
         font-size: 2.5rem;
     }
     .about-content p {
         font-size: 1rem;
     }
 }
 /* vission mission  */
 
 .vision-mission-section {
     background: linear-gradient(to right, #eafaf1, #e0f3ff);
     padding: 50px 0;
 }
 
 .section-title {
     text-align: center;
     font-size: 2rem;
     font-weight: 700;
     color: #1a1a1a;
     margin-bottom: 40px;
 }
 
 .vision-mission-card {
     background: #fff;
     border-radius: 12px;
     padding: 30px 25px;
     position: relative;
     /* overflow: hidden; */
     overflow: visible;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     height: 100%;
 }
 
 .vision-mission-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
 }
 
 .badge-circle {
     position: absolute;
     z-index: 2;
     top: 3px;
     left: 20px;
     background-color: #4CAF50;
     color: #fff;
     border-radius: 50%;
     width: 80px;
     height: 80px;
     text-align: center;
     line-height: 80px;
     font-weight: 700;
     font-size: 1rem;
     text-transform: uppercase;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease-in-out;
 }
 /* .vision-mission-card:hover .badge-circle {
  transform: scale(1.1) rotate(5deg);
} */
 
 .vision-mission-card:hover .badge-circle {
     transform: scale(1.15) rotate(5deg) translateY(-15px);
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
 }
 
 .vision-circle {
     background-color: #009688;
 }
 
 .mission-circle {
     background-color: #2196F3;
 }
 
 .vision-mission-card h5 {
     margin-top: 60px;
     font-weight: 600;
     color: #333;
 }
 
 .vision-mission-card p {
     font-size: 0.95rem;
     color: #555;
     line-height: 1.6;
 }
 /* our mission  */
 
 .notice-bar {
     background-color: #262627;
     /* Blue background */
     color: white;
     padding: 20px 0;
     text-align: center;
     position: relative;
 }
 
 .park-rules-btn {
     background-color: white;
     color: black;
     font-weight: bold;
     padding: 10px 20px;
     margin-left: 20px;
     display: inline-block;
     text-transform: uppercase;
     border-right: 20px solid #b18888;
     clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 100%, 0 100%);
 }
 
 .accessibility-icon {
     position: absolute;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: linear-gradient(135deg, #d62828, #0077b6);
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .accessibility-icon img {
     width: 60%;
 }
 /* our facility include  */
 
 .activity-box {
     background-color: #0a0a09;
     padding: 40px 30px;
     color: #fff;
     height: 100%;
     border-radius: 15px;
 }
 
 .activity-box h3 {
     font-weight: 700;
     color: #222;
 }
 
 .activity-box p {
     color: #fff;
     margin-bottom: 0;
 }
 
 .img-fluid {
     border-radius: 5px;
 }
 /* padel-court  */
 /* about  */
 
 .island-padel-section {
     background-color: #f6fcf9;
 }
 
 .btn-outline-dark:hover {
     background-color: #343a40;
     color: #fff;
     transition: 0.3s ease;
 }
 
 .text-primary-emphasis {
     color: #155263;
 }
 /* COURT INFO */
 
 .court-info {
     padding: 60px 0;
 }
 
 .court-info .section-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 8px;
     transition: transform 0.4s ease, box-shadow 0.4s ease;
 }
 
 .court-info .section-img:hover {
     transform: scale(1.05);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
 }
 
 .court-info .section-content {
     padding: 40px;
 }
 
 .court-info .section-title {
     color: #1f6fa5;
     font-weight: bold;
 }
 /* facilities  */
 /* Fullscreen section with background */
 
 .facility-section {
     position: relative;
     min-height: 100vh;
     background: url('assets/images/fac01.jpg') center/cover no-repeat;
     color: white;
     padding: 80px 60px;
     /* more left padding */
     display: flex;
     justify-content: flex-start;
     /* align left */
     align-items: center;
     /* vertically center */
     transition: background 0.6s ease-in-out;
 }
 
 .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
     z-index: 1;
 }
 
 .facility-container {
     position: relative;
     z-index: 2;
    width:100%
 }
 
 .facility-title {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 40px;
     color: #fff;
 }
 

 
 .facility-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .facility-item {
     border-top: 1px solid rgba(255, 255, 255, 0.6);
     padding: 20px 0;
     cursor: pointer;
 }
 
 .facility-item:last-child {
     border-bottom: 1px solid rgba(255, 255, 255, 0.6);
 }
 
 .facility-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-size: 1.6rem;
     font-weight: 600;
 }
 
 .facility-header:hover {
     color: #deded9;
 }
 
 .plus {
     font-size: 2rem;
     transition: transform 0.3s ease;
 }
 
 .rotate {
     transform: rotate(45deg);
 }
 
 .facility-desc {
     font-size: 1rem;
     line-height: 1.6;
     margin-top: 10px;
     display: none;
     color: #f0f0f0;
 }
 /* Responsive */
 
 @media (max-width: 768px) {
     .facility-section {
         padding: 60px 30px;
     }
     .facility-title {
         font-size: 2rem;
     }
     .facility-header {
         font-size: 1.3rem;
     }
 }
 
 @media (max-width: 480px) {
     .facility-section {
         padding: 50px 20px;
     }
     .facility-title {
         font-size: 1.8rem;
     }
     .facility-header {
         font-size: 1.1rem;
     }
     .plus {
         font-size: 1.4rem;
     }
 }
 /* booking  */
 
 .booking-section {
     background: linear-gradient(135deg, #0a0a0a, #1c1c1c);
     color: #fff;
     overflow: hidden;
 }
 
 .booking-title {
     font-size: 2.5rem;
     font-weight: 700;
     position: relative;
     display: inline-block;
 }
 
 .booking-title::after {
     content: "";
     display: block;
     width: 80px;
     height: 4px;
     background: #f7f7f6;
     margin: 10px auto 0;
     border-radius: 2px;
 }
 
 .booking-subtitle {
     font-size: 1rem;
     color: #bbb;
     margin-top: 10px;
 }
 
 .booking-card {
     background: rgba(255, 255, 255, 0.05);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 15px;
     transition: all 0.4s ease;
     transform: translateY(0);
     position: relative;
     overflow: hidden;
     min-height: 226px;
 }
 /* Glow effect on hover */
 
 .booking-card::before {
     content: "";
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 60%);
     opacity: 0;
     transition: opacity 0.4s ease;
     display: none;
 }
 
 .booking-card h3 {
     font-size: 1.5rem;
     font-weight: 600;
     margin-bottom: 15px;
 }
 
 .booking-card p {
     font-size: 0.95rem;
     color: #ccc;
 }
 
 .booking-card:hover {
     transform: translateY(-10px) scale(1.02);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
     background: rgba(255, 255, 255, 0.08);
 }
 
 .booking-card:hover::before {
     opacity: 1;
 }
 /* Button animation */
 
 .btn-outline-light {
     border-radius: 30px;
     padding: 10px 25px;
     font-weight: 500;
     transition: all 0.3s ease;
     position: relative;
     z-index: 1;
 }
 
 .btn-outline-light:hover {
     background: #ffd700;
     color: #000;
     border-color: #ffd700;
     box-shadow: 0 0 15px #ffd700;
 }
 /* Responsive */
 
 @media (max-width: 768px) {
     .booking-title {
         font-size: 2rem;
     }
     .booking-card h3 {
         font-size: 1.3rem;
     }
 }
 /* book yor court  */
 /* Fullscreen CTA section */
 
 .cta-section {
     position: relative;
     background: url('assets/images/bookbg.jpg') center/cover no-repeat;
     color: #fff;
     padding: 120px 20px;
     text-align: center;
     overflow: hidden;
 }
 /* Dark overlay for readability */
 
 .cta-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     z-index: 1;
 }
 /* Text container on top of overlay */
 
 .cta-section .container {
     position: relative;
     z-index: 2;
 }
 /* Heading */
 
 .cta-title {
     font-size: 3rem;
     font-weight: 800;
     margin-bottom: 20px;
     letter-spacing: 1px;
     text-transform: uppercase;
 }
 /* Subtitle */
 
 .cta-subtitle {
     font-size: 1.2rem;
     color: #ddd;
     margin-bottom: 40px;
 }
 /* CTA Button */
 
 .btn-cta {
     background: #ffd700;
     color: #000;
     padding: 15px 40px;
     font-size: 1.2rem;
     font-weight: 600;
     border-radius: 50px;
     text-decoration: none;
     transition: all 0.4s ease;
     box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
 }
 /* Hover effect */
 
 .btn-cta:hover {
     background: #fff;
     color: #000;
     box-shadow: 0 10px 25px rgba(255, 215, 0, 0.6);
     transform: translateY(-3px);
 }
 /* Responsive */
 
 @media (max-width: 768px) {
     .cta-title {
         font-size: 2.2rem;
     }
     .cta-subtitle {
         font-size: 1rem;
     }
     .btn-cta {
         font-size: 1rem;
         padding: 12px 30px;
     }
 }
 /* for ALL  */
 /* ===== COMMON SECTION TITLES ===== */
 
 .section-title {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 10px;
 }
 
 .section-subtitle {
     font-size: 1rem;
     margin-bottom: 40px;
 }
 /* ===== 1. COACHING (BLACK) ===== */
 
 .coaching-section {
     background: linear-gradient(135deg, #0a0a0a, #1c1c1c);
     color: #fff;
 }
 
 .coaching-card {
     background: rgba(255, 255, 255, 0.05);
     padding: 25px;
     border-radius: 12px;
     text-align: center;
     transition: 0.3s;
 }
 
 .coaching-card:hover {
     background: rgba(255, 255, 255, 0.1);
     transform: translateY(-5px);
 }
 
 .coaching-card .badge {
     display: inline-block;
     background: #ffd700;
     color: #000;
     padding: 5px 12px;
     border-radius: 20px;
     margin-top: 15px;
     font-weight: 600;
 }
 /* ===== 2. PRICING (WHITE) ===== */
 
 .pricing-section {
     background: #fff;
     color: #000;
 }
 
 .pricing-card {
     background: #f9f9f9;
     border: 1px solid #eee;
     padding: 30px;
     border-radius: 15px;
     text-align: center;
     transition: 0.4s;
 }
 
 .pricing-card:hover {
     background: #fff;
     transform: translateY(-10px);
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
 }
 
 .pricing-card h4 {
     font-size: 2rem;
     margin: 20px 0;
     color: #1f6fa5;
 }
 
 .pricing-card ul {
     list-style: none;
     padding: 0;
     margin: 20px 0;
 }
 
 .pricing-card ul li {
     margin: 10px 0;
     color: #444;
 }
 
 .btn-pricing {
     background: #ffd700;
     color: #000;
     padding: 10px 25px;
     border-radius: 30px;
     font-weight: 600;
     transition: 0.3s;
     text-decoration: none;
 }
 
 .btn-pricing:hover {
     background: #000;
     color: #fff;
 }
 /* ===== 3. TOURNAMENT (BLACK) ===== */
 
 .tournament-section {
     background: linear-gradient(135deg, #111, #1c1c1c);
     color: #fff;
 }
 
 .tournament-card {
     position: relative;
     overflow: hidden;
     border-radius: 12px;
     transition: 0.3s;
 }
 
 .tournament-card img {
     width: 100%;
     display: block;
     border-radius: 12px;
     transition: transform 0.4s ease;
 }
 
 .tournament-info {
     background: rgba(0, 0, 0, 0.6);
     padding: 15px;
     position: absolute;
     bottom: 0;
     width: 100%;
     text-align: center;
 }
 
 .tournament-card:hover img {
     transform: scale(1.1);
 }
 /* RESPONSIVE */
 
 @media (max-width: 768px) {
     .section-title {
         font-size: 2rem;
     }
 }
 /* KIDS PLAY ZONE  */
 /* feature */
 
 .trampoline-section {
     background: #333;
     /* dark background like the screenshot */
     color: #fff;
     padding: 80px 20px;
 }
 
 .trampoline-title {
     font-size: 2.5rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
 }
 
 .trampoline-title span {
     color: #e62e2e;
     /* red accent for FEATURES */
 }
 
 .title-underline {
     width: 80px;
     height: 5px;
     background: white;
     margin: 15px auto;
     border-radius: 5px;
 }
 /* Feature Cards */
 
 .trampoline-card {
     background: #444;
     border-radius: 10px;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .trampoline-card img {
     width: 100%;
     height: 250px;
     object-fit: cover;
     display: block;
 }
 
 .trampoline-caption {
     background: #444;
     padding: 15px;
     font-size: 1.2rem;
     font-weight: 500;
     text-align: center;
 }
 /* Hover effect */
 
 .trampoline-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
 }
 /* Responsive */
 
 @media(max-width:768px) {
     .trampoline-title {
         font-size: 2rem;
     }
     .trampoline-card img {
         height: 200px;
     }
 }
 /* safety  */
 /* Safe unique class names */
 
 .safe-fitness-wrap {
     position: relative;
     width: 100%;
     height: 480px;
     /* Medium height */
     overflow: hidden;
 }
 
 .safe-fitness-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }
 
 .safe-content-box {
     position: absolute;
     top: 50%;
     right: 5%;
     transform: translateY(-50%);
     background: #fff;
     padding: 35px;
     max-width: 380px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
     /* Animation */
     opacity: 0;
     transform: translateY(-40%) translateX(20px);
     animation: fadeSlide 1s ease-out forwards;
     animation-delay: 0.5s;
 }
 
 @keyframes fadeSlide {
     0% {
         opacity: 0;
         transform: translateY(-40%) translateX(20px);
     }
     100% {
         opacity: 1;
         transform: translateY(-50%) translateX(0);
     }
 }
 
 .safe-content-box h2 {
     font-size: 26px;
     margin-bottom: 15px;
     color: #333;
 }
 
 .safe-content-box p {
     font-size: 15px;
     color: #555;
     line-height: 1.6;
     margin-bottom: 20px;
 }
 
 .safe-content-box a {
     font-weight: bold;
     text-decoration: none;
     color: #888;
     transition: color 0.3s ease;
 }
 
 .safe-content-box a:hover {
     color: #000;
 }
 /* Responsive */
 
 @media (max-width: 768px) {
     .safe-fitness-wrap {
         height: auto;
     }
     .safe-fitness-wrap img {
         height: auto;
     }
     .safe-content-box {
         position: static;
         transform: none;
         max-width: 100%;
         margin: 20px auto;
         animation: none;
         /* No animation on mobile */
         opacity: 1;
     }
 }
 /* events  */
 /* events  */
 /* Section Styling */
 
 .safe-party-section {
     background: linear-gradient(135deg, #191818, #ffe9f1);
     padding: 80px 0;
 }
 
 .safe-party-section h2 {
     text-align: center;
     font-size: 2.5rem;
     font-weight: bold;
     color: #ff6f61;
     margin-bottom: 50px;
     animation: fadeDown 1s ease-in-out both;
 }
 
 .safe-party-card {
     background: #fff;
     border-radius: 20px;
     padding: 30px;
     text-align: center;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     opacity: 0;
     /* for animation start */
 }
 /* Stagger Animation */
 
 .safe-party-card:nth-child(1) {
     animation: zoomIn 0.8s ease forwards;
     animation-delay: 0.3s;
 }
 
 .safe-party-card:nth-child(2) {
     animation: zoomIn 0.8s ease forwards;
     animation-delay: 0.6s;
 }
 
 .safe-party-card:nth-child(3) {
     animation: zoomIn 0.8s ease forwards;
     animation-delay: 0.9s;
 }
 /* Hover Glow Effect */
 
 .safe-party-card:hover {
     transform: translateY(-8px) scale(1.03);
     box-shadow: 0 15px 30px rgba(255, 111, 97, 0.2);
 }
 
 .safe-party-card img {
     width: 80px;
     height: 80px;
     margin-bottom: 20px;
     transition: transform 0.3s ease;
 }
 /* Icon bounce on hover */
 
 .safe-party-card:hover img {
     transform: scale(1.1) rotate(3deg);
 }
 
 .safe-party-card h4 {
     font-size: 1.4rem;
     color: #ff6f61;
     margin-bottom: 15px;
 }
 
 .safe-party-card p {
     color: #444;
     font-size: 15px;
     line-height: 1.6;
 }
 /* Fade Down Animation for Heading */
 
 @keyframes fadeDown {
     0% {
         opacity: 0;
         transform: translateY(-20px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }
 /* Zoom-in for Cards */
 
 @keyframes zoomIn {
     0% {
         opacity: 0;
         transform: scale(0.9) translateY(20px);
     }
     100% {
         opacity: 1;
         transform: scale(1) translateY(0);
     }
 }
 /* age  */
 
 .age-timeline {
     background: #f8f9fa;
     padding: 80px 0;
     position: relative;
 }
 
 .age-timeline h2 {
     text-align: center;
     font-weight: bold;
     color: #000;
     margin-bottom: 60px;
 }
 /* Timeline line */
 
 .timeline-line {
     position: absolute;
     top: 150px;
     left: 10%;
     right: 10%;
     height: 4px;
     background: #000;
     z-index: 1;
 }
 
 .timeline-step {
     text-align: center;
     position: relative;
     z-index: 2;
 }
 
 .timeline-icon {
     width: 90px;
     height: 90px;
     background: #fff;
     border: 3px solid #000;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     margin: auto;
     margin-bottom: 20px;
     transition: all 0.3s ease;
 }
 
 .timeline-icon img {
     width: 50px;
     height: 50px;
 }
 
 .timeline-step:hover .timeline-icon {
     transform: scale(1.1);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }
 
 .timeline-step h4 {
     color: #000;
     font-weight: bold;
     margin-bottom: 10px;
 }
 
 .timeline-step p {
     color: #555;
     font-size: 15px;
     max-width: 250px;
     margin: auto;
 }
 /* Connector dots */
 
 .timeline-dot {
     width: 16px;
     height: 16px;
     background: #000;
     border-radius: 50%;
     margin: auto;
     margin-bottom: 20px;
 }
 /* Responsive: stack vertically */
 
 @media (max-width: 768px) {
     .timeline-line {
         display: none;
     }
     .timeline-step {
         margin-bottom: 50px;
     }
 }
 /* minigolf page  */
 
 .course-overview {
     background: #f8f9fa;
     padding: 80px 0;
     overflow: hidden;
 }
 
 .course-overview h2 {
     font-weight: bold;
     color: #000;
     margin-bottom: 20px;
 }
 
 .course-overview p {
     color: #555;
     font-size: 16px;
     line-height: 1.7;
 }
 /* Bullet points */
 
 .overview-points li {
     margin-bottom: 10px;
     font-size: 15px;
     color: #fefdfd;
     list-style: none;
     position: relative;
     padding-left: 25px;
     opacity: 0;
     /* hidden before animation */
     transform: translateX(20px);
     animation: fadeInRight 0.6s ease forwards;
 }
 
 .overview-points li::before {
     content: "⛳";
     position: absolute;
     left: 0;
     color: #000;
 }
 /* Image styling */
 
 .overview-image img {
     border-radius: 15px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
     opacity: 0;
     transform: translateX(-50px);
     animation: fadeSlideLeft 1s ease forwards;
 }
 /* Right content animation */
 
 .overview-content {
     opacity: 0;
     transform: translateX(50px);
     animation: fadeSlideRight 1s ease forwards;
     animation-delay: 0.4s;
 }
 /* Keyframes */
 
 @keyframes fadeSlideLeft {
     0% {
         opacity: 0;
         transform: translateX(-50px);
     }
     100% {
         opacity: 1;
         transform: translateX(0);
     }
 }
 
 @keyframes fadeSlideRight {
     0% {
         opacity: 0;
         transform: translateX(50px);
     }
     100% {
         opacity: 1;
         transform: translateX(0);
     }
 }
 
 @keyframes fadeInRight {
     0% {
         opacity: 0;
         transform: translateX(20px);
     }
     100% {
         opacity: 1;
         transform: translateX(0);
     }
 }
 /* Staggered bullet animation */
 
 .overview-points li:nth-child(1) {
     animation-delay: 1s;
 }
 
 .overview-points li:nth-child(2) {
     animation-delay: 1.2s;
 }
 
 .overview-points li:nth-child(3) {
     animation-delay: 1.4s;
 }
 
 .overview-points li:nth-child(4) {
     animation-delay: 1.6s;
 }
 
 .overview-points li:nth-child(5) {
     animation-delay: 1.8s;
 }
 /* Responsive */
 
 @media (max-width: 768px) {
     .overview-image img {
         margin-bottom: 30px;
     }
 }
 /* timing & pricing  */
 
 .timings-pricing {
     background: linear-gradient(135deg, #f8f9fa, #ececec);
     padding: 80px 0;
 }
 
 .timings-pricing h2 {
     text-align: center;
     font-weight: bold;
     color: #000;
     margin-bottom: 50px;
 }
 /* Timings Box */
 
 .timings-box {
     background: #fff;
     border-radius: 15px;
     padding: 30px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease;
 }
 
 .timings-box:hover {
     transform: translateY(-5px);
 }
 
 .timings-box h4 {
     font-weight: bold;
     color: #000;
     margin-bottom: 20px;
 }
 
 .timing-item {
     display: flex;
     justify-content: space-between;
     padding: 10px 0;
     border-bottom: 1px solid #ddd;
     font-size: 15px;
     color: #333;
 }
 
 .timing-item:last-child {
     border-bottom: none;
 }
 /* Pricing Cards */
 
 .pricing-card {
     background: #fff;
     border-radius: 15px;
     padding: 30px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
     text-align: center;
     transition: transform 0.3s ease;
 }
 
 .pricing-card:hover {
     transform: scale(1.05);
 }
 
 .pricing-card h4 {
     font-weight: bold;
     color: #000;
     margin-bottom: 10px;
 }
 
 .pricing-card .price {
     font-size: 28px;
     font-weight: bold;
     color: #000;
     margin: 10px 0;
 }
 
 .pricing-card p {
     color: #555;
     font-size: 15px;
     margin-bottom: 20px;
 }
 
 .pricing-card button {
     background: #000;
     color: #fff;
     border: none;
     padding: 10px 20px;
     border-radius: 8px;
     transition: background 0.3s ease;
 }
 
 .pricing-card button:hover {
     background: #333;
 }
 /* Animations */
 
 .fade-up {
     opacity: 0;
     transform: translateY(40px);
     animation: fadeUp 0.8s ease forwards;
 }
 
 @keyframes fadeUp {
     0% {
         opacity: 0;
         transform: translateY(40px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }
 /* overview about after  */
 
 .diagonal-section {
     position: relative;
     color: #fff;
     text-align: center;
     padding: 100px 20px;
     background: linear-gradient(160deg, #000 50%, #222 50%);
     clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
 }
 
 .diagonal-section h2 {
     font-weight: bold;
     color: #fff;
     margin-bottom: 20px;
     font-size: 2.5rem;
     text-transform: uppercase;
     letter-spacing: 1px;
 }
 
 .diagonal-section p {
     font-size: 18px;
     max-width: 800px;
     margin: 0 auto 30px;
     line-height: 1.7;
     color: #ddd;
 }
 
 .features-list {
     max-width: 400px;
     margin: 0 auto;
     text-align: left;
 }
 
 .feature-item {
     display: flex;
     align-items: center;
     gap: 15px;
     font-size: 17px;
     margin-bottom: 15px;
     color: #eee;
     transition: transform 0.3s ease;
 }
 
 .feature-item:hover {
     transform: translateX(5px);
 }
 
 .feature-item i {
     font-size: 22px;
     color: #fff;
     background: #333;
     padding: 10px;
     border-radius: 50%;
     width: 45px;
     height: 45px;
     text-align: center;
     line-height: 25px;
     flex-shrink: 0;
 }
 /* Soft fade-in animation */
 
 .fade-up {
     opacity: 0;
     transform: translateY(30px);
     animation: fadeUp 0.8s ease forwards;
 }
 
 @keyframes fadeUp {
     0% {
         opacity: 0;
         transform: translateY(30px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }
 /* family section  */
 
 .family-section {
     position: relative;
     padding: 100px 20px;
     text-align: center;
     color: #fff;
     background: url('assets/images/familybg.jpg') no-repeat center center/cover;
 }
 /* Dark overlay */
 
 .family-section::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     /* background: rgba(0, 0, 0, 0.7); */
     z-index: 0;
 }
 
 .family-section .container {
     position: relative;
     z-index: 2;
 }
 
 .family-section h2 {
     font-size: 2.8rem;
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 20px;
     animation: fadeInDown 1s ease-in-out;
     /* color: black; */
 }
 
 .family-section h2,
 .family-section p {
     color: #fff;
     text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8);
     /* improves contrast */
 }
 
 .family-section p {
     max-width: 700px;
     margin: 0 auto 50px;
     font-size: 18px;
     /* color: #ddd; */
     animation: fadeIn 1.2s ease-in-out;
 }
 
 .package-card {
     background: rgba(20, 20, 20, 0.85);
     border: 1px solid #333;
     padding: 40px 20px;
     border-radius: 15px;
     text-align: center;
     transition: all 0.4s ease;
     position: relative;
     overflow: hidden;
     backdrop-filter: blur(5px);
 }
 
 .package-card i {
     font-size: 50px;
     color: #fff;
     margin-bottom: 20px;
     transition: transform 0.3s ease;
 }
 
 .package-card h4 {
     font-size: 22px;
     font-weight: bold;
     margin-bottom: 15px;
     color: #fff;
 }
 
 .package-card p {
     font-size: 16px;
     color: #ccc;
 }
 /* Hover Effects */
 
 .package-card:hover {
     transform: translateY(-10px) scale(1.03);
     box-shadow: 0 15px 30px rgba(255, 255, 255, 0.1);
     border-color: #fff;
 }
 
 .package-card:hover i {
     transform: rotate(10deg) scale(1.1);
     color: #ddd;
 }
 /* Animation Keyframes */
 
 @keyframes fadeInDown {
     0% {
         opacity: 0;
         transform: translateY(-20px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeIn {
     0% {
         opacity: 0;
     }
     100% {
         opacity: 1;
     }
 }
 
 @keyframes fadeUp {
     0% {
         opacity: 0;
         transform: translateY(30px);
     }
     100% {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 .fade-up {
     opacity: 0;
     animation: fadeUp 1s ease forwards;
 }
 /* bar & Restro page  */
 
 .menu-highlights {
     padding: 80px 20px;
     text-align: center;
     background: #000;
 }
 
 .menu-highlights h2 {
     font-size: 2.8rem;
     font-weight: bold;
     text-transform: uppercase;
     margin-bottom: 15px;
     letter-spacing: 1px;
 }
 
 .menu-highlights p {
     max-width: 700px;
     margin: 0 auto 50px;
     font-size: 18px;
     color: #aaa;
 }
 /* Grid Image Cards */
 
 .menu-item {
     position: relative;
     overflow: hidden;
     border-radius: 15px;
     margin-bottom: 30px;
     transition: transform 0.4s ease-in-out;
 }
 
 .menu-item img {
     width: 100%;
     height: 300px;
     object-fit: cover;
     transition: transform 0.6s ease, filter 0.4s ease;
 }
 
 .menu-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     color: #fff;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     opacity: 0;
     transition: all 0.5s ease;
     padding: 20px;
     text-align: center;
 }
 
 .menu-item:hover img {
     transform: scale(1.15) rotate(1deg);
     filter: brightness(0.8);
 }
 
 .menu-item:hover .menu-overlay {
     opacity: 1;
     transform: scale(1.05);
 }
 
 .menu-overlay h4 {
     font-size: 22px;
     font-weight: bold;
     margin-bottom: 10px;
 }
 
 .menu-overlay p {
     font-size: 16px;
     color: #ddd;
 }
 /* Hover floating effect */
 
 .menu-item:hover {
     transform: translateY(-8px);
     box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
 }
 /* //pdf section  */
 
 .menu-section {
     padding: 100px 20px;
     background: #f9f9f9;
     /* soft gray background */
 }
 
 .menu-section .section-title {
     text-align: center;
     margin-bottom: 60px;
 }
 
 .section-title h2 {
     font-size: 2.8rem;
     font-weight: bold;
     text-transform: uppercase;
     margin-bottom: 15px;
     color: #000;
 }
 
 .section-title p {
     font-size: 18px;
     color: #555;
     max-width: 700px;
     margin: 0 auto;
 }
 
 .menu-card {
     background: #fff;
     border-radius: 20px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     display: flex;
     flex-direction: row;
     align-items: stretch;
     transition: all 0.4s ease;
 }
 
 .menu-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
 }
 
 .menu-image {
     flex: 1;
     min-height: 300px;
     background: url('https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?auto=format&fit=crop&w=1000&q=80') no-repeat center/cover;
 }
 
 .menu-content {
     flex: 1;
     padding: 40px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
 
 .menu-content h3 {
     font-size: 2rem;
     font-weight: bold;
     margin-bottom: 20px;
     color: #000;
 }
 
 .menu-content p {
     font-size: 17px;
     color: #666;
     margin-bottom: 30px;
 }
 
 .menu-buttons .btn {
     padding: 12px 25px;
     border-radius: 10px;
     font-weight: 600;
     margin-right: 10px;
     transition: all 0.3s ease;
 }
 
 .btn-view {
     background: #000;
     color: #fff;
 }
 
 .btn-view:hover {
     background: #444;
 }
 
 .btn-download {
     background: transparent;
     border: 2px solid #000;
     color: #000;
 }
 
 .btn-download:hover {
     background: #000;
     color: #fff;
 }
 /* Responsive */
 
 @media (max-width: 992px) {
     .menu-card {
         flex-direction: column;
     }
     .menu-image {
         height: 250px;
     }
 }
 /* special nights  */
 
 .special-nights {
     position: relative;
     padding: 100px 20px;
     text-align: center;
     background: url('assets/images/snbg.jpg') no-repeat center/cover;
     z-index: 1;
 }
 /* Light overlay for better readability */
 
 .special-nights::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(255, 255, 255, 0.85);
     z-index: -1;
 }
 
 .special-nights h2 {
     font-size: 2.8rem;
     font-weight: bold;
     text-transform: uppercase;
     margin-bottom: 20px;
     color: #000;
 }
 
 .special-nights p.subtitle {
     max-width: 700px;
     margin: 0 auto 60px;
     font-size: 18px;
     color: #444;
 }
 
 .night-card {
     background: #fff;
     border-radius: 15px;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     transition: all 0.4s ease;
     height: 100%;
 }
 
 .night-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
 }
 
 .night-img {
     height: 220px;
     overflow: hidden;
 }
 
 .night-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }
 
 .night-card:hover .night-img img {
     transform: scale(1.05);
 }
 
 .night-content {
     padding: 30px;
 }
 
 .night-content h4 {
     font-size: 22px;
     font-weight: bold;
     margin-bottom: 15px;
     color: #000;
 }
 
 .night-content p {
     font-size: 16px;
     color: #666;
 }
 /* Responsive */
 
 @media (max-width: 768px) {
     .night-content {
         text-align: center;
     }
 }
 /* chef special  */
 /* Base split section styling */
 
 .chef-bar-split {
     width: 100%;
 }
 
 .split-section {
     padding-top: 30px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 30px;
     margin-bottom: 50px;
 }
 /* Reverse layout for bar section */
 
 .split-section.reverse {
     flex-direction: row-reverse;
 }
 /* Image container */
 
 .split-image {
     flex: 1;
     position: relative;
 }
 
 .split-image img {
     width: 100%;
     height: auto;
     display: none;
     /* Hide inactive images */
     object-fit: cover;
     border-radius: 12px;
 }
 
 .split-image img.active {
     display: block;
     /* Only show active image */
 }
 /* Content container */
 
 .split-content {
     flex: 1;
     padding: 20px;
 }
 
 .split-content h2 {
     font-size: 2rem;
     margin-bottom: 15px;
 }
 
 .split-content p {
     font-size: 1.1rem;
     line-height: 1.6;
 }
 /* ✅ Responsive for tablets & mobile */
 
 @media (max-width: 992px) {
     .split-section {
         flex-direction: column;
         /* Stack vertically */
         text-align: center;
     }
     .split-section.reverse {
         flex-direction: column;
         /* Remove reverse on mobile */
     }
     .split-content {
         padding: 15px;
     }
     .split-content h2 {
         font-size: 1.6rem;
     }
     .split-content p {
         font-size: 1rem;
     }
     .split-image img {
         width: 100%;
         /* Full width image */
         max-height: 300px;
         /* Optional: limit height */
         object-fit: cover;
     }
 }
 /* membership page  */
 
 .benefit-card {
     transition: all 0.3s ease;
     background: #fff;
     border-radius: 12px;
 }
 
 .benefit-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .benefit-icon i {
     transition: transform 0.3s ease;
 }
 
 .benefit-card:hover .benefit-icon i {
     transform: scale(1.2);
 }
 /* membership tiers  */
 /* ✅ Tier Card Style */
 
 .tier-card {
     background: #fff;
     border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: 15px;
     transition: all 0.3s ease;
     height: 100%;
     padding: 30px 20px;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 }
 
 .tier-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }
 /* ✅ Featured Plan (middle card) */
 
 .tier-card.active {
     background: #000;
     color: #fff;
     border: 2px solid #ffc107;
     transform: scale(1.05);
 }
 /* ✅ Icon Styling */
 
 .tier-icon i {
     color: #ffc107;
     transition: transform 0.3s ease;
 }
 
 .tier-card:hover .tier-icon i {
     transform: scale(1.2);
 }
 
 .tier-card.active .tier-icon i {
     color: #fff;
 }
 /* ✅ Text Styles */
 
 .tier-text {
     color: #555;
     font-size: 0.95rem;
     min-height: 50px;
 }
 
 .tier-card.active .tier-text {
     color: rgba(255, 255, 255, 0.85);
 }
 /* ✅ List Style */
 
 .tier-card ul li {
     margin-bottom: 8px;
 }
 /* ✅ Section Heading */
 
 .section-title {
     font-size: 2.2rem;
     font-weight: bold;
     margin-bottom: 10px;
 }
 
 .section-subtitle {
     color: #666;
     margin-bottom: 40px;
 }
 /* ✅ Section with Background Image */
 
 .discounts-bg-section {
     position: relative;
     padding: 80px 0;
     background: url('assets/images/membershipbg.jpg') center center/cover no-repeat;
     color: #fff;
 }
 /* ✅ Dark Overlay */
 
 .discounts-bg-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.6);
 }
 /* ✅ Content on top */
 
 .discounts-main-content {
     position: relative;
     z-index: 2;
 }
 /* ✅ Heading & Subtitle */
 
 .discounts-heading {
     font-size: 2.3rem;
     font-weight: 700;
     margin-bottom: 10px;
     color: #fff;
 }
 
 .discounts-subheading {
     color: #ddd;
     font-size: 1rem;
     margin-bottom: 50px;
 }
 /* ✅ Card Styling */
 
 .discounts-card-box {
     background: rgba(255, 255, 255, 0.95);
     border: none;
     border-radius: 15px;
     padding: 25px;
     text-align: center;
     transition: all 0.3s ease;
     height: 100%;
     color: #000;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
 .discounts-card-box:hover {
     transform: translateY(-8px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
 }
 /* ✅ Icon Styling */
 
 .discounts-icon-circle {
     font-size: 3rem;
     color: #000;
     background: #f8f9fa;
     width: 80px;
     height: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     margin: 0 auto 20px auto;
     transition: background 0.3s ease, transform 0.3s ease;
 }
 
 .discounts-card-box:hover .discounts-icon-circle {
     background: #000;
     color: #fff;
     transform: scale(1.1);
 }
 /* ✅ Card Text */
 
 .discounts-card-title {
     font-weight: 600;
     font-size: 1.2rem;
     margin-bottom: 10px;
 }
 
 .discounts-card-text {
     font-size: 0.95rem;
     color: #333;
     line-height: 1.6;
 }
 /* ✅ Image Styling */
 
 .discounts-side-img {
     border-radius: 15px;
     width: 100%;
     height: auto;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
 }
 /* gallery page  */
 /* ✅ Section Styling */
 
 .gallery-section {
     padding: 80px 0;
     background: #000;
     /* ✅ BLACK BACKGROUND */
 }
 
 .gallery-title {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 10px;
     color: #fff;
     /* ✅ White title */
     text-align: center;
 }
 
 .gallery-subtitle {
     text-align: center;
     color: rgba(255, 255, 255, 0.7);
     /* ✅ Light gray subtitle */
     margin-bottom: 40px;
     font-size: 1.1rem;
 }
 /* ✅ Filter Buttons */
 
 .gallery-filters {
     text-align: center;
     margin-bottom: 40px;
 }
 
 .gallery-filters button {
     background: transparent;
     color: #fff;
     border: 2px solid #fff;
     padding: 10px 20px;
     margin: 5px;
     border-radius: 30px;
     font-size: 14px;
     transition: all 0.3s ease;
 }
 
 .gallery-filters button.active,
 .gallery-filters button:hover {
     background: #fff;
     color: #000;
 }
 /* ✅ Gallery Items */
 
 .gallery-item {
     position: relative;
     overflow: hidden;
     border-radius: 10px;
     cursor: pointer;
     transition: transform 0.3s ease;
     box-shadow: 0 4px 8px rgba(255, 255, 255, 0.05);
 }
 
 .gallery-item img {
     width: 100%;
     height: 250px;
     object-fit: cover;
     transition: all 0.4s ease;
     border-radius: 10px;
 }
 
 .gallery-item:hover img {
     transform: scale(1.1);
     opacity: 0.85;
 }
 /* events  */
 /* ✅ Section with background */
 /* ✅ Section Styling */
 
 .birthday-section {
     background: #fff;
     /* white background */
     padding: 80px 0;
 }
 
 .birthday-section h2 {
     font-weight: 700;
     color: #000;
 }
 
 .birthday-section p {
     color: #555;
     font-size: 1.05rem;
 }
 /* ✅ Birthday Card */
 
 .birthday-card {
     background: #f8f8f8;
     border-radius: 12px;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
 }
 
 .birthday-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
 }
 
 .birthday-card img {
     width: 100%;
     height: 220px;
     object-fit: cover;
 }
 
 .birthday-content {
     padding: 25px;
 }
 
 .birthday-content h4 {
     font-size: 1.4rem;
     font-weight: 600;
     color: #000;
     margin-bottom: 10px;
 }
 
 .birthday-content p {
     font-size: 0.95rem;
     color: #666;
     margin-bottom: 15px;
 }
 /* ✅ Professional Black Bullet Style */
 
 .birthday-content ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }
 
 .birthday-content ul li {
     margin-bottom: 8px;
     position: relative;
     padding-left: 18px;
     font-size: 0.95rem;
     color: #333;
 }
 
 .birthday-content ul li::before {
     content: "";
     position: absolute;
     left: 0;
     top: 9px;
     width: 6px;
     height: 6px;
     background: #000;
     /* Elegant black dot */
     border-radius: 50%;
 }
 /* ✅ Button */
 
 .birthday-btn {
     display: inline-block;
     padding: 8px 20px;
     background: #000;
     color: #fff;
     border-radius: 50px;
     text-decoration: none;
     transition: 0.3s;
 }
 
 .birthday-btn:hover {
     background: #333;
 }
 /* CORPORATE EVENTS  */
 /* ✅ Section with Background Image */
 
 .sports-leisure-section {
     position: relative;
     /* background: url('https://picsum.photos/1200/800?blur=2') center/cover no-repeat; */
     padding: 80px 0;
     color: #fff;
 }
 /* ✅ Dark overlay */
 
 .sports-leisure-section::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(15, 15, 15, 0.6);
     z-index: 1;
 }
 /* ✅ Content Layer */
 
 .sports-leisure-content {
     position: relative;
     z-index: 2;
 }
 /* ✅ Left Image Cards Grid */
 
 .image-cards {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
 }
 /* ✅ Image Card */
 
 .image-card {
     position: relative;
     overflow: hidden;
     border-radius: 12px;
     height: 320px;
     cursor: pointer;
 }
 
 .image-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
 }
 
 .image-card:hover img {
     transform: scale(1.08);
 }
 /* ✅ Overlay Title */
 
 .image-card-title {
     position: absolute;
     top: 20px;
     left: 20px;
     color: #fff;
     font-size: 2rem;
     font-weight: 700;
     text-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
 }
 /* ✅ Circular Button */
 
 .circle-btn {
     position: absolute;
     bottom: 20px;
     left: 20px;
     width: 40px;
     height: 40px;
     background: #fff;
     color: #000;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     transition: 0.3s ease;
 }
 
 .image-card:hover .circle-btn {
     background: #ddd;
     transform: scale(1.1);
 }
 /* ✅ Right Content */
 
 .sports-leisure-text h2 {
     font-weight: 700;
     font-size: 2.5rem;
     color: #fff;
 }
 
 .sports-leisure-text p {
     color: #f1f1f1;
     font-size: 1.05rem;
     margin-top: 15px;
 }
 /* ✅ Responsive */
 
 @media (max-width: 992px) {
     .image-cards {
         grid-template-columns: 1fr;
     }
     .sports-leisure-text {
         text-align: center;
         margin-top: 40px;
     }
 }
 /* team building  */
 /* ✅ Black Background Section */
 
 .team-section {
     background: #000;
     color: #fff;
     min-height: 600px;
     padding: 80px 0;
 }
 /* ✅ Custom List Styling */
 
 .team-list {
     list-style: disc;
     padding-left: 20px;
 }
 
 .team-list li {
     margin-bottom: 10px;
 }
 /* ✅ Image Styling */
 
 .team-img {
     width: 100%;
     height: 400px;
     object-fit: cover;
     border-radius: 10px;
 }
 /* ✅ Responsive Height Adjustments */
 
 @media (max-width: 768px) {
     .team-img {
         height: 300px;
     }
 }
 /* contact us page  */
 
 .contact-section {
     padding: 80px 0;
     color: #fff;
     /* ✅ Default white text for section */
 }
 /* ✅ Section Title */
 
 .section-title h1 {
     font-weight: 700;
     font-size: 2.5rem;
 }
 
 .section-title p {
     color: #ccc;
     font-size: 1rem;
 }
 /* ✅ Contact Info Box */
 
 .contact-info-box {
     background: #111;
     padding: 30px;
     border-radius: 10px;
 }
 
 .contact-info-box i {
     font-size: 20px;
     width: 35px;
     height: 35px;
     background: #222;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     margin-right: 12px;
     color: #fff;
 }
 
 .contact-info-box p {
     margin-bottom: 15px;
     font-size: 0.95rem;
     color: #fff;
     /* ✅ White text for info */
 }
 
 .contact-info-box a {
     color: #fff;
     text-decoration: underline;
 }
 /* ✅ Form Styling */
 
 .contact-form-box {
     background: #111;
     padding: 30px;
     border-radius: 10px;
 }
 
 .contact-form-box label {
     color: #fff;
     /* ✅ White form labels */
 }
 
 .form-control {
     background: #222;
     border: none;
     color: #fff;
     /* ✅ White input text */
     padding: 12px;
 }
 
 .form-control::placeholder {
     color: #bbb;
     /* ✅ Lighter placeholder text */
 }
 
 .btn-contact {
     background: #fff!important;
     color: #000!important;
     font-weight: 600!important;
     padding: 12px 20px!important;
     border-radius: 8px!important;
     transition: 0.3s!important;
     border:1px solid #eee!important;
     width:50%
 }
 
 .btn-contact:hover {
     background: #ddd;
 }
 /* ✅ Google Map */
 
 .map-embed iframe {
     width: 100%;
     height: 250px;
     border: none;
     border-radius: 8px;
     margin-top: 15px;
 }
 /* ✅ Responsive */
 
 @media (max-width: 768px) {
     .section-title h1 {
         font-size: 2rem;
     }
 }
 /* map  */
 /* ✅ Full-width Google Map */
 
 .map-section {
     width: 100%;
     height: 400px;
     /* Adjust height as needed */
     position: relative;
 }
 
 .map-section iframe {
     width: 100%;
     height: 100%;
     border: none;
 }
 /* deals & packages pages  */
 
 .hero-section {
     background: url('https://images.unsplash.com/photo-1599058917212-f1dbfd95ff06?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
     height: 60vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     position: relative;
 }
 
 .hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
 }
 
 .hero-content {
     position: relative;
     z-index: 2;
 }
 
 .hero-content h1 {
     font-size: 3rem;
     font-weight: bold;
 }
 /* ✅ SECTION TITLES */
 
 .section-title {
     text-align: center;
     /* margin-bottom: 50px; */
 }
 
 .section-title h2 {
     font-size: 2.2rem;
     font-weight: 700;
 }
 
 .section-title p {
     color: #ccc;
     font-size: 1rem;
 }
 /* ✅ EXCLUSIVE DEALS SECTION (White Background) */
 
 .exclusive-deals {
     background: #fff;
     color: #000;
     padding: 80px 0;
 }
 
 .exclusive-deals .section-title p {
     color: #555;
 }
 
 .deal-card {
     background: #f8f8f8;
     border-radius: 10px;
     padding: 25px;
     text-align: center;
     transition: 0.3s ease;
     border: 1px solid #eee;
 }
 
 .deal-card:hover {
     transform: translateY(-8px);
     background: #f0f0f0;
 }
 
 .deal-card img {
     width: 100%;
     border-radius: 10px;
     margin-bottom: 15px;
 }
 
 .deal-card h4 {
     font-size: 1.4rem;
     font-weight: bold;
     color: #000;
 }
 
 .deal-card p {
     color: #555;
 }
 /* ✅ PACKAGE CARDS */
 
 .package-card {
     background: #111;
     border-radius: 10px;
     padding: 30px;
     text-align: center;
     transition: 0.3s ease;
 }
 
 .package-card:hover {
     background: #1a1a1a;
     transform: translateY(-5px);
 }
 
 .package-card h4 {
     font-size: 1.6rem;
     margin-bottom: 10px;
 }
 
 .package-card p {
     color: #ccc;
 }
 
 .package-card .price {
     font-size: 1.8rem;
     font-weight: bold;
     margin: 10px 0;
     color: #fff;
 }
 
 .btn-package {
     background: #fff;
     color: #000;
     font-weight: 600;
     padding: 10px 20px;
     border-radius: 8px;
 }
 
 .btn-package:hover {
     background: #ddd;
 }
 /* ✅ CALL TO ACTION */
 
 .cta-section {
     background: #111;
     padding: 50px 20px;
     text-align: center;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .cta-section h2 {
     font-size: 2rem;
     margin-bottom: 15px;
 }
 
 .membership-section {
     /* background: url('https://picsum.photos/1920/800?blur') center/cover no-repeat;  */
     /* padding: 80px 0; */
 }
 
 .section-title h2 {
     text-align: center;
     font-weight: 700;
     margin-bottom: 10px;
 }
 
 .section-title p {
     text-align: center;
     color: #ddd;
     margin-bottom: 50px;
 }
 
 .package-card {
     background: rgba(0, 0, 0, 0.85);
     padding: 30px;
     border-radius: 12px;
     text-align: center;
     transition: 0.3s ease-in-out;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
     height: 100%;
 }
 
 .package-card:hover {
     transform: translateY(-8px);
     box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.5);
 }
 
 .package-card h4 {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 10px;
 }
 
 .package-card .price {
     font-size: 1.8rem;
     font-weight: bold;
     margin: 20px 0;
 }
 /* ✅ Center the list with bullets */
 
 .package-card ul {
     list-style-position: inside;
     /* keeps bullets close */
     text-align: center;
     /* centers the list */
     padding-left: 0;
     margin: 20px auto;
 }
 
 .package-card ul li {
     display: list-item;
     list-style-type: disc;
     color: #fff;
     font-size: 1rem;
     margin: 8px 0;
 }
 
 .btn-package {
     background: #fff;
     color: #000;
     font-weight: 600;
     border-radius: 6px;
     padding: 10px 20px;
     text-decoration: none;
     display: inline-block;
     margin-top: 15px;
     transition: 0.3s;
 }
 
 .btn-package:hover {
     background: #ffcc00;
     color: #000;
 }
 /* booking page  */
 
 .slot-btn.active {
     background: #000 !important;
     color: #fff !important;
 }
 
 .slot-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }
 /* book page  */
 /* Unique text gradient title */
 
 .text-gradient {
     background: linear-gradient(90deg, #000000, #333333);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 /* Court card wrapper */
 
 .court-card {
     transition: transform 0.4s ease, box-shadow 0.4s ease;
     border: 2px solid #000;
     border-radius: 20px;
     background: #f9f9f9;
 }
 /* Image styling */
 
 .court-img-wrapper img {
     height: 250px;
     width: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
     border-bottom: 2px solid #000;
 }
 /* Hover effect */
 
 .court-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 16px 30px rgba(0, 0, 0, 0.1);
 }
 
 .court-card:hover img {
     transform: scale(1.03);
 }
 
 .court-booking-section {
     background: linear-gradient(135deg, #dcdcdc, #f7f7f7);
 }
 /* aboutdemo */
 
 .booking-container {
     max-width: 1000px;
     margin: 50px auto;
     padding: 20px;
 }
 
 .step-indicator .step {
     display: inline-block;
     width: 90px;
     height: 90px;
     border-radius: 50%;
     line-height: 90px;
     background: #e0e0e0;
     color: #333;
     font-weight: bold;
     margin: 0 10px;
     position: relative;
 }
 
 .step-indicator .step.active {
     background: #009688;
     color: #fff;
 }
 
 .step small {
     display: block;
     font-weight: normal;
     font-size: 12px;
     margin-top: 5px;
 }
 
 .court-box,
 .calendar-box,
 .details-box,
 .confirm-box {
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
 }
 
 .btn-book {
     background: #ffc107;
     font-weight: bold;
 }
 
 .btn-book:hover {
     background: #e0a800;
 }
 
 .time-section button.active {
     background: #009688;
     color: #fff;
 }
 /* booking page  */
 /* .progress-steps {
      display: flex;
      justify-content: center;
      margin-bottom: 30px;
    }
    .step {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 45px;
      height: 45px;
      border-radius: 50%;
      background: #ccc;
      color: #fff;
      font-weight: bold;
      margin: 0 15px;
      transition: background 0.3s;
    }
    .step.active {
      background: #202220;
    }
    .court-card {
      background: #ffffff;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s;
    }
    .court-card:hover {
      transform: translateY(-5px);
    }
    .calendar-wrapper {
      background: #ffffff;
      padding: 25px;
      border-radius: 12px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }
    .slot-btn {
      border-radius: 30px;
      padding: 8px 16px;
      font-size: 14px;
      border: 1px solid #000;
      background-color: #f8f9fa;
      color: #000;
      transition: all 0.3s;
    }
    .slot-btn.active,
    .slot-btn:hover {
      background: #000;
      color: #fff;
    }
    .modal-content {
      border-radius: 15px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    }
    .modal-header {
      background: #f8f9fa;
      border-bottom: none;
    }
    .modal-title {
      font-weight: 600;
    }
    .modal-body form {
      padding: 10px 0;
    }
    .modal-body label {
      font-weight: 500;
    }
     */
 /* General Styles */
 /* Court Card Container */
 
 .court_box {
     border: 2px solid #000;
     border-radius: 12px;
     padding: 20px;
     background: #fff;
     transition: transform 0.3s ease-in-out;
     box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
 }
 
 .court_box:hover {
     transform: scale(1.02);
     box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
 }
 /* Court Title */
 
 .court_title {
     font-weight: 600;
     margin-bottom: 10px;
 }
 /* Book Now Button */
 
 .booking_btn {
     background-color: #000;
     color: #fff;
     padding: 10px 24px;
     border: none;
     border-radius: 6px;
     transition: background 0.3s ease;
 }
 
 .booking_btn:hover {
     background-color: #222;
 }
 /* Calendar Section */
 
 .calendar_box {
     margin-top: 15px;
 }
 
 .calendar_input {
     width: 100%;
     padding: 10px;
     border: 1px solid #000;
     border-radius: 6px;
 }
 /* Time Slot Buttons */
 
 .slot_area {
     margin-top: 10px;
 }
 
 .time_slot_box {
     padding: 10px 14px;
     border: 1px solid #000;
     margin: 6px;
     border-radius: 6px;
     cursor: pointer;
     transition: background-color 0.3s, transform 0.2s;
     background: #fff;
 }
 
 .time_slot_box:hover {
     background-color: #000;
     color: #fff;
     transform: scale(1.05);
 }
 
 .time_slot_box.selected {
     background-color: #000;
     color: #fff;
 }
 /* Continue Button */
 
 .booking_confirm_btn {
     background-color: #000;
     color: #fff;
     padding: 12px 28px;
     border: none;
     border-radius: 6px;
     transition: background 0.3s ease;
 }
 
 .booking_confirm_btn:hover {
     background-color: #333;
 }
 /* Animations */
 
 .fade-up {
     animation: fadeUp 0.8s ease-in-out;
 }
 
 .zoomIn {
     animation: zoomIn 0.6s ease-in-out;
 }
 
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes zoomIn {
     from {
         transform: scale(0.9);
         opacity: 0;
     }
     to {
         transform: scale(1);
         opacity: 1;
     }
 }
 /* register */
 
 .padel-page-wrapper {
     background: #f1f3f6;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 20px;
 }
 
 .padel-register-box {
     background-color: #fff;
     border-radius: 16px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
     animation: fadeSlideIn 0.6s ease;
     display: flex;
     flex-wrap: wrap;
     width: 100%;
     max-width: 1100px;
     overflow: hidden;
 }
 
 .padel-left-section,
 .padel-right-section {
     padding: 2rem;
 }
 
 .padel-left-section {
     flex: 1 1 50%;
     border-right: 1px solid #dee2e6;
     background-color: #f8f9fa;
 }
 
 .padel-right-section {
     flex: 1 1 50%;
 }
 
 .padel-summary-card {
     border-left: 4px solid #000;
     background: #fff;
     padding: 1rem;
     border-radius: 10px;
     margin-bottom: 1rem;
 }
 
 .padel-form-title {
     font-size: 1.8rem;
     font-weight: 600;
     margin-bottom: 1.5rem;
     text-align: center;
 }
 
 .form-control:focus {
     border-color: #000;
     box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 0.1);
 }
 
 .padel-submit-btn {
     background: #000;
     color: #fff;
     border: none;
     padding: 10px 24px;
     font-weight: 500;
     transition: background 0.3s ease;
     width: 100%;
 }
 
 .padel-submit-btn:hover {
     background: #222;
 }
 
 .padel-login-link {
     display: inline-block;
     margin-top: 10px;
     font-weight: 500;
     text-decoration: underline dotted;
     color: #000;
     text-align: center;
     width: 100%;
 }
 
 @keyframes fadeSlideIn {
     from {
         opacity: 0;
         transform: translateY(40px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 .padel-form-compact {
     background: #fff;
     padding: 2rem;
     border-radius: 16px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
     max-width: 500px;
     width: 100%;
     animation: fadeSlideIn 0.6s ease;
 }
 /* confirmation page  */
 
 .confirmation-page {
     background: linear-gradient(to right, #f5f7fa, #c3cfe2);
     padding: 40px 20px;
 }
 
 .confirmation-wrapper {
     max-width: 1100px;
     margin: auto;
     display: flex;
     gap: 30px;
     flex-wrap: wrap;
 }
 
 .confirmation-panel {
     flex: 1 1 48%;
     background: #fff;
     border-radius: 15px;
     padding: 2rem;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
     animation: fadeIn 0.5s ease;
 }
 
 .confirmation-title {
     font-size: 1.4rem;
     font-weight: 600;
     margin-bottom: 1.2rem;
     color: #222;
     border-bottom: 2px solid #000;
     padding-bottom: 8px;
 }
 
 .confirmation-panel p {
     margin-bottom: 8px;
 }
 
 .confirmation-total {
     margin-top: 1rem;
     font-weight: 600;
     text-align: center;
     background: #f8f9fa;
     border-radius: 8px;
     padding: 10px;
 }
 
 .confirmation-btn {
     display: block;
     margin: 30px auto 0;
     background: #000;
     color: #fff;
     border: none;
     padding: 12px 30px;
     font-weight: 500;
     border-radius: 8px;
     transition: 0.3s;
 }
 
 .confirmation-btn:hover {
     background: #333;
 }
 
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @media (max-width: 768px) {
     .confirmation-wrapper {
         flex-direction: column;
     }
     .confirmation-panel {
         flex: 1 1 100%;
     }
 }
 /* //marquee replace  */
 /* Event Date Highlight Section */
 
 .event-date-highlight {
     background: linear-gradient(90deg, #FF9D06 0%, #FF022D 48%, #FF00FF 100%);
     padding: 15px 0;
     color: white;
     text-align: center;
     font-weight: 600;
     font-size: 1.2rem;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }
 
 .highlight-date {
     background-color: #fff;
     color: #FF022D;
     padding: 5px 10px;
     border-radius: 30px;
     font-weight: 700;
     animation: glow 2s infinite alternate;
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
 }
 /* Animation */
 
 @keyframes glow {
     from {
         box-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
     }
     to {
         box-shadow: 0 0 20px rgba(255, 255, 255, 0.9);
     }
 }
 /* Compact Badge Styles */
 
 .badge {
     display: inline-block;
     padding: 2px 6px;
     font-size: 9px;
     font-weight: 700;
     border-radius: 10px;
     margin-left: 6px;
     text-transform: uppercase;
     letter-spacing: 0.3px;
     vertical-align: middle;
     line-height: 1.2;
 }
 
 .badge-open {
     background-color: #28a745;
     color: white;
 }
 
 .badge-coming {
     background-color: #6c757d;
     color: white;
 }
 
 ul.dropdown-about.serv-dropdown {
     padding-left: 5px;
     min-width: 260px;
 }
 /* Covered Court Section Styles */
 
 .covered-court-section {
     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
     position: relative;
     overflow: hidden;
 }
 
 .covered-court-section::before {
     content: "";
     position: absolute;
     top: 0;
     right: 0;
     width: 300px;
     height: 300px;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="%23007bff" opacity="0.05"><path d="M50,0 C77.614,0 100,22.386 100,50 C100,77.614 77.614,100 50,100 C22.386,100 0,77.614 0,50 C0,22.386 22.386,0 50,0 Z"/></svg>') no-repeat;
     background-size: contain;
 }
 
 .highlight-badge .badge {
     font-size: 0.9rem;
     padding: 8px 16px;
     border-radius: 20px;
     font-weight: 600;
 }
 
 .benefits-list .benefit-item i {
     font-size: 1.2rem;
     width: 24px;
 }
 
 .covered-court-image {
     position: relative;
     overflow: hidden;
     border-radius: 16px;
 }
 
 .covered-court-image img {
     transition: transform 0.5s ease;
 }
 
 .covered-court-image:hover img {
     transform: scale(1.05);
 }
 
 .image-overlay {
     background: rgba(0, 0, 0, 0.3);
     opacity: 0;
     transition: opacity 0.3s ease;
     border-radius: 16px;
 }
 
 .covered-court-image:hover .image-overlay {
     opacity: 1;
 }
 
 .play-button {
     width: 70px;
     height: 70px;
     cursor: pointer;
     transform: scale(0.8);
     transition: transform 0.3s ease;
 }
 
 .covered-court-image:hover .play-button {
     transform: scale(1);
 }
 
 .play-button i {
     font-size: 1.5rem;
     margin-left: 4px;
 }
 /* Responsive adjustments */
 
 @media (max-width: 768px) {
  
     .cta-buttons {
         text-align: center;
     }
     .cta-buttons .btn {
         display: block;
         width: 100%;
         margin-bottom: 10px;
     }
     .cta-buttons .btn.me-3 {
         margin-right: 0 !important;
     }
 }
 
 section p {
     /* color: #000; */
     /* text-align: justify; */
     font-size: 16px
 }
 
 .cta-buttons a {
     text-transform: unset;
 }
 
 .nav-menu-about li:hover .dropdown-about {
     display: block;
     padding-left: 6px;
 }
 
 .section-title {
     color: #000!important
 }
 
 .booking-update-section {
     background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
     color: #fff;
     text-align: center;
 }
 
 .booking-update-section .btn {
     transition: all 0.3s ease;
     background-color: #fff;
     color: #000
 }
 
 .booking-update-section .btn:hover {
     background-color: #d1dbc8;
     color: #000;
 }
 
 .booked-slot {
     background: #e74c3c !important;
     color: white !important;
     cursor: not-allowed !important;
     opacity: 0.6 !important;
     border-color: #c0392b !important;
 }
 
 .time_slot_box {
     position: relative;
 }
 
 .time_slot_box.booked-slot:hover::after {
     content: attr(title);
     position: absolute;
     bottom: 100%;
     left: 50%;
     transform: translateX(-50%);
     background: #2c3e50;
     color: white;
     padding: 5px 10px;
     border-radius: 4px;
     font-size: 0.8rem;
     white-space: nowrap;
     z-index: 1000;
     margin-bottom: 5px;
 }
 
 .form-control {
     background: #fff;
     border: none;
     color: #000;
     padding: 12px;
 }
 
 .btn-logout-about {
     background: #e74c3c !important;
     color: white !important;
     padding: 8px 20px !important;
     border-radius: 5px !important;
     transition: all 0.3s !important;
     text-decoration: none !important;
     display: inline-block !important;
     border: none !important;
 }
 
 .btn-logout-about:hover {
     background: #c0392b !important;
     color: white !important;
     transform: translateY(-2px);
 }
 
 .status-onsite {
     background: #f39c12;
     color: white;
 }
 
 .status-cancelled {
     background: #e74c3c;
     color: white;
 }
 
 .text-primary-emphasis {
     color: #212529 !important;
     font-style: normal!important;
 }
 /* media query */
 
 @media only screen and (max-width:768px) {
  .card{max-width:100%!important}
  .court-info .col-lg-4{margin-bottom:20px}
  .footer-links ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    text-align: left;
}
.footer{    padding-bottom: 86px;}

.footer-links ul li {
    margin: 0!important;
    display: inline-block;
    padding: 0!important;
}
     .about-section {
         /* background-color: white; */
         padding: 0px 15px 55px!important;
         gap: 0;
     }
     .about-text p {
         text-align: justify!important;
     }
     .about-text h2 {
         font-size: 2rem;
         text-align: left;
     }
     .slider {
      height: 40vh;
         /* padding: 20px; */
     }
     .slider video{height: 100%;}
     .menu-toggle-about {
         background: #fff;
         text-align: center;
         padding: 0;
         width: 40px;
         height: 40px;
         border-radius: 10px;
     }
     



     .nav-menu-about {
         flex-direction: column;
         background: #000;
         position: absolute;
         top: 69px;
         right: 0;
         width: 100%;
         padding-left: 0;
     }
     .nav-menu-about>li>a {
         color: #fff
     }
     .mob-button {
         justify-content: space-between;
         padding: 20px!important;
         background: #eee;
         position: fixed;
         width: 100%;
         bottom: 0;
         background: #fff;
         z-index: 999;
         text-align: center;
         display: flex!important
     }
     .mob-button li {
         width: 50%
     }
     .mob-button li a {
         width: 95%;
         text-align: center;
     }
     .membership-content h2 {
         font-size: 35px;
         text-align: left;
     }
     .membership-content p {
         text-align: justify;
     }
     .button-group {
         display: flex;
         gap: 12px;
     }
     .membership-content {
         padding: 20px;
     }
     .testimonial-content.left-align {
         align-items: flex-start;
         text-align: left;
         margin-right: auto;
         padding-left: 0px;
         padding-right: 0;
     }
     .acta-section {
         width: 90%;
         max-width: 1200px;
         margin: 0px auto 30px;
     }
     .footer-award p {
         margin-bottom: 0px;
         text-align: justify;
     }
     .footer-links ul li {
         margin: 8px 0;
         display: inline-block;
         padding: 10px;
     }
     .footer-links {
         border-top: 1px solid #495057;
         padding-top: 15px;
         border-bottom: 1px solid #495057;
     }
     .nav-menu-about .login-btn {
         display: none!important
     }
     .nav-menu-about .login-btn-about {
         display: none!important;
     }
     .notice-bar span {
         margin-bottom: 20px;
     }
     .about-hero {
         height: 35vh!important;
         padding-left: 0px!important;
     }
     .about-hero div:nth-child(2) {
         position: absolute!important;
         z-index: 2!important;
         color: #fff!important;
         max-width: 100%!important;
         padding: 20px!important;
         margin-top: 0!important;
         bottom: 0!important;
     }
     .about-hero p {
         font-size: 16px!important;
         line-height: 19px!important;
         text-align: justify!important;
     }
     p.text-muted {
         color: #000 !important;
         text-align: justify;
     }
     .age-timeline {
         background: #f8f9fa;
         padding: 30px 0!important;
         position: relative;
     }
     .timeline-dot {
         display: none;
     }
     .col-md-3.timeline-step {
         border-bottom: 1px solid #6c757d;
         padding-bottom: 20px;
     }
     .safe-party-section {
         padding: 40px 0!important;
     }
     .safe-party-section h2 {
         font-size: 2rem!important;
         margin-bottom: 35px!important;
     }
     .exclusive-deals {
         padding: 35px 0!important;
     }
     .registration-section {
         padding: 40px 0!important;
     }
     .early-bird.mx-auto {
         width: 80%!important
     }
     .island-padel-section p {
         text-align: justify!important;
     }
     .why-should-section {
         padding: 30px 0!important;
     }
     .why-should-section .col-md-6 {
         margin-bottom: 30px
     }
     .btn-signup {
         width: 80%!important;
         margin: auto;
     }
     .membership-form-container {
         max-width: 100%!important;
     }
     .court_box {
         background: #f8f9fa;
         padding: 15px;
         border-radius: 15px;
         border: 2px solid #e9ecef;
         transition: all 0.3s ease;
         margin-bottom: 25px;
     }
     .time_slot_box.booked-slot:hover::after {
         white-space: normal;
         z-index: 1000;
         width: 100%
     }
     .menu-buttons .btn {
         padding: 12px 13px;
         border-radius: 10px;
         font-weight: 600;
         margin-right: 10px;
         transition: all 0.3s ease;
         background: black;
         color: #fff;
         margin-bottom: 10px;
         width: 100%;
     }
     .menu-highlights {
         padding: 30px 20px;
         text-align: center;
         background: #000;
     }
     .booking-card {
         padding: 10px!important;
     }
     .booking-item .col-4,
     .booking-item .col-lg-4,
     .booking-item .col-6 {
         flex: 0 0 auto;
         width: 100%;
         margin-bottom: 10px;
     }
     .booking-summary-container button,
     .booking-summary-container .btn {
         margin-bottom: 20px;
     }
 }
 
 .nav-menu-about .login-btn {
     display: block
 }
 
 .nav-menu-about .login-btn-about {
     display: block;
 }
 
 @media only screen and (min-width:1000px) {
     .mob-button {
         display: none!important
     }
 }
 
 .pad-card {
     width: 100%;
     padding: 20px;
     height: 100%
 }
 
 .pad-card::before {
     display: none!important
 }
 
 .pad-card .section-img {
     margin-bottom: 20px;
     height:200px;
     background-size: cover;
 }
 
 .pad-card:hover img {
     transform: none!important;
 }
 .card.pad-card {
    /* height: 100%; */
    min-height: 500px;
}
.pad-card h3 {
    font-weight: 500!important;
    font-size: 27px;
    margin-bottom: 20px;
}
 

@media only screen and (min-width:768px) and (max-width:992px){

  .facility-section {

    min-height: 63vh!important;
 
}
.footer-container {
    grid-template-columns: repeat(1, 1fr);
}
}

.signup-form.card{max-width:100%!important}

.contact-info-box{height:100%;}
.btn-contact{border-radius:100px!important}


@media only screen and (min-width:1000px) and (max-width:1390px){
  .nav-menu-about>li>a{font-size:12px!important;padding: 5px;}
  .nav-container-about

 {
    max-width: 98%;
}}

.btn-signup{text-transform: capitalize!important;font-size:18px!important}