/* === 01. Tablet Responsive === */

@media screen and (max-width: 991.98px) {
    h1,
    .heading-xl{
        font-size: 4.25rem;
    }
    h2,
    .heading-lg{
        font-size: 2.5rem;
    }
    h3,
    .heading-md{
        font-size: 1.313em;
    }
    h4,
    .heading-sm{
        font-size: 1.25rem;
    }
    h5,
    .heading-xs{
        font-size: 1.05rem;
    }
    h6,
    .heading-xxs{
        font-size: 1rem;
    }
    p{
        font-size: 0.875rem;
    }
    .navbar-logo-container{
        width: 25%;
    }
    .navbar-logo-container img{
        max-width: 100%;
    }
    .nav-link-container{
        width: 50%;
        justify-content: flex-end;
    }
    .navbar-cta-container{
        width: 25%;
    }
    .nav-btn{
        display: block;
    }
    .navbar-collapse{
        display: none;
    }
    .sidebar-overlay,
    .sidebar{
        display: block;
    }
    .sub-heading{
        font-size: 1.25em;
    }
    .section-partnership{
        padding: 2em;
    }
    .section-wrapper{
        padding: 1em;
    }
    .chevron-list li{
        font-size: 0.875rem;
    }
    .banner-home__header{
        gap: 20px;
        padding: 0px 5%;
    }
    .banner-avatar-wrapper{
        padding: 0.5em;
    }
    .banner-home__footer{
        margin-top: 5em;
        gap: 30px;
    }
    .banner-avatar-container{
        padding-left: 15%;
    }
    .banner-inner__description{
        width: 70%;
    }
    .banner-inner__meta-header-list li{
        font-size: 0.875rem;
    }
    .banner-notfound__description{
        width: 70%;
    }
    .about__page-layout{
        gap: 30px;
    }
    .about__image-intro{
        padding: 0px;
    }
    .card-about-stat .about-stat{
        font-size: 3.75rem;
    }
    .partnership-container{
        gap: 30px;
    }
    .achievement__header .achievement__header-description{
        width: 90%;
    }
    .achievement__content{
        grid-template-columns: repeat(1, 1fr);
    }
    .achievement__content-item .stat-count{
        font-size: 3.75rem;
    }
    .programs__intro-panel{
        padding: 6em 3em;
    }
    .programs__accordion-panel{
        padding: 6em 3em;
    }
    .programs__accordion .accordion-button{
        font-size: 1.313rem;
        line-height: 1.175em;
    }
    .programs__accordion-content{
        flex-direction: column;
    }
    .programs__accordion-text{
        width: 100%;
    }
    .programs__accordion-image{
        width: 100%;
    }
    .testimonial__avatar-container{
        display: none;
    }
    .testimonial__header .testimonial__header-caption{
        width: 100%;
    }
    .testimonial__swiper-container{
        width: 100%;
    }
    .schedule__page-wrapper{
        padding: 6em 3em;
    }
    .schedule__page-layout{
        flex-direction: column;
        gap: 50px;
    }
    .schedule__intro-container{
        width: 100%;
        gap: 20px;
    }
    .schedule__image-container{
        width: 100%;
        margin: 0px;
        padding: 2em 2em;
    }
    .schedule__image-container .spacer{
        height: 250px;
    }
    .card-image-schedule{
        padding: 2em;
    }
    .schedule-meta-container .schedule-meta{
        font-size: 0.875rem;
    }
    .matchlist__heading-description{
        width: 90%;
    }
    .card-match{
        gap: 20px;
        flex-wrap: wrap;
        padding: 1.5em;
    }
    .match__date-block{
        width: 35%;
    }
    .card-match__date-block{
        gap: 5px;
    }
    .match__location{
        font-size: 0.875rem;
    }
    .match__date-day{
        font-size: 3.75rem;
    }
    .match__time{
        font-size: 0.875rem;
    }
    .match__versus-block{
        width: 62%;
    }
    .match__team{
        width: 40%;
    }
    .match__team-logo img{
        max-width: 100%;
    }
    .match__vs-label{
        font-size: 3.75rem;
    }
    .match__cta-block{
        justify-content: center;
        align-items: stretch;
        width: 100%;
        padding: 0px;
        padding-top: 2em;
        margin-top: 1em;
        border: none;
        border-top: 1px solid var(--accent-color-5);
    }
    .match__cta-block .btn{
        width: 100%;
    }
    .whychooseus__page-layout{
        flex-direction: column;
    }
    .whychooseus__feature-container{
        width: 100%;
        padding: 0px;
    }
    .whychooseus__intro-container{
        width: 100%;
    }
    .whychooseus__feature-card{
        padding: 2em;
    }
    .whychooseus__stats-image{
        width: 35%;
    }
    .whychooseus__progress-list{
        width: 65%;
    }
    .progress-title{
        font-size: 1rem;
    }
    .progress-message span{
        font-size: 0.875rem;
    }
    .progress-message i{
        font-size: 2.25rem;
    }
    .team__heading-description{
        width: 90%;
    }
    .card-team-info{
        gap: 5px;
        padding: 1em 1em;
    }
    .team-info-name{
        width: 55%;
    }
    .team-social{
        width: 45%;
    }
    .team-social-icon{
        font-size: 1rem;
    }
    .pricing__heading-description{
        width: 90%;
    }
    .pricing__price-amount{
        font-size: 3.75rem;
    }
    .pricing__feature-list li{
        font-size: 0.875rem;
    }
    .faq__page-layout{
        flex-direction: column-reverse;
    }
    .faq__intro-container{
        width: 100%;
        padding: 0px;
    }
    .faq__accordion-container{
        width: 100%;
    }
    .faq__accordion .accordion-button{
        font-size: 1rem;
    }
    .generalfaq__heading-description{
        width: 90%;
    }
    .generalfaq__accordion .accordion-button{
        font-size: 1rem;
    }
    .contact-cta__banner{
        padding: 8em 3em;
    }
    .contact-cta__title-container{
        width: 70%;
    }
    .blog__page-description{
        width: 90%;
    }
    .blog-cta .cta-text{
        font-size: 0.875rem;
    }
    .card-blog__meta{
        font-size: 0.75rem;
    }
    .singlepost__content-container{
        width: 60%;
        gap: 20px;
    }
    .singlepost__sidebar{
        width: 40%;
    }
    .other-post__title{
        font-size: 1rem;
    }
    .other-post__meta{
        font-size: 0.75rem;
    }
    .singlepost__social-icon{
        font-size: 1rem;
    }
    .newsletter-form{
        flex-direction: column;
    }
    .contactus__form-container{
        width: 55%;
        padding-right: 1em;
    }
    .contactus__info-container{
        width: 45%;
        padding: 0px;
        gap: 20px;
    }
    .contactus__info-detail{
        font-size: 1rem;
    }
    .contactus__info-detail i{
        font-size: 1.25rem;
    }
    .form.newsletter-form input,
    .form.newsletter-form button{
        width: 100%;
    }
    .footer-intro__heading-title{
        gap: 15px;
    }
    .footer-social-icon{
        font-size: 1rem;
    }
    .footer-logo img{
        max-width: 100%;
    }
    .footer-nav{
        width: 28%;
    }
    .footer-nav.footer-nav__quick-contact{
        width: 37%;
        padding: 0px;
    }
    .footer-nav__gallery{
        width: 35%;
    }
    .footer-intro__navigation{
        gap: 15px;
    }
    .footer__legallink-item{
        font-size: 0.875rem  ;
    }
    .footer-list li,
    .footer-list a,
    .footer-list li::before{
        font-size: 0.875rem;
    }
    .footer-gallery{
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === 02. Mobile Responsive === */

@media screen and (max-width: 767.98px) {
    h1,
    .heading-xl{
        font-size: 4rem;
    }
    h2,
    .heading-lg{
        font-size: 2.25rem;
    }
    h6,
    .heading-xxs{
        font-size: 0.875rem;
    }
    .navbar-logo-container{
        width: 70%;
    }
    .navbar-logo-container img{
        max-width: 90%;
    }
    .nav-link-container{
        width: 30%;
    }
    .navbar-cta-container{
        display: none;
    }
    .banner-home__header{
        padding: 0%;
    }
    .banner-home__footer{
        flex-direction: column;
        gap: 80px;
    }
    .banner-avatar-container{
        width: 100%;
        padding: 0% 15%;
        text-align: center;
    }
    .banner-avatar-wrapper{
        padding: 0.75em 0em;
    }
    .banner-avatar{
        width: 60px;
        min-height: 60px;
    }
    .banner-avatar-icon{
        width: 60px;
        min-height: 60px;
    }
    .banner-inner__description{
        width: 100%;
    }
    .banner-notfound__description{
        width: 100%;
    }
    .about__page-layout{
        flex-direction: column;
    }
    .about__image-intro{
        width: 100%;
    }
    .about__content-intro{
        width: 100%;
    }
    .card-about-stat .about-stat{
        font-size: 3.5rem;
    }
    .partnership-container{
        flex-direction: column;
    }
    .partneship-title-container{
        width: 100%;
        padding-bottom: 2em;
        border: none;
        border-bottom: 1px solid var(--accent-color-5);
    }
    .partnership-swiper-container{
        width: 100%;
    }
    .achievement__header .achievement__header-description{
        width: 100%;
    }
    .achievement__content-item .stat-count{
        font-size: 3.5em;
    }
    .programs__page-layout{
        flex-direction: column;
    }
    .programs__intro-panel{
        width: 100%;
        border-radius: 30px 30px 0px 0px;
        padding: 6em 2em 3em;
    }
    .programs__accordion-panel{
        width: 100%;
        border-radius: 0px 0px 30px 30px;
        padding: 3em 2em 6em;
    }
    .programs__accordion .accordion-button{
        line-height: 1.125em;
    }
    .schedule__page-wrapper{
        padding: 6em 2em;
    }
    .schedule__image-container{
        padding: 1.5em;
    }
    .card-image-schedule{
        padding: 1.5em;
    }
    .card-image-schedule .schedule-container{
        flex-direction: column;
    }
    .schedule-logo{
        width: 100%;
    }
    .card-image-schedule .schedule-meta-container{
        flex-direction: column;
        gap: 5px;
    }
    .schedule-meta-container .schedule-meta:first-child{
        border: none;
        border-bottom: 1px solid var(--accent-color-5);
        padding-bottom: 5px;
    }
    .card-schedule{
        padding: 1.5em;
    }
    .matchlist__heading-description{
        width: 100%;
    }
    .card-match{
        gap: 30px;
        padding: 1.313em 1.313em;
    }
    .match__date-block{
        width: 100%;
    }
    .match__date-day{
        font-size: 3.5rem;
    }
    .match__versus-block{
        width: 100%;
        flex-direction: column;
        align-items: center;
    }
    .match__team{
        width: 100%;
    }
    .match__team-logo{
        max-width: 70%;
    }
    .match__vs-label{
        font-size: 3.5rem;
    }
    .match__cta-block{
        margin: 0px;
    }
    .whychooseus__stats-block{
        flex-direction: column;
    }
    .whychooseus__stats-image{
        width: 100%;
    }
    .whychooseus__progress-list{
        width: 100%;
    }
    .card-team-info{
        flex-direction: column;
        gap: 10px;
    }
    .team-info-name{
        width: 100%;
    }
    .team-social{
        width: 100%;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .pricing__heading-description{
        width: 100%;
    }
    .pricing__price-amount{
        font-size: 3.5rem;
    }
    .faq__contact-list{
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
    .faq__accordion .accordion-button{
        font-size: 0.875rem;
    }
    .generalfaq__heading-description{
        width: 100%;
    }
    .generalfaq__accordion .accordion-button{
        font-size: 0.875rem;
    }
    .contact-cta__banner{
        padding: 8em 2em;
    }
    .contact-cta__title-container{
        width: 100%;
    }
    .blog__page-description{
        width: 100%;
    }
    .singlepost__page-layout{
        flex-direction: column;
    }
    .singlepost__content-container{
        width: 100%;
    }
    .singlepost__sidebar{
        width: 100%;
    }
    .singlepost__social-icon{
        font-size: 0.875rem;
    }
    .other-post__layout{
        grid-template-columns: 0.30fr 0.70fr;
    }
    .other-post__title{
        font-size: 0.875rem;
    }
    .contact-form{
        gap: 10px;
    }
    .contactus__page-layout{
        flex-direction: column;
    }
    .contactus__form-container{
        width: 100%;
        padding: 0;
    }
    .contactus__info-container{
        width: 100%;
    }
    .contactus__info-detail{
        font-size: 0.875rem;
    }
    .contactus__info-detail i{
        font-size: 1.125rem;
    }
    .form label{
        font-size: 0.875rem;
    }
    .footer__intro-container{
        flex-direction: column;
    }
    .footer-logo__container{
        width: 100%;
    }
    .footer__intro-block{
        width: 100%;
    }
    .footer-intro__heading{
        flex-direction: column;
    }
    .footer-intro__heading-title{
        width: 100%;
    }
    .newsletter-form-container{
        width: 100%;
    }
    .footer-intro__navigation{
        flex-direction: column;
        gap: 30px;
    }
    .footer-nav{
        width: 100%;
        gap: 20px;
    }
    .footer-nav.footer-nav__quick-contact{
        width: 100%;
    }
    .footer-nav__gallery{
        width: 100%;
    }
    .footer-logo img{
        max-width: 80%;
    }
    .footer-gallery{
        grid-template-columns: repeat(3, 1fr);
    }
    .footer__copyright{
        grid-template-columns: repeat(1, 1fr);
        text-align: center;
    }
    .footer__legallink{
        justify-content: center;
    }
}

/* === 03. Mobile Spacing Responsive === */

@media screen and (min-width: 767.98px){

    /* Flex spacing (gap) */

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

    /* Grid spacing (column-gap) */

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

    /* Grid spacing (row-gap) */

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

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

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

    /* Grid spacing (column-gap) */

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

    /* Grid spacing (row-gap) */

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

/* === 04. Tablet Spacing Responsive === */

@media screen and (min-width: 991.98px){
    /* Flex spacing (gap) */
    .flex-gap-lg-0 { 
        gap: 0px; 
    }
    .flex-gap-lg-1 { 
        gap: 10px; 
    }
    .flex-gap-lg-2 { 
        gap: 20px; 
    }
    .flex-gap-lg-3 { 
        gap: 30px; 
    }
    .flex-gap-lg-4 { 
        gap: 40px; 
    }
    .flex-gap-lg-5 { 
        gap: 50px; 
    }
    .flex-gap-lg-100{
        gap: 100px;
    }

    /* Grid spacing (column-gap) */

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

    /* Grid spacing (row-gap) */

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

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

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

    /* Grid spacing (column-gap) */

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

    /* Grid spacing (row-gap) */

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