/*===============================================
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('../webfonts/font-family-fraunces.css');
@import url('../css/vendor/bootstrap.min.css');
@import url('../css/vendor/fontawesome.css');
@import url('../css/vendor/brands.css');
@import url('../css/vendor/solid.css');
@import url('../css/vendor/flatpickr.min.css');
@import url('../css/vendor/swiper-bundle.min.css');

/* 02. Global Site Settings */

/* D Padel Club — premium editorial green.
   Light variables (--accent-color-2/-4/-8) double as text on dark surfaces:
   they must stay light. Deep brand green enters via --brand-green (buttons). */
:root{
    --primary: #143527;
    --secondary: #FFFFFF;
    --text-color: #56655B;
    --accent-color: #0A2A1D;
    --accent-color-2: #A9C46A;
    --accent-color-3: #EFEAE0;
    --accent-color-4: #F2EDE1;
    --accent-color-5: #E3DCCC;
    --accent-color-6: #E4EBDB;
    --accent-color-7: #CBC5B8;
    --accent-color-8: #BFC8BC;
    --accent-color-9: #5C6B5414;
    --accent-transparent-white: #FFFFFF00;
    --accent-transparent-white-2: #FFFFFF14;
    --accent-transparent-black: #03150D66;
    --accent-transparent-black-2: #03150D8C;
    --brand-green: #004F33;
    --brand-green-dark: #0A3A26;
    --bg-page: #FAF8F2;
    --font-family-1: "Montserrat", sans-serif;
    --font-family-2: "Lato", sans-serif;
    --font-family-display: "Fraunces", Georgia, serif;
    --animation-normal: 1.25s;
    --animation-slow: 2.25s;
    --animation-fast: 0.75s;
}

/* 03. Keyframes Animation */

@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;
    background-color: var(--bg-page);
}

h1{
    font-family: var(--font-family-display);
    font-size: 90px;
    font-weight: 600;
    line-height: 1.1em;
    letter-spacing: -0.015em;
}

h2{
    font-family: var(--font-family-display);
    font-size: 64px;
    font-weight: 600;
    line-height: 1.2em;
    letter-spacing: -0.015em;
}

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: linear-gradient(180deg, #0A2A1DB3 0%, #0A2A1D4D 100%);
    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/photos/tall-forehand.jpg');
    min-height: 724px;
}

