/* <><><><><><> Status Section <><><><><><> */

.stats-section {
    padding: 237px 40px;
	background: #EEF6F9;
}

.stats-heading {
    font-size: 64px;
    text-align: center;
    line-height: 87.24px;
    letter-spacing: -1.28px;
    margin-bottom: 96px;
}

.stats-container {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 86px;
    /* padding: 20px; */
}

.stat-box {
    text-align: center;
    color: white;
    /* padding: 10px 20px; */
}

/* .stat-box:first-child {
    border-left: none;
} */

.stat-year, .stat-current, .stat-goal {
color: #201627;
    text-align: center;
    font-family: Ubuntu;
    font-size: 32.709px;
    font-style: normal;
    font-weight: 700;
    line-height: 32.709px;
    text-transform: uppercase;
    margin-bottom: 14px;
    display: flex;
    height: 69px;
    padding: 0px 29px;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    border: 1px solid #E3EAF0;
    background: #E3EAF0;
}

.stat-current {
/*     color: #C1D72E;  */
}

.stat-goal {
/*     color: #E69A38;  */
}

.stat-number {
    color: #008ACF;
    text-align: center;
    font-family: Ubuntu;
    font-size: 168.995px;
    font-style: normal;
    font-weight: 700;
    line-height: 156.025px;
    letter-spacing: -3.38px;
}

.stat-label {
    color: #000;
    text-align: center;
    font-family: Ubuntu;
    font-size: 47.973px;
    font-style: normal;
    font-weight: 700;
    line-height: 95.117px;
    letter-spacing: -0.959px;
}

.stats-vertical-divider {
    width: 3.271px;
    height: 273.663px;
    opacity: 0.25;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.7) 50%,
        rgba(255, 255, 255, 0) 100%
    );
}

.group {
    position: absolute;
    left: 0;
    bottom: 30px;
    opacity: 0.5;
}

/* (max-width: 1760px) */
@media (max-width: 1760px) {

.stats-section {
    padding: 130px 40px;
}



    .stats-container {
        gap: 65px;
    }
    .stat-year, .stat-current, .stat-goal {
        margin-bottom: 11px;
        font-size: 27.189px;
        line-height: 27.189px;
    }
    .stat-number {
        font-size: 140.477px;
        line-height: 129.696px;
        letter-spacing: -2.81px;
    }
    .stat-label {
        font-size: 39.877px;
        line-height: 79.066px;
        letter-spacing: -0.798px;
    }
    .group {
        left: -8px;
        bottom: 135px;
        width: 166.603px;
        height: 44.247px;
    }
}

/* (max-width: 1290px) */
@media (max-width: 1290px) {

    .stats-section {
        padding: 50px 40px 170px;
    }

.stats-heading {
    font-size: 56px;
    line-height: 144.755px;
    letter-spacing: -1.12px;
    margin-bottom: 76px;
}

.stat-box {
    width: 100%;
    max-width: 225px;
}


    .stats-container {
        gap: 27px;
    }
    .stat-year, .stat-current, .stat-goal {
        margin-bottom: 8px;
        font-size: 20px;
        line-height: 19.334px;
    }
    .stat-number {
        font-size: 85px;
        line-height: 92.228px;
        letter-spacing: -1.7px;
    }
    .stat-label {
        font-size: 26px;
        line-height: 56.225px;
        letter-spacing: -0.52px;
    }
    .group {
        left: -52px;
        top: 20px;
        width: 117.211px;
        height: 31.465px;
    }
    .stats-vertical-divider {
        width: 1.933px;
        height: 161.765px;
    }
}


@media (max-width: 992px) {
    .stats-section {
        padding: 76px 40px 76px;
    }

.stats-heading {
        font-size: 36px;
        line-height: 36px;
        letter-spacing: -0.72px;
        margin-bottom: 43px;
    }

.stat-year, .stat-current, .stat-goal {
        height: 36.355px;
        border-radius: 12px;
    }

    .stat-box {
        max-width: 162px;
    }

.stat-year, .stat-current, .stat-goal {
    padding: 0px 9px;
}


}

