@media (max-width: 768px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 20px;
        position: relative;
    }

    .menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 30px;
        height: 22px;
        cursor: pointer;
        position: absolute;
        right: 20px;
        top: 25px;
    }

    .menu-toggle span {
        height: 3px;
        background-color: var(--luxury-gold);
        border-radius: 2px;
        transition: all 0.3s ease;
    }

    nav {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: var(--dark-navy);
        margin-top: 10px;
        padding: 10px 0;
    }

    nav.active {
        display: flex;
    }

    nav a, .dropbtn {
        padding: 15px 20px;
        width: 100%;
        border-top: 1px solid var(--luxury-gold);
        justify-content: flex-start;
    }

    .dropdown-content {
        display: none;
        padding-left: 20px;
    }

    .dropdown.open .dropdown-content {
        display: block;
    }

    .dropdown .dropbtn::after {
        content: " ▼";
        font-size: 12px;
        color: var(--luxury-gold);

        
    }

    .service-item {
    flex-wrap: wrap; /* pozwala ikonkom i treści iść w dół jeśli trzeba */
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

.service-content {
    flex: 1 1 100%; /* pozwala zająć pełną szerokość przy małych ekranach */
    min-width: 0; /* zapobiega overflowowi */
}

.service-icon {
    flex: 0 0 auto; /* zapobiega rozszerzaniu ikonki */
    font-size: 1.8rem; /* mniejsza ikona dla małego ekranu */
}

}


.modal .close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 35px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    z-index: 1001;
    padding: 10px 20px; /* Większy obszar klikalny */
}

/* Dodaj obsługę dotyku */
@media (hover: none) {
    .modal .close {
        font-size: 40px;
        padding: 15px 25px;
    }
}



/* Nowe style dla kafelków usług na mobile */
@media (max-width: 768px) {
    .services-grid {
        display: block; /* Zmiana z flex na block */
        overflow-x: visible; /* Wyłączamy poziome przewijanie */
    }

    .service-card {
        width: 100%;
        margin-bottom: 30px;
        height: auto;
        min-height: 0;
    }

    .service-card img {
        height: 250px;
    }

    .service-card-content {
        position: relative;
        transform: none !important;
        padding: 25px !important;
        background: rgba(15, 28, 63, 0.9) !important;
        height: auto !important;
    }

    .service-card p {
        opacity: 1 !important;
        max-height: none !important;
        transform: none !important;
        margin-bottom: 15px !important;
        display: block !important;
    }

    .service-icon {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 768px) {
    .service-card {
        transition: transform 0.3s ease;
    }
    
    .service-card:active {
        transform: scale(0.98);
    }
}













/* mobile.css - poprawione style dla widocznych ikon */

@media (max-width: 768px) {
    /* Dla sekcji projektowania */
    .design-services .services-grid,
    .supervision-services .services-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Dla pojedynczych elementów usług */
    .service-item {
        display: flex !important;
        align-items: flex-start;
        gap: 15px;
        background: rgba(15, 28, 63, 0.9) !important;
        border-radius: 8px;
        padding: 20px !important;
        color: white;
    }

    /* Ikony - zawsze widoczne */
    .service-icon {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: var(--luxury-gold) !important;
        font-size: 1.5rem !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin-right: 10px;
    }

    /* Zawartość - zawsze widoczna */
    .service-content {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .service-content h4 {
        color: var(--luxury-gold);
        margin-bottom: 10px;
    }

    .service-content p {
        opacity: 1 !important;
        visibility: visible !important;
        max-height: none !important;
        transform: none !important;
        margin-bottom: 0 !important;
        color: var(--light-gold);
    }

    /* Wyłącz efekty hover/click na mobile */
    .service-item:hover,
    .service-item:active {
        transform: none !important;
    }
}