.card-tournament.junior-padel-championship{
    background-image: url('../images/photos/wide-academy.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;
}

.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: var(--accent-color);
    opacity: 0.3;
    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/photos/hero-5.jpg');
    background-image: image-set(url('../images/photos/hero-5.webp') type('image/webp'), url('../images/photos/hero-5.jpg') type('image/jpeg'));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.banner-inner-about{
    background-image: url('../images/photos/hero-4.jpg');
    background-image: image-set(url('../images/photos/hero-4.webp') type('image/webp'), url('../images/photos/hero-4.jpg') type('image/jpeg'));
}

.banner-inner-booking{
    background-image: url('../images/photos/blog-card-2.jpg');
}

.banner-inner-event{
    background-image: url('../images/photos/hero-1.jpg');
    background-image: image-set(url('../images/photos/hero-1.webp') type('image/webp'), url('../images/photos/hero-1.jpg') type('image/jpeg'));
}

.banner-inner-membership{
    background-image: url('../images/photos/hero-5.jpg');
    background-image: image-set(url('../images/photos/hero-5.webp') type('image/webp'), url('../images/photos/hero-5.jpg') type('image/jpeg'));
}

.banner-inner-service{
    background-image: url('../images/photos/post-hero.jpg');
}

.banner-inner-coaching{
    background-image: url('../images/photos/blog-card-4.jpg');
    background-position: bottom center;
}

.banner-inner-community{
    background-image: url('../images/photos/hero-2.jpg');
    background-image: image-set(url('../images/photos/hero-2.webp') type('image/webp'), url('../images/photos/hero-2.jpg') type('image/jpeg'));
}

.banner-inner-faq{
    background-image: url('../images/photos/blog-card-3.jpg');
}

.banner-inner-blog{
    background-image: url('../images/photos/hero-3.jpg');
    background-image: image-set(url('../images/photos/hero-3.webp') type('image/webp'), url('../images/photos/hero-3.jpg') type('image/jpeg'));
}

.banner-inner-single-post{
    background-image: url('../images/photos/hero-1.jpg');
    background-image: image-set(url('../images/photos/hero-1.webp') type('image/webp'), url('../images/photos/hero-1.jpg') type('image/jpeg'));
}

.banner-inner-contact{
    background-image: url('../images/photos/blog-card-1.jpg');
}

.banner-inner-404{
    background-image: url('../images/photos/hero-1.jpg');
    background-image: image-set(url('../images/photos/hero-1.webp') type('image/webp'), url('../images/photos/hero-1.jpg') type('image/jpeg'));
}

/* 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-2);
}

.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(--accent-color-8);
    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 img{
    width: 100%;
}

.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(10, 42, 29, .18);
    box-shadow: 0 10px 30px 0 rgba(10, 42, 29, .18);
}

.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);
    visibility: hidden;
    transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
    z-index: 1000;
    overflow-y: auto;
    max-height: 100vh;
    padding: 0px 16px 0px 5px;
}

.sidebar.active{
    transform: translateX(300px);
    visibility: visible;
    transition: transform 0.4s ease-in-out, visibility 0s;
}

.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: var(--accent-color-7);
    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-family: 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="%23004F33" 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="%23004F33" 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;
}

/* 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: 32px;
    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 */

/* Hand-rolled subset of animate.css v4 — the site only ever uses
   .animate__animated + the four fadeIn* entrances (added via [data-animate]
   in useScrollEffects), so the full 71.7 KB vendor file is no longer imported. */
.animate__animated{
    animation-duration: 1s;
    animation-duration: var(--animate-duration, 1s);
    animation-fill-mode: both;
}

@keyframes fadeInUp{
    from{
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
    to{
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDown{
    from{
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
    to{
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInLeft{
    from{
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to{
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInRight{
    from{
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to{
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.animate__fadeInUp{
    animation-name: fadeInUp;
}

.animate__fadeInDown{
    animation-name: fadeInDown;
}

.animate__fadeInLeft{
    animation-name: fadeInLeft;
}

.animate__fadeInRight{
    animation-name: fadeInRight;
}

.animate-box{
    opacity: 0;
}

.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: 100px;
}

/* 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{
    --bs-gutter-y: 100px
}

/* 43. Footer Styles */

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

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

.footer-logo-container img{
    width: 75%;
}

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

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

.footer-copyright-container{
    display: flex;
    flex-direction: row;
    gap: 20px 20px;
    justify-content: space-between;
    padding: 30px 0px 30px 0px;
    border-top: 1px solid var(--primary);
}

.footer-legalink-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px 20px;
}

.footer-legalink-container .divider{
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color: var(--primary);
}

.legalink{
    font-family: var(--font-family-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3em;
    color: var(--accent-color-2);
    transition: all 300ms;
}

.legalink:hover{
    color: var(--secondary);
}
/* 44. D Padel Theme Overrides (editorial green) */

/* Brand logo fit — the new lockup is taller than the old Adelux wordmark */
.navbar .logo-container img{
    width: auto;
    max-width: 100%;
    max-height: 56px;
}

.footer-logo-container img{
    max-height: 72px;
    width: auto;
}

.sidebar-header .logo img{
    max-height: 44px;
    width: auto;
}

/* Buttons: deep brand-green pills with white titles */
.btn-accent{
    background-color: var(--brand-green);
    fill: var(--brand-green);
}

.btn-accent:hover{
    background-color: var(--brand-green-dark);
}

.btn-accent .btn-title{
    color: var(--secondary);
}

/* Eyebrow labels: uppercase editorial tracking */
.sub-heading-title{
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 13px;
}

/* Oversized numerals in the display serif */
.academy-stat,
.about-highlight-text,
.home-community-highlight,
.card-pricing .price,
.heading-notfound{
    font-family: var(--font-family-display);
    font-weight: 500;
}

/* Hero: moodier forest wash under white serif headlines */
.slideshow-container .slide::before{
    opacity: 0.45;
}

/* Cards: hairline definition on the cream page */
.card-chooseus,
.card-process,
.card-benefit,
.card-about-misson{
    border: 1px solid var(--accent-color-5);
}

/* Refined accent underlines */
.service-title-container,
.blog-title-container{
    border-bottom-width: 2px;
}

/* Hairlines on forest surfaces (--primary ink is invisible there) */
.footer-copyright-container{
    border-top-color: rgba(255, 255, 255, 0.16);
}

footer .underline-primary-accent{
    border-bottom-color: rgba(255, 255, 255, 0.16);
}

.footer-legalink-container .divider{
    background-color: rgba(255, 255, 255, 0.16);
}

.academy-title-container{
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Forms: visible focus + readable placeholders on pine inputs */
.form input:focus-visible,
.form textarea:focus-visible,
.dropdown-select:focus-visible{
    outline: 2px solid var(--accent-color-2);
    outline-offset: 2px;
}

.dropdown-select:focus{
    border-color: var(--accent-color-2);
}

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

/* Flatpickr: brand green instead of the vendor blue */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected.nextMonthDay{
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: var(--secondary);
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg{
    fill: var(--brand-green);
}

.flatpickr-day.today{
    border-color: var(--brand-green);
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover{
    background: var(--accent-color-6);
    border-color: var(--accent-color-6);
}

/* Contrast patches on forest cards */
.card-about-mission--membership .card-content p{
    color: var(--accent-color-8);
}

/* Footer reuses .contact-info-heading on the forest surface — lighten it there */
footer .contact-info-heading{
    color: var(--accent-color-8);
}

/* --- D Padel signature details --- */

/* Editorial ticker strip */
.marquee{
    background-color: var(--accent-color);
    overflow: hidden;
    padding: 16px 0px 16px 0px;
    border-top: 1px solid #FFFFFF14;
    border-bottom: 1px solid #FFFFFF14;
}
.marquee-track{
    display: flex;
    width: max-content;
    animation: marquee-scroll 38s linear infinite;
}
.marquee-row{
    display: flex;
    flex-shrink: 0;
}
.marquee-item{
    display: inline-flex;
    align-items: center;
    gap: 32px;
    padding-right: 32px;
    color: var(--accent-color-4);
    font-family: var(--font-family-1);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
}
.marquee-dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--accent-color-2);
    display: inline-block;
}
@keyframes marquee-scroll{
    from{ transform: translateX(0); }
    to{ transform: translateX(-50%); }
}
.marquee:hover .marquee-track{
    animation-play-state: paused;
}

/* Leaf-cornered feature imagery — echoes the D mark silhouette.
   :not(.banner-avatar) keeps specificity at (0,2,1) so this beats the base
   .image-container img:not(.banner-avatar) rule by source order. */
.image-container img:not(.banner-avatar),
.service-img,
.highlight-image img{
    border-radius: 24px 24px 24px 6px;
}

/* Mirror the leaf radius on the clipping card containers so the 6px corner
   survives overflow:hidden and the hover scale(1.1) zoom. */
.card-service,
.card-team,
.card-blog{
    border-radius: 24px 24px 24px 6px;
}

/* Blog-post card images keep square bottoms (content sits below the image),
   but match the card's 24px top corners. */
.card-blog.card-blog-post .image-container img{
    border-radius: 24px 24px 0px 0px;
}

/* Recent-post thumbs stay small-radius squares — re-assert after the leaf rule */
.recent-post-thumb .image-container img{
    border-radius: 10px;
}

/* Brand text selection + balanced headlines */
::selection{
    background-color: var(--brand-green);
    color: var(--secondary);
}
h1, h2, h3{
    text-wrap: balance;
}

/* Ball-dot eyebrow (echoes the logo's ball) */
.sub-heading i{
    font-size: 9px;
}

/* Footer watermark */
footer .section{
    overflow: hidden;
}
footer .footer-content-container{
    position: relative;
    isolation: isolate;
}
footer .footer-content-container::after{
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 420px;
    height: 240px;
    background: url('../images/brand/dpadel-logo-stacked-light.png') no-repeat right bottom / contain;
    opacity: 0.05;
    pointer-events: none;
    z-index: -1;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
    .marquee-track{
        animation: none;
    }
    .slideshow-container .slide{
        transition: none !important;
    }
    *, *::before, *::after{
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.15s !important;
        scroll-behavior: auto !important;
    }
}

/* --- Brand palette retune (client feedback): kill template light-green --- */

/* Full-viewport editorial hero */
.banner-home-container{
    min-height: calc(100svh - 40px);
    display: flex;
    padding: 180px 20px 80px 20px;
}
.banner-home-container > .hero-container{
    display: flex;
    width: 100%;
}
.banner-home-container .banner-content-container{
    justify-content: space-between;
}

/* Overlay CTA cards: deep forest with cream type (was leaf green) */
.card-about-detail{
    background-color: var(--accent-color);
}
.card-about-detail h4{
    color: var(--secondary);
}
.card-about-detail .link-wrapper,
.card-about-detail .link-wrapper span,
.card-about-detail .link-wrapper i{
    color: var(--accent-color-2);
}
.community-cta{
    background-color: var(--accent-color);
}
.community-cta h3,
.community-cta h4,
.community-cta p,
.community-cta span{
    color: var(--secondary);
}
.community-cta .link-wrapper i,
.community-cta .link-wrapper span{
    color: var(--accent-color-2);
}

/* Membership CTA card: warm cream (pairs with the forest benefit card) */
.card-membership-cta.cta-content{
    background-color: var(--accent-color-3);
}

/* Icon chips: soft sage with brand-green icons (icons recolored in PNG) */
.card-process .icon,
.community-icon{
    background-color: var(--accent-color-6);
}

/* Blog meta rows: icon/text alignment */
.meta-data{
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* --- Editorial testimonials (redesigned, replaces photo-banner version) --- */
.testimonial-editorial{
    background-color: var(--accent-color);
    position: relative;
    overflow: hidden;
}
.testimonial-editorial::after{
    content: '';
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: 520px;
    height: 420px;
    background: url('../images/brand/dpadel-logo-stacked-light.png') no-repeat center / contain;
    opacity: 0.04;
    pointer-events: none;
}
.testimonial-editorial-inner{
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 36px;
    padding: 30px 0px 30px 0px;
}
.testimonial-editorial-mark{
    display: block;
    font-family: var(--font-family-display);
    font-size: 110px;
    line-height: 0.4;
    color: var(--accent-color-2);
    margin-bottom: 18px;
}
.testimonial-editorial-text{
    font-family: var(--font-family-display);
    font-size: clamp(26px, 3.2vw, 42px);
    font-weight: 500;
    line-height: 1.35em;
    letter-spacing: -0.01em;
    color: var(--secondary);
    margin: 0;
    text-wrap: balance;
    animation: testimonial-fade 600ms ease both;
}
@keyframes testimonial-fade{
    from{ opacity: 0; transform: translateY(14px); }
    to{ opacity: 1; transform: none; }
}
.testimonial-editorial-attrib{
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 30px;
}
.testimonial-editorial-name{
    font-family: var(--font-family-1);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--secondary);
}
.testimonial-editorial-role{
    font-family: var(--font-family-2);
    font-size: 14px;
    color: var(--accent-color-2);
}
.testimonial-editorial-nav{
    display: flex;
    align-items: center;
    gap: 28px;
}
.testimonial-editorial-count{
    font-family: var(--font-family-display);
    font-size: 17px;
    letter-spacing: 0.08em;
    color: var(--accent-color-8);
}
.testimonial-editorial-count > span{
    font-size: 26px;
    color: var(--accent-color-2);
}
.testimonial-editorial-arrows{
    display: flex;
    gap: 12px;
}
.testimonial-editorial-arrows button{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid #FFFFFF2E;
    background: transparent;
    color: var(--secondary);
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 300ms;
}
.testimonial-editorial-arrows button:hover{
    background-color: var(--brand-green);
    border-color: var(--brand-green);
}
.testimonial-editorial-arrows button:focus-visible{
    outline: 2px solid var(--accent-color-2);
    outline-offset: 2px;
}
@media (max-width: 767px){
    .testimonial-editorial-mark{ font-size: 80px; }
    .testimonial-editorial::after{ display: none; }
}
@media (prefers-reduced-motion: reduce){
    .testimonial-editorial-text{ animation: none; }
}

/* --- Palette law, final pass: leaf = accents on dark only.
       Light surfaces: sage chips, cream cards. (client feedback) --- */

/* Icon chips on light surfaces -> soft sage (icons are brand green PNGs) */
.chooseus-icon,
.service-icon,
.booking-cta-icon,
.contact-icon,
.card-benefit .benefit-number,
.banner-avatar-plus{
    background-color: var(--accent-color-6);
}

/* Large light cards that were leaf -> warm cream / sage */
.card-contact-cta{
    background-color: var(--accent-color-3);
}
.card-tournament.comunity-padel-night{
    background-color: var(--accent-color-6);
}

/* FAQ accordion +/- chip: sage with brand-green glyph */
.accordion-button::after{
    background-color: var(--accent-color-6);
}

/* Mobile menu buttons: brand-green statement instead of leaf */
.nav-btn,
.close-btn{
    background-color: var(--brand-green);
    color: var(--secondary);
}
.nav-btn:hover,
.close-btn:hover{
    background-color: var(--brand-green-dark);
    color: var(--secondary);
}

/* Footer social chips: sage with forest glyphs */
.social-icon{
    background-color: var(--accent-color-6);
}

/* --- Round 3: fixed navbar, true full-bleed hero, cascade repairs --- */

/* Sticky floating-pill navbar: fixed wrapper is fully transparent (no
   full-width edge glass); only the inner .navbar pill carries the glass.
   Hides on scroll-down, returns on scroll-up; goes forest-glass once scrolled. */
.navbar-container{
    position: fixed;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none;
    z-index: 1000;
    transform: translateX(-50%) translateY(0);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.35s ease;
    will-change: transform;
}
.navbar-container.nav-scrolled{
    padding-top: 16px;
}
.navbar-container.nav-hidden{
    transform: translateX(-50%) translateY(-135%);
}
/* The pill: subtle white glass over the hero, solid forest glass once scrolled */
.navbar{
    transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    border: 1px solid transparent;
}
.navbar-container.nav-scrolled .navbar{
    background-color: rgba(10, 42, 29, 0.74);
    box-shadow: 0 14px 36px rgba(3, 21, 13, 0.30);
    border-color: rgba(255, 255, 255, 0.08);
}
.navbar-container.nav-scrolled .navbar::before{
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}
@media (prefers-reduced-motion: reduce){
    .navbar-container{ transition: none; }
}

/* Kill the 1026-1199px navigation dead zone (navbar-expand-xl vs 1025px burger) */
@media (min-width: 1026px) and (max-width: 1199.98px){
    .navbar-collapse{
        display: flex !important;
    }
}

/* True full-bleed, full-viewport hero */
.section-wrapper.hero-bleed{
    padding: 0;
}
.section-wrapper.hero-bleed .banner-home-container{
    border-radius: 0;
    min-height: 100svh;
    padding: 170px clamp(24px, 6vw, 90px) 84px;
}
@media (max-width: 767px){
    .section-wrapper.hero-bleed .banner-home-container{
        padding: 130px 24px 56px;
    }
}

/* Revive the display serif: the h1-h6 group rule below the base styles
   was re-asserting Montserrat on h1/h2 */
h1, h2{
    font-family: var(--font-family-display);
}

/* Palette law: leaf accents on LIGHT surfaces become brand green */
.sub-heading:not(.sub-heading-banner) i{
    color: var(--brand-green);
}
.check-list li::before{
    color: var(--brand-green);
}
.service-title-container,
.blog-title-container{
    border-bottom-color: var(--brand-green);
}
.about-description-container{
    border-left-color: var(--brand-green);
}
.about-highlight-box{
    border-top-color: var(--brand-green);
}
.booking-tag{
    border-color: var(--brand-green);
    color: var(--brand-green);
}

/* Community overlay card: link/chevron were invisible (no .link-wrapper in markup) */
.community-cta a,
.community-cta a span,
.community-cta a i,
.community-cta .fa-circle-chevron-right{
    color: var(--accent-color-2);
}

/* Community Padel Night: forest night card (white type correct again) */
.card-tournament.comunity-padel-night{
    background-color: var(--accent-color);
}

/* Mobile sidebar interactive states: leaf-on-white -> brand green */
.menu a:hover,
.menu a.active{
    color: var(--brand-green);
}
.sidebar-dropdown-btn{
    border-color: var(--brand-green);
    color: var(--brand-green);
}

/* Hairlines that vanished on forest cards */
.card-booking-form .underline-primary-accent,
.card-blog-category .underline-primary-accent,
.card-blog-recent .underline-primary-accent,
.card-blog-tag .underline-primary-accent{
    border-bottom-color: #FFFFFF29;
}

/* Flatpickr: vendor blue leaked on today:hover/focus */
.flatpickr-day.today:hover,
.flatpickr-day.today:focus{
    background: var(--accent-color-6);
    border-color: var(--brand-green);
    color: var(--primary);
}

/* Booking dropdown caret rotation (class existed, rule didn't) */
.dropdown-select .fa-caret-down{
    transition: transform 300ms ease;
}
.dropdown-select .fa-caret-down.rotate{
    transform: rotate(180deg);
}

/* Readability scrims over photos */
.card-tournament::before{
    opacity: 0.3;
}
.cta-tag{
    background-color: #0A2A1D99;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--secondary);
}

/* Stop entrance-animation horizontal wiggle */
html, body{
    overflow-x: clip;
}

/* ===== Redesigned hero (clean editorial, replaces template clutter) ===== */
.banner-home-container > .hero-container{
    display: flex;
    align-items: stretch;
    width: 100%;
}
/* Bottom scrim keeps the headline legible over any slide */
.banner-home-container::after{
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(3,21,13,0.22) 0%, rgba(3,21,13,0) 34%, rgba(3,21,13,0.58) 100%);
}
.hero-stage{
    position: relative;
    z-index: 2;
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 46px;
}
.hero-lead{
    max-width: 820px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.hero-eyebrow{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-family-1);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--secondary);
}
.hero-eyebrow-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-color-2);
    box-shadow: 0 0 0 4px rgba(169,196,106,0.22);
}
.hero-headline{
    font-family: var(--font-family-display);
    color: var(--secondary);
    font-size: clamp(46px, 7vw, 108px);
    line-height: 1.0;
    letter-spacing: -0.02em;
    font-weight: 600;
    margin: 0;
    text-wrap: balance;
}
.hero-sub{
    font-family: var(--font-family-2);
    color: rgba(255,255,255,0.85);
    font-size: clamp(16px, 1.4vw, 20px);
    line-height: 1.6;
    max-width: 520px;
    margin: 0;
}
.hero-actions{
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.hero-link{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary);
    font-family: var(--font-family-1);
    font-size: 15px;
    font-weight: 600;
    padding-bottom: 3px;
    border-bottom: 1px solid rgba(255,255,255,0.4);
    transition: color 0.3s ease, border-color 0.3s ease;
}
.hero-link i{ font-size: 12px; transition: transform 0.3s ease; }
.hero-link:hover{ color: var(--accent-color-2); border-bottom-color: var(--accent-color-2); }
.hero-link:hover i{ transform: translateX(4px); }
.hero-cue{
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: rgba(255,255,255,0.62);
    font-family: var(--font-family-1);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.hero-cue-line{
    width: 46px;
    height: 1px;
    background: rgba(255,255,255,0.35);
    position: relative;
    overflow: hidden;
}
.hero-cue-line::after{
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent-color-2);
    transform: translateX(-100%);
    animation: hero-cue-slide 2.4s ease-in-out infinite;
}
@keyframes hero-cue-slide{
    0%{ transform: translateX(-100%); }
    50%{ transform: translateX(0); }
    100%{ transform: translateX(100%); }
}
@media (max-width: 767px){
    .hero-stage{ gap: 32px; }
    .hero-lead{ gap: 22px; }
    .hero-actions{ gap: 20px; }
}
@media (prefers-reduced-motion: reduce){
    .hero-cue-line::after{ animation: none; }
}

/* ============================================================
   AWARD-WINNING EDITORIAL SIGNATURE (final modernization pass)
   ============================================================ */

/* ---- Founder's Note (replaces the testimonial carousel) ---- */
.founder-note{
    position: relative;
    overflow: hidden;
    background-color: var(--accent-color);
    padding: clamp(96px, 10vw, 150px) 20px;
}
.founder-note::after{
    content: '';
    position: absolute;
    left: -70px;
    bottom: -60px;
    width: 460px;
    height: 360px;
    background: url('../images/brand/dpadel-logo-stacked-light.png') no-repeat left bottom / contain;
    opacity: 0.04;
    pointer-events: none;
}
.founder-note-inner{
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.06fr 0.84fr;
    align-items: center;
    gap: clamp(40px, 6vw, 96px);
}
.founder-note-lead{
    display: flex;
    flex-direction: column;
    gap: 34px;
}
.founder-note-quote{
    font-family: var(--font-family-display);
    color: var(--secondary);
    font-size: clamp(26px, 2.9vw, 42px);
    line-height: 1.33;
    letter-spacing: -0.01em;
    font-weight: 500;
    margin: 0;
}
.founder-note-sign{
    display: flex;
    align-items: center;
    gap: 18px;
}
.founder-note-rule{
    width: 56px;
    height: 1px;
    background: var(--accent-color-2);
    flex: none;
}
.founder-note-name{
    display: block;
    font-family: var(--font-family-1);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--secondary);
}
.founder-note-role{
    display: block;
    font-family: var(--font-family-2);
    font-size: 14px;
    color: var(--accent-color-2);
    margin-top: 5px;
}
.founder-note-media{
    position: relative;
}
.founder-note-frame{
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 28px 28px 28px 8px;
    overflow: hidden;
    box-shadow: 0 30px 64px rgba(3, 21, 13, 0.45);
}
.founder-note-frame img{
    position: absolute;
    inset: -8% 0;
    width: 100%;
    height: 116%;
    object-fit: cover;
    display: block;
}
.founder-note-badge{
    position: absolute;
    left: -16px;
    bottom: 30px;
    background: var(--accent-color-2);
    color: var(--accent-color);
    font-family: var(--font-family-1);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 12px 18px;
    border-radius: 100px;
    box-shadow: 0 14px 28px rgba(3, 21, 13, 0.42);
}
@media (max-width: 991px){
    .founder-note-inner{ grid-template-columns: 1fr; gap: 48px; }
    .founder-note-media{ max-width: 440px; }
}

/* ---- Numbered section eyebrows (opt-in via data-index) ---- */
.sub-heading[data-index]::before{
    content: attr(data-index);
    font-family: var(--font-family-display);
    font-weight: 600;
    font-size: 1.15em;
    line-height: 1;
    color: var(--brand-green);
    margin-right: 9px;
}
.sub-heading-banner[data-index]::before,
.founder-note .sub-heading[data-index]::before{
    color: var(--accent-color-2);
}

/* ---- Court-line accent: thin leaf rule above major headings ---- */
.court-rule{
    width: 2px;
    height: 54px;
    background: linear-gradient(180deg, var(--accent-color-2), transparent);
    border-radius: 2px;
    display: block;
}

/* ---- Depth: layered card shadows + hover lift ---- */
.card-chooseus,
.card-service,
.card-blog,
.card-team,
.card-process,
.card-benefit{
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
}
.card-chooseus,
.card-service,
.card-blog,
.card-team{
    box-shadow: 0 1px 2px rgba(20, 53, 39, 0.04), 0 12px 30px rgba(20, 53, 39, 0.07);
}
.card-chooseus:hover,
.card-service:hover,
.card-blog:hover,
.card-team:hover,
.card-process:hover,
.card-benefit:hover{
    transform: translateY(-8px);
    box-shadow: 0 26px 52px rgba(20, 53, 39, 0.16);
}

/* ---- Parallax base ---- */
.parallax{ will-change: transform; }

/* ---- Generous editorial whitespace on large screens ---- */
@media (min-width: 1200px){
    .section{ padding-top: 140px; padding-bottom: 140px; }
}

/* ---- Subtle film grain for tactile editorial finish ---- */
body::after{
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.022;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){
    .card-chooseus:hover,
    .card-service:hover,
    .card-blog:hover,
    .card-team:hover,
    .card-process:hover,
    .card-benefit:hover{ transform: none; }
}


/* === coaching page (merged from build fleet) === */
/* ===== Coaching page (cch-) — scoped, page-prefixed ===== */

/* --- Coaching Philosophy intro --- */
.cch-philosophy{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 60px;
  align-items: center;
}
.cch-philosophy-media{
  position: relative;
}
.cch-philosophy-img{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.cch-philosophy-img img{
  width: 100%;
  height: 116%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin-top: -8%;
}
.cch-philosophy-badge{
  position: absolute;
  right: -18px;
  bottom: 32px;
  background-color: var(--accent-color);
  color: var(--secondary);
  border-radius: 16px;
  padding: 20px 26px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  max-width: 230px;
  box-shadow: 0 22px 50px rgba(10, 42, 29, 0.28);
}
.cch-philosophy-badge-num{
  font-family: var(--font-family-display);
  font-size: 46px;
  line-height: 1;
  color: var(--accent-color-2);
}
.cch-philosophy-badge-label{
  font-size: 13px;
  line-height: 1.35;
  color: var(--secondary);
}
.cch-philosophy-content{
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.cch-philosophy-pillars{
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 4px;
}
.cch-pillar{
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.cch-pillar-icon{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--accent-color-6);
  color: var(--brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-top: 2px;
}
.cch-pillar p{
  color: var(--primary);
  opacity: 0.78;
  font-size: 15px;
}

/* --- Programme Tracks --- */
.cch-tracks-intro{
  max-width: 520px;
  margin-left: auto;
  color: var(--primary);
  opacity: 0.82;
}
.cch-track{
  position: relative;
  gap: 24px !important;
  text-align: center;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.cch-track:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 50px rgba(10, 42, 29, 0.12);
  border-color: var(--accent-color-2);
}
.cch-track-icon{
  margin: 0 auto;
}
.cch-track-body{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cch-track-body p{
  color: var(--primary);
  opacity: 0.78;
  font-size: 15px;
}
.cch-track-tag{
  display: inline-block;
  align-self: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-green);
  background-color: var(--accent-color-6);
  border-radius: 999px;
  padding: 7px 16px;
}

/* --- How Coaching Works (dark band) --- */
.cch-how .sub-heading-title,
.cch-how-intro{
  color: var(--secondary);
}
.cch-how-intro{
  max-width: 520px;
  margin-left: auto;
  opacity: 0.84;
}
.cch-how .sub-heading[data-index]::before{
  color: var(--accent-color-2);
}
.cch-step{
  height: 100%;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.cch-step:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 46px rgba(10, 42, 29, 0.22);
}
.cch-step p{
  color: var(--primary);
  opacity: 0.78;
  font-size: 15px;
}

/* --- Lesson Formats / pricing-hint band --- */
.cch-formats-intro{
  max-width: 520px;
  margin-left: auto;
  color: var(--primary);
  opacity: 0.82;
}
.cch-formats-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
.cch-format{
  background-color: var(--accent-color-4);
  border: 1px solid var(--accent-color-5);
  border-radius: 18px;
  padding: 28px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.cch-format:hover{
  transform: translateY(-5px);
  box-shadow: 0 22px 44px rgba(10, 42, 29, 0.12);
}
.cch-format-head{
  display: flex;
  align-items: center;
  gap: 14px;
}
.cch-format-icon{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--accent-color-6);
  color: var(--brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.cch-format-desc{
  color: var(--primary);
  opacity: 0.78;
  font-size: 15px;
  flex: 1 1 auto;
}
.cch-format-meta{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-green);
}
.cch-formats-note{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background-color: var(--accent-color-6);
  border-radius: 20px;
  padding: 34px 40px;
}
.cch-formats-note > p{
  max-width: 640px;
  color: var(--primary);
}
.cch-formats-actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}
.cch-formats-link{
  white-space: nowrap;
}

/* --- Responsive --- */
@media (max-width: 991.98px){
  .cch-philosophy{
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .cch-philosophy-badge{
    right: 16px;
  }
  .cch-formats-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px){
  .cch-formats-grid{
    grid-template-columns: 1fr;
  }
  .cch-formats-note{
    padding: 28px 24px;
  }
}

/* === service page (merged from build fleet) === */
/* ===== Service page — alternating editorial service rows ===== */
.svc-intro-lead{
  font-family: var(--font-family-2);
  color: var(--accent-color);
  opacity: 0.82;
  max-width: 32ch;
  margin: 0;
}
.svc-intro-card .svc-intro-detail{
  align-items: flex-end;
  gap: 16px;
}
.svc-intro-card-summary{
  font-family: var(--font-family-2);
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 0;
  opacity: 0.85;
}

/* Tinted section blocks (page-scoped to avoid collisions) */
.svc-section-cream{
  background-color: var(--accent-color-4);
  border-radius: 20px;
  overflow: hidden;
}
.svc-section-forest{
  background-color: var(--accent-color);
  border-radius: 20px;
  overflow: hidden;
}

/* The alternating row layout */
.svc-row{
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.svc-row-reverse .svc-row-media{ order: 2; }
.svc-row-reverse .svc-row-body{ order: 1; }

.svc-row-body{
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.svc-row-lead{
  font-family: var(--font-family-2);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0;
  color: var(--accent-color);
  opacity: 0.88;
}

/* Media frame + parallax overscan */
.svc-row-media{
  position: relative;
}
.svc-row-frame{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 28px 60px -36px rgba(10, 42, 29, 0.55);
}
.svc-row-frame img{
  position: absolute;
  inset: -9% 0;
  width: 100%;
  height: 118%;
  object-fit: cover;
  display: block;
}
.svc-row-stat{
  position: absolute;
  left: -18px;
  bottom: -18px;
  background: var(--accent-color);
  color: var(--accent-color-3);
  border-radius: 16px;
  padding: 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 18px 40px -24px rgba(10, 42, 29, 0.7);
  border: 1px solid rgba(169, 196, 106, 0.35);
}
.svc-row-stat-light{
  background: var(--accent-color-4);
  color: var(--accent-color);
  border-color: rgba(10, 42, 29, 0.12);
}
.svc-row-stat-figure{
  font-family: var(--font-family-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--accent-color-2);
}
.svc-row-stat-light .svc-row-stat-figure{ color: var(--accent-color); }
.svc-row-stat-label{
  font-family: var(--font-family-1);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
  max-width: 16ch;
}

/* Court rental: spec grid + rate strip */
.svc-spec-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
}
.svc-spec{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.svc-spec-icon{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--accent-color-6);
  color: var(--accent-color);
  font-size: 1rem;
}
.svc-spec > div{ display: flex; flex-direction: column; gap: 3px; }
.svc-spec-title{
  font-family: var(--font-family-1);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent-color);
}
.svc-spec-text{
  font-family: var(--font-family-2);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--accent-color);
  opacity: 0.78;
}
.svc-rate-strip{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(10, 42, 29, 0.12);
  background: rgba(255, 255, 255, 0.4);
}
.svc-rate{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 8px;
  text-align: center;
}
.svc-rate + .svc-rate{ border-left: 1px solid rgba(10, 42, 29, 0.1); }
.svc-rate-price{
  font-family: var(--font-family-display);
  font-size: 1.4rem;
  line-height: 1;
  color: var(--accent-color);
}
.svc-rate-label{
  font-family: var(--font-family-1);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-color);
  opacity: 0.7;
}

/* Academy: numbered track list */
.svc-track-list{
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.svc-track{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 16px 0;
  border-top: 1px solid rgba(10, 42, 29, 0.12);
}
.svc-track:last-child{ border-bottom: 1px solid rgba(10, 42, 29, 0.12); }
.svc-track-num{
  color: var(--brand-green);
  font-family: var(--font-family-display);
  font-size: 1.1rem;
  color: var(--accent-color-2);
  line-height: 1.4;
  flex: 0 0 auto;
}
.svc-track-body{ display: flex; flex-direction: column; gap: 4px; }
.svc-track-head{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.svc-track-title{
  font-family: var(--font-family-1);
  font-weight: 600;
  font-size: 1rem;
  color: var(--accent-color);
}
.svc-track-level{
  font-family: var(--font-family-1);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-color);
  background: var(--accent-color-6);
  border-radius: 999px;
  padding: 3px 10px;
}
.svc-track-text{
  font-family: var(--font-family-2);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--accent-color);
  opacity: 0.8;
}

/* Tournaments (forest section): flagship card + formats */
.svc-section-forest .svc-row-lead,
.svc-section-forest .svc-track-text,
.svc-section-forest .svc-format-text{ color: var(--accent-color-3); opacity: 0.82; }
.svc-flagship{
  border: 1px solid rgba(169, 196, 106, 0.4);
  border-radius: 18px;
  padding: 24px 26px;
  background: rgba(169, 196, 106, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.svc-flagship-tag{
  align-self: flex-start;
  font-family: var(--font-family-1);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-color);
  background: var(--accent-color-2);
  border-radius: 999px;
  padding: 4px 12px;
}
.svc-flagship h3{ margin: 0; }
.svc-flagship-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.svc-flagship-meta-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-1);
  font-size: 0.82rem;
  color: var(--accent-color-2);
}
.svc-flagship-meta-item i{ font-size: 0.85rem; }
.svc-flagship-text{
  font-family: var(--font-family-2);
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
  opacity: 0.85;
}
.svc-format-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.svc-format{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.svc-format-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(169, 196, 106, 0.16);
  color: var(--accent-color-2);
  font-size: 1.05rem;
}
.svc-format-title{
  font-family: var(--font-family-1);
  font-weight: 600;
  font-size: 0.95rem;
}
.svc-format-text{
  font-family: var(--font-family-2);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Membership: tier list + price teaser overlay */
.svc-tier-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.svc-tier{
  position: relative;
  border: 1px solid rgba(10, 42, 29, 0.14);
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--accent-color-4);
}
.svc-tier-featured{
  border-color: var(--accent-color);
  background: var(--accent-color-6);
}
.svc-tier-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.svc-tier-name{
  font-family: var(--font-family-display);
  font-size: 1.2rem;
  color: var(--accent-color);
}
.svc-tier-price{
  font-family: var(--font-family-display);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--accent-color);
  display: inline-flex;
  align-items: baseline;
}
.svc-tier-currency{ font-size: 0.9rem; margin-right: 1px; }
.svc-tier-per{
  font-family: var(--font-family-1);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  opacity: 0.6;
  margin-left: 2px;
}
.svc-tier-text{
  font-family: var(--font-family-2);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--accent-color);
  opacity: 0.8;
}
.svc-tier-badge{
  position: absolute;
  top: -10px;
  right: 18px;
  font-family: var(--font-family-1);
  font-size: 0.62rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-color-3);
  background: var(--accent-color);
  border-radius: 999px;
  padding: 3px 11px;
}
.svc-membership-actions{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.svc-membership-note{
  font-family: var(--font-family-2);
  font-size: 0.82rem;
  color: var(--accent-color);
  opacity: 0.7;
  max-width: 26ch;
}
.svc-teaser{
  position: absolute;
  left: -18px;
  bottom: -18px;
  background: var(--accent-color);
  color: var(--accent-color-3);
  border-radius: 16px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 18px 40px -24px rgba(10, 42, 29, 0.7);
  border: 1px solid rgba(169, 196, 106, 0.35);
}
.svc-teaser-label{
  font-family: var(--font-family-1);
  font-size: 0.66rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.78;
}
.svc-teaser-price{
  font-family: var(--font-family-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--accent-color-2);
  display: inline-flex;
  align-items: baseline;
}
.svc-teaser-currency{ font-size: 1.1rem; margin-right: 2px; }
.svc-teaser-per{
  font-family: var(--font-family-1);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  opacity: 0.75;
  margin-left: 3px;
  color: var(--accent-color-3);
}
.svc-teaser-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-1);
  font-size: 0.78rem;
  color: var(--accent-color-2);
  text-decoration: none;
  transition: gap 0.25s ease;
}
.svc-teaser-link:hover{ gap: 12px; color: var(--accent-color-2); }
.svc-teaser-link i{ font-size: 0.72rem; }

/* Responsive: stack rows on tablet/mobile */
@media (max-width: 991px){
  .svc-row{ grid-template-columns: 1fr; gap: 40px; }
  .svc-row-reverse .svc-row-media,
  .svc-row-reverse .svc-row-body{ order: initial; }
  .svc-row-frame{ aspect-ratio: 16 / 11; }
  .svc-format-grid{ grid-template-columns: 1fr; }
  .svc-row-stat,
  .svc-teaser{ left: 16px; bottom: -16px; }
}
@media (max-width: 575px){
  .svc-spec-grid{ grid-template-columns: 1fr; }
  .svc-rate-strip{ grid-template-columns: repeat(2, 1fr); }
  .svc-rate:nth-child(3){ border-left: none; }
  .svc-rate:nth-child(n+3){ border-top: 1px solid rgba(10, 42, 29, 0.1); }
  .svc-membership-note{ max-width: none; }
}

/* === event page (merged from build fleet) === */
/* ============================================================
   Event page — scoped additions (prefix .evt-, .section-eligibility)
   ============================================================ */

/* 01 — Founding Season intro */
.evt-intro{
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 64px;
    align-items: center;
}
.evt-intro-copy{
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.evt-intro-copy .evt-lead{
    font-family: var(--font-family-display);
    font-size: 1.22rem;
    line-height: 1.5;
    color: var(--accent-color);
}
.evt-intro-media{
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    /* parallax-overscan child clipped */
    aspect-ratio: 5 / 4;
    box-shadow: 0 24px 50px rgba(20, 53, 39, 0.16);
}
.evt-intro-media img{
    position: absolute;
    inset: -8% 0;
    width: 100%;
    height: 116%;
    object-fit: cover;
    display: block;
}
.evt-intro-stats{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-top: 14px;
    padding-top: 26px;
    border-top: 1px solid var(--accent-color-5);
}
.evt-stat{
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.evt-stat-value{
    font-family: var(--font-family-display);
    font-weight: 600;
    font-size: 2rem;
    line-height: 1;
    color: var(--brand-green);
}
.evt-stat-label{
    font-size: 0.92rem;
    color: var(--text-color);
}

/* Shared intro paragraph under numbered headings */
.evt-section-intro{
    max-width: 720px;
    margin-top: 6px;
    color: var(--text-color);
}

/* 03 — How to Enter note */
.evt-enter-note{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background-color: var(--accent-color-6);
    border-radius: 16px;
    padding: 22px 26px;
}
.evt-enter-note i{
    margin-top: 3px;
    font-size: 1.15rem;
}
.evt-enter-note p{
    margin: 0;
    color: var(--accent-color);
}

/* 04 — Format & Eligibility band */
.section-eligibility{
    background-color: var(--accent-color-4);
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
}
.evt-format-card{
    gap: 22px;
    padding: 40px 32px;
    justify-content: flex-start;
}
.evt-format-card h4{
    margin-bottom: 0;
}
.evt-format-card .evt-format-body{
    margin: 0;
    color: var(--text-color);
}

/* 05 — Founding season vertical timeline */
.evt-timeline{
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    max-width: 880px;
}
.evt-timeline::before{
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 27px;
    width: 2px;
    background: linear-gradient(180deg, var(--brand-green), var(--accent-color-5));
}
.evt-timeline-item{
    position: relative;
    display: flex;
    gap: 28px;
    padding: 0 0 38px 0;
}
.evt-timeline-item:last-child{
    padding-bottom: 0;
}
.evt-timeline-marker{
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-color-4);
    border: 2px solid var(--brand-green);
    color: var(--brand-green);
    font-size: 1.1rem;
}
.evt-timeline-item.is-flagship .evt-timeline-marker{
    background-color: var(--brand-green);
    border-color: var(--brand-green);
    color: var(--accent-color-2);
}
.evt-timeline-content{
    padding-top: 2px;
}
.evt-timeline-content h4{
    margin: 6px 0 8px;
}
.evt-timeline-content p{
    margin: 0;
    color: var(--text-color);
    max-width: 620px;
}
.evt-timeline-head{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}
.evt-timeline-period{
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-green);
    font-weight: 600;
}
.evt-timeline-flag{
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--secondary);
    background-color: var(--brand-green);
    border-radius: 100px;
    padding: 3px 12px;
}

/* Responsive */
@media (max-width: 991px){
    .evt-intro{
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .evt-intro-media{
        aspect-ratio: 16 / 10;
        order: -1;
    }
}
@media (max-width: 575px){
    .evt-intro-stats{
        grid-template-columns: 1fr;
    }
    .evt-timeline-item{
        gap: 18px;
    }
    .evt-timeline::before{
        left: 22px;
    }
    .evt-timeline-marker{
        width: 46px;
        height: 46px;
        font-size: 1rem;
    }
}

/* === booking page (merged from build fleet) === */
/* ===== Booking page — Courts & Facilities (.bk-spec) ===== */
.bk-spec-section {
  background-color: var(--accent-color-4);
  border-radius: 24px;
  overflow: hidden;
}

.bk-spec-heading {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
}

.bk-spec-lead {
  margin: 0;
  max-width: 720px;
}

/* Feature band: parallaxed image + body */
.bk-spec-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
  align-items: stretch;
  background-color: var(--secondary);
  border: 1px solid var(--accent-color-5);
  border-radius: 22px;
  overflow: hidden;
}

.bk-spec-feature-media {
  position: relative;
  min-height: 340px;
  overflow: hidden;
}

.bk-spec-feature-media img {
  position: absolute;
  inset: -9% 0;
  width: 100%;
  height: 118%;
  object-fit: cover;
  will-change: transform;
}

.bk-spec-feature-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 44px 48px 44px 8px;
  justify-content: center;
}

.bk-spec-feature-body h3 {
  margin: 0;
  font-family: var(--font-family-display);
  color: var(--accent-color);
}

.bk-spec-feature-body p {
  margin: 0;
}

.bk-spec-kicker {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background-color: var(--accent-color-6);
  color: var(--brand-green);
  font-family: var(--font-family-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Spec cards grid */
.bk-spec-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  padding: 30px 28px;
  background-color: var(--secondary);
  border: 1px solid var(--accent-color-5);
  border-radius: 20px;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.bk-spec-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-color-2);
  box-shadow: 0 24px 48px -28px var(--accent-transparent-black);
}

.bk-spec-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bk-spec-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background-color: var(--accent-color-6);
}

.bk-spec-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.bk-spec-tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background-color: var(--accent-color-4);
  color: var(--brand-green);
  font-family: var(--font-family-2);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.bk-spec-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

.bk-spec-card-body h4 {
  margin: 0;
  color: var(--accent-color);
}

.bk-spec-card-body p {
  margin: 0;
  font-size: 0.95rem;
}

.bk-spec-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--accent-color-5);
}

