@media only screen and (max-width: 768px) {
    .bannerContent {
        padding-top: 30%;
    }
    .about {
        padding: 0 5%;
    }
    .about .col-lg-6.p-0 {
        margin-bottom: 30px;
    }
    .howWeWorks, .projects {
        padding: 6% 0;
    }
    .howWeWorks .row .col-lg-3 {
        margin-bottom: 30px;
    }
    .projects p.w-75 {
        width: 100% !important;
    }
}

@media only screen and (max-width: 576px) {
    .bannerContent{
        padding-top: 45%;
        padding-right: 0 !important;
        min-height: 500px;
        display: flex;
        align-items: start;
        justify-content: center;
    }
    .bannerSec {
        background: linear-gradient(to top, rgb(0 0 0 / 8%) 60%, transparent 100%), url(../media/banners/img3-min.jpg) fixed top / cover no-repeat;
    }
    .bannerContent h1 {
        font-size: 3rem;
        text-shadow: 2px 2px 0px rgb(0 0 0 / 65%), 0 0px 19px rgb(0 0 0 / 34%);
    }

    .bannerContent h6.text-white.fw-bold.border-bottom.border-3.d-inline-block {
        font-size: 11px;
        margin: 0 !important;
    }
    .bannerContent h1,
    .bannerContent h1 span {
        font-size: 1.2em !important;
    }
    .bannerContent h1 span {
        padding: 0 5px !important;
    }
    a.btn {
        font-size: 10px;
    }
    .nav-link{
        font-size: 10px;
        color: black !important;
    }
    .bannerContent h6 {
        font-size: 15px;
        font-weight: 300;
    }
    footer a, footer li, footer p{
        font-size: 13px;
    }
    footer p span:nth-child(1){
        top: 2px !important;
        font-size: 10px;
    }
    .container-fluid.px-5 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
    .projects {
        padding: 10% 0;
    }
    .services-section img{
        width: 100% !important;
    }
    .page-banner {
        padding: 50% 0 30%;
    }
}