/*===============================================
Template Name: Adelux - Padel Club & Community Bootstrap Template
Author:  https://themeforest.net/user/fox_creation
Description: Adelux is modern and elegant HTML5 Bootstrap template for Padel Club & Community. You can also use this template for any kind of business and services related to padel club, sports club, court booking, padel academy, padel website, racket sports, athletic center, sports coaching, padel court, training club, sports events, fitness website, and all other Padel Club & Community websites. etc.
Version: 1.0.0
================================================*/

/* Table of Content */
/* 01. Import Vendor */
/* 02. Global Site Settings */
/* 03. Keyframes Animation */
/* 04. Base Settings */
/* 05. Base Section */
/* 06. Base Container */
/* 07. Button Styles */
/* 08. Card Styles */
/* 09. Color Styles */
/* 10. Image Styles */
/* 11. Banner Styles */
/* 12. Heading Style */
/* 13. Form Styles */
/* 14. Header Styles */
/* 15. Sidebar Styles */
/* 16. Breadcrumb Styles */
/* 17. Link Style */
/* 18. About Styles */
/* 19. Chooseus Styles */
/* 20. Icon Styles */
/* 21. Booking Style */
/* 22. Contact Cta Styles */
/* 23. Underline Styles */
/* 24. Swiper Styles */
/* 25. Custom List Styles */
/* 26. Service Styles */
/* 27. Academy Section */
/* 28. Tournament Styles */
/* 29. Partnership Styles */
/* 30. Community Styles */
/* 31. Membership CTA Styles */
/* 31. Team Styles */
/* 32. Testimonial Styles */
/* 34. FAQ Styles */
/* 35. Pricing Styles */
/* 36. Blog Styles */
/* 37. Maps Style */
/* 38. Video Button Styles */
/* 39. Video Modal Styles */
/* 40. Animate Styles */
/* 41. 404 Style */
/* 42. Custom Spacing */
/* 43. Footer Styles */

/* 01. Import Vendor */
@import url('../webfonts/font-family-montserrat.css');
@import url('../webfonts/font-family-lato.css');
@import url('../css/vendor/bootstrap.min.css');
@import url('../css/vendor/fontawesome.css');
@import url('../css/vendor/brands.css');
@import url('../css/vendor/regular.css');
@import url('../css/vendor/solid.css');
@import url('../css/vendor/flatpickr.min.css');
@import url('../css/vendor/swiper-bundle.min.css');
@import url('../css/vendor/animate.min.css');

/* 02. Global Site Settings */

:root{
    --primary: #272727;
    --secondary: #FFFFFF;
    --text-color: #5F5F5F;
    --accent-color: #000000;
    --accent-color-2: #8343F2;
    --accent-color-2-dark: #653CE3;
    --accent-gradient: linear-gradient(135deg, #8343F2 0%, #653CE3 100%);
    --accent-gradient-hover: linear-gradient(135deg, #7432E6 0%, #5527D6 100%);
    --accent-color-3: #F2F2F2;
    --accent-color-4: #FAFAFA;
    --accent-color-5: #E4E4E4;
    --accent-color-6: #F3E8FF;
    --accent-color-7: #D0D0D0;
    --accent-color-8: #C9C1C1;
    --accent-color-9: #8C8C8C14;
    --accent-transparent-white: #FFFFFF00;
    --accent-transparent-white-2: #FFFFFF14;
    --accent-transparent-black: #0000005C;
    --accent-transparent-black-2: #00000087;
    --font-family-1: "Montserrat", sans-serif;
    --font-family-2: "Lato", sans-serif;
    --animation-normal: 1.25s;
    --animation-slow: 2.25s;
    --animation-fast: 0.75s;
}

/* 03. Keyframes Animation */


@property --progress {
    syntax: '<integer>';
    inherits: true;
    initial-value: 0;
}

@keyframes load {
    to {
        --progress: var(var(--value))
    }
}

@keyframes ripple {
    from {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        transform-origin: center;
        border-width: 0px;
    }

    to {
        opacity: 0;
        transform: scale3d(1.7, 1.7, 1.8);
        transform-origin: center;
        border-width: 13px;
    }
}

/* 04. Base Settings */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: var(--font-family-2);
    color: var(--primary);
    font-size: 16px;
}

h1{
    font-size: 90px;
    font-weight: 700;
    line-height: 1.1em;
}

h2{
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2em;
}

h3{
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3em;
}

h4{
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3em;
}

h5{
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3em;
}

h6{
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--font-family-1);
    margin-bottom: 0;
}

p{
    color: var(--text-color);
    font-family: var(--font-family-2);
    font-size: 18px;
    margin-bottom: 20px;
}

button, a, .btn-title{
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    text-decoration: none;
}

ul{
    list-style: none;
}

/* 05. Base Section */

.section{
    padding: 120px 20px 120px 20px;
}

