/* 01. Tablet Responsive */

@media screen and (max-width: 991.98px) {
    h1{
        font-size: 60px;
    }
    h2{
        font-size: 42px;
    }
    h3{
        font-size: 28px;
    }
    h3{
        font-size: 24px;
    }
    h4{
        font-size: 22px;
    }
    h5{
        font-size: 20px;
    }
    h6{
        font-size: 16px;
    }
    .nav-btn{
        display: block;
    }
    .navbar-nav{
        display: none;
    }
    .navbar-cta-container{
        display: none;
    }
    .logo-container.header-logo{
        width: 40%;
    }
    .banner-home-content{
        width: 100%;
    }
    .banner-inner-container{
        max-width: 100%;
    }
    .about-intro__main-content{
        flex-direction: column;
    }
    .about-intro__content-container{
        width: 100%;
    }
    .about-intro__image-container{
        width: 100%;
    }
    .about-benefits__main-content{
        flex-direction: column;
    }
    .about-benefits__content-container{
        width: 100%;
    }
    .about-benefits__image-container{
        width: 100%;
    }
    .about-experience__main-content{
        flex-direction: column;
    }
    .about-experience__content-container{
        width: 100%;
    }
    .about-experience__highlight-container{
        width: 100%;
        align-items: center;
        padding: 0px;
    }
    .whychooseus-content-container{
        flex-direction: column;
    }
    .whychooseus-content{
        width: 100%;
    }
    .whychooseus-image-container{
        width: 100%;
    }
    .chooseus-image-paint img{
        width: 49%;
    }
    .pricing-image-container{
        width: 100%;
    }
    .pricing-content{
        width: 100%;
    }
    .pricing-feature{
        width: 65%;
    }
    .pricing-feature__value{
        gap: 20px 20px;
    }
    .pricing-feature__number{
        font-size: 60px;
    }
    .pricing-feature__symbol{
        font-size: 60px;
    }
    .banner-contact-cta{
        background-position: bottom right;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .contact-cta-content{
        flex-direction: column;
        border: 0px;
        gap: 50px 50px;
        align-items: start;
    }
    .request-loader-container{
        width: 100%;
        justify-content: flex-start;
    }
    .request-loader{
        width: 60px;
        height: 60px;
        margin: 0px;
    }
    .contact-cta-heading{
        width: 100%;
    }
    .appointment-content-container{
        gap: 20px 20px;
    }
    .appointment-header-wrapper{
        width: 100%;
    }
    .appointment-header-container::before{
        background-position: center center;
    }
    .appointment-content-image{
        width: 40%;
    }
    .appointment-content-form{
        width: 60%;
        padding: 0em 1em 6em 1em;
    }
    .blog-section-container{
        flex-direction: column;
    }
    .blog-content-title{
        width: 100%;
    }
    .blog-content-container{
        width: 100%;
    }
    .blog-post-content-container{
        flex-direction: column;
    }
    .blog-post-content-wraper{
        width: 100%;
    }
    .blog-post-content-sidebar{
        width: 100%;
    }
    .service-content-container{
        grid-template-columns: repeat(2, 1fr);
    }
    .banner-appointment-cta{
        background-repeat: no-repeat;
        background-size: cover;
        background-position: right bottom;
    }
    .appointment-cta-content{
        gap: 50px 50px;
        border-left: 0px;
        flex-direction: column;
    }
    .appointment-cta-heading{
        width: 100%;
    }
    .banner-contact{
        padding: 1em 1em 1em 1em;
    }
    .card-contact{
        width: 100%;
    }
    .sub-heading-w-20{
        width: 50%;
    }
}

/* 02. Mobile Responsive */

@media screen and (max-width: 767.98px) {
    h1{
        font-size: 44px;
    }
    h2{
        font-size: 28px;
    }
    h3{
        font-size: 22px;
    }
    h4{
        font-size: 20px;
    }
    h5{
        font-size: 18px;
    }
    h6{
        font-size: 16px;
    }
    button, a, .btn{
        font-size: 14px;
    }
    .logo-container.header-logo{
        width: 50%;
    }
    .logo-container.header-logo img{
        width: 80%;
    }
    .banner-inner-excerpt{
        width: 100%;
    }
    .sub-heading-line,
    .sub-heading-w-20,
    .sub-heading-w-20,
    .sub-heading-w-25,
    .sub-heading-w-30,
    .sub-heading-w-35,
    .sub-heading-w-50,
    .sub-heading-double {
        width: 100%;
    }
    .sub-heading-line::after{
        flex-grow: 1;
    }
    .sub-heading-double::after,
    .sub-heading-double::before {
        flex-grow: 0;
        width: 30px;
    }
    .banner-home-content .home-content-description{
        width: 100%;
    }
    .card-about-intro__highlight{
        width: 100%;
        padding: 2em 2em 2em 2em;
        bottom: -230px;
    }
    .about-intro__main-content{
        gap: 100px 100px;
    }
    .about-intro__content-description{
        margin: 0px 0px 0px 0px;
    }
    .about-intro__image-container{
        margin-top: 200px;
    }
    .about-intro__highlight-image{
        width: 100%;
    }
    .about-intro__image-decoration .image-spacer{
        height: 350px;
    }
    .about-benefits__main-content{
        gap: 30px 30px;
    }
    .about-benefit__content-description{
        margin: 0px 0px 0px 0px;
    }
    .about-benefits__image-container{
        margin-top: 200px;
    }
    .about-benefits__highlight-image{
        width: 100%;
    }
    .about-benefits__image-decoration .image-spacer{
        height: 350px;
    }
    .about-experience__main-content{
        gap: 30px 30px;
    }
    .about-experience__content-description{
        margin: 0px 0px 0px 0px;
    }
    .service-content-container{
        grid-template-columns: repeat(1, 1fr);
    }
    .whychooseus-content-description{
        margin: 0px 0px 0px 0px;
    }
    .whychooseus-decoration-border .image-spacer{
        height: 350px;
    }
    .testimonial-name{
        font-size: 18px;
    }
    .pricing-image-decoration .image-spacer{
        height: 350px;
    }
    .pricing-list__heading-container{
        width: 100%;
    }
    .pricing-list__price{
        width: 100%;
    }
    .pricing-content{
        margin-top: 220px;
    }
    .pricing-list{
        flex-direction: column;
    }
    .pricing-feature{
        width: 100%;
        flex-direction: column;
        gap: 20px 20px;
        padding: 2em 2em 2em 2em;
        bottom: -225px;
    }
    .pricing-feature__number{
        font-size: 44px;
    }
    .pricing-feature__symbol{
        font-size: 44px;
    }
    .appointment-content-container{
        flex-direction: column;
    }
    .appointment-content-description{
        margin: 0px 0px 0px 0px;
    }
    .appointment-content-image{
        width: 100%;
    }
    .appointment-content-image .image-spacer{
        height: 350px;
    }
    .appointment-content-form{
        width: 100%;
    }
    .blog-section-description{
        width: 100%;
    }
    .footer-description{
        width: 100%;
    }
    .footer-link{
        margin: 7.5px 7.5px 7.5px 7.5px;
    }
    .footer-divider{
        width: 100%
    }
    .footer-icon{
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    .footer-copyright-container{
        justify-content: center;
    }
}

/* 03. Mobile Spacing Responsive */

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

    /* Flex spacing (gap) */

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

    /* Grid spacing (column-gap) */

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

    /* Grid spacing (row-gap) */

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

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

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

    /* Grid spacing (column-gap) */

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

    /* Grid spacing (row-gap) */

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

/* 04. Table Spacing Responsive */

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

    /* Grid spacing (column-gap) */

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

    /* Grid spacing (row-gap) */

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

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

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

    /* Grid spacing (column-gap) */

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

    /* Grid spacing (row-gap) */

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