.bk-spec-meta-label {
  font-family: var(--font-family-2);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-color);
}

.bk-spec-meta-value {
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--brand-green);
}

/* ===== Booking FAQ aside (.bk-faq) ===== */
.bk-faq-title {
  position: sticky;
  top: 120px;
}

.bk-faq-aside {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding: 18px 22px;
  border: 1px solid var(--accent-color-5);
  border-radius: 16px;
  background-color: var(--accent-color-4);
}

.bk-faq-aside i {
  font-size: 1.4rem;
}

.bk-faq-aside-label {
  font-family: var(--font-family-2);
  font-size: 0.82rem;
  color: var(--text-color);
}

.bk-faq-aside-link {
  font-family: var(--font-family-1);
  font-weight: 600;
  color: var(--brand-green);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  width: fit-content;
  transition: color 0.3s ease;
}

.bk-faq-aside-link:hover {
  color: var(--accent-color);
}

@media (max-width: 991px) {
  .bk-spec-feature {
    grid-template-columns: minmax(0, 1fr);
  }
  .bk-spec-feature-media {
    min-height: 260px;
  }
  .bk-spec-feature-body {
    padding: 32px 28px;
  }
  .bk-faq-title {
    position: static;
    align-items: center;
  }
  .bk-faq-aside {
    align-self: center;
  }
}