/* (max-width: 768px) */
@media (max-width: 768px) {
    .stats-container {
        gap: calc(20px + (20 - 20) * ((100vw - 425px) / (768 - 425)));
        align-items: center;
		flex-wrap: wrap;
    }
    .stat-year, .stat-current, .stat-goal {
        font-size: calc(18px +(20 - 14)*((100vw - 425px) /(768 - 425)));
        line-height: calc(8.254px +(19.334 - 8.254)*((100vw - 425px) /(768 - 425)));
        margin-bottom: calc(14px +(8 - 14)*((100vw - 425px) /(768 - 425)));
    }
    .stat-number {
        font-size: calc(60px +(85 - 60)*((100vw - 425px) /(768 - 425)));
        line-height: calc(52.372px +(92.228 - 52.372)*((100vw - 425px) /(768 - 425)));
        letter-spacing: calc(0.04px +(-1.7 + -0.04)*((100vw - 425px) /(768 - 425)));
    }
    .stats-vertical-divider {
        width: calc(0.825px + (1.614 - 0.825) * ((100vw - 425px) / (768 - 425)));
        height: calc(69.057px + (226.378 - 69.057) * ((100vw - 425px) / (768 - 425)));
    }

	.stat-label {
        font-size: 30px;
    }
}



/* <><><><><><> Status Section ends <><><><><><> */

/* <><><><><><> Regional Teams Section <><><><><><> */
.regional-teams {
    padding: 160px 40px;
    background: linear-gradient(0deg, #016BB4 0%, #016BB4 100%), url(<path-to-image>) lightgray -73px -373.943px / 107.604% 219.343% no-repeat;
}

.regional-teams-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1657px;
    margin: 0 auto;
	flex-direction: row-reverse;
    gap: 26px;
}

.regional-teams-text {
    flex: 1;
    max-width: 614px;
}

.regional-teams-text h2 {
    color: #FFF;
    font-size: 71px;
    line-height: 64px;
    margin-bottom: 32px;
}

.regional-teams-text p {
	max-width: 613px;
    color: #FFF;
    font-size: 22px;
    line-height: 33px;
    letter-spacing: -0.44px;
}

.regional-teams-map {
    flex: 2;
    max-width: 1018px;
}

.regional-teams-map img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Responsive adjustments */
@media (max-width: 1760px) {
    .regional-teams {
        padding: 140px 40px 160px;
        position: relative;
        overflow: hidden;
    }


.regional-teams::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 150px;
        bottom: -80px;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url(/wp-content/uploads/2025/03/grid-lines.png) no-repeat center;
        background-size: contain;
        z-index: 0;
    }

    .regional-teams-container {
        max-width: 1215px;
        gap: 23px;
    }

    .regional-teams-text {
        max-width: 440px;
    }

    .regional-teams-map {
        max-width: 614px;
    }

    .regional-teams-text h2 {
        font-size: 44.616px;
        line-height: 50px;
        margin-bottom: 22px;
    }

    .regional-teams-text p {
        font-size: 20px;
        line-height: 28px;
    }
}

@media (max-width: 1290px) {
    .regional-teams {
        padding: 85px 40px 85px;
    }

    .regional-teams-container {
        max-width: 811px;
        gap: 80px;
        flex-direction: column;
    }

    .regional-teams-map {
/*         max-width: 752px; */
        max-width: unset;
    }

    .regional-teams-text {
        width: 100%;
        max-width: unset;
    }
.regional-teams-text h2 {
        max-width: 699px;
        font-size: 56px;
        line-height: 70px;
        letter-spacing: -1.12px;
        margin-bottom: 32px;
    }

    .regional-teams-text p {
        max-width: 805px;
        font-size: 24px;
        line-height: 33px;
        letter-spacing: -0.48px;
    }

    .regional-teams::before {
        width: 100%;
        max-width: 1392px;
        height: 223px;
        bottom: -14%;
        left: 50%;
        background: url(/wp-content/uploads/2025/03/grid-mobile.png) no-repeat center;
    }



}

