@media (max-width: 1024px) {

    .port-container::before {
        left: 15%;
    }

    .port-container::after {
        left: 14%;
    }




}

@media (max-width: 992px) {
    .sentence {
        line-height: 2.2;
    }

    .input-wrapper {
        margin: 10px 0;
        display: inline-block;
    }

    .input-wrapper input {
        width: clamp(150px, 40vw, 250px);
    }

    .form-footer {
        justify-content: center;
    }

    .projects-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .our-process-container {
        flex-direction: column;
        gap: 50px;
    }

    .our-process-left {
        position: relative;
        top: 0;
    }

    .our-process-item {
        flex-direction: column;
        padding: 40px;
    }

    .our-process-number {
        margin-right: 0;
        margin-bottom: 20px;
    }
}




@media (max-width: 768px) {
    .port-container::before {
        left: 18%;
    }

    .port-container::after {
        left: 18%;
    }

    .projects-header-section {
        padding: 70px 5vw 60px;
    }

    .footer-content {
        gap: 60px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-info {
        align-items: flex-start;
        width: 100%;
        margin-top: 20px;
    }

    .footer-links {
        gap: 20px;
        flex-direction: column;
    }

    .orbit-inner::before {
        width: 300px;
        height: 300px;
    }

    .orbit-outer::before {
        width: 440px;
        height: 440px;
    }

    .icon-chiclet {
        width: 50px;
        height: 50px;
        top: -25px;
        left: -25px;
        border-radius: 14px;
    }

    .icon-chiclet img {
        width: 25px;
        height: 25px;
    }

    .tool-icon {
        width: 50px;
        height: 50px;
        margin-top: -25px;
        margin-left: -25px;
    }

    .projects-web-grid,
    .projects-seo-grid,
    .projects-design-grid {
        grid-template-columns: 1fr;
    }

    .seo-chart-visual {
        position: relative;
        right: 0;
        bottom: 0;
        margin-top: 40px;
    }
}


@media (max-width: 500px) {
    .our-process-section {
        padding: 30px 4vw;
    }

    .footer-eagle-logo {
        right: -40%;
    }

    .footer-eagle-logo svg {
        width: 500px;
    }

    .projects-section::after {
        font-size: 24px;
    }

    .projects-section::before {
        width: 390px;
        background-repeat: repeat-x;
        background-size: contain;
    }

    .projects-card-footer h3 {
        font-size: 20px;
    }

    .projects-card-footer .metric h4 {
        font-size: 25px;
    }

    .port-container::before {
        left: 35%;
    }

    .port-container::after {
        left: 30%;
    }

    .projects-section::before {
        width: 350px;
    }

    .projects-section::after {
        font-size: 22px;
    }

    .our-process-number {
        display: none;
    }

    .seo-kpi-grid {
        gap: 15px;
    }

    .seo-globe-animation {
        display: none;
    }

    .vertical-projects {
        padding: 0 3vw 50px;
    }

    .projects-header-section .breadcrumb a {
        padding: 10px 10px;
    }

    .wd-hero {
        padding: 20px 0 70px;
    }

    .wd-title {
        letter-spacing: 0px;
        margin-bottom: 0px;
    }

    .wd-overview {
        padding: 50px 0;
    }

    .wd-image-hero {
        margin-bottom: 50px;
    }

    .wd-architecture {
        padding: 50px 0;
    }

    .wd-impact {
        padding: 50px 0;
    }

    .wd-stats {
        margin-top: 0px;
    }

    .breadcrumb {
        padding: 10px 15px;
    }

    .bento-card {
        padding: 20px;
    }

    .projects-header-section .breadcrumb {
        border-radius: 11px;
    }

    .projects-filter {
        flex-direction: column;
        border-radius: 15px;
    }

    .brand-vision {
        padding: 25px 0;
    }

    .vision-title-area h2 {
        margin-bottom: 30px;

    }

    .brand-identity-system,
    .brand-social-strategy {

        padding: 30px 0;

    }

    .bh-scroll-indicator {
        display: none;
    }

    .bh-title {
        letter-spacing: 0px;
    }

    .seo-hero-lead {
        text-align: left;
    }

    .seo-blueprint {
        padding: 30px 0;
    }

    .seo-bp-header {
        margin-bottom: 30px;
    }
}

@media (max-width: 370px) {
    .projects-section::after {
        font-size: 19px;
    }
}

@media (max-width: 320px) {
    .projects-section::before {
        width: 310px;
    }
}