/* 01. Tablet Spacing */

@media screen and (max-width: 991.98px) {
    h1{
        font-size: 60px;
    }
    h2{
        font-size: 40px;
    }
    h3{
        font-size: 38px;
    }
    h4{
        font-size: 28px ;
    }
    button, a, .btn{
        font-size: 14px;
    }
    .nav-btn{
        display: block;
    }
    .navbar .nav-link-container{
        display: none;
    }
    .navbar-cta-container{
        display: none;
    }
    .navbar .logo-container{
        width: 50%;
    }
    .navbar .logo-container img{
        width: 50%;
    }
    .banner-home__inner-container{
        width: 100%;
    }
    .banner-home__description{
        width: 100%;
    }
    .banner-home__stat,
    .banner-home__suffix{
        font-size: 48px;
    }
    .banner-page__heading{
        font-size: 60px;
    }
    .section__description-container{
        width: 100%;
    }
    .about__highlight-item-title{
        font-size: 28px;
    }
    .about-legacy__banner .spacer{
        height: 350px;
    }
    .testimonial__avatar-container.avatar-container--lg{
        width: 90%;
    }
    .testimonial__avatar-container.avatar-container--sm{
        width: 65%;
    }
    .testimonial__quote-text{
        font-size: 18px;
    }
    .testimonial__testimonial-author-name{
        font-size: 28px;
    }
    .testimonial__testimonial-designation{
        font-size: 18px;
    }
    .gallery-image.gallery-image--wide img{
        height: 250px;
    }
    .gallery-image.gallery-image--short-wide img{
        height: 320px;
    }
    .gallery-image.gallery-image--tall img{
        height: 200px;
    }
    .gallery-image.gallery-image--short-tall img{
        height: 200px;
    }
    .events__inner-container{
        flex-direction: column-reverse;
    }
    .event__event-active{
        width: 100%;
    }
    .event-active-date{
        font-size: 40px;
    }
    .event__event-content-container{
        width: 100%;
    }
    .team-card .spacer{
        height: 250px;
    }
    .pricing__price-text{
        font-size: 40px;
    }
    .accordion .accordion-button{
        font-size: 16px;
    }
    .contact__inner-container{
        grid-template-columns: repeat(1, 1fr);
    }
    .form label{
        font-size: 18px;
    }
    .footer__main-content{
        grid-template-columns: repeat(1, 1fr);
    }
    .footer-logo img{
        width: 70%;
    }
}

/* 02. Mobile Spacing */

@media screen and (max-width: 767.98px) {
    h1{
        font-size: 40px;
    }
    h2{
        font-size: 34px;
    }
    h3{
        font-size: 26px;
    }
    h4{
        font-size: 22px;
    }
    button, a, .btn{
        font-size: 12px;
    }
    .navbar .logo-container{
        width: 70%;
    }
    .navbar .logo-container img{
        width: 70%;
    }
    .sidebar-menu a{
        font-size: 12px;
    }
    .sidebar-close-btn{
        font-size: 12px;
    }
    .banner-home__stat,
    .banner-home__suffix{
        font-size: 30px;
    }
    .banner-page__heading{
        font-size: 40px;
    }
    .col>.banner-home__achievement-container{
        border: none;
    }
    .about__highlight-item{
        padding-left: 1em;
    }
    .about__highlight-item-title{
        font-size: 22px;
    }
    .testimonial__testimonial-author-name{
        font-size: 22px;
    }
    .testimonial__avatar-container.avatar-container--lg{
        grid-template-columns: repeat(5, 1fr);
    }
    .testimonial__avatar-container.avatar-container--sm{
        grid-template-columns: repeat(3, 1fr);
    }
    .gallery-image.gallery-image--short-wide img{
        height: 160px;
    }
    .event__event-content-list{
        grid-template-columns: 1fr;
    }
    .pricing__price-text{
        font-size: 34px;
    }
    .footer__copyright-content{
        grid-template-columns: repeat(1, 1fr);
        justify-content: center;
    }
    .footer__copyright-text{
        text-align: center;
    }
    .footer-logo{
        display: flex;
        justify-content: center;
    }
}

/* 03. Mobile Spacing Responsive */

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

    /* Flex spacing (gap) */

    .flex-gap-md-0 { 
        gap: 0px 0px; 
    }
    .flex-gap-md-1 { 
        gap: 10px 10px; 
    }
    .flex-gap-md-2 { 
        gap: 20px 20px; 
    }
    .flex-gap-md-3 { 
        gap: 30px 30px; 
    }
    .flex-gap-md-4 { 
        gap: 40px 40px; 
    }
    .flex-gap-md-5 { 
        gap: 50px 50px; 
    }
    .flex-gap-md-100 { 
        gap: 100px 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: 1025px){
    /* Flex spacing (gap) */
    .flex-gap-lg-0 { 
        gap: 0px 0px; 
    }
    .flex-gap-lg-1 { 
        gap: 10px 10px; 
    }
    .flex-gap-lg-2 { 
        gap: 20px 20px; 
    }
    .flex-gap-lg-3 { 
        gap: 30px 30px; 
    }
    .flex-gap-lg-4 { 
        gap: 40px 40px; 
    }
    .flex-gap-lg-5 { 
        gap: 50px 50px; 
    }
    .flex-gap-lg-100{
        gap: 100px 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; 
    }
}