@media (max-width: 992px) {

.regional-teams::before {
        height: 160px;
    }

}

@media (max-width: 768px) {
    .regional-teams {
        padding: 50px 40px 50px;
    }

    .regional-teams-text h2 {
        font-size: 32px;
        line-height: 50px;
        margin-bottom: 20px;
    }
}


@media (max-width: 410px) {
    .regional-teams-text p {
        font-size: 20px;
        line-height: 28px;
    }

.regional-teams-container {
        gap: 40px;
    }

.regional-teams::before {
        height: 140px;
    }

}

/* <><><><><><> Regional Teams Section ends <><><><><><> */


/* <><><><><><> Resources Section <><><><><><> */


/* Section Styling */
.young-athletes-resources {
    padding: 160px 40px 260px;
    text-align: center;
}

.resources-container {
    max-width: 1329px;
    margin: 0 auto;
}

/* Title and Description */
.resources-title {
	color: #201627;
    font-size: 64px;
    line-height: 87.24px;
    letter-spacing: -1.28px;
    margin-bottom: 17px;
}

.resources-description {
	max-width: 699px;
    font-size: 22px;
    line-height: 35px;
    letter-spacing: -0.44px;
    color: #201627;
    margin: auto;
    margin-bottom: 80px;
}

/* Grid Layout */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	grid-template-columns: repeat(3, 1fr);
    gap: 27px;
}

/* Card Styling */
.resource-card {
background: #F0EFF1;
    padding: 43px 0 0 43px;
    border-radius: 16px;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: left;
    max-width: 425px;
    min-height: 450px;
}

.resource-card img {
    width: 100%;
    border-radius: 8px;
    transition: opacity 0.3s ease;
	position: absolute;
    bottom: 0;
    right: 0;
	filter: drop-shadow(-4px -4px 4px rgba(0, 0, 0, 0.3));
}

.resource-link img {
    max-width: 20px;
	position: unset;
	
}

/* Default Hide Learn More Link */
.resource-link {
    display: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.32px;
    position: relative;
    z-index: 1;
}

/* Hover Effect (Based on Third Card) */
.resource-card:hover {
    background: #5D2779; /* Change background color on hover */
    transform: translateY(-10px);
    box-shadow: -21px 21px 53.3px 0px rgba(0, 0, 0, 0.25);
}

.resource-card:hover .resource-title {
    color: #fff;
}

.resource-card:hover .resource-link {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: start;
}

.resource-card:hover img {
/*     opacity: 0.8;  */
}


h3.resource-title {
    max-width: 297px;
    font-size: 32px;
    font-style: italic;
    line-height: 39px;
    letter-spacing: -0.64px;
    margin-bottom: 24px;
}

@media (max-width: 1760px) {

.young-athletes-resources {
    padding: 110px 40px 130px;
}

.resources-title {
    font-size: 56px;
    line-height: 78.509px;
    letter-spacing: -1.12px;
    margin-bottom: 27px;
}

.resources-description {
    max-width: 634px;
    font-size: 20px;
    line-height: 35px;
    letter-spacing: -0.4px;
}

.resource-card {
	padding: 37px 0 0 37px;
    max-width: 382px;
    min-height: 404px;
}

.resources-grid {
    gap: 24px;
    margin: auto;
    max-width: 1196px;
}

h3.resource-title {
    max-width: 267.278px;
    font-size: 28.798px;
    line-height: 35.097px;
    letter-spacing: -0.576px;
    margin-bottom: 21px;
}

.resource-link {
    font-size: 14.399px;
    line-height: 21.598px;
    letter-spacing: -0.288px;
}

.resource-card:hover .resource-link {
    gap: 7px;
}


}

.resources-slider {
    display: none; 
}

