/* ================================ */
/* Responsive */
/* ================================ */

/* 1. Tablet (max-width: 991px) */

@media screen and (max-width: 991px) {
    h1{
        font-size: 40px;
    }
    h2{
        font-size: 32px;
    }
    h3 {
        font-size: 24px;
    }

    button, a{
        font-size: 14px;
    }
    .navbar-link-container{
        display: none;
    }
    .nav-btn{
        display: block;
    }
    .navbar-cta{
        display: none;
    }
    .navbar-collapse{
        display: none;
    }
    .banner-client-container{
        flex-direction: column;
        padding-bottom: 2em;
    }
    .banner-client-rating{
        width: 100%;
        justify-content: center;
        align-items: center;
        order: 2;
    }
    .banner-text-description{
        width: 100%;
        order: 1;
        justify-content: center;
        text-align: center;
    }
    .about-card span{
        font-size: 2.75em;
    }
    .about-traffic-card{
        width: 60%;
    }
    .about-image-wrapper img{
        height: 400px;
        object-fit: cover;
    }
    .dropdown-item {
        padding: 15px 30px;
        font-weight: 500;
    }
    .navbar-brand .logo{
        max-width: 100%;
    }
    .portfolio-logo{
        width: 55%;
    }
    .price-wrapper .price{
        font-size: 32px;
    }
    .footer-info .logo{
        max-width: 35%;
    }
    .testimonial-rating{
        width: 45%;
    }
    .contact-details{
        padding-right: 0;
        padding-bottom: 2em;
        gap: 20px;
    }
    .whychooseus-image{
        width: 100%;
        padding: 0em 2em 6em 0em;
    }
    .whychooseus-details{
        width: 100%;
        padding: 2em 0em 0em 0em;
    }
    .counter-box span{
        font-size: 40px;
    }

    .cta-content{
        width: 80%;
    }

    .banner-heading{
        width: 100%;
    }
    .banner-heading h1{
        font-size: 76px !important;
    }
    .card-testimonial--page.card-testimonial-wide{
        min-height: 335px;
    }
    .testimonial-details-container{
        padding: 0em;
    }
    .service-details{
        padding: 0em 2em 0em 0em;
    }
    .portfolio-details{
        padding: 0em 0em 0em 2em;
    }
    .project-logo{
        width: 90;
    }
    .process-header .process-number {
        font-size: 40px;
    }
    .number-box{
        margin: 0;
        width: 100%;
        text-align: center;
    }
    .price-wrapper .price{
        font-size: 40px;
    }
    .tab-content{
        padding: 0.5em;
    }
    .blog-link{
        font-size: 16px;
    }

    .blog-container{
        max-width: 100%;
        padding: 0;
    }
    .newsletter-card{
        width: 90%;
    }
    .newsletter-card p{
        width: 100%;
    }
    .newsletter-card form{
        width: 100%;
    }

    .footer-info-container{
        grid-template-columns: 1fr 1fr;
    }

    .footer-info,
    .footer-cta {
        grid-column: 1 / -1;
    }

    .footer-info{
        width: 60%;
    }

    .footer-quick-links{
        width: 40%;
        padding: 0em 0em 0em 2em;
    }

    .footer-services{
        width: 40%;
        padding: 0em 2em 0em 0em;
    }

    .footer-cta{
        width: 60%;
    }
}

/* 2. Mobile (max-width: 767px) */

@media screen and (max-width: 767px){
    h1{
        font-size: 32px;
    }
    h2{
        font-size: 28px;
    }
    h6{
        font-size: 14px;
    }
    .banner-home{
        min-height: 650px;
    }
    .portfolio-logo{
        width: 60%;
    }
    .counter-box span{
        font-size: 32px;
    }
    .navbar-brand .logo{
        max-width: 200%;
        width: 200%;
    }
    .footer-info .logo{
        max-width: 50%;
    }

    .event-image{
        width: 100%;
    }
    .overlay-avatar{
        width: 85%
    }
    .process-header .process-number{
        font-size: 32px;
    }
    .about-details{
        width: 100%;
        padding: 0em 0em 2em 0em;
    }
    .about-image-wrapper{
        padding: 0em 0em 5em 1em;
        width: 100%;
    }
    .about-image-wrapper img{
        height: 380px;
        object-fit: cover;
    }
    .about-traffic-card{
        width: 70%;
    }
    .about-wrapper{
        padding: 20px 0px 0px 0px;
    }
    .banner-heading{
        width: 100%;
    }
    .banner-heading h1{
        font-size: 40px !important;
    }
    .banner-icon-container{
        width: 100%;
    }
    .about-card span{
        font-size: 36px;
    }
    .form-card{
        padding: 1em 1em 1em 1em;
    }
    .testimonial-rating{
        width: 80%;
    }
    .blog-link{
        font-size: 14px;
    }
    .blog-image{
        height: 180px;
    }
    .whychooseus-image{
        padding: 0em 1em 10em 0em;
    }
    .client-rating-card{
        width: 80%;
    }
    .banner-client-rating{
        display: flex;
        flex-direction: column;
        gap: 20px;
        order: 2;
    }
    .service-details{
        padding: 0em 0em 2em 0em;
    }
    .portfolio-details{
        padding: 2em 0em 0em 0em;
    }
    .testimonial-image-wrapper{
        padding: 0em 1em 4em 0em;
    }
    .testimonial-image-wrapper img{
        height: 380px;
        object-fit: cover;
    }
    .maps{
        width: 100%;
        height: 300px;
    }
    .newsletter-card{
        width: 100%;
    }
    .newsletter-card p{
        width: 95%;
    }
    .newsletter-card form{
        width: 95%;
    }
    .footer-info-container{
        grid-template-columns: 1fr;
    }
    .footer-info,
    .footer-quick-links,
    .footer-services,
    .footer-cta{
        width: 100%;
        padding: 0px;
    }
    .copyright-container{
        padding: 1em 1em 1em 1em;
        flex-direction: column;
        justify-content: center;
    }
    .copyright-text{
        text-align: center;
    }
}

/* 3. Mobile Spacing (≥768px) */

@media screen and (min-width: 768px) {
    /* Flex spacing (gap) */

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

    /* Grid spacing (column-gap) */

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

    /* Grid spacing (row-gap) */

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

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

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

    /* Grid spacing (column-gap) */

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

    /* Grid spacing (row-gap) */

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

/* 4. Tablet Spacing (≥1024px) */

@media screen and (min-width: 992px) {
    /* 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; 
    }

    /* Grid spacing (column-gap) */

    .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; 
    }

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

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

    .grid-spacer-md-0 { 
        --bs-gutter-x: 0px; 
        --bs-gutter-y: 0px; 
    }
    .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 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-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 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-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; 
    }
}