@media (max-width: 575px) {
  .bk-spec-section {
    border-radius: 18px;
  }
  .bk-spec-feature-body {
    padding: 26px 22px;
  }
  .bk-spec-card {
    padding: 26px 22px;
  }
}

/* === Deploy-review fixes: dark-band eyebrow pills + svc-track-num === */
.cch-how .sub-heading,
.svc-section-forest .sub-heading{
    background-color: var(--accent-transparent-white-2);
}
.svc-section-forest .sub-heading[data-index]::before{
    color: var(--accent-color-2);
}

/* === Mobile hero fit (CTAs were clipped below the fold) === */
@media (max-width: 767px){
    .section-wrapper.hero-bleed .banner-home-container{
        padding: 104px 24px 44px;
    }
    .hero-stage{ gap: 22px; }
    .hero-lead{ gap: 16px; max-width: 100%; }
    .hero-headline{ font-size: clamp(33px, 8.5vw, 46px); line-height: 1.06; }
    .hero-sub{ font-size: 15px; line-height: 1.5; }
    .hero-actions{ gap: 14px; row-gap: 14px; }
    .hero-cue{ display: none; }
}
@media (max-width: 360px){
    .hero-headline{ font-size: 30px; }
    .hero-actions .btn-accent{ width: 100%; justify-content: space-between; }
}

