@media (max-width: 1599.98px) {
    .exp-title h4 {
        font-size: 220px;
    }

    .team-slider .content h5 {
        font-size: 18px;
    }
}

@media (max-width: 1399.98px) {
    .about-section {
        padding: 62px 0;
    }

    .about-section h2 {
        font-size: 48px;
    }

    .exp-title h4 {
        font-size: 180px;
    }

    .totals div p {
        font-size: 14px;
    }
}

@media (max-width: 1199.98px) {
    .container-fluid {
        padding: 0 52px;
    }

    .hero-section h1 {
        font-size: 74px;
    }

    .exp-title {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .experience-section {
        padding: 82px 0;
    }

    .type-card p {
        font-size: 14px;
    }

    .type-card h5 {
        font-size: 24px;
    }

    .project-content {
        padding-left: 22px;
    }

    .right-project .project-content {
        padding: 0 22px 0 0;
    }

    .contact-map iframe {
        height: 480px;
    }

    .footer-bottom {
        flex-wrap: wrap;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 991.98px) {
    .container-fluid {
        padding: 0 32px;
    }

    .hero-section {
        padding-bottom: 42px;
    }

    .hero-section h1 {
        font-size: 45px;
    }

    .hero-section .btn,
    .hero-section p {
        margin-left: 136px;
    }

    .projects-section h2 {
        font-size: 54px;
    }

    .project-slider .project-card h5 {
        font-size: 18px;
        margin: 8px 0;
    }

    .type-card {
        border-top: 2px solid var(--white) !important;
        width: 50%;
    }

    .type-card:nth-child(2) {
        border: none;
    }

    .navbar .navbar-brand img {
        max-width: 214px;
    }

    .project-content span {
        padding-left: 55px;
    }

    .project-content {
        padding: 0;
    }

    .project-content span:after {
        width: 45px;
        right: unset;
        left: 0;
    }

    .projects {
        margin-top: 48px;
    }

    .right-project {
        flex-direction: column-reverse;
    }

    .right-project .project-content {
        text-align: left;
    }

    .right-project .project-content span:after {
        left: 0;
        margin-right: 15px;
        margin-left: 0;
    }

    .contact-detail .email {
        font-size: 18px;
    }

    .hero-sm-section h1 {
        font-size: 48px;
    }

    .projects-section h2 {
        font-size: 42px;
    }

    .contact-img {
        aspect-ratio: 624/334;
    }

    .client-logos div {
        flex-grow: unset;
        padding: 0 24px;
    }
}

@media (max-width: 767.98px) {
    .container-fluid {
        padding: 0 22px;
    }

    .offcanvas {
        background-color: var(--black);
    }

    .offcanvas .offcanvas-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .offcanvas .navbar-nav {
        justify-content: start !important;
    }

    .offcanvas .btn-close {
        filter: invert(1);
    }

    .navbar .nav-link {
        margin: 0;
        margin-bottom: 12px;
        width: fit-content;
    }

    .projects-section .lines::before {
        height: 310%;
        transform: translate(-20px, -60px);
    }

    .projects-section .lines::after {
        right: 0;
        left: unset;
        width: 60%;
    }

    .projects-section {
        padding: 82px 0 82px;
    }

    .exp-title h4 {
        font-size: 148px;
    }

    .exp-title p {
        font-size: 18px;
        width: 180px;
    }

    .exp-content p {
        margin-bottom: 28px;
    }

    .clients-section h2:after,
    .clients-section h2:before {
        width: 30vw;
    }

    .clients-section {
        padding: 42px 0;
    }

    .project-content h5 {
        font-size: 28px;
    }

    .project-content div {
        margin-bottom: 18px;
    }

    .contact-map iframe {
        height: 350px;
    }

    .other-sites {
        padding-top: 42px;
    }

    .other-sites-projects {
        padding: 42px 0;
    }

    .expertise-section {
        padding-bottom: 42px;
    }
}

@media (max-width: 575.98px) {
    .container-fluid {
        padding: 0 12px;
    }

    .navbar .navbar-brand img {
        max-width: 184px;
    }

    .navbar-toggler img {
        width: 28px;
    }

    .hero-section {
        padding-top: 100px;
    }

    .hero-badge {
        margin: 12px;
    }

    .hero-section h1 {
        font-size: 32px;
    }

    .hero-section p {
        font-size: 16px;
    }

    .hero-section .btn,
    .hero-section p {
        margin-left: 26px;
    }

    .contact-us .btn,
    .exp-content .btn,
    .about-section .btn,
    .hero-section .btn {
        padding: 8px 8px 8px 16px;
        font-size: 16px;
    }

    .projects-section h2 {
        font-size: 32px;
        margin-bottom: 18px;
    }

    .project-slider .swiper-slide:nth-child(even) {
        margin-top: 32px;
    }

    .project-slider {
        margin-top: 22px;
    }

    .about-section h2 {
        font-size: 30px;
    }

    .projects-section {
        padding: 62px 0 42px;
    }

    .about-section p {
        margin-bottom: 28px;
    }

    .about-section {
        padding: 42px 0;
    }

    .exp-title h4 {
        font-size: 100px;
    }

    .exp-title {
        align-items: center;
        max-width: 200px;
        margin: auto;
    }

    .experience-section {
        padding-bottom: 42px;
    }

    .type-card {
        width: 100%;
        border-right: none !important;
    }

    .types-section {
        padding-top: 42px;
    }

    .types-section h3 {
        font-size: 18px;
        margin-bottom: 28px;
    }

    .clients-section h2:after,
    .clients-section h2:before {
        width: 24vw;
    }

    .clients-section h2 {
        margin-bottom: 18px;
    }

    footer h5 {
        margin-bottom: 18px;
    }

    footer ul li {
        margin-bottom: 8px;
    }

    footer ul li img {
        width: 22px;
    }

    footer {
        padding-top: 42px;
    }

    .project-content span {
        margin-bottom: 0;
    }

    .project-content h5 {
        font-size: 22px;
    }

    .project-content .title,
    .project-content .address {
        margin-bottom: 4px;
        font-size: 16px;
    }

    .project-content div:last-child {
        margin: 0;
    }

    .project-content div {
        margin-bottom: 12px;
    }

    .hero-sm-section h1 {
        font-size: 32px;
        margin-bottom: 18px;
    }

    .contact-detail h5 {
        margin-bottom: 8px;
    }

    .contact-detail .number,
    .contact-detail .email,
    .contact-detail .address {
        font-size: 16px;
    }

    .contact-map iframe {
        height: 300px;
    }

    .contact-us label {
        margin-bottom: 8px;
    }

    .contact-us .form-group {
        margin-bottom: 18px;
    }

    .totals div {
        height: unset;
        border-right: none;
    }

    .totals div p {
        padding-bottom: 12px;
        border-bottom: 1px solid #9F9FA4A3;
    }

    .client-logos div {
        flex-grow: unset;
        padding: 0 4px;
    }

    .other-sites-projects .other-sites-card p {
        font-size: 16px;
    }

    .other-sites-projects .other-sites-card img {
        margin: 0;
    }

    .other-sites-projects .other-sites-card {
        padding: 14px;
    }
}