@media (max-width: 1700px) {
    :root {
        --home-body-margin-left: 120px;
    }
    .header-menu .site-icon {
        margin-left: 20px;
        width: 15% !important;
    }
}

@media (max-width: 1649px) {
    :root {
        --top-title-margin-left: 40px;
        --home-body-margin-left: 50px;
    }
}

@media (max-width: 1562px) {
    :root {
        --top-title-margin-left: 30px;
        --home-body-margin-left: 40px;
    }
}

@media (max-width: 1480px) {
    .elementor-8 .header-section .elementor-element.elementor-element-398443d .elementskit-navbar-nav > li > a {
        font-size: var(--size-14);
    }
}

@media (max-width: 1440px) {
    /* :root {
        --top-title-margin-left: 30px;
        --home-body-margin-left: 40px;
    } */
    /* body {
        padding-left: 20px;
        padding-right: 20px;
    } */

    .header-menu .site-icon {
        width: 15%;
    }

    .home-section-top-left {
        padding-left: var(--home-body-margin-left);
    }

    .compan-info-wrapper {
        padding-left: var(--home-body-margin-left);
        padding-right: var(--home-body-margin-left);
    }
    .works-section.works-section-bottom {
        padding-left: var(--home-body-margin-left);
        padding-right: var(--home-body-margin-left);
    }

    .service-card {
        width: 280px;
    }

    .padding-20 {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 1366px) {
    .home-top-banner-title h2 {
        font-size: 60px !important;
    }
    .elementor-8 .elementor-element.elementor-element-398443d {
        width: 100% !important;
        padding-right: 15px;
    }
    .elementor-8 .elementor-element.elementor-element-398443d > .elementor-widget-container {
        padding: 0px 0px 0px 10px !important;
    }
    .elementor-8 .elementor-element.elementor-element-398443d .elementskit-navbar-nav > li > a {
        font-size: 15px;
        padding: 0px 0px 0px 16px !important;
    }
}

/* tablet size */
@media (max-width: 1024px) {
    :root {
        --top-title-margin-left: 30px;
        --section-side-margin: 30px;
    }

    .works-section.technical-assistance {
        padding-left: 10px;
        padding-right: 10px;
    }

    .home-section-top-left {
        padding-left: var(--home-body-margin-left);
    }
    .compan-info-wrapper {
        padding-left: var(--home-body-margin-left);
        padding-right: var(--home-body-margin-left);
    }
    .works-section.works-section-bottom {
        padding-left: 0;
        padding-right: 0;
    }

    .button-group {
        justify-content: center;
        padding-left: 0;
    }
    .footer {
        padding-left: 15px;
        padding-right: 15px;
    }

    .footer .logo {
        padding-left: 40px;
        margin-left: 0;
    }
}


/* tablet size */
@media (max-width: 768px) {
    :root {
        --section-side-margin: 10px;
    }
    /* body {
        padding-left: 10px;
        padding-right: 10px;
    } */
    .full-section {
        margin: 0 10px 30px 10px;
        border-radius: 15px;
    }

    .home-top-banner-title h2 {
        font-size: 40px !important;
    }

    .top-slider {
        margin-left: 0;
        margin-right: 0;
        padding-left: 10px;
        padding-right: 10px;
    }


    .works-section.works-section-news {
        padding-left: 10px;
        padding-right: 10px;
    }

    .works-section.works-section-bottom .page-card-left {
        padding-right: 0;
    }

    .works-section.works-section-bottom .page-card-left .elementor-widget-wrap.elementor-element-populated{
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .works-section.works-section-bottom .page-card-right {
        margin-top: 30px;
        padding-left: 0;
    }

    /* Service Cards */

    .service-cards-container {
        gap: 20px;
        padding: 0 15px 20px 15px;
    }
    
    .service-card {
        /* height: 350px; */ /* Removed fixed height */
        width: 280px;
        aspect-ratio: 4/5; /* Maintains 280x350 ratio (4:5) */
    }
    
    .service-card-image-wrapper {
        height: 180px;
    }
    
    .service-card-content {
        padding: 20px;
    }
    
    .service-card-title {
        font-size: var(--size-18);
        margin-bottom: 12px;
    }
    
    .service-card-description {
        font-size: 13px;
        margin-bottom: 15px;
    }
    
    .service-card-link {
        width: 45px;
        height: 45px;
        bottom: 15px;
        right: 15px;
    }
    
    .service-card-arrow {
        font-size: 18px;
    }
    
    .service-nav-buttons {
        margin-top: 25px;
        padding: 0 15px;
    }
    
    .service-nav-btn {
        width: 50px;
        height: 6px;
    }
}

@media (max-width: 480px) {
    .home-top-banner-title h2 {
        font-size: 30px !important;
    }
    .service-cards-wrapper {
        margin: 15px 0;
    }
    
    .service-cards-container {
        gap: 15px;
        padding: 0 10px 15px 10px;
    }
    
    .service-card {
        /* height: 320px; */ /* Removed fixed height */
        width: 250px;
        aspect-ratio: 4/5; /* Maintains 250x312.5 ratio (4:5) */
    }
    
    .service-card-content {
        padding: 18px;
    }
    
    .service-card-title {
        font-size: 16px;
        margin-bottom: 10px;
    }
    
    .service-card-image-wrapper {
        height: 160px;
    }
    
    .service-card-link {
        width: 40px;
        height: 40px;
        bottom: 12px;
        right: 12px;
    }
    
    .service-card-arrow {
        font-size: 16px;
    }
    
    .service-nav-buttons {
        margin-top: 20px;
        padding: 0 10px;
        gap: 8px;
    }
    
    .service-nav-btn {
        width: 40px;
        height: 5px;
    }
}


/* mobile size */
@media (max-width: 480px) {
    .page-card .content-wrapper {
        padding: 0 10px 0 10px;
    }

    /* .page-card .button-btn span {
        min-width: 80px;
    } */

    .button-container.moreinfo-page {
        justify-content: space-between;
    }

    .navigation-buttons .custom-btn {
        min-width: 50px;
    }

    .tabs .tab-titles {
        display: block;
    }  

    .form-item {
        flex-direction: column;
    }

    .form-item .item {
        width: 100%;
        padding: 10px;
    }
    
}