/* ============================================================
   RESPONSIVE AUDIT FIXES — 375 / 768 / 1024 + 1026-1199 dead zone
   ============================================================ */

/* Breadcrumb banners: 230px/120px fixed padding left a huge empty block on
   every sub-page at tablet/phone. Scale it proportionate to the viewport. */
@media (max-width: 991px){
    .section-banner-inner{ padding: 150px 20px 70px 20px; }
}
@media (max-width: 767px){
    .section-banner-inner{ padding: 120px 20px 56px 20px; }
}

/* Why-Choose "dead zone": wrapper only becomes a row at >=1200, but the
   full-width reset existed only at <=1025. Cover 1026-1199 too + tame gap. */
@media (max-width: 1199.98px){
    .section-chooseus .chooseus-title-container,
    .section-chooseus .chooseus-card-container{ width: 100%; }
    .section-chooseus .gspace-100{ gap: 56px 56px; }
}

/* Home booking highlight: 45%+56%+50px gap squeezed in 768-1025 — stack it.
   (!important overrides Bootstrap's .flex-md-row flex-direction:row.) */
@media (max-width: 1025px){
    .booking-content-container .d-flex.flex-md-row{ flex-direction: column !important; }
    .booking-content-container .card-booking-cta,
    .booking-content-container .booking-benefit-container{ width: 100%; }
}