.section-banner-inner{
    padding: 230px 20px 120px 20px;
    border-radius: 30px 30px 30px 30px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.section-banner-inner::before{
    content: '';
    position: absolute;
    background-color: var(--accent-color);
    opacity: 0.2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.section-wrapper{
    padding: 30px 30px 30px 30px;
}

.section-community{
    background-color: var(--accent-color-4);
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
}

.section-chooseus{
    background-color: var(--accent-color-4);
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
}

.section-academy{
    background-color: var(--accent-color);
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
}

.section-pricing{
    background-color: var(--accent-color);
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
}

/* 06. Base Container */

.hero-container{
    max-width: 1340px;
    margin-left: auto;
    margin-right: auto;
}

/* 07. Button Styles */

.btn{
    max-width: 100%;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    border-radius: 100px 100px 100px 100px;
    padding: 5px 5px 5px 5px;
    justify-content: space-between;
}

.btn-accent{
    fill: var(--accent-color-2);
    transition: all 600ms;
    background-color: var(--accent-color-2);
}

.btn-accent:hover{
    background-color: var(--accent-color-6);
}

.btn-title{
    padding: 17px 17px 17px 17px;
    color: var(--accent-color);
}

.banner-reviewer-container{
    display: block;
}

.testimonial-btn-container{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.testimonial-btn-container i{
    font-size: 21px;
    color: var(--accent-color);
}

.testimonial-btn {
    z-index: 70;
    pointer-events: auto;
    background: transparent;
    border: 0;
}

/* 08. Card Styles */

.card{
    border: none;
    border-radius: 20px 20px 20px 20px;
}

.card-banner-reviewer{
    background-color: var(--accent-transparent-white-2);
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
    align-items: center;
    text-align: center;
    gap: 10px 10px;
    border-radius: 20px 20px 20px 20px;
    padding: 10px 10px 10px 10px;
    order: 2;
    position: relative;
    z-index: 1;
}

.card-banner-reviewer::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
}

.card-banner-reviewer .banner-reviewer-container{
    background-color: var(--accent-color-6);
    border-radius: 135px 135px 135px 135px;
}

.card-banner-reviewer .banner-avatar{
    width: 40px;
    min-height: 40px;
    border: 5px solid var(--accent-color-6);
    border-radius: 1000px 1000px 1000px 1000px;
}

.card.banner-home-community{
    display: flex;
    flex-direction: row;
    gap: 20px 20px;
    background-color: var(--accent-transparent-white-2);
    padding: 8px 20px 8px 8px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    height: auto;
    align-self: flex-start;
    max-height: none;
}

.card.banner-home-community::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
}

.card-about-detail{
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    width: 81%;
    height: auto;
    bottom: 0;
    left: 0;
    padding: 40px 40px 40px 40px;
    border-radius: 0px 20px 0px 20px;
    background-color: var(--accent-color-2);
}

.card-about-misson{
    display: flex;
    flex-direction: column;
    background-color: var(--accent-color-3);
}

.card-about-misson.card-about-mission--membership{
    background-color: var(--accent-color);
}

.col:nth-child(even) .card-about-misson {
    margin-bottom: -25px;
    transition: transform 0.3s;
}

.col:nth-child(even) .card-about-misson:hover {
    transform: translateY(-25px);
}

.card-about-mission--courth .card-content p,
.card-about-mission--tournament .card-content p{
    max-width: 100%;
}

.card-about-mission--academy .card-content p {
    max-width: 89%;
  }

.card-about-mission--membership .card-content p {
    max-width: 81%;
}

.card-about-misson .image-container{
    width: 100%;
    padding: 10px 10px 10px 10px;
}

.card-about-misson .image-container img{
    width: 100%;
    height: 150px;
}

.card-about-misson .card-content{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    padding: 20px 30px 30px 30px;
}

.card-about-misson .card-content p{
    margin-bottom: 0px;
}

.card-service{
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card-process{
    background-color: var(--accent-color-4);
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 30px 30px 30px;
}

.card-process .icon{
    width: 60px;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 17px 17px 17px 17px;
    background-color: var(--accent-color-2);
    color: var(--accent-color);
}

.card-chooseus{
    align-self: center;
    align-items: center;
    text-align: center;
    background-color: var(--secondary);
    display: flex;
    flex-direction: column;
    gap: 40px;
    border-radius: 20px 20px 20px 20px;
    padding: 40px 40px 40px 40px;
    width: 100%;
    height: 100%;
}

.card-booking-cta{
    width: 45%;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: 20px;
    padding: 40px 40px 40px 40px;
    background-color: var(--accent-color);
}

.card-contact-cta{
    background-color: var(--accent-color-2);
    padding: 100px 100px;
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 2;
}

.card-contact-cta::before{
    content: '';
    position: absolute;
    background-image: url('../images/Gp-5-e1750061403635.png');
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.card-contact-cta.cta-small-banner{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 40px 40px 40px 40px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card-contact-cta.cta-small-banner::before{
    content: '';
    position: absolute;
    background-image: none;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.card-contact-cta.cta-small-banner a{
    color: var(--primary);
}

.card-contact-cta.cta-small-banner .cta-image{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 47%;
    z-index: -1;
}

.card-contact-cta.cta-small-banner .cta-image-container{
    margin: 0px -75px -60px 0px;
}

.card-contact-cta.cta-small-banner .cta-image-container img{
    max-width: 100%;
    height: auto;
}

.card-contact-cta.cta-small-banner .cta-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px 10px;
    color: var(--accent-color);
}

.card-pricing{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    background-color: var(--primary);
    padding: 40px 40px 40px 40px;
}

.card-pricing .price-currency{
    color: var(--secondary);
}

.card-pricing .price{
    color: var(--accent-color-2);
}

.card-pricing .pricing-details{
    color: var(--secondary);
    display: flex;
    align-items: end;
}

.card-benefit{
    display: flex;
    flex-direction: row;
    gap: 20px 20px;
    background-color: var(--accent-color-4);
    align-items: start;
    padding: 30px 30px 30px 30px;
}

.card-benefit .benefit-number{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    background-color: var(--accent-color-2);
    border-radius: 1000px 1000px 1000px 1000px;
    width: 70px;
    min-height: 70px;
}

.card-benefit .benefit-number h4{
    margin-bottom: 0;
}

.card-tournament{
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 326px;
    height: 100%;
    padding: 10px 10px 10px 10px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card-tournament::before{
    content: '';
    position: absolute;
    background-color: var(--accent-color);
    opacity: 0.1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.card-tournament.main-event{
    background-image: url('../images/dummy-img-600x800.jpg');
    min-height: 724px;
}

.card-tournament.junior-padel-championship{
    background-image: url('../images/dummy-img-600x400.jpg');
}

.card-tournament.comunity-padel-night{
    position: relative;
    overflow: hidden;
    z-index: 1;
    background-color: var(--accent-color-2);
}

.card-tournament.comunity-padel-night::before{
    position: absolute;
    inset: 0;
    background-image: url('../images/Gp-4.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.card-tournament.comunity-padel-night .tournament-tag{
    border: 1px solid var(--accent-color);
    color: var(--accent-color);
}

.card-tournament.comunity-padel-night .highlight-image{
    position: absolute;
    right: 0;
    top: 0;
    width: 57%;
    height: 100%;
    z-index: 1;
    margin: -20px -25px 0px 0px;
}

.card-tournament.tournament-cta{
    background-color: var(--accent-color);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.card-tournament-content{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    border-radius: 17px 17px 17px 17px;
    padding: 30px 30px 30px 30px;
    background-color: var(--accent-transparent-white-2);
    color: var(--secondary);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.card-tournament-content::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
}

.card-membership-cta.cta-content{
    background-color: var(--accent-color-2);
    display: flex;
    flex-direction: column;
    gap: 30px 30px;
    padding: 40px 40px 40px 40px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card-membership-cta.cta-content::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.6;
    background-image: url('../images/Gp-5-e1750061403635.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}

.card-membership-cta.cta-benefit{
    background-color: var(--accent-color);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 10px 10px 10px;
    width: 100%;
    height: 100%;
}

.card-team{
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
}

.card-team-wrapper{
    display: flex;
    flex-direction: column;
    padding: 10px 10px 10px 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.card-team-content{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 17px 17px 17px 17px;
    padding: 20px 20px 20px 20px;
    background-color: var(--accent-transparent-white-2);
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.card-team-content::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
}

.card-testimonial{
    width: 55%;
    align-self: center;
    background-color: var(--accent-color-9);
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 40px 40px 40px 40px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card-testimonial::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
}

.card-blog{
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.card-blog.card-blog-post .image-container img{
    border-radius: 20px 20px 0px 0px;
    transition: all 300ms;
}

.card-blog.card-blog-post:hover .image-container img{
    transform: rotate(2deg) scale(1.1);
    opacity: 0.8;
}

.card-blog.card-blog-post .blog-title{
    opacity: 1;
    transition: all 300ms;
}

.card-blog.card-blog-post:hover .blog-title{
    opacity: 0.8;
}

.card-blog-category{
    background-color: var(--accent-color);
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 40px 40px 40px 40px;
}

.card-blog-recent{
    background-color: var(--accent-color);
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 40px 40px 40px 40px;
}

.card-blog-tag{
    background-color: var(--accent-color);
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 40px 40px 40px 40px;
}

.card-booking-form{
    width: 60%;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px 30px;
    background-color: var(--accent-color);
    padding: 40px 40px 40px 40px;
}

.card-contact-form{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px 30px;
    background-color: var(--accent-color);
    padding: 40px 40px 40px 40px;
}

/* 09. Color Styles */

.bg-accent-color{
    background-color: var(--accent-color);
}

.bg-accent-color-2{
    background-color: var(--accent-color-2);
}

.bg-accent-color-4{
    background-color: var(--accent-color-4);
}

.bg-accent-color-6{
    fill: var(--accent-color-6);
    transition: all 600ms;
    background-color: var(--accent-color-6);
}

.primary-accent{
    color: var(--primary);
}

.secondary-accent{
    color: var(--secondary) !important;
}

.accent-color{
    color: var(--accent-color);
}

.accent-color-2{
    color: var(--accent-color-2);
}

.accent-color-8{
    color: var(--accent-color-8);
}

/* 10. Image Styles */

.image-container{
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.image-container img:not(.banner-avatar) {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
    border-radius: 20px;
}  

.home-community-img{
    width: 42%;
}

.home-community-img img{
    width: 100%;
    height: 170px;
    object-fit: cover;
    object-position: center center;
    border-radius: 17px 17px 17px 17px;
}

.about-img img{
    width: 100%;
    height: 750px;
}

.chooseus-img{
    width: 100%;
    margin: 0 !important;
    height: 309px !important;
    filter: brightness(70%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg);
}

.service-img{
    width: 100%;
    height: 430px !important;
    transform: scale(1);
    transition: all 300ms;
}

.service-img:hover{
    transform: scale(1.1);
}

.community-images{
    height: 700px !important;
}

.cta-benefit-img{
    max-width: 100% !important;
    width: 100% !important;
    height: 260px !important;
    filter: brightness(80%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg);
    border-radius: 17px 17px 17px 17px !important;
    object-fit: cover;
    object-position: center center;
}

.partner-img{
    max-width: 75%;
}

.benefit-img{
    width: 100%;
    height: 437px !important;
    filter: brightness(70%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg);
}

.team-img img{
    overflow: hidden;
    width: 100%;
    height: 415px;
    object-fit: cover;
    object-position: center center;
    filter: brightness(90%) contrast(100%) saturate(100%) blur(0px) hue-rotate(0deg);
    border-radius: 20px 20px 20px 20px;
    transform: scale(1);
    transition: all 300ms;
}
.team-img:hover img{
    transform: scale(1.1);
}

.contact-cta-image{
    width: 38%;
    position: absolute;
    right: 0;
    bottom: 0;
    min-height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    border-radius: 0px 0px 20px 0px;
    z-index: 1;
}

.contact-cta-image .image-wrapper{
    margin: 0px -63px -65px 0px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.contact-cta-image img{
    max-width: 100%;
    width: 82%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-bottom: 0;
}

.blog-image {
    position: relative;
}

.blog-image img {
    min-height: 450px;
    object-fit: cover;
    object-position: center;
    border-radius: 17px 17px 17px 17px;
}

.blog-image::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: var(--accent-transparent-black);
    -webkit-transition: all 400ms;
    transition: all 400ms;
}

.blog-image:hover::after{
    background-color: var(--accent-transparent-black-2);
}

.recent-post-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    border-radius: 20px 20px 20px 20px;
    justify-content: center;
}

.recent-post-image img {
    width: 100px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* 11. Banner Styles */

.banner-home-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    padding: 250px 20px 120px 20px;
    border-radius: 30px 30px 30px 30px;
    background: url('/assets/images/hero/hero-1-court.webp') center/cover no-repeat;
}

.banner-home-top{
    display: flex;
    flex-direction: row;
    gap: 100px 100px;
    justify-content: space-between;
}

.banner-home-bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 100px 100px;
}

.banner-home-community-container{
    display: flex;
    flex-direction: column;
    width: 45%;
    height: auto;
}

.home-community-content{
    width: 55%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-community-highlight{
    color: var(--accent-color-2);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.3em;
}

.banner-home-cta-container{
    width: 42%;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.banner-home-cta{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.slideshow-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    background-color: var(--accent-color);
}

.slideshow-container .slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.8s ease-in-out, transform 5s ease-in-out;
    will-change: opacity, transform;
}

.slideshow-container .slide::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
    opacity: 0;
    z-index: -1;
}

.slideshow-container .slide.active {
    opacity: 1;
    transform: scale(1.1);
    z-index: 2;
}

.slideshow-container .slide.preparing {
    opacity: 0;
    transform: scale(1);
    z-index: 0;
}


.banner-content-container {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px 0px;
    align-items: stretch;
}


.banner-home-reviewer-container{
    display: flex;
    flex-direction: row;
    gap: 30px 30px;
    justify-content: end;
    align-items: flex-end;
    align-self: stretch;
    width: 100%;
}

.banner-avatar {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    min-height: 50px;
    border-radius: 1000px 1000px 1000px 1000px;
    object-fit: cover;
    border: 2px solid var(--secondary);
}
.banner-avatar:not(:nth-child(1)){
    margin-left: -15px;
}

.banner-avatar-plus{
    background-color: var(--accent-color-2);
}

.banner-avatar-plus img{
    width: 80%;
}

.reviewer-card-description{
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    color: var(--accent-color-4);
}

.banner-home-title{
    width: 54%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.banner-home-network{
    width: 47%;
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: flex-end;
    align-items: flex-end;
    align-self: center;
}

.banner-home-social{
    align-self: center;
    width: 28%;
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    align-items: flex-end;
    justify-content: flex-end;
    flex-wrap: wrap;
    order: 1;
}

.banner-home-social .social-container{
    position: relative;
    background-color: var(--accent-transparent-white-2);
    padding: 2px 14px 2px 14px;
    border-radius: 100px 100px 100px 100px;
    color: var(--secondary);
    z-index: 1;
    width: max-content;
    min-width: 0;
    box-sizing: border-box;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
}

.banner-home-social .social-container i{
    color: var(--accent-color-2);
}

.banner-home-social .social-link-banner{
    color: var(--secondary);
    font-family: var(--font-family-2);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    transition: all 0.3s;
}

.banner-home-social .social-link-banner:hover{
    color: var(--accent-color-2);
}

.testimonial-banner{
    background-image: url('../images/hero/hero-2-trio.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.banner-inner-about{
    background-image: url('../images/site/vibrant-school-sports-courtyard.webp');
}

.banner-inner-booking{
    background-image: url('../images/monitor-teaching-padel-class-RQUY73T.jpg');
}

.banner-inner-event{
    background-image: url('../images/one-women-playing-paddle-tennis-PVGGBJL.jpg');
}

.banner-inner-membership{
    background-image: url('../images/paddle-tennis-racket-and-ball-3SXRR2Z.jpg');
}

.banner-inner-service{
    background-image: url('../images/tailored-indoor-padel-coaching-for-skill-enhanceme-JV5Z29N.jpg');
}

.banner-inner-coaching{
    background-image: url('../images/cheerful-paddle-tennis-player-having-water-break-d-8W9BEVZ.jpg');
    background-position: bottom center;
}

.banner-inner-community{
    background-image: url('../images/monitor-teaching-padel-class-QS4RXUJ.jpg');
}

.banner-inner-faq{
    background-image: url('../images/mixed-adult-couple-palying-padel-on-outdoor-court-TT64K26.jpg');
}

.banner-inner-blog{
    background-image: url('../images/black-athletic-woman-playing-padel-doubles-on-outd-8U5QAM8.jpg');
}

.banner-inner-single-post{
    background-image: url('../images/balls-near-the-net-of-a-blue-padel-tennis-court-MWN78HZ.jpg');
}

.banner-inner-contact{
    background-image: url('../images/close-up-of-female-athlete-with-paddle-tennis-rack-RQ2CD4P.jpg');
}

.banner-inner-404{
    background-image: url('../images/paddle-tennis-racket-and-ball-3SXRR2Z.jpg');
}

/* 12. Heading Style */

.sub-heading{
    display: inline-flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    color: var(--primary);
    background-color: var(--accent-color-3);
    padding: 7px 14px 7px 14px;
    border-radius: 100px 100px;
}

.sub-heading-banner{
    background-color: var(--accent-transparent-white-2);
    color: var(--accent-color-2);
}

.sub-heading-title{
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
}

.heading-section-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    max-width: 65%;
    text-align: center;
    align-self: center;
}

.heading-section-container.pricing-heading{
    max-width: 80%;
}

.blog-title-container{
    padding-bottom: 30px;
    border-bottom: 3px solid var(--accent-color-2);
}

/* 13. Form Styles */

.form{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.form label{
    font-family: var(--font-family-2);
    font-size: 16px;
    color: var(--accent-color-2);
}

.form input,
.form textarea{
    font-family: var(--font-family-2);
    font-size: 16px;
    line-height: 1.3em;
    padding: 17px 17px 17px 17px;
    border-radius: 10px 10px 10px 10px;
    background-color: var(--primary);
    color: var(--secondary);
    box-shadow: none;
    border: none;
    outline: none;
}

.form input::placeholder,
.form textarea::placeholder{
    color: var(--text-color);
}

.form input#newsletter{
    border-radius: 100px 100px 100px 100px;
}

.dropdown-container {
    position: relative;
    width: 100%;
}

.dropdown-select {
    background-color: var(--primary);
    border: none;
    border-radius: 10px 10px 10px 10px;
    color: var(--secondary);
    outline: none;
    padding: 17px 17px 17px 17px;
    font-size: 16px;
    line-height: 1.3em;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px 20px;
    z-index: 2;
}

.dropdown-select i{
    color: var(--accent-color);
}

.dropdown-select:focus{
    border: solid 1px var(--accent-color);
}

.dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: transparent;
    border: none;
    border-radius: 0;
    z-index: 10;
    margin-top: 5px;
    max-height: 200px;
    overflow-y: auto;
}

.dropdown-container.active .dropdown-list {
    display: block;
  }

.dropdown-option {
    background-color: var(--primary);
    padding: 15px 15px 15px 15px;
    border-color: var(--secondary);
    color: var(--secondary);
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.2s, color 0.2s;
}

.dropdown-option:first-child {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.dropdown-option:last-child {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}


.dropdown-option:hover {
    background-color: var(--accent-color);
    color: var(--accent-color-2);
}

.dropdown-option.selected {
    color: var(--accent-color-2);
    font-weight: 600;
}

.selected-text {
    color: var(--text-color);
    transition: color 0.2s ease;
}

.selected-text.has-value {
    color: var(--secondary);
}

.alert {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2em;
    border-radius: 6px;
    margin-bottom: 15px;
  }

.success {
    display: flex;
    flex-direction: column;
    gap: 1em;
    background-color: var(--secondary);
    color: var(--primary);
}

.success span,
.success p{
    color: var(--primary);
}
  
.error {
    display: flex;
    flex-direction: column;
    gap: 1em;
    background-color: var(--secondary);
    color: var(--primary);
}

.error span,
.error p{
    color: var(--primary);
}
  
.check-icon,
.cross-icon {
    font-size: 1.5rem;
    margin-right: 10px;
}

.hidden{
    display: none;
}

/* 14. Header Styles */

.navbar-container {
    padding: 60px 60px 0px 60px;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    z-index: 3;
}

.navbar{
    background-color: var(--accent-transparent-white-2);
    border-radius: 20px 20px 20px 20px;
    position: relative;
    padding: 0px;
    z-index: 1;
}

.navbar::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: inherit;
    background-color: inherit;
    z-index: -1;
}

.navbar-nav-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 20px 20px 20px;
}

.navbar .logo-container{
    width: 18%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.navbar .logo-container a{
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.navbar .logo-container img{
    height: 50px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.navbar .logo-container a:hover img{
    transform: scale(1.02);
}


.navbar .nav-link-container{
    width: 64%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nav-link{
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    color: var(--secondary);
    padding: 0px 15px 0px 15px;
}

.nav-link:hover,
.nav-link:focus,
.nav-link.active,
.navbar-nav .nav-link.show{
    color: var(--accent-color-2) !important;
}

.dropdown-menu {
    background-color: var(--secondary);
    border-radius: 0;
    border: none;
    padding: 0;
    overflow: hidden;
    margin-top: 1.125em !important;
    border-radius: 0px 0px 20px 20px;
    -webkit-box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
    box-shadow: 0 10px 30px 0 rgba(45, 45, 45, .2);
}

.dropdown-item{
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    color: var(--accent-color);
    transition: all 300ms;
    padding: 15px 15px 15px 15px;
}

.dropdown-item:hover,
.dropdown-item.active{
    background-color: var(--secondary);
    color: var(--text-color);
}

.dropdown-toggle::after {
    display: none !important;
}

.navbar-cta-container{
    width: 18%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.nav-btn{
    display: none;
    padding: 8px 16px;
    background-color: var(--accent-color-2);
    color: var(--accent-color);
    box-shadow: none;
    transition: all 300ms ease;
    border: none;
    border-radius: 8px 8px 8px 8px;
    box-shadow: none;
    font-size: 18px;
}

.nav-btn:hover{
    background-color: var(--accent-color-6);
}

/* 15. Sidebar Styles */

.sidebar-overlay{
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    background: var(--accent-transparent-black-2);
    transition: left 0.4s ease-in-out;
    z-index: 10;
}

.sidebar-overlay.active{
    left: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    background: var(--secondary);
    color: var(--accent-color);
    transition: transform 0.4s ease-in-out;
    z-index: 1000;
    overflow-y: auto;
    max-height: 100vh;
    padding: 0px 16px 0px 5px;
}

.sidebar.active{
    transform: translateX(300px);
}

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 20px 20px;
}

.sidebar-header .logo {
    width: 75%;
}

.close-btn {
    display: inline-block;
    justify-content: center;
    background-color: var(--accent-color-2);
    border-radius: 8px 8px 8px 8px;
    color: var(--accent-color);
    font-weight: 600;
    position: relative;
    font-size: 16px;
    cursor: pointer;
    padding: 8px 18px;
    transition: all 300ms;
    border: none;
    outline: none;
}

.close-btn:hover{
    background-color: var(--accent-color-6);
    color: var(--accent-color);
}

.menu {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.menu li {
    padding: 10px 15px 10px 15px;
}

.menu a {
    color: var(--accent-color);
    text-decoration: none;
    display: block;
    border-radius: 5px;
    transition: 0.3s;
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4em;
    letter-spacing: 0px;
}

.menu a:hover,
.menu a.active,
.menu a.focus {
    color: var(--accent-color-2);
}

.sidebar-dropdown .dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-dropdown-btn {
    background: none;
    border: 1px solid var(--accent-color-2);
    color: var(--accent-color-2);
    font-size: 1rem;
    cursor: pointer;
    padding: 3px 15px;
    border-radius: 24px;
    transition: transform 0.3s ease;

}
.sidebar-dropdown-btn:hover {
    color: var(--accent-color-6);
    border: 1px solid var(--accent-color-6)
}

.sidebar-dropdown-menu {
    list-style: none;
    padding-left: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding-top: 0;
    padding-bottom: 0;
}

.sidebar-dropdown-menu.active {
    max-height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.below-dropdown {
    transition: margin-top 0.1s ease-in-out;
    margin-top: 0px;
}

.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: gray;
    border-radius: 5px;
}

/* 16. Breadcrumb Styles */

.breadcrumb{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.breadcrumb-item{
    font-family: var(--font-family-1);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--accent-color-2);
    margin: 0 !important;
    padding: 0 !important;
}

.breadcrumb-icon{
    font-family: var(--font-family-1);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--secondary);
}

.breadcrumb-item.recent{
    color: var(--secondary);
}

/* 17. Link Style */

.link-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: var(--accent-color);
}

/* 18. About Styles */

.about-wrapper {
    display: flex;
    flex-direction: row;
    gap: 100px 100px;
    align-items: center;
  }

.about-image-container{
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 40%;
    overflow: hidden;
}

.about-content-description{
    display: flex;
    flex-direction: column;
    gap: 50px 50px;
    width: 55%;
    justify-content: center;
}

.about-description-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 90%;
    align-self: flex-end;
    padding: 0px 0px 0px 30px;
    border: none;
    border-left: 2px solid var(--accent-color-2);
    overflow: hidden;
}

.about-description-container p{
    margin-bottom: 20px;
}

.about-highlight-box{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    border-top: 2px solid var(--accent-color-2);
    padding: 10px 0px 0px 0px;
}

.about-highlight-text{
    font-family: var(--font-family-1);
    font-size: 42px;
    font-weight: 700;
    line-height: 1em;
    color: var(--primary);
}

.welcome-about-wrapper{
    display: grid;
    grid-template-columns: 0.42fr 0.52fr;
    gap: 100px;
    justify-content: space-between;
}

/* 19. Chooseus Styles */

.chooseus-title-container{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.chooseus-card-container{
    width: 60%;
    display: flex;
    flex-direction: column;
}

.whychooseus-avatar-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0px 0px 20px 20px;
}

.chooseus-img-description{
    font-size: 16px;
    color: var(--accent-color-4);
}

/* 20. Icon Styles */

.icon-circle {
    position: relative;
    background-color: var(--accent-color);
    font-size: 24px;
    border: 1px solid var(--accent-color-2);
    color: var(--accent-color-2);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all 300ms ease-in-out;
    transform: rotateZ(-45deg);
}

.icon-circle:hover{
    transform: rotateZ(0deg);
}

.circle-check-list {
    list-style: none;
    padding-left: 0;
}

.circle-check-list li {
    position: relative;
    color: var(--secondary);
    font-family: var(--font-family-1);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3em;
    border-bottom: 1px solid var(--text-color);
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.circle-check-list li:last-child{
    margin-bottom: 0px;
}

.circle-check-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color-2);
    margin-right: 0.5em;
    font-size: 1.125rem;
    display: inline-block;
}

.chooseus-icon{
    align-self: center;
    background-color: var(--accent-color-2);
    width: 80px;
    display: flex;
    flex-direction: column;
    min-height: 80px;
    border-radius: 17px 17px 17px 17px;
}

.service-icon{
    align-self: center;
    background-color: var(--accent-color-2);
    width: 60px;
    display: flex;
    flex-direction: column;
    min-height: 60px;
    border-radius: 17px 17px 17px 17px;
}

.service-icon-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px 0px 0px 20px;
    z-index: 1;
}

.booking-cta-icon{
    align-self: center;
    background-color: var(--accent-color-2);
    width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    border-radius: 17px 17px 17px 17px;
}

.booking-cta-icon i{
    font-size: 32px;
}

.social-icon{
    border-radius: 9px 9px 9px 9px;
    font-size: 14px;
    padding: 0.5em;
    background-color: var(--accent-color-2);
    color: var(--accent-color);
    transition: all 300ms;
}
.social-icon:hover{
    transform: translateY(-8px);
    background-color: var(--accent-color-6);
}

.contact-icon{
    width: 50px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 15px 15px 15px 15px;
    background-color: var(--accent-color-2);
}

.contact-icon.footer-icon{
    border-radius: 50%;
}

/* 21. Booking Style */

.booking-content-wrapper{
    display: flex;
    flex-direction: row;
    gap: 100px 100px;
    align-items: center;
}

.booking-process-heading{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    text-align: start;
}

.booking-process-heading h2{
    max-width: 80%;
}

.booking-highlight-container{
    display: flex;
    flex-direction: column;
    gap: 50px 50px;
    width: 40%;
}

.booking-benefit-container{
    width: 56%;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    justify-content: center;
}

.booking-content-container{
    display: flex;
    flex-direction: column;
    gap: 50px 50px;
    justify-content: flex-start;
    width: 55%;
}

.booking-tag-container{
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: flex-end;
    width: 79%;
}

.booking-tag{
    padding: 0px 15px 0px 15px;
    border: 1px solid var(--accent-color-2);
    border-radius: 100px 100px 100px 100px;
    color: var(--accent-color);
    font-weight: 400;
}

.booking-form-wrapper{
    display: flex;
    flex-direction: row;
    gap: 100px 100px;
}

.booking-form-detail{
    width: 33%;
    display: flex;
    flex-direction: column;
    gap: 50px 50px;
}

/* 22. Contact Cta Styles */

.contact-cta-content{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    width: 58%;
    position: relative;
    z-index: 2;
}

.contact-info-heading{
    color: var(--text-color);
}
/* 23. Underline Styles */

.underline-primary-accent{
    border-bottom: 1px solid var(--primary);
}

.underline-pricing{
    border-bottom: 1px solid var(--accent-color);
}

.underline-text-color{
    border-bottom: 1px solid var(--text-color);
}

.underline-accent-5{
    border-bottom: 1px solid var(--accent-color-5);
}

/* 24. Swiper Styles */

.swiperpartner {
    margin: 0px -150px 0px -150px;
    display: flex;
    justify-content: center;
}

/* 25. Custom List Styles */

.check-list{
    list-style: none;
    padding-left: 0;
}

.check-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1em;
    margin-bottom: 15px;
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3em;
}

.check-list li:last-child{
    margin-bottom: 0px;
}

.check-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color-2);
    margin-right: 0.5em;
    font-size: 20px;
    display: inline-block;
}

.check-list.alternative-list li{
    color: var(--accent-color);
}
.check-list.alternative-list li::before{
    color: var(--accent-color);
}

.pricing-benefit-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.pricing-benefit-list li {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1em;
    margin-bottom: 15px;
    color: var(--secondary);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3em;
}

.pricing-benefit-list li:last-child {
    margin-bottom: 0px;
}

.pricing-benefit-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color-2);
    margin-right: 0.6em;
    font-size: 21px;
    display: inline-block;
}

.chevron-circle-list{
    list-style: none;
    padding-left: 0;
}

.chevron-circle-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1em;
    margin-bottom: 15px;
    color: var(--secondary);
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3em;
}

.chevron-circle-list a{
    color: var(--secondary);
    font-family: var(--font-family-1);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3em;
}

.chevron-circle-list li:last-child{
    margin-bottom: 0px;
}

.chevron-circle-list li::before {
    content: "\f138";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color-2);
    margin-right: 0.5em;
    font-size: 1.125rem;
    display: inline-block;
}

.chevron-list{
    list-style: none;
    padding-left: 0;
}

.chevron-list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    gap: 1em;
    margin-bottom: 15px;
    color: var(--secondary);
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3em;
}

.chevron-list a{
    color: var(--secondary);
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3em;
}

.chevron-list li:last-child{
    margin-bottom: 0px;
}

.chevron-list li::before {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color-2);
    margin-right: 0.5em;
    font-size: 16px;
    display: inline-block;
}

/* 26. Service Styles */

.service-title-container{
    padding-bottom: 30px;
    border-bottom: 3px solid var(--accent-color-2);
}

.service-detail-container{
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 10px 10px 10px 10px;
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
    z-index: 0;
}

.service-detail-container::before{
    content: '';
    position: absolute;
    background-color: transparent;
    opacity: 0.5;
    background-image: linear-gradient(180deg, var(--accent-transparent-white) 0%, var(--accent-color) 100%);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.service-detail{
    padding: 20px 20px 20px 20px;
    border-radius: 20px 20px 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    justify-content: space-between;
    background-color: var(--accent-transparent-white-2);
    position: relative;
    z-index: 0;
}

.service-detail::before{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    background-color: inherit;
    border-radius: inherit;
    z-index: -1;
}

/* 27. Academy Section */

.academy-title-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 50px 50px;
    border-bottom: 3px solid var(--primary);
    position: relative;
}

.academy-heading-container{
    width: 47%;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    text-align: start;
    padding-bottom: 50px;
    order: 1;
}

.academy-title-image{
    width: 22%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-self: flex-end;
    overflow: hidden;
    order: 2;
}

.academy-title-image img{
    margin: 0px 0px -52px 0px
}

.academy-title-cta{
    width: 28%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: start;
    padding-bottom: 50px;
    gap: 20px 20px;
    order: 3;
}

.academy-video-section{
    width: 100%;
    display: flex;
    justify-content: center;
}

.academy-video-container{
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 20px 20px 20px 20px;
}

.academy-video-wrapper {
    position: relative;
    width: 120%;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 460px;
    background-color: var(--accent-color);
}

.academy-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translateX(-50%) scale(1.4);
    border: 0;
    border-radius: inherit;
    pointer-events: none;
}