@media (max-width: 1290px) {
    .young-athletes-resources {
        padding:90px 40px 105px;
    }

.resources-title {
        font-size: 62.55px;
        letter-spacing: -1.251px;
        margin-bottom: 17px;
    }

    .resources-description {
        max-width: 767.636px;
        font-size: 24px;
        line-height: 30px;
        letter-spacing: -0.48px;
    }

.resources-grid {
        display: none;
    }


    .resources-slider {
        display: block; /* Show Swiper */
		padding-bottom: 60px;
    }

    .swiper-slide {
        display: flex;
    }

h3.resource-title {
        margin-bottom: 18px;
    }

.resource-link {
    display: flex;
	        gap: 7px;
}

.resource-card:hover {
    background: #F0EFF1;
    transform: unset;
    box-shadow: unset;
}

.resource-card:hover .resource-title {
    color: #333;
}

	.swiper-button-next:after, .swiper-button-prev:after {
display: none;
}

}

@media (max-width: 992px) {
    .young-athletes-resources {
        padding: 70px 40px 50px;
    }

.resource-link {
        font-size: 16px;
    }

}

/* <><><><><><> Resources Section ends <><><><><><> */

/* Event Section Base Styles */


.events-section {
	text-align: center;
    padding: 0 50px 0;
	background: linear-gradient(to bottom, #F0EFF1 10%, #FFFFFF 50%);
}

h1.event-title {
    color: #201627;
    font-size: 64px;
    line-height: 72.9px;
    letter-spacing: -1.28px;
    margin: 30px auto 32px;
}

p.event-subtitle {
    max-width: 785px;
    color: #584C60;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: -0.2px;
    margin: auto;
    margin-bottom: 72px;
}


@media (max-width: 1760px) {
.events-section {
    padding: 85px 50px 0;
}

   h1.event-title {
        font-size: 62px;
        line-height: 72.9px;
        letter-spacing: -1.251px;
    }


    p.event-subtitle {
        font-size: 23.694px;
        line-height: 31.592px;
        letter-spacing: -0.237px;
    }

}


@media (max-width: 1290px) {
.events-section {
    padding: 76px 50px 0;
}
}



@media (max-width: 768px) {
.events-section {
    padding: 60px 20px 0px;
}
} 

/* See More */

.see-more {
    /* Default (above 1760px) */
    margin-top: 114px;
}


.see-more a {
    color: #201627;
    font-size: 24px;
    line-height: 40px;
    letter-spacing: -0.24px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

/* Responsive override for smaller screens (max-width:1760px) */
@media (max-width:1760px) {
    .see-more a {
        font-size: 20px;
        line-height: 30px;
        letter-spacing: -0.2px;
    }

    .see-more {
        margin-top: 77px;
    }
}



/* For screens 1290px and below */
@media (max-width: 1290px) {
    .see-more {
        margin-top: 80px;
    }
}

/* For screens 767px (or 768px) and below */
@media (max-width: 767px) {
    .see-more {
        margin-top: 60px;
    }
}


/* See More ends */



/* Learn More Section */
.learn-more {
    font-size: 24px;
    font-style: italic;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: -0.48px;
    color: #000;
    max-width: 833px;
}

.learn-more-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 108px;
    gap: 33px;
}

.learn-more a {
    text-decoration-line: underline;
    vertical-align: baseline;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
}

.h-divider {
    width: 100%;
    max-width: 182px;
    height: 2px;
    background: #C0C0C0;
}


@media (max-width: 1760px) {

.learn-more-container {
    margin-top: 82px;
}

.learn-more {
    font-size: 22px;
    line-height: 42px;
    letter-spacing: -0.44px;
    max-width: 771px;
}

}

@media (max-width: 1290px) {

.learn-more-container {
    margin-top: 100px;
	gap: 16px;
}

    .learn-more {
        font-size: 25.922px;
        line-height: 43.512px;
        letter-spacing: -0.518px;
        max-width: 649.901px;
    }

.h-divider {
    width: 81.317px;
    height: 1.71px;
}

}

@media (max-width: 768px) {
    .learn-more-container {
        margin-top: 77px;
    }

    .learn-more {
        font-size: 20px;
        line-height: 31px;
        letter-spacing: -0.4px;
    }

}

@media (max-width: 500px) {
    .learn-more {
        max-width: 296px;
    }
}

/* Learn More Section ends */


/* event grid Section */


/* event grid Section ends */




/*============================================
		 =        Start       =
============================================*/


/*=============================
=    Base Styles (Default)    =
=============================*/

.events-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

.event-card {
    text-align: center;
    max-width: 331.284px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    display: flex;
    width: 331.284px;
    padding: 15.203px;
    flex-direction: column;
    align-items: flex-start;
    gap: 15.203px;
    flex-shrink: 0;

    border-radius: 6.081px;
    border: 2.28px solid #9F9F9F;
    background: #F0EFF1;
}

.event-card img {
    width: 100%;
    border-radius: 5px;
    object-fit: cover;
}

.event-date {
    color: #505050;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 24.325px;
    letter-spacing: -0.22px;
    margin-bottom: 11px; /* spacing under the date */
}

.event-card h3 {
    color: #505050;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 24.325px;
    letter-spacing: -0.24px;
    text-align: start; /* left-align the event title */
}

.event-card p {
/*     font-size: 14px;
    color: #555; */
}

.event-card a {
    color: #505050;
    font-size: 22px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.event-card a:hover {
    color: #008ACF;
}

/*======================================
=  Media Query at max-width: 1760px    =
======================================*/
@media (max-width: 1760px) {
    .events-grid {
        gap: 16px;
        /* This version might also limit the grid container width if desired,
           but you only mention 'gap' in the 1760 override if you want them smaller. */
    }

    .event-card {
        max-width: 248px; /* smaller card width */
        padding: 11.402px;
        gap: 11.402px;
    }

    .event-date {
        font-size: 17px;
        line-height: 18.243px;
        letter-spacing: -0.17px;
        margin-bottom: 0; /* remove extra spacing under date for smaller screens */
    }

    .event-card h3 {
        font-size: 16.533px;
        line-height: 18.243px;
        letter-spacing: -0.165px;
    }

    .event-card a {
        font-size: 14.823px;
    }
}

/*======================================
=  Media Query at max-width: 1290px    =
======================================*/
@media (max-width: 1290px) {
    .events-grid {
        gap: 16px;
        max-width: 776px;
        margin: 0 auto; /* optional: center it if you want a fixed max-width */
    }
}


/*======================================
=  grid ends here   =
======================================*/

/* Event Section Base Styles ends */



@media (max-width: 500px) {


    .regional-teams {
        padding: 60px 35px 120px;
    }

    .regional-teams::before {
        height: 160px;
        background-size: contain;
    }

.resources-title {
        font-size: 41.67px;
        line-height: 46px;
        letter-spacing: -1.251px;
        margin-bottom: 32px;
    }

    .young-athletes-resources {
        padding: 70px 25px 70px;
    }

    .resources-description {
        font-size: 20px;
        letter-spacing: -0.4px;
        margin-bottom: 32px;
    }

    .resource-card {
        padding: 34px 0 0 34px;
        max-width: 302px;
        min-height: 300px;
    }

    h3.resource-title {
        max-width: 245.644px;
        font-size: 26.467px;
        line-height: 32.256px;
        letter-spacing: -0.529px;
        margin-bottom: 16px;
    }

.resource-card img {
    bottom: -10%;
    right: -10%;
}


}

@media (max-width: 410px) {
    .resource-card {
        padding: 26px 0 0 20px;
        max-width: 292px;
        min-height: 290px;
    }

.inclusive-story-section::before {
display:none;

    }

h1.event-title {
        font-size: 52px;
        line-height: 60.9px;
    }

p.event-subtitle {
        font-size: 20.694px;
        line-height: 29.592px;
        letter-spacing: 0.763px;
    }

}