/* Small-laptop band (1026-1199): outer template grids haven't collapsed yet,
   but the scoped 2-col blocks get cramped. */
@media (min-width: 1026px) and (max-width: 1199.98px){
    .booking-form-wrapper{ gap: 48px; }
    .booking-form-detail{ width: 38%; }
    .svc-rate-strip{ grid-template-columns: repeat(2, 1fr); }
    .svc-rate:nth-child(3){ border-left: none; }
    .svc-rate:nth-child(n+3){ border-top: 1px solid rgba(10, 42, 29, 0.1); }
    .svc-spec-grid{ grid-template-columns: 1fr; }
    .svc-membership-note{ max-width: none; }
    .bk-faq-title{ top: 96px; }
}
@media (min-width: 992px) and (max-width: 1199.98px){
    .svc-teaser{ left: 0; }
}

/* Membership pricing cards on phones: relax 40px padding, let header wrap. */
@media (max-width: 767px){
    .card-pricing{ padding: 28px 24px 28px 24px; gap: 16px 16px; }
    .card-pricing > .d-flex.flex-row{ flex-wrap: wrap; row-gap: 6px; }
    .card-pricing .price-container{ align-items: baseline; }
}

/* Contact: keep the 50px icon chip from collapsing; drop iframe baseline gap. */
.contact-icon{ flex-shrink: 0; }
.maps{ display: block; }

/* === QA P1 a11y: visible focus rings + >=44px tap targets for nav controls === */
.nav-btn:focus-visible,
.close-btn:focus-visible,
.dropdown-option:focus-visible,
.dropdown-item:focus-visible {
  outline: 2px solid var(--accent-color-2);
  outline-offset: 2px;
  border-radius: 4px;
}
.nav-btn,
.close-btn {
  min-width: 44px;
  min-height: 44px;
  text-align: center;
}