.academy-video-wrapper .video-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: transparent;
}

.academy-benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.academy-benefit-list li {
    width: 100%;
    position: relative;
    padding-left: 2em;
    color: var(--secondary);
    padding-bottom: 20px;
    margin-bottom: 10px;
    
}

.academy-benefit-list li:last-child {
    margin-bottom: none;
}

.academy-benefit-list li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-color-2);
    position: absolute;
    left: 0;
    top: 0.1em;
    font-size: 1em;
    line-height: var(--line-height, 1.6);
}

.academy-stat{
    font-family: var(--font-family-1);
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2em;
    color: var(--accent-color-2);
}

.academy-stat-description{
    font-size: 16px;
    color: var(--secondary);
    margin-bottom: 0px;
    text-align: start;
}

/* 28. Tournament Styles */

.tournament-grid {
    display: grid;
    grid-template-columns: 0.32fr 0.68fr;
    gap: 27px;
}

.tournament-feature{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
}

.tournament-schedule{
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--secondary);
}

.tournament-cta-title{
    display: flex;
    flex-direction: column;
    gap: 10px 10px;
    padding: 30px 0px 30px 30px;
    text-align: start;
}

.tournament-cta-image{
    width: 100% !important;
    height: 351px !important;
    object-fit: cover;
    object-position: center;
    border-radius: 17px 17px 17px 17px;
}

.tournament-event-list{
    display: flex;
    flex-direction: column;
    gap: 27px 27px;
}

.tournament-tag-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 76%;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 10px 10px 0px 10px;
    z-index: 2;
}

.tournament-tag{
    padding: 0px 15px 0px 15px;
    border: 1px solid var(--accent-color-2);
    border-radius: 100px 100px 100px 100px;
    color: var(--secondary);
    font-family: var(--font-family-2);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
}

.other-tournament-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 27px 27px;
}

/* 29. Partnership Styles */

.partnership-container{
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 50px 0px 50px 0px;
    border-radius: 20px 20px 20px 20px;
    background-color: var(--accent-color-2);
    position: relative;
    overflow: hidden;
}

/* 30. Community Styles */

.community-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
}

.community-cta{
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    width: 51%;
    top: 0;
    right: 0;
    background-color: var(--accent-color-2);
    border-radius: 0px 20px 0px 20px;
    padding: 40px 40px 40px 40px;
}

.community-icon{
    background-color: var(--accent-color-2);
    width: 80px;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 17px 17px 17px 17px;

}

/* 31. Membership CTA Styles */

.membership-cta-description{
    font-weight: var(--font-family-1);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--secondary);
    text-align: left;
    display: flex;
    flex-direction: column;
    padding: 30px 30px 30px 30px;
}

.cta-tag-container{
    position: absolute;
    top: 0;
    right: 0;
    width: 44%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
    padding: 30px 30px 0px 0px;
    z-index: 2;
}

.cta-tag{
    padding: 0px 15px 0px 15px;
    border: 1px solid var(--accent-color-2);
    border-radius: 100px 100px 100px 100px;
    color: var(--secondary);
    font-family: var(--font-family-2);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
}

.cta-benefit-title{
    padding: 0px 0px 30px 30px;
    position: absolute;
    width: 63%;
    left: 0;
    bottom: 0;
}

/* 32. Testimonial Styles */

.testimonial-content-container{
    display: flex;
    flex-direction: row;
    gap: 20px 20px;
    justify-content: space-between;
    overflow: hidden;
}

.testimonial-side{
    width: 18%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: 50px 50px;
    justify-content: space-between;
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.testimonial-side .testimonial-avatar{
    border: 5px solid var(--accent-color-4);
}

.testimonial-side .testimonial-avatar--lg {
    width: 40%;
    height: 40%;
}

.testimonial-side .testimonial-avatar--md {
    width: 30%;
    height: 30%;
}

.testimonial-side .testimonial-avatar--sm {
    width: 25%;
    height: 25%;
}

.testimonial-slider-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.testimonial-slider-wrapper {
    display: flex;
    transition: transform 0.6s ease-in-out;
    will-change: transform;
}

.testimonial-slide {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;          
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.testimonial-slide.active {
    opacity: 1;
    transform: scale(1);
}

.testimonial-quote{
    font-family: var(--font-family-1);
    font-size: 21px;
    font-weight: 400;
    line-height: 1.8em;
    text-align: center;
    color: var(--accent-color);
    padding-bottom: 80px;
}

.testimonial-name{
    color: var(--accent-color);
    font-family: var(--font-family-1);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3em;
}

.testimonial-designation{
    font-size: 16px;
    line-height: 1.8em;
}

.testimonial-nav-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: center;
    gap: 10px;
}

.testimonial-nav-btn.active{
    width: 10px;
    background-color: var(--accent-color-2);
}

.testimonial-nav-btn{
    width: 20px;
    height: 10px;
    border: none;
    border-radius: 10px 10px 10px 10px;
    background-color: var(--accent-color-7);
}


/* 33. Team Styles */

.team-content-wrapper{
    display: flex;
    flex-direction: row;
    gap: 100px 100px;
    height: 100%;
    align-items: start;
}

.team-card-container{
    width: 55%;
}

.team-title-wrapper{
    width: 40%;
    height: 100%;
    position: sticky;
    top: 20em;
    z-index: 100;
}

.team-title-container{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    text-align: start;
    justify-content: start;
    align-items: start;
}


/* 34. FAQ & Accordion Styles */

.faq-title-container{
    position: sticky;
    top: 20px;
    z-index: 10;
    text-align: start;
    justify-content: start;
    align-items: start;
}

.accordion .accordion-item {
    background-color: transparent                                                   ;
    border: none;
    outline: none;
}

.accordion .accordion-item .accordion-body{
    font-family: var(--font-family-2);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4em;
    background-color: transparent;
    padding: 17px 0px 0px 0px;
}

.accordion .accordion-button {
    background-color: var(--accent-transparent-white);
    color: var(--primary);
    border: none;
    border-bottom: 1px solid var(--accent-color-5);
    font-family: var(--font-family-1);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3em;
    padding: 25px 0px 25px 0px;
    box-shadow: none;
}

.accordion-button::after{
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23000000" class="bi bi-plus" viewBox="0 0 16 16"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em 1em;
    padding: 0.7em;
    border-radius: 50%;
    background-color: var(--accent-color-2);
    width: 1.5em;
    height: 1.5em;
    content: "";
}
.accordion-button:not(.collapsed)::after{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23000000" class="bi bi-dash" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"/></svg>');
    background-color: var(--accent-color-6);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1em 1em;
}

/* 35. Pricing Styles */

.price-container{
    display: flex;
    flex-direction: row;
    gap: 5px 5px;
}

/* 36. Blog Styles */

.blog-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0px 30px 30px 30px;
    z-index: 2;
}

