/* =========================
    1.0 Tablet Responsive
============================ */

@media screen and (max-width: 991.98px) {
    h1,
    .heading-xl{
        font-size: 74px;
    }
    h2,
    .heading-lg{
        font-size: 48px;
    }
    h6,
    .heading-xxs{
        font-size: 16px;
    }
    .section-p-0{
        padding: 1em;
    }
    .section-px-3{
        padding: 6em 1em;
    }
    .section-px-3-pb-12{
        padding: 6em 1em;
    }
    .sidebar-overlay,
    .sidebar{
        display: block;
    }
    .navbar-logo-container{
        width: 35%
    }
    .navbar-logo-container img{
        width: 100%;
    }
    .nav-link-container{
        display: none;
    }
    .navbar-cta-container{
        display: none;
    }
    .nav-btn{
        display: block;
    }
    .banner-home__content-wrapper{
        width: 100%;
    }
    .about__content-wrapper{
        flex-direction: column;
    }
    .about__content-image{
        width: 100%
    }
    .about__content-image .spacer{
        height: 350px;
    }
    .about__content-intro{
        width: 100%;
        padding: 0px;
    }
    .card__about-card-intro{
        margin: 0;
    }
    .banner-whychooseus{
        padding: 6em 1em;
    }
    .whychooseus__content-wrapper{
        flex-direction: column-reverse;
    }
    .whychooseus__content-intro{
        width: 100%;
        padding: 0px;
    }
    .whychooseus__content-divider{
        width: 100%;
    }
    .whychooseus__content-image{
        width: 100%;
    }
    .whychooseus__content-image .spacer{
        height: 350px;
    }
    .testimonial__content-wrapper{
        flex-direction: column;
    }
    .testimonial__content-image-container{
        width: 100%;
    }
    .testimonial__content-intro{
        width: 100%;
    }
    .testimonial-stat{
        font-size: 48px;
    }
    .faq__content-image-container{
        width: 100%;
    }
    .faq-stat{
        font-size: 48px;
    }
    .pricing-price{
        font-size: 48px;
    }
    .single-post__container{
        flex-direction: column;
    }
    .single-post__content{
        width: 100%;
    }
    .single-post__sidebar{
        width: 100%;
    }
    .single-post__recent-text{
        width: 70%;
    }
    .notfound__container{
        width: 100%;
    }
    .footer__main-content{
        gap: 50px;
        flex-wrap: wrap;
    }
    .footer__brand{
        width: 100%;
    }
    .footer-logo img{
        width: 40%;
    }
    .footer-links-info{
        width: 100%;
    }
}

/* =========================
    2.0 Mobile Responsive
============================ */

@media screen and (max-width: 767.98px) {
    h1,
    .heading-xl{
        font-size: 48px;
    }
    h2,
    .heading-lg{
        font-size: 38px;
    }
    h4,
    .heading-sm{
        font-size: 22px;
    }
    h5,
    .heading-xs{
        font-size: 18px;
    }
    h6,
    .heading-xxs{
        font-size: 14px;
    }
    .navbar-logo-container{
        width: 55%;
    }
    .navbar-logo-container img{
        width: 85%;
    }
    .banner-home__content-description{
        width: 100%;
    }
    .card__about-card-intro{
        padding: 2em 2em;
    }
    .card__team-detail{
        width: 100%;
    }
    .testimonial__content-image-container{
        flex-direction: column;
    }
    .testimonial__image-left-container{
        width: 100%;
    }
    .testimonial__image-right{
        width: 100%;
    }
    .faq__image-left-container{
        width: 100%;
    }
    .faq__image-right{
        width: 100%;
    }
    .card__testimonial-stat{
        width: 100%;
    }
    .card__faq-stat{
        width: 100%;
    }
    .pricing-price{
        font-size: 38px;
    }
    .blog-image{
        width: 45%;
    }
    .blog__content-intro{
        width: 55%;
    }
    .single-post__recent-image{
        width: 45%;
    }
    .single-post__recent-text{
        width: 55%;
    }
    .single-post__recent-title{
        font-size: 18px;
    }
    .notfound__description{
        width: 100%;
    }
    .newsletter-banner{
        padding: 2em 2em;
    }
    .footer__content-card{
        padding: 4em 2em;
    }
    .footer-logo img{
        width: 65%;
    }
    .footer-links-info{
        grid-template-columns: repeat(1, 1fr);
    }
}

/* =========================
    3.0 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; 
    }
}

/* =========================
    4.0 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; 
    }
}