.meta-data{
    color: var(--accent-color-2);
}

.post-meta-data{
    color: var(--primary);
}

.recent-post-title{
    font-family: var(--font-family-2);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8em;
    color: var(--secondary);
    transition: all 300ms;
}

.recent-post-title:hover{
    color: var(--accent-color-2);
}

.blog-post-body{
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    padding: 20px 20px 20px 20px;
    background-color: var(--accent-color-3);
}

.blog-title{
    font-family: var(--font-family-1);
    color: var(--primary);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3em;
}

.blog-tag-container{
    display: flex;
    flex-direction: row;
    gap: 5px;
    flex-wrap: wrap;
}

.blog-tag{
    padding: 0px 15px 0px 15px;
    border: 1px solid var(--accent-color-2);
    border-radius: 100px 100px 100px 100px;
    color: var(--secondary);
    font-family: var(--font-family-2);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
}


.recent-post-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.recent-post-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.recent-post-thumb {
    flex: 0 0 100px;
}

.recent-post-thumb img {
    width: 100%;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
}

.recent-post-body {
    max-width: 60%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.recent-post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.post-content-wrapper{
    display: flex;
    flex-direction: row;
    gap: 50px 50px;
}

.post-main-content{
    width: 66%;
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
}

.post-sidebar-wrapper{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 50px 50px;
}

/* 37. Maps Style */

.maps{
    max-width: 100%;
    width: 100%;
    height: 400px;
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
}

/* 38. Video Button Styles */

.request-loader {
    position: relative;
    width: 60px;
    min-height: 60px;
    border-radius: 50% !important;
    border: none;
    background-color: var(--accent-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent-color-2);
    border: 1px solid var(--accent-color-2);
    font-size: 24px;
    aspect-ratio: 1/1;
    transition: all 300ms ease-in-out;
    z-index: 10;
    isolation: isolate;
}

.request-loader:hover {
    color: var(--accent-color);
    background-color: var(--accent-color-2);
}

.request-loader::after,
.request-loader::before {
    opacity: 0.2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    color: var(--accent-color-2);
    border: 4px solid currentColor;
    border-radius: 50%;
    animation-name: ripple;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.65, 0, .34, 1);
    z-index: -1;
}

.request-loader::after {
    animation-delay: 0.5s;
    animation-duration: 3s;
}

.request-loader::before {
    animation-delay: 0.2s;
    animation-duration: 3s;
}

.test{
    display: flex;
    flex-direction: row;
    gap: 100px;
    overflow: clip;
    align-items: center;
}

/* 39. Video Modal Styles */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-transparent-black-2);
    z-index: 10;
    justify-content: center;
    align-items: center;
}

.my-modal {
    background-color: var(--secondary);
    padding: 0;
    border-radius: none;
    position: relative;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
}

.my-modal iframe {
    aspect-ratio: 16/9;
    width: 100%;
    height: 80vh;
}

.my-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: var(--font-size-3xl);
    cursor: pointer;
    font-weight: bold;
    color: var(--accent-color-2);
}

.btn-close {
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: var(--accent-color-2);
    padding: 16px 16px 16px 16px;
    opacity: 1;
    z-index: 21;
}

/* 40. Animate Styles */

.animate-box{
    opacity: 1;
}

.animated{
    animation-duration: var(--animation-normal);
}

.animated-delay-fast{
    animation-duration: var(--animation-fast);
}

.animated-delay-slow{
    animation-duration: var(--animation-slow);
}

/* 41. 404 Style */

.heading-notfound{
    color: var(--accent-color-2);
    font-family: var(--font-family-1);
    font-size: 200px;
    font-weight: 700;
    line-height: 0.8em;
}

.description-notfound{
    color: var(--secondary);
    margin: 0px auto 20px auto;
    max-width: 59%;
}

/* 42. Custom Spacing */

.gspace-0 { 
    gap: 0px 0px; 
}
.gspace-1 { 
    gap: 10px 10px; 
}
.gspace-2 { 
    gap: 20px 20px; 
}
.gspace-3 { 
    gap: 30px 30px; 
}
.gspace-4 { 
    gap: 40px 40px; 
}
.gspace-5 { 
    gap: 50px 50px; 
}
.gspace-100{
    gap: 100px 100px;
}
.gspace-x-0 { 
    column-gap: 0px; 
}
.gspace-x-1 { 
    column-gap: 10px; 
}
.gspace-x-2 { 
    column-gap: 20px; 
}
.gspace-x-3 { 
    column-gap: 30px; 
}
.gspace-x-4 { 
    column-gap: 40px; 
}
.gspace-x-5 { 
    column-gap: 50px; 
}
.gspace-x-100{
    column-gap: 100px;
}

.gspace-y-0 { 
    row-gap: 0px; 
}
.gspace-y-1 { 
    row-gap: 10px; 
}
.gspace-y-2 { 
    row-gap: 20px; 
}
.gspace-y-3 { 
    row-gap: 30px; 
}
.gspace-y-4 { 
    row-gap: 40px; 
}
.gspace-y-5 { 
    row-gap: 50px; 
}
.gspace-y-100{
    row-gap: 100%;
}

/* Grid spacing (row-gap & column-gap) */

.grid-spacer-0{
    --bs-gutter-x: 0px;
    --bs-gutter-y: 0px;
}

.grid-spacer-1{
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.grid-spacer-2{
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.grid-spacer-3{
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
}

.grid-spacer-4{
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}

.grid-spacer-5{
    --bs-gutter-x: 50px;
    --bs-gutter-y: 50px;
}

.grid-spacer-100{
    --bs-gutter-x: 100px;
    --bs-gutter-y: 100px;
}

/* Grid spacing (column-gap) */

.grid-spacer-x-0 {
    --bs-gutter-x: 0px;
}
.grid-spacer-x-1 {
    --bs-gutter-x: 10px;
}
.grid-spacer-x-2 {
    --bs-gutter-x: 20px;
}
.grid-spacer-x-3 {
    --bs-gutter-x: 30px;
}
.grid-spacer-x-4 {
    --bs-gutter-x: 40px;
}
.grid-spacer-x-5 {
    --bs-gutter-x: 50px;
}
.grid-spacer-x-100{
    --bs-gutter-x: 100px
}

/* Grid spacing (row-gap) */

.grid-spacer-y-0 {
    --bs-gutter-y: 0px;
}
.grid-spacer-y-1 {
    --bs-gutter-y: 10px;
}
.grid-spacer-y-2 {
    --bs-gutter-y: 20px;
}
.grid-spacer-y-3 {
    --bs-gutter-y: 30px;
}
.grid-spacer-y-4 {
    --bs-gutter-y: 40px;
}
.grid-spacer-y-5 {
    --bs-gutter-y: 50px;
}
.grid-spacer-y-100{
    --bg-gutter-y: 100px
}

/* 43. Footer Styles */

.footer-content-container{
    display: flex;
    flex-direction: column;
    gap: 120px 0px;
}

.footer-logo-container{
    display: inline-flex;
    justify-content: start;
    align-items: center;
}

.footer-logo-container img{
    width: 220px;
    max-width: 100%;
    height: auto;
}

.footer-social-icon{
    display: flex;
    flex-direction: row;
    gap: 10px 10px;
    align-items: center;
}

/* ================= 43. MODERN PREMIUM FOOTER STYLES ================= */

footer {
    background: #0f172a !important;
    color: #f8fafc !important;
    position: relative;
    margin-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-family: var(--font-family-1);
    clear: both;
}

.footer-wrapper {
    width: 100%;
    background: #0f172a !important;
}

.footer-container {
    max-width: 1340px;
    margin: 0 auto;
    padding: 70px 24px 30px;
}

.footer-content-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1.3fr 1.5fr;
    gap: 40px;
}

@media (max-width: 991px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }
}

@media (max-width: 575px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.footer-profile {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footer-logo-container {
    display: inline-flex;
    align-items: center;
}

.footer-logo-container img {
    max-height: 52px;
    width: auto;
    object-fit: contain;
}

.footer-brand-title {
    color: #ffffff !important;
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    font-family: var(--font-family-1);
}

.footer-brand-desc, .footer-profile p {
    color: #94a3b8 !important;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

.footer-social-icon {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.footer-social-icon .social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 16px;
}

.footer-social-icon .social-icon:hover {
    background: linear-gradient(135deg, #8343F2 0%, #653CE3 100%) !important;
    border-color: #8343F2 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(131, 67, 242, 0.35);
}

.footer-col h4, .footer-quick-links h4, .footer-contact h4 {
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 10px;
    font-family: var(--font-family-1);
}

.footer-col h4::after, .footer-quick-links h4::after, .footer-contact h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 32px;
    height: 3px;
    background: linear-gradient(135deg, #8343F2 0%, #653CE3 100%);
    border-radius: 2px;
}

.footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-link-list li a {
    color: #94a3b8 !important;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.25s ease;
    display: inline-block;
}

.footer-link-list li a:hover {
    color: #ffffff !important;
    padding-left: 6px;
}

.footer-contact-items {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #94a3b8 !important;
    font-size: 14px;
    line-height: 1.5;
}

.footer-contact-item i {
    color: #8343F2 !important;
    font-size: 16px;
    margin-top: 3px;
    flex-shrink: 0;
}

.footer-newsletter-box {
    margin-top: 20px;
    padding: 16px;
    background: rgba(131, 67, 242, 0.08);
    border: 1px solid rgba(131, 67, 242, 0.2);
    border-radius: 12px;
}

.footer-newsletter-box h6 {
    color: #e2e8f0 !important;
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
    font-weight: 500;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 26px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.footer-bottom p {
    color: #64748b !important;
    font-size: 13px;
    margin: 0;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-legal-links a {
    color: #94a3b8 !important;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-legal-links a:hover {
    color: #8343F2 !important;
}

.footer-legal-links span {
    color: #475569;
}

/* ================= PURPLE GRADIENT ACCENT OVERRIDES ================= */
.btn-accent {
    background: linear-gradient(135deg, #8343F2 0%, #653CE3 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(131, 67, 242, 0.28) !important;
    transition: all 300ms ease !important;
}

.btn-accent:hover {
    background: linear-gradient(135deg, #7432E6 0%, #5527D6 100%) !important;
    box-shadow: 0 8px 25px rgba(131, 67, 242, 0.42) !important;
    transform: translateY(-2px);
}

.btn-accent .btn-title {
    color: #ffffff !important;
    font-weight: 700;
}

.btn-accent .icon-circle {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
    color: #8343F2 !important;
}

.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item.active {
    background: linear-gradient(135deg, #8343F2 0%, #653CE3 100%) !important;
    color: #ffffff !important;
}

.sub-heading i.accent-color-2,
.sub-heading .accent-color-2,
.sub-heading-title i {
    color: #8343F2 !important;
}

.sub-heading {
    border-color: rgba(131, 67, 242, 0.3) !important;
}

.sub-heading-title {
    color: #8343F2 !important;
}

.activity-stat-card .activity-stat-icon i,
.activity-stat-card .activity-stat-number {
    color: #8343F2 !important;
}

.activity-card:hover {
    border-color: #8343F2 !important;
    box-shadow: 0 12px 30px rgba(131, 67, 242, 0.15) !important;
}

.activity-tag {
    background: rgba(131, 67, 242, 0.12) !important;
    color: #8343F2 !important;
}

/* ================= 3-STEP ENROLLMENT FORM STYLES ================= */
#enrollment {
    padding: 80px 20px 90px;
    background: #ffffff;
    font-family: var(--font-family-1);
}

.enrollment-card {
    max-width: 1040px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(226, 232, 240, 0.8);
    overflow: hidden;
}

.form-steps-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: #0f172a;
}

.step-tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 16px;
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}

.step-tab-btn .st-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    transition: all 0.3s ease;
}

.step-tab-btn.active {
    background: linear-gradient(135deg, #8343F2 0%, #653CE3 100%);
    color: #ffffff;
}

.step-tab-btn.active .st-num {
    background: #ffffff;
    color: #653CE3;
}

.form-body {
    padding: 40px 48px;
    background: #ffffff;
}

@media (max-width: 768px) {
    .form-body {
        padding: 28px 20px;
    }
    .form-steps-bar {
        grid-template-columns: 1fr;
    }
}

.step-pane {
    display: none;
}

.step-pane.active {
    display: block;
    animation: fadeInStep 0.35s ease;
}

@keyframes fadeInStep {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.sp-title {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 6px;
}

.sp-sub {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 30px;
}

.form-section-hdr {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f1f5f9;
}

.fg {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 20px;
}

.fgg.full {
    grid-column: 1 / -1;
}

@media (max-width: 768px) {
    .fg {
        grid-template-columns: 1fr;
    }
}

.fgg {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fgg label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}

.fgg input, .fgg select {
    padding: 12px 16px;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: #0f172a;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: #ffffff;
}

.fgg input:focus, .fgg select:focus {
    border-color: #8343F2;
    box-shadow: 0 0 0 3px rgba(131, 67, 242, 0.15);
}

.declaration-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 22px;
    margin-top: 10px;
    font-size: 14px;
    color: #334155;
}

.decl-list {
    margin: 10px 0 16px 20px;
    color: #475569;
    font-size: 13.5px;
}

.decl-list li {
    margin-bottom: 6px;
}

.decl-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    color: #0f172a;
    font-size: 13.5px;
}

.decl-check input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: #8343F2;
}

.fnav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.btn-fn {
    padding: 14px 28px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
}

.btn-back {
    background: #f1f5f9;
    color: #475569;
}

.btn-back:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.btn-next, .btn-pay {
    background: linear-gradient(135deg, #8343F2 0%, #653CE3 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(131, 67, 242, 0.3);
}

.btn-next:hover, .btn-pay:hover {
    background: linear-gradient(135deg, #7432E6 0%, #5527D6 100%) !important;
    box-shadow: 0 10px 25px rgba(131, 67, 242, 0.45);
    transform: translateY(-2px);
}

/* STEP 2 ACTIVITIES */
.promo-notice {
    background: linear-gradient(135deg, rgba(131, 67, 242, 0.08) 0%, rgba(101, 60, 227, 0.12) 100%);
    border: 1.5px solid rgba(131, 67, 242, 0.25);
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.promo-icon {
    font-size: 28px;
}

.promo-title {
    font-size: 15px;
    font-weight: 700;
    color: #653CE3;
    margin-bottom: 4px;
}

.promo-text {
    font-size: 13.5px;
    color: #334155;
    line-height: 1.5;
}

.discount-success {
    background: #dcfce7;
    border: 1.5px solid #86efac;
    border-radius: 12px;
    padding: 14px 18px;
    color: #14532d;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 20px;
}

.act-section-hdr {
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
}

.act-select-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 991px) {
    .act-select-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 575px) {
    .act-select-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.act-sel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 2px solid #e2e8f0;
    border-radius: 14px;
    padding: 18px 10px 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    background: #ffffff;
    text-align: center;
    position: relative;
}

.act-sel-card input[type="checkbox"] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    accent-color: #8343F2;
    cursor: pointer;
}

.act-sel-card:has(input:checked) {
    border-color: #8343F2;
    background: #faf5ff;
    box-shadow: 0 4px 16px rgba(131, 67, 242, 0.15);
}

.act-sel-card:hover {
    border-color: #8343F2;
}

.act-sel-icon {
    font-size: 30px;
}

.act-sel-name {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}

.act-sel-card:has(input:checked) .act-sel-name {
    color: #8343F2;
}

.level-panel {
    display: none;
    margin-top: 16px;
    margin-bottom: 16px;
    background: #faf8ff;
    border: 1.5px solid #ede9fe;
    border-left: 4px solid #8343F2;
    border-radius: 14px;
    padding: 20px 22px;
}

.level-panel.show {
    display: block;
    animation: fadeInStep 0.25s ease;
}

.lp-header {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.lp-subtext {
    font-size: 12.5px;
    color: #64748b;
    margin-bottom: 14px;
}

.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.level-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: #334155;
    transition: all 0.2s;
}

.level-opt:has(input:checked) {
    border-color: #8343F2;
    background: #f5f3ff;
    color: #653CE3;
}

.level-opt input[type="radio"] {
    accent-color: #8343F2;
    margin-right: 8px;
}

.lv-fee {
    font-weight: 700;
    color: #8343F2;
}

.price-summ {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-left: 4px solid #8343F2;
    border-radius: 14px;
    padding: 22px;
    margin-top: 24px;
    display: none;
}

.price-summ.show {
    display: block;
}

.pr-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #334155;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}

.pr-row.disc-row {
    color: #16a34a;
    font-weight: 700;
}

.pr-row.total {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    border-top: 2px dashed #cbd5e1;
    border-bottom: none;
    margin-top: 10px;
    padding-top: 12px;
}

.pr-row.total .pv {
    color: #8343F2;
}

/* STEP 3 REVIEW */
.rev-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 26px;
    margin-bottom: 24px;
}

.rev-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
}

@media (max-width: 768px) {
    .rev-grid {
        grid-template-columns: 1fr;
    }
}

.rv-lbl {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 4px;
}

.rv-val {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.secure-note {
    font-size: 13px;
    color: #64748b;
    background: #f1f5f9;
    padding: 12px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.success-state {
    display: none;
    text-align: center;
    padding: 50px 20px;
}

.success-state.active {
    display: block;
}

.suc-icon {
    font-size: 56px;
    margin-bottom: 18px;
}

/* ================= COMPLETE PRICING TABS STYLES ================= */
#pricing {
    padding: 85px 20px 75px;
    background: #faf8ff;
    position: relative;
}

.pricing-tabs {
    display: inline-flex;
    gap: 6px;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 50px;
    padding: 6px 8px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06);
    flex-wrap: wrap;
    justify-content: center;
}

.ptab {
    padding: 10px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: transparent;
    color: #64748b;
    font-family: inherit;
    transition: all 0.25s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ptab:hover:not(.active) {
    color: #0f172a;
    background: #f1f5f9;
}

.ptab.active {
    background: linear-gradient(135deg, #8343F2 0%, #653CE3 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(131, 67, 242, 0.35);
    font-weight: 700;
}

.price-panel {
    display: none;
    animation: fadeInPanel 0.3s ease;
}

.price-panel.active {
    display: block;
}

@keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.pac {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 20px;
    padding: 32px 24px 28px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
}

.pac:hover {
    box-shadow: 0 16px 36px rgba(131, 67, 242, 0.12);
    transform: translateY(-5px);
    border-color: #8343F2;
}

.pac.featured {
    border-color: #8343F2 !important;
    box-shadow: 0 12px 36px rgba(131, 67, 242, 0.16);
    background: #ffffff;
}

.pac-ribbon {
    position: absolute;
    top: 16px;
    right: -28px;
    background: linear-gradient(135deg, #8343F2 0%, #653CE3 100%);
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 5px 36px;
    transform: rotate(45deg);
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(131, 67, 242, 0.3);
}

.pac-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.pac-name {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
}

.pac-plan-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 10px;
}

.pac-orig {
    font-size: 13.5px;
    text-decoration: line-through;
    color: #94a3b8;
    min-height: 20px;
}

.pac-price {
    font-size: 42px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
    margin: 6px 0;
}

.pac-price .cur {
    font-size: 22px;
    vertical-align: super;
}

.pac-price .mo {
    font-size: 15px;
    color: #64748b;
    font-weight: 500;
}

.pac.featured .pac-price {
    color: #8343F2;
}

.pac-save {
    display: inline-block;
    background: #dcfce7;
    color: #15803d;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 20px;
    margin-top: 8px;
    min-height: 24px;
}

.pac-features {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    text-align: left;
    font-size: 13.5px;
}

.pac-features li {
    padding: 7px 0;
    color: #475569;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    border-bottom: 1px solid #f8fafc;
}

.pac-features li::before {
    content: '✓';
    color: #8343F2;
    font-weight: 800;
    flex-shrink: 0;
}

.pac-btn {
    display: block;
    margin-top: 22px;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    width: 100%;
    letter-spacing: 0.5px;
    font-family: inherit;
    text-transform: uppercase;
    background: linear-gradient(135deg, #8343F2 0%, #653CE3 100%);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(131, 67, 242, 0.28);
}

.pac-btn:hover {
    background: linear-gradient(135deg, #7432E6 0%, #5527D6 100%);
    box-shadow: 0 8px 25px rgba(131, 67, 242, 0.42);
    transform: translateY(-2px);
    color: #ffffff;
}

.pac:not(.featured) .pac-btn {
    background: #0f172a;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
}

.pac:not(.featured) .pac-btn:hover {
    background: #1e293b;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.3);
}

/* Pickleball cards */
.pb-card, .sp-card {
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    background: #ffffff;
    transition: all 0.25s ease;
}

.pb-card:hover, .sp-card:hover {
    box-shadow: 0 10px 30px rgba(131, 67, 242, 0.1);
    transform: translateY(-4px);
    border-color: #8343F2;
}

.pb-card.best, .sp-card.weekend {
    border-color: #8343F2;
    background: #faf5ff;
}

.pb-label {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    margin-bottom: 8px;
}

.pb-price, .sp-price {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
}

.pb-price.orange, .sp-price.orange {
    color: #8343F2;
}

.pb-note {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}

/* Birthday Premium Card */
.bday-premium {
    background: linear-gradient(135deg, #fdf8ff 0%, #f6efff 100%);
    border: 1.5px solid #d8b4fe;
    border-radius: 20px;
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
}

.bday-premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f3e8ff;
    border: 1px solid #d8b4fe;
    border-radius: 50px;
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #7e22ce;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.bday-premium-title {
    font-size: 24px;
    font-weight: 800;
    color: #581c87;
    margin-bottom: 6px;
}

.bday-premium-sub {
    font-size: 13.5px;
    color: #64748b;
    margin-bottom: 20px;
    line-height: 1.6;
}

.bday-premium-price-box {
    background: #ffffff;
    border: 1.5px solid #e9d5ff;
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.bday-premium-fee {
    font-size: 38px;
    font-weight: 800;
    color: #7e22ce;
    line-height: 1;
}

.bday-premium-fee-label {
    font-size: 11.5px;
    color: #64748b;
    font-weight: 600;
    margin-top: 4px;
}

.bday-premium-timing {
    background: #581c87;
    color: #ffffff;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 700;
    text-align: center;
}

.bday-premium-timing span {
    display: block;
    font-size: 10px;
    font-weight: 500;
    opacity: 0.8;
    margin-bottom: 2px;
}

.bday-services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.bday-service-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #e9d5ff;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: #6b21a8;
}

.bday-note-box {
    background: #fefce8;
    border: 1px solid #fef08a;
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 16px;
    font-size: 13px;
    color: #854d0e;
    line-height: 1.6;
}

/* ==========================================================================
   ENRICHING ACTIVITIES LUXURY IMAGE CARDS (Adelux Style)
   ========================================================================== */
.activity-filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 28px auto 42px;
}
.activity-filter-btn {
    padding: 10px 22px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #475569;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.activity-filter-btn:hover {
    border-color: #8343F2;
    color: #8343F2;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(131, 67, 242, 0.12);
}
.activity-filter-btn.active {
    background: linear-gradient(135deg, #8343F2 0%, #653CE3 100%);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(131, 67, 242, 0.3);
}

.activity-lux-card {
    background: #ffffff;
    border: 1.5px solid #edf2f7;
    border-radius: 22px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    position: relative;
}
.activity-lux-card:hover {
    transform: translateY(-8px);
    border-color: #8343F2;
    box-shadow: 0 20px 40px rgba(131, 67, 242, 0.16);
}
.activity-lux-card .card-img-wrap {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f1f5f9;
}
.activity-lux-card .card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.activity-lux-card:hover .card-img-wrap img {
    transform: scale(1.08);
}
.activity-lux-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(131, 67, 242, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 5px 13px;
    border-radius: 20px;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.activity-lux-age {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(15, 23, 42, 0.85);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 11px;
    border-radius: 20px;
    z-index: 2;
}
.activity-lux-body {
    padding: 24px 22px 22px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
}
.activity-lux-body h3, .activity-lux-body h4 {
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 10px;
    line-height: 1.35;
}
.activity-lux-body p {
    font-size: 13.5px;
    color: #64748b;
    line-height: 1.55;
    margin-bottom: 16px;
}
.activity-lux-highlights {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
.activity-lux-highlights li {
    font-size: 13px;
    color: #334155;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.activity-lux-highlights li i {
    color: #8343F2;
    font-size: 11px;
    background: rgba(131, 67, 242, 0.12);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.activity-lux-footer {
    margin-top: auto;
}
.activity-lux-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #8343F2 0%, #653CE3 100%);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
    border: none;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}
.activity-lux-btn:hover {
    background: linear-gradient(135deg, #7432E6 0%, #5527D6 100%);
    box-shadow: 0 8px 22px rgba(131, 67, 242, 0.35);
    transform: translateY(-2px);
    color: #ffffff !important;
}
.activity-lux-btn .icon-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.activity-lux-btn:hover .icon-circle {
    transform: translateX(4px);
    background: #ffffff;
    color: #8343F2;
}


/* Choose-us tiles now carry a Font Awesome glyph instead of a PNG icon. */
.chooseus-icon i {
    margin: auto;
    font-size: 34px;
    line-height: 1;
    color: #ffffff;
}
.card-chooseus.bg-accent-color .chooseus-icon {
    background-color: #ffffff;
}
.card-chooseus.bg-accent-color .chooseus-icon i {
    color: #8343F2;
}

/* Accent choose-us tiles sit on the dark brand colour. */
.card-chooseus.bg-accent-color h4,
.card-chooseus.bg-accent-color p {
    color: #ffffff;
}
.card-chooseus.bg-accent-color .icon-circle {
    border-color: rgba(255, 255, 255, 0.55);
}
.card-chooseus.bg-accent-color .icon-circle i {
    color: #ffffff;
}

/* ---------------------------------------------------------------------
   Contrast fixes.
   .text-light-gray was used on five dark bands but never defined, so the
   text inherited the band's own colour and disappeared.
   --------------------------------------------------------------------- */
.text-light-gray {
    color: #cbd5e1;
}
.text-light-gray.fw-bold {
    color: #e2e8f0;
}

/* [hidden] must win over the layout utilities (d-flex sets display:flex). */
[hidden] {
    display: none !important;
}

/* The navbar sits on a white header, so its links cannot be white too.
   White is kept only where the bar genuinely sits over a dark banner. */
.nav-link {
    color: #1e293b;
}
.navbar-nav .nav-link {
    color: #1e293b;
}
.section-banner-inner .nav-link,
.navbar-dark .nav-link,
header.over-hero .nav-link {
    color: #ffffff;
}

/* .check-list li hard-codes the dark brand colour, which beat .text-white on
   the parent and left these lists unreadable on dark bands. */
.text-white .check-list li,
.check-list.text-white li,
.text-white .check-list li strong,
.check-list.text-white li strong {
    color: inherit;
}

/* Sat on an almost-white card in its own colour. */
.chooseus-img-description {
    color: #475569;
}

/* =====================================================================
   Mobile-first layout pass.

   .hero-container had no horizontal padding, so Bootstrap's negative row
   margins pushed content past the viewport edge and the phone could be
   scrolled sideways. A side gutter fixes that and gives the page room to
   breathe; everything else here is spacing, tap size and media safety.
   ===================================================================== */

.hero-container,
.navbar-container,
.rb-wrap {
    padding-left: 16px;
    padding-right: 16px;
    width: 100%;
}
@media (min-width: 576px) {
    .hero-container,
    .navbar-container,
    .rb-wrap { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 992px) {
    .hero-container,
    .navbar-container,
    .rb-wrap { padding-left: 32px; padding-right: 32px; }
}

/* Nothing should be able to widen the page. */
html, body { max-width: 100%; }
img, svg, video, iframe, canvas { max-width: 100%; height: auto; }
img[width][height] { height: auto; }

/* Comfortable touch targets on a phone. */
@media (max-width: 767.98px) {
    .btn,
    .nav-link,
    .dropdown-item,
    .slot-btn,
    .chip-group > * ,
    .step-tab-btn {
        min-height: 44px;
    }
    .btn,
    .step-tab-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .navbar-nav .nav-link {
        display: flex;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Leaner vertical rhythm: the desktop spacing is too tall on a phone. */
    .section { padding-top: 48px; padding-bottom: 48px; }
    .section.py-5 { padding-top: 40px !important; padding-bottom: 40px !important; }
    .rb-section { padding: 48px 0; }
    .rb-stats-ribbon { padding: 32px 0; margin-top: 32px; }
    .grid-spacer-2, .grid-spacer-4 { --bs-gutter-y: 16px; }

    /* Headings were sized for a desktop column. */
    h1 { font-size: clamp(26px, 7.5vw, 34px); line-height: 1.2; }
    h2 { font-size: clamp(22px, 6vw, 28px); line-height: 1.25; }
    h3 { font-size: clamp(19px, 5vw, 23px); }

    /* Cards and grids go single column cleanly. */
    .rb-pricing-grid,
    .rb-kits-grid,
    .rb-skills-grid,
    .rb-gallery-grid,
    .rb-roadmap-cards { grid-template-columns: 1fr; gap: 16px; }
    .rb-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }

    /* The partner / note banners are a three-column grid on desktop. */
    .rb-partner-banner { grid-template-columns: 1fr; gap: 16px; padding: 24px; text-align: left; }
    .rb-partner-logo-box { width: 56px; height: 56px; font-size: 24px; }
}

/* Long words and URLs should wrap rather than stretch the page. */
h1, h2, h3, h4, p, li, td, th, .rb-sec-h2, .rb-price-name {
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------
   About block on a phone.
   The wrapper stayed a two-column row, the image kept a fixed 750px
   height, and the caption card sat on top of the photo with dark text --
   unreadable. On small screens it becomes a single column with the
   caption below the picture.
   --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .about-wrapper {
        flex-direction: column;
        gap: 28px;
        align-items: stretch;
    }
    .about-image-container { width: 100%; }
    .about-img img {
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border-radius: 18px;
    }
    .card-about-detail {
        position: static;
        margin-top: -28px;
        margin-inline: 16px;
        background: #ffffff;
        border-radius: 16px;
        padding: 18px 20px;
        box-shadow: 0 12px 30px rgba(15, 23, 42, .12);
    }
    .card-about-detail h4 {
        font-size: 15.5px;
        line-height: 1.45;
        color: #16103a;
        margin-bottom: 10px;
    }
    .card-about-detail .link-wrapper {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 700;
        color: #6D4AA8;
    }
}

/* The same picture block is used on the Why-Choose section. */
@media (max-width: 991.98px) {
    .chooseus-title-container { flex-direction: column; gap: 24px; }
    .whychoose-img img, .chooseus-img {
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        border-radius: 18px;
    }
}

/* Two CTAs side by side do not fit a phone; stack them full width so the
   labels stop colliding. */
@media (max-width: 575.98px) {
    .d-flex.flex-wrap.gap-3 > .btn,
    .rb-hero-actions > .btn,
    .rb-final-cta-btns > .btn,
    .rb-final-cta-btns > a.rb-btn-secondary,
    .rb-final-cta-btns > button.rb-btn-primary {
        width: 100%;
        justify-content: center;
    }
    .btn.request-loader .btn-title {
        white-space: normal;
        text-align: center;
        line-height: 1.3;
    }
}

/* ---------------------------------------------------------------------
   The testimonial band is a full-bleed photograph. Without a scrim the
   heading sat straight on a busy image and could not be read. A dark
   gradient over the photo fixes that and lets the white cards sit on it
   cleanly.
   --------------------------------------------------------------------- */
.testimonial-banner {
    position: relative;
    isolation: isolate;
    background-position: center center;
}
.testimonial-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(14, 10, 33, .78) 0%, rgba(14, 10, 33, .86) 100%);
}
.testimonial-banner h2,
.testimonial-banner .secondary-accent {
    color: #ffffff !important;
    text-shadow: none;
}
.testimonial-banner .sub-heading-title { color: #d9ccff !important; }
.testimonial-banner .sub-heading {
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
}
.testimonial-banner .badge.bg-light {
    background: rgba(255, 255, 255, .92) !important;
    color: #16103a !important;
    border-color: transparent !important;
}

/* =====================================================================
   Calmer home page.

   Three separate problems were making it feel heavy and look broken:
     - .gspace-5 puts a 50px gap on a Bootstrap .row. Two col-lg-6 are
       already 100% wide, so the gap forced the second column to wrap and
       images dropped below their text instead of sitting beside it.
     - --accent-color-8 (#C9C1C1) was used for body copy on white, which
       is about 1.9:1 and reads as "missing text".
     - Headings ran at weight 800-900 at large sizes, which is what makes
       the page feel shouty.
   ===================================================================== */

/* --- 1. a gap on a .row breaks its columns; use gutters instead --- */
.row.gspace-1, .row.gspace-2, .row.gspace-3, .row.gspace-4, .row.gspace-5 {
    gap: 0;
}
.row.gspace-5 { --bs-gutter-x: 48px; --bs-gutter-y: 40px; }
.row.gspace-4 { --bs-gutter-x: 40px; --bs-gutter-y: 32px; }
.row.gspace-3 { --bs-gutter-x: 32px; --bs-gutter-y: 28px; }
.row.gspace-2 { --bs-gutter-x: 24px; --bs-gutter-y: 24px; }
.row.gspace-1 { --bs-gutter-x: 16px; --bs-gutter-y: 16px; }

/* --- 2. muted copy has to stay readable --- */
:root { --accent-color-8: #5B6472; }
.accent-color-8 { color: #5B6472; }
/* on a dark band the same class should go light, not dark */
.bg-dark .accent-color-8,
.section-dark .accent-color-8,
.testimonial-banner .accent-color-8,
.banner-home-container .accent-color-8,
.rb-final-cta .accent-color-8 { color: #cbd5e1; }

/* --- 3. quieter headings --- */
h1, h2, h3,
.rb-sec-h2, .rb-hero-title {
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.22;
    color: #1a1f2e;
}
h4, h5, h6 { font-weight: 700; letter-spacing: -0.005em; }
h1 { font-size: clamp(30px, 4.2vw, 50px); }
h2 { font-size: clamp(25px, 3.1vw, 36px); }
h3 { font-size: clamp(21px, 2.3vw, 27px); }
p, li { line-height: 1.72; }
p { color: #4b5563; }

/* the hero headline carries the most weight, but not 900 */
.banner-home-container h1,
.section-banner-inner h1 { font-weight: 700; letter-spacing: -0.02em; }

/* --- 4. the caption card over the about photo was too solid --- */
.card-about-detail {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .12);
}
.card-about-detail h4 {
    color: #1a1f2e;
    font-weight: 700;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.5;
}
.card-about-detail .link-wrapper { color: #6D4AA8; font-weight: 700; }
@media (max-width: 991.98px) {
    /* below the photo on a phone, so it stays solid and readable */
    .card-about-detail { background: #ffffff; backdrop-filter: none; }
}

/* --- 5. the admissions call to action was a plain white box --- */
.card-contact-cta {
    background: linear-gradient(135deg, #f7f4ff 0%, #eef3ff 100%) !important;
    border: 1px solid #e3dcfa !important;
    box-shadow: 0 20px 50px rgba(109, 74, 168, .10);
}
.card-contact-cta h2 { color: #1a1f2e; margin-bottom: 14px; }
.card-contact-cta p { color: #4b5563; }
.card-contact-cta .badge.bg-white {
    background: #ffffff !important;
    color: #2a3142 !important;
    border: 1px solid #e3dcfa !important;
    font-weight: 600;
    font-size: 13px;
}
.card-contact-cta .sub-heading { background: rgba(109, 74, 168, .09); border-radius: 999px; }

/* --- 6. a little more air between home sections --- */
@media (min-width: 992px) {
    .section { padding-top: 78px; padding-bottom: 78px; }
}

/* The theme makes .card a flex row, so the admissions call to action laid its
   heading, copy, badges and buttons out side by side. It is a stacked, centred
   block. */
.card-contact-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 6px;
}
.card-contact-cta > .d-flex { width: 100%; }
.card-contact-cta .badge {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 8px 16px !important;
}
.card-contact-cta .btn { white-space: nowrap; }

/* My dark-band rule for .accent-color-8 also caught the quotes inside the
   white testimonial cards, turning them light-on-white. Cards win. */
.testimonial-banner .card .accent-color-8,
.testimonial-banner .card p,
.banner-home-container .card .accent-color-8 {
    color: #4b5563 !important;
}

/* The check-list label and its text are flex siblings; keep them on one line
   and aligned to the top so a wrapping label does not push the text down. */
.check-list li { align-items: flex-start; gap: .6em; }
.check-list li strong { flex: 0 0 auto; }

/* A decorative squiggle sat across the admissions card and cut through the
   heading and buttons. The card reads better without it. */
.card-contact-cta::before { display: none !important; }

/* ---------------------------------------------------------------------
   The home hero bar sits over a photograph, so its links have to be white
   there even though they are dark on the rest of the site. The nav was
   also wrapping "About Us" and "Contact Us" onto two lines.
   --------------------------------------------------------------------- */
.banner-home-container .nav-link,
.banner-home-container .navbar-nav .nav-link {
    color: #ffffff;
    text-shadow: 0 1px 10px rgba(10, 8, 24, .45);
}
.banner-home-container .nav-link:hover,
.banner-home-container .nav-link.active {
    color: #e9ddff !important;
}
@media (min-width: 1200px) {
    /* nowrap only where the bar is a single horizontal row; on a phone the
       menu is a stacked drawer and nowrap pushes it past the screen edge */
    .navbar-nav .nav-link {
        white-space: nowrap;
        padding-left: 11px;
        padding-right: 11px;
        font-size: 15.5px;
    }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .navbar-nav .nav-link { padding-left: 8px; padding-right: 8px; font-size: 14.5px; }
}

/* A scrim keeps the headline readable whatever photograph is showing. */
.banner-home-container { position: relative; }
.banner-home-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: none;
}
.banner-home-container > * { position: relative; z-index: 1; }

/* "Sign In" was breaking across two lines in the header. */
.navbar-cta-container .btn,
.navbar-cta-container a,
.navbar-cta-container button { white-space: nowrap; }
.navbar-cta-container .btn-title { white-space: nowrap; }

/* The Happy Club buttons are injected into the header; keep their labels on
   one line so "Sign In" does not stack. */
.hp-nav-widget,
.hp-nav-widget * { white-space: nowrap; }
.hp-nav-btn, .hp-nav-signin, .hp-nav-signup {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.hp-login-btn, .hp-signup-btn, .hp-points-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

/* Final guard: nothing may make the page scroll sideways on a phone. */
@media (max-width: 1199.98px) {
    .navbar-nav .nav-link { white-space: normal; }
}
@media (max-width: 575.98px) {
    .hp-nav-widget, .hp-login-btn, .hp-signup-btn { max-width: 100%; }
}

/* Mobile overflow: the desktop row gutters (48px of negative margin) and the
   Happy Club header widget were both wider than a phone screen. */
@media (max-width: 767.98px) {
    .row.gspace-5, .row.gspace-4, .row.gspace-3 {
        --bs-gutter-x: 16px;
        --bs-gutter-y: 24px;
    }
    .row.gspace-2, .row.gspace-1 { --bs-gutter-x: 12px; --bs-gutter-y: 16px; }

    .hp-nav-widget {
        flex-wrap: wrap;
        max-width: 100%;
        gap: 6px;
    }
    .hp-login-btn, .hp-signup-btn, .hp-points-pill {
        font-size: 12.5px;
        padding: 7px 10px;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------
   The hero photograph is shown at full strength (no tint, no scrim), so
   the text over it carries its own shadow instead. A shadow darkens only
   the glyphs, which keeps the picture clear while the words stay legible
   whatever slide is on screen.
   --------------------------------------------------------------------- */
.banner-home-container h1,
.banner-home-container .banner-home-top,
.banner-home-container .sub-heading-title,
.banner-home-container .nav-link {
    text-shadow: 0 2px 14px rgba(8, 6, 20, .72), 0 1px 3px rgba(8, 6, 20, .55);
}
.banner-home-container h1 {
    text-shadow: 0 3px 20px rgba(8, 6, 20, .80), 0 1px 4px rgba(8, 6, 20, .60);
}
/* The glass panels over the photo stay readable on their own. */
.banner-home-container .card,
.banner-home-container .banner-home-cta,
.banner-home-container .banner-home-community {
    background-color: rgba(14, 11, 32, .55);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .14);
}
.banner-home-container .card *,
.banner-home-container .banner-home-cta * { text-shadow: none; }

/* The kicker pill and the right-hand panel sit straight on the photograph,
   so they carry their own panel rather than relying on a page-wide scrim. */
/* Only the kicker pill gets a panel. .banner-home-top wraps the whole
   headline, so filling it put a grey slab behind the text. */
.banner-home-container .banner-home-top {
    background: none;
    border: none;
    padding: 0;
}
.banner-home-container .sub-heading {
    /* real glass: light and translucent with a blur, not a grey fill */
    background: linear-gradient(135deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .10) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .34);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 20px rgba(8, 6, 20, .22);
    border-radius: 999px;
    padding: 8px 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
}
.banner-home-container .sub-heading-title { color: #e4d9ff !important; }

/* Soften the panels over the photo: rounded, padded, no hard rectangle. */
.banner-home-container .card,
.banner-home-container .banner-home-cta,
.banner-home-container .banner-home-community {
    border-radius: 20px;
    padding: 20px 22px;
}
.banner-home-container .banner-home-cta h4,
.banner-home-container .banner-home-cta h3,
.banner-home-container .card h4 { color: #ffffff; }
.banner-home-container .banner-home-cta p,
.banner-home-container .card p { color: #e2e0ef; }

/* Glass on the hero panels too, instead of a flat dark fill. */
.banner-home-container .card,
.banner-home-container .banner-home-cta,
.banner-home-container .banner-home-community {
    background: linear-gradient(135deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .07) 100%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .30);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .40), 0 10px 30px rgba(8, 6, 20, .24);
}
.banner-home-container .sub-heading-title { color: #ffffff !important; }

/* Text inside the glass hero panels: the photo shows through, so everything
   in them has to be light. */
.banner-home-container .card,
.banner-home-container .card *,
.banner-home-container .banner-home-cta,
.banner-home-container .banner-home-cta *,
.banner-home-container .banner-home-community,
.banner-home-container .banner-home-community * {
    color: #ffffff;
}
.banner-home-container .card p,
.banner-home-container .banner-home-cta p,
.banner-home-container .banner-home-community p,
.banner-home-container .card span:not(.btn-title):not(.icon-circle) {
    color: #ece9f8;
}
/* the counters and accents keep their colour but get enough weight to read */
.banner-home-container .accent-color-2,
.banner-home-container h5.accent-color-2 {
    color: #d7c4ff !important;
    text-shadow: 0 1px 8px rgba(8, 6, 20, .5);
}
/* buttons keep their own fill */
.banner-home-container .btn-accent,
.banner-home-container .btn-accent * { color: #ffffff; }
.banner-home-container .btn-outline-accent,
.banner-home-container .btn-outline-accent * { color: #ffffff; border-color: rgba(255,255,255,.6); }

/* ---------------------------------------------------------------------
   .request-loader is a 60px circular play button meant to hold an icon
   only. One instance carries a text label ("SmartSteps Program Tour"),
   which spilled out of the circle. Where there is a label, it becomes a
   normal pill button instead.
   --------------------------------------------------------------------- */
.request-loader:has(.btn-title) {
    width: auto;
    min-height: 48px;
    aspect-ratio: auto;
    border-radius: 999px !important;
    padding: 12px 22px;
    font-size: 15px;
    gap: 8px;
    background: #ffffff;
    color: #6D4AA8;
    border: 1.5px solid #d9cdf5;
    font-weight: 700;
    white-space: nowrap;
}
.request-loader:has(.btn-title):hover {
    background: #6D4AA8;
    color: #ffffff;
    border-color: #6D4AA8;
}
.request-loader:has(.btn-title)::before,
.request-loader:has(.btn-title)::after { display: none; }
.request-loader .btn-title { white-space: nowrap; font-size: 15px; }

/* Legal pages: a single readable column. */
.legal-doc h2 {
    font-size: clamp(19px, 2vw, 23px);
    font-weight: 700;
    color: #1a1f2e;
    margin: 34px 0 10px;
}
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p { color: #4b5563; line-height: 1.78; margin-bottom: 12px; }
.legal-doc ul { margin: 0 0 16px; padding-left: 20px; list-style: disc; }
.legal-doc li { color: #4b5563; line-height: 1.72; margin-bottom: 7px; }
.legal-doc a { color: #6D4AA8; font-weight: 600; }
.legal-updated {
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid #e6e8ef;
    font-size: 13.5px;
    color: #6b7280;
}

/* ---------------------------------------------------------------------
   Brand logo.
   The artwork is a wide lockup (about 3.8:1) whose "AFTER SCHOOL PROGRAM"
   line is dark navy. On the light header it sits directly on the page; on
   the dark footer it needs a white panel, or that line disappears.
   --------------------------------------------------------------------- */
.navbar-brand img,
.logo-container img,
.sidebar .logo img {
    height: 54px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
@media (max-width: 991.98px) {
    .navbar-brand img,
    .logo-container img,
    .sidebar .logo img { height: 42px; }
}
@media (max-width: 575.98px) {
    .navbar-brand img,
    .logo-container img { height: 36px; }
}

/* The hero header sits over a photograph: a soft white plate keeps the
   logo legible without washing the picture out. */
.banner-home-container .navbar-brand,
.section-banner-inner .navbar-brand {
    background: rgba(255, 255, 255, .92);
    border-radius: 12px;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
}

/* Footer is #0f172a, so the logo gets its own white card. */
.footer-logo-container {
    background: #ffffff;
    border-radius: 12px;
    padding: 10px 14px;
    display: inline-block;
    max-width: 320px;
}
.footer-logo-container img {
    max-height: 48px !important;
    width: auto;
    display: block;
}

/* The brand anchor is a flex item, so it was shrinking and squashing the
   wide logo to a sliver. Let it keep its natural aspect ratio. */
.logo-container,
.navbar-brand {
    flex: 0 0 auto;
}
.navbar-brand img,
.logo-container img {
    width: auto !important;
    max-width: none !important;
    height: 54px;
    flex: 0 0 auto;
}
@media (max-width: 1199.98px) {
    .navbar-brand img, .logo-container img { height: 46px; }
}
@media (max-width: 991.98px) {
    .navbar-brand img, .logo-container img { height: 40px; }
}
@media (max-width: 575.98px) {
    .navbar-brand img, .logo-container img { height: 32px; }
}
.sidebar .logo img { height: 36px; width: auto; max-width: none; }

/* ---------------------------------------------------------------------
   The header bar is a sibling of the hero, not a child, so the earlier
   selector never matched. The brand gets its own white plate everywhere:
   it disappears into a light header and keeps the dark part of the logo
   readable where the bar sits over a photograph.
   --------------------------------------------------------------------- */
.navbar-container .navbar-brand,
.navbar-nav-container .navbar-brand {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* The lockup carries four lines of type, so it needs height to be read. */
.navbar-brand img,
.logo-container img {
    height: 66px;
}
@media (max-width: 1399.98px) { .navbar-brand img, .logo-container img { height: 58px; } }
@media (max-width: 1199.98px) { .navbar-brand img, .logo-container img { height: 50px; } }
@media (max-width: 991.98px)  { .navbar-brand img, .logo-container img { height: 44px; } }
@media (max-width: 575.98px)  {
    .navbar-brand img, .logo-container img { height: 34px; }
    .navbar-container .navbar-brand { padding: 5px 9px; border-radius: 9px; }
}

/* ---------------------------------------------------------------------
   The logo artwork is transparent now, so it needs no plate on a light
   header. A plate stays only where the dark half of the lockup would
   otherwise vanish: the home header (which sits over a photograph) and
   the dark footer.
   --------------------------------------------------------------------- */
/* Every page's header bar sits over a banner photograph, so the plate stays
   on all of them. The artwork itself is transparent, so this is a soft
   rounded panel rather than the logo's own hard white rectangle. */
.navbar-container .navbar-brand,
.navbar-nav-container .navbar-brand {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
}
@media (max-width: 575.98px) {
    .navbar-container .navbar-brand { padding: 5px 9px; border-radius: 9px; }
}

/* =========================================================================
   About Page: Modern Spacing, Facilities Showcase & Refined Visual Rhythm
   ========================================================================= */

.about-banner-wrapper {
    padding: 30px 24px 0 24px;
}

.about-welcome-section {
    padding: 90px 20px 80px 20px;
}

.about-welcome-section .about-wrapper {
    gap: 70px;
    align-items: center;
}

.about-facilities-section {
    padding: 85px 20px;
    background: linear-gradient(180deg, #F8FAFC 0%, #F5F3FF 50%, #FFFFFF 100%);
    border-radius: 28px;
    margin: 20px 24px;
}

.facility-card {
    background: #FFFFFF;
    border-radius: 20px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.facility-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 16px 32px rgba(131, 67, 242, 0.12);
    border-color: rgba(131, 67, 242, 0.35);
}

.facility-card-img-wrap {
    position: relative;
    height: 210px;
    overflow: hidden;
}

.facility-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.facility-card:hover .facility-card-img-wrap img {
    transform: scale(1.06);
}

.facility-pill {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background: rgba(15, 23, 42, 0.72);
    color: #FFFFFF;
}

.facility-card-body {
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.facility-card-body h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 8px;
}

.facility-card-body p {
    font-size: 13.5px;
    line-height: 1.55;
    color: #64748B;
    margin-bottom: 16px;
    flex: 1;
}

.facility-card-body a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-color-2);
    text-decoration: none;
    transition: gap 0.2s ease, color 0.2s ease;
}

.facility-card-body a:hover {
    color: var(--primary);
    gap: 10px;
}

.about-chooseus-section {
    padding: 85px 20px;
}

.about-chooseus-section .chooseus-title-container {
    gap: 36px;
}

.about-cta-section {
    padding: 80px 20px 85px 20px;
}

.about-testimonial-section {
    padding: 95px 20px 105px 20px;
}

@media (max-width: 991.98px) {
    .about-welcome-section { padding: 60px 16px 50px 16px; }
    .about-facilities-section { padding: 60px 16px; margin: 15px 12px; }
    .about-chooseus-section { padding: 60px 16px; }
    .about-cta-section { padding: 60px 16px; }
    .about-testimonial-section { padding: 65px 16px; }
    .about-welcome-section .about-wrapper { gap: 40px; }
}

/* =========================================================================
   NAVBAR & HEADER CONTAINMENT FIX (Book Now & Links always inside navbar)
   ========================================================================= */
.navbar-container {
    padding: 38px 20px 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.navbar-container .hero-container {
    max-width: 1420px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.navbar {
    background-color: var(--accent-transparent-white-2) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-radius: 100px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    padding: 6px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.navbar-nav-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 8px !important;
    box-sizing: border-box !important;
}

.navbar .logo-container {
    flex: 0 0 auto !important;
    width: auto !important;
    display: flex !important;
    align-items: center !important;
}

.navbar-brand img,
.logo-container img {
    height: 46px !important;
    max-height: 46px !important;
    width: auto !important;
    max-width: none !important;
}

.navbar .nav-link-container {
    flex: 1 1 auto !important;
    width: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 0 !important;
}

.navbar-nav {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    margin: 0 auto !important;
}

.navbar-nav .nav-link {
    padding: 6px 9px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

@media (min-width: 992px) {
    .navbar-cta-container {
        flex: 0 0 auto !important;
        width: auto !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        margin-left: auto !important;
    }
}

@media (max-width: 991.98px) {
    .navbar-cta-container {
        display: none !important;
    }
}

.navbar-cta-container .btn {
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.navbar-cta-container .btn .icon-circle {
    width: 26px !important;
    height: 26px !important;
    margin-left: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Happy club widget inside navbar */
.hp-nav-widget {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.hp-nav-widget a, .hp-nav-widget button {
    white-space: nowrap !important;
}

.hp-nav-btn {
    padding: 6px 12px !important;
    font-size: 12.5px !important;
}

@media (max-width: 1399.98px) {
    .navbar-nav .nav-link {
        padding: 5px 7px !important;
        font-size: 13px !important;
    }
    .navbar-cta-container .btn {
        padding: 8px 14px !important;
        font-size: 12.5px !important;
    }
}

@media (max-width: 1199.98px) {
    .navbar-nav .nav-link {
        padding: 4px 6px !important;
        font-size: 12px !important;
    }
    .navbar-brand img, .logo-container img {
        height: 38px !important;
    }
}

/* =========================================================================
   BOOKING PAGE: READY TO NURTURE SECTION OVERLAPPING & LAYOUT FIX
   ========================================================================= */
.booking-contact-cta-wrapper {
    padding: 70px 0 !important;
    background: transparent !important;
}

.booking-contact-cta-wrapper .card-contact-cta {
    background: linear-gradient(135deg, #f7f4ff 0%, #eef3ff 100%) !important;
    border: 1px solid #e3dcfa !important;
    box-shadow: 0 15px 40px rgba(109, 74, 168, 0.08) !important;
    border-radius: 24px !important;
    padding: 50px 60px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
    overflow: hidden !important;
    gap: 40px !important;
    margin: 40px 0 !important;
}

.booking-contact-cta-wrapper .card-contact-cta::before {
    display: none !important;
}

.contact-cta-content {
    flex: 1 1 58% !important;
    max-width: 640px !important;
    position: relative !important;
    z-index: 2 !important;
}

.contact-cta-content h2 {
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #1a1f2e !important;
    margin-bottom: 16px !important;
    line-height: 1.25 !important;
}

.contact-cta-content p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #4b5563 !important;
    margin-bottom: 24px !important;
}

.contact-cta-image {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    flex: 0 0 38% !important;
    max-width: 420px !important;
    height: 320px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
    z-index: 2 !important;
}

.contact-cta-image .image-wrapper {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.contact-cta-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 20px !important;
    margin: 0 !important;
    display: block !important;
}

@media (max-width: 991.98px) {
    .booking-contact-cta-wrapper .card-contact-cta {
        flex-direction: column !important;
        padding: 36px 24px !important;
        gap: 24px !important;
        margin: 25px 0 !important;
    }
    .contact-cta-content {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    .contact-cta-content h2 {
        font-size: 26px !important;
    }
    .contact-cta-image {
        position: relative !important;
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 240px !important;
    }
}

/* =========================================================================
   ADMISSIONS CTA SECTION (SCREENSHOT 2 FIX - NO SQUASHING, BUTTONS INSIDE)
   ========================================================================= */
.home-admissions-card,
.card-contact-cta:not(.booking-contact-cta-wrapper .card-contact-cta) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    max-width: 1100px !important;
    margin: 40px auto !important;
    padding: 50px 36px !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, #f7f4ff 0%, #eef3ff 100%) !important;
    border: 2px solid #e3dcfa !important;
    box-shadow: 0 15px 40px rgba(109, 74, 168, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.home-admissions-card::before,
.card-contact-cta:not(.booking-contact-cta-wrapper .card-contact-cta)::before {
    display: none !important;
}

.home-admissions-card h2,
.card-contact-cta:not(.booking-contact-cta-wrapper .card-contact-cta) h2 {
    font-size: clamp(26px, 3.2vw, 38px) !important;
    font-weight: 800 !important;
    color: #1a1f2e !important;
    margin: 12px auto 14px auto !important;
    max-width: 820px !important;
    line-height: 1.25 !important;
}

.home-admissions-card p,
.card-contact-cta:not(.booking-contact-cta-wrapper .card-contact-cta) p {
    font-size: 17px !important;
    line-height: 1.6 !important;
    color: #4b5563 !important;
    max-width: 680px !important;
    margin: 0 auto 22px auto !important;
    width: 100% !important;
}

.home-admissions-card .d-flex.justify-content-center,
.card-contact-cta:not(.booking-contact-cta-wrapper .card-contact-cta) .d-flex.justify-content-center {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

.home-admissions-card .d-flex.flex-wrap,
.card-contact-cta:not(.booking-contact-cta-wrapper .card-contact-cta) .d-flex.flex-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    width: 100% !important;
}

.home-admissions-card .btn,
.card-contact-cta:not(.booking-contact-cta-wrapper .card-contact-cta) .btn {
    white-space: nowrap !important;
}

/* =========================================================================
   HERO SECTION GLASSMORPHISM (DARKER TINT, OPTICITY INCREASED, HEAVILY BLURRED)
   ========================================================================= */
.banner-home-container .card,
.banner-home-container .banner-home-cta,
.banner-home-container .banner-home-community {
    background: linear-gradient(135deg, rgba(16, 12, 34, 0.78) 0%, rgba(10, 8, 22, 0.88) 100%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

.banner-home-container .sub-heading {
    background: linear-gradient(135deg, rgba(20, 15, 42, 0.75) 0%, rgba(14, 10, 30, 0.85) 100%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
    backdrop-filter: blur(20px) saturate(160%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 6px 20px rgba(8, 6, 20, 0.35) !important;
}

/* =========================================================================
   PARENT REVIEWS / TESTIMONIALS (SCREENSHOT 1 FIX - LAYER REMOVED, TEXT CRISP)
   ========================================================================= */
.testimonial-banner::before {
    background: linear-gradient(180deg, rgba(14, 10, 33, 0.35) 0%, rgba(14, 10, 33, 0.45) 100%) !important;
}

.card-testimonial {
    background: rgba(255, 255, 255, 0.94) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 28px !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
    padding: 48px 44px !important;
}

.card-testimonial::before {
    display: none !important;
}

.testimonial-quote {
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.75em !important;
    text-align: center !important;
    color: #1e1b4b !important;
    padding-bottom: 24px !important;
    text-shadow: none !important;
}

.testimonial-name {
    color: #6d28d9 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

.testimonial-designation {
    color: #64748b !important;
    font-size: 15px !important;
    line-height: 1.6em !important;
    font-weight: 500 !important;
    text-shadow: none !important;
}

.testimonial-banner .card p,
.testimonial-banner .card .accent-color-8 {
    color: #1e1b4b !important;
}

.testimonial-btn {
    background: #8343f2 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(131, 67, 242, 0.4) !important;
}

.testimonial-btn:hover {
    background: #6d28d9 !important;
    transform: scale(1.08) !important;
}

/* =========================================================================
   WHY CHOOSE US: 8 COMPACT SQUARE CARDS (ABOUT US PAGE)
   ========================================================================= */
.whychoose-square-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
}

.chooseus-square-card {
    aspect-ratio: 1 / 1 !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1.5px solid rgba(131, 67, 242, 0.12) !important;
    box-shadow: 0 4px 18px rgba(109, 74, 168, 0.06) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 16px 12px !important;
    gap: 12px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-sizing: border-box !important;
}

.chooseus-square-card:hover {
    transform: translateY(-5px) !important;
    border-color: #C77DFF !important;
    box-shadow: 0 14px 28px rgba(199, 125, 255, 0.28) !important;
    background: rgba(199, 125, 255, 0.05) !important;
}

.chooseus-square-card .square-icon-wrap {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: rgba(131, 67, 242, 0.09) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #8343F2 !important;
    font-size: 21px !important;
    transition: all 0.3s !important;
}

.chooseus-square-card:hover .square-icon-wrap {
    background: #8343F2 !important;
    color: #ffffff !important;
    transform: scale(1.1) !important;
}

.chooseus-square-card .square-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1e1b4b !important;
    display: block !important;
}

@media (max-width: 991.98px) {
    .whychoose-square-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

/* =========================================================================
   BUTTON HOVER EFFECT WITH 10% #C77DFF ACROSS FULL WEB
   ========================================================================= */
.btn, .btn-accent, .btn-outline-accent, .btn-secondary, .chooseus-btn, .tournament-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn:hover,
.btn-accent:hover {
    box-shadow: 0 8px 25px rgba(199, 125, 255, 0.50) !important;
    transform: translateY(-2px) !important;
    filter: brightness(1.05) !important;
}

.btn-outline-accent:hover {
    background-color: rgba(199, 125, 255, 0.10) !important;
    border-color: #C77DFF !important;
    color: #8343f2 !important;
    box-shadow: 0 6px 20px rgba(199, 125, 255, 0.25) !important;
    transform: translateY(-2px) !important;
}

/* Showcases, events, and celebrations cards hover effects with #C77DFF */
.activity-lux-card,
.facility-card,
.card-tournament,
.card-blog {
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.activity-lux-card:hover,
.facility-card:hover,
.card-tournament:hover,
.card-blog:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 36px rgba(199, 125, 255, 0.25) !important;
    border-color: #C77DFF !important;
}

/* =========================================================================
   EVENTS & TOURNAMENT SECTION BACKGROUND IMAGES & STYLES
   ========================================================================= */
.card-tournament.main-event {
    background-image: url('../images/site/vibrant-school-sports-courtyard.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    min-height: 580px !important;
    border-radius: 24px !important;
}

/* High-Contrast Tournament Badges */
.tournament-tag {
    background: rgba(18, 12, 38, 0.90) !important;
    color: #ffffff !important;
    border: 1px solid rgba(199, 125, 255, 0.6) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.3px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    transition: all 0.25s ease !important;
}

.tournament-tag:hover {
    background: rgba(114, 9, 183, 0.95) !important;
    color: #ffffff !important;
    border-color: #C77DFF !important;
}

/* Main Event Card (Shraddha Smartsteps Open) */
.card-tournament.main-event {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 24px !important;
}

.card-tournament.main-event::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(16, 12, 34, 0.45) 0%, rgba(16, 12, 34, 0.15) 35%, rgba(16, 12, 34, 0.85) 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.card-tournament.main-event .tournament-tag-container {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    width: calc(100% - 40px) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    z-index: 3 !important;
}

.card-tournament.main-event .card-tournament-content {
    position: relative !important;
    z-index: 3 !important;
}

/* Junior Tournament Card */
.card-tournament.junior-padel-championship,
.card-tournament.junior-pickleball-championship {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    min-height: 380px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 20px !important;
    background-image: linear-gradient(180deg, rgba(16, 12, 34, 0.4) 0%, rgba(16, 12, 34, 0.8) 100%), url('../images/site/young-champions-on-the-pickleball-court.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.card-tournament.junior-padel-championship .tournament-tag-container,
.card-tournament.junior-pickleball-championship .tournament-tag-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    z-index: 3 !important;
}

.card-tournament.junior-padel-championship .card-tournament-content,
.card-tournament.junior-pickleball-championship .card-tournament-content {
    background: rgba(18, 12, 38, 0.82) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    padding: 16px 20px !important;
    z-index: 3 !important;
}

.card-tournament.junior-padel-championship .card-tournament-content h4,
.card-tournament.junior-pickleball-championship .card-tournament-content h4 {
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Community SmartSteps Night Card - perfectly contained, pristine layout */
.card-tournament.comunity-padel-night,
.card-tournament.comunity-pickleball-night {
    position: relative !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    min-height: 380px !important;
    background: #ffffff !important;
    border: 1px solid rgba(114, 9, 183, 0.15) !important;
    box-shadow: 0 10px 30px rgba(114, 9, 183, 0.08) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 20px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.card-tournament.comunity-padel-night:hover,
.card-tournament.comunity-pickleball-night:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(114, 9, 183, 0.14) !important;
}

.card-tournament.comunity-padel-night::before,
.card-tournament.comunity-pickleball-night::before {
    display: none !important;
}

.card-tournament.comunity-padel-night .tournament-tag-container,
.card-tournament.comunity-pickleball-night .tournament-tag-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    padding: 0 0 12px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    z-index: 3 !important;
}

.card-tournament.comunity-padel-night .highlight-image,
.card-tournament.comunity-pickleball-night .highlight-image {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: 190px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
    z-index: 2 !important;
}

.card-tournament.comunity-padel-night .highlight-image img,
.card-tournament.comunity-pickleball-night .highlight-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 14px !important;
    max-height: none !important;
    display: block !important;
}

.card-tournament.comunity-padel-night .card-tournament-content,
.card-tournament.comunity-pickleball-night .card-tournament-content {
    background: #f8f6fc !important;
    border: 1px solid rgba(114, 9, 183, 0.12) !important;
    border-radius: 14px !important;
    padding: 16px 20px !important;
    margin-top: 14px !important;
    z-index: 3 !important;
}

.card-tournament.comunity-padel-night .card-tournament-content::before,
.card-tournament.comunity-pickleball-night .card-tournament-content::before {
    display: none !important;
}

.card-tournament.comunity-padel-night .card-tournament-content h4,
.card-tournament.comunity-pickleball-night .card-tournament-content h4 {
    color: #1e1b4b !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    margin: 0 !important;
}

.banner-inner-event {
    background-image: url('../images/hero/hero-1-court.webp') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* =========================================================================
   COMPREHENSIVE MOBILE OPTIMIZATION (Prevent Overflow & Smooth Layouts)
   ========================================================================= */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

@media (max-width: 991.98px) {
    .navbar-container {
        padding: 15px 20px 0 20px !important;
    }
    .hero-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .section {
        overflow-x: hidden !important;
    }
}

@media (max-width: 767.98px) {
    .whychoose-square-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .other-tournament-container {
        grid-template-columns: 1fr !important;
    }
    .tournament-grid {
        display: flex !important;
        flex-direction: column !important;
    }
    .card-tournament.comunity-padel-night .highlight-image,
    .card-tournament.comunity-pickleball-night .highlight-image {
        height: 160px !important;
    }
    .testimonial-side {
        display: none !important;
    }
    .card-testimonial {
        width: 100% !important;
        margin: 0 !important;
    }
    .tournament-tag {
        font-size: 11.5px !important;
        padding: 4px 10px !important;
    }
    .hero-glass-stats {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .bk-tt-day {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

@media (max-width: 480px) {
    .whychoose-square-grid {
        grid-template-columns: 1fr !important;
    }
    .whychoose-square-card {
        padding: 16px 14px !important;
        min-height: auto !important;
    }
    .logo-container img, .navbar-brand img {
        max-height: 42px !important;
    }
}

/* === MOBILE-PASS-20261029 === */

/* =========================================================================
   MOBILE OPTIMISATION — phones and small tablets
   Loaded last so it settles anything the desktop rules set with !important.
   ========================================================================= */

/* ---- nothing may push the page sideways ---- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

@media (max-width: 991.98px) {

    /* ------------------------------------------------ the header bar ---- */

    /* The navbar is a pill on desktop. Open on a phone it grew into a tall
       translucent blob with the logo floating over it, so below XL it becomes
       an ordinary bar with a solid panel that drops beneath it. */
    .navbar-container {
        padding: calc(22px + env(safe-area-inset-top, 0px)) 12px 0 12px !important;
    }

    .navbar {
        border-radius: 20px !important;
        padding: 8px 12px !important;
        background-color: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        box-shadow: 0 6px 24px rgba(15, 23, 42, 0.12) !important;
    }

    .navbar-nav-container {
        flex-wrap: wrap !important;
        row-gap: 0 !important;
    }

    .navbar .logo-container {
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .navbar-brand img,
    .logo-container img {
        height: 40px !important;
        max-height: 40px !important;
    }

    /* the hamburger: a real 44px tap target, pinned to the right */
    .navbar .nav-btn {
        flex: 0 0 auto !important;
        order: 2 !important;
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
    }

    /* the menu itself drops onto its own row, full width, below the bar */
    .navbar .nav-link-container {
        order: 3 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        display: block !important;
    }

    .navbar .navbar-collapse {
        width: 100%;
    }

    .navbar .navbar-collapse.show,
    .navbar .navbar-collapse.collapsing {
        margin-top: 10px;
        border-top: 1px solid rgba(15, 23, 42, 0.08);
        padding-top: 10px;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .navbar .navbar-nav {
        display: block !important;
        width: 100%;
        margin: 0 !important;
    }

    .navbar .navbar-nav .nav-item {
        width: 100%;
    }

    .navbar .navbar-nav .nav-link {
        display: block !important;
        width: 100%;
        padding: 12px 6px !important;
        font-size: 15.5px !important;
        color: #0f172a !important;
        border-radius: 10px;
    }

    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-link.active {
        background: rgba(131, 67, 242, 0.08);
    }

    /* submenus open inline instead of floating off the edge */
    .navbar .navbar-nav .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        border: 0 !important;
        box-shadow: none !important;
        margin: 0 0 4px 0 !important;
        padding: 2px 0 6px 12px !important;
        background: transparent !important;
        transform: none !important;
    }

    .navbar .navbar-nav .dropdown-item {
        padding: 10px 8px !important;
        font-size: 14.5px !important;
        white-space: normal !important;
        border-radius: 8px;
    }

    /* The desktop Book Now button is hidden on phones, so bring it back
       inside the open menu rather than leaving mobile with no call to action. */
    .navbar:has(.navbar-collapse.show) .navbar-cta-container,
    .navbar:has(.navbar-collapse.collapsing) .navbar-cta-container {
        display: flex !important;
        order: 4 !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        justify-content: center !important;
        padding: 4px 0 8px 0 !important;
    }

    .navbar:has(.navbar-collapse.show) .navbar-cta-container .btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 12px 18px !important;
        font-size: 14.5px !important;
    }

    /* ------------------------------------------------ page rhythm ---- */

    .hero-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
    }

    .section-wrapper,
    .section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .section-wrapper > .section {
        margin-left: 8px !important;
        margin-right: 8px !important;
        border-radius: 20px !important;
    }

    /* every multi-column block becomes a single column */
    .community-grid,
    .level-grid,
    .slot-grid,
    .tournament-grid,
    .act-select-grid,
    .rb-skills-grid,
    .rb-kits-grid,
    .rb-stats-grid,
    .rb-pricing-grid,
    .rb-gallery-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    /* two-up is fine for small stat tiles */
    .rb-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    /* Rows laid out side by side on desktop must be allowed to wrap, or a
       half-width column keeps its width and runs off the right edge. */
    .d-flex.flex-row:not(.keep-row),
    .d-flex:not(.flex-column):not(.keep-row) {
        flex-wrap: wrap !important;
    }

    /* Bootstrap's negative row gutters make a row wider than its parent,
       which clips content on a narrow screen. */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .row > [class*=col] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* nothing with a fixed width may outgrow the screen */
    .btn,
    .cta-image-container,
    .cta-image-container img,
    .card,
    .community-images {
        max-width: 100% !important;
    }

    /* ------------------------------------------------ type scale ---- */

    h1, .h1 { font-size: clamp(28px, 7.5vw, 40px) !important; line-height: 1.18 !important; }
    h2, .h2 { font-size: clamp(24px, 6.2vw, 32px) !important; line-height: 1.22 !important; }
    h3, .h3 { font-size: clamp(20px, 5.2vw, 26px) !important; line-height: 1.28 !important; }
    h4, .h4 { font-size: clamp(17px, 4.4vw, 21px) !important; line-height: 1.32 !important; }
    p, li  { font-size: 15.5px; line-height: 1.65; }

    h1, h2, h3, h4, p, li, a, span {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* ------------------------------------------------ media & tables ---- */

    img, video, iframe, canvas, svg {
        max-width: 100%;
        height: auto;
    }

    .table-responsive,
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ------------------------------------------------ touch targets ---- */

    .btn,
    button:not(.nav-btn),
    .nav-btn,
    input[type="submit"] {
        min-height: 44px;
    }

    /* iOS zooms the page when a field's text is under 16px */
    input, select, textarea {
        font-size: 16px !important;
    }

    /* a lone button on a phone reads better full width */
    .btn-block-mobile,
    .section .btn.w-100 {
        width: 100% !important;
    }
}

/* ---------------------------------------------------- small phones ---- */
@media (max-width: 575.98px) {

    .navbar-container { padding: calc(18px + env(safe-area-inset-top, 0px)) 10px 0 10px !important; }
    .navbar { padding: 7px 10px !important; border-radius: 18px !important; }

    .navbar-brand img,
    .logo-container img {
        height: 34px !important;
        max-height: 34px !important;
    }

    .hero-container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .section-wrapper > .section {
        margin-left: 6px !important;
        margin-right: 6px !important;
        border-radius: 16px !important;
    }

    .rb-stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* side-by-side pairs stack */
    .d-flex.flex-row:not(.keep-row) {
        flex-wrap: wrap;
    }
}

/* The drawer's own Book Now: the header button is hidden on phones. */
.sidebar .menu li.sidebar-book a {
    display: block;
    margin: 14px 0 4px 0;
    padding: 13px 18px;
    border-radius: 999px;
    background: #8343F2;
    color: #fff !important;
    font-weight: 700;
    text-align: center;
}