/* Mobile-first responsive design */
@media screen and (max-width: 768px) {
    .flags {
        height: 20vh !important;
        gap: 20px !important;
        padding: 20px;
    }

    .flag img {
        width: 120px !important;
        height: auto !important;
        max-width: 80vw;
    }
    
    body {
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    .divDcas {
        height: auto !important;
        padding: 40px 20px 60px 20px !important;
        gap: 30px !important;
    }
    
    table {
        width: 90% !important;
        font-size: 1.5em !important;
        margin: 0 auto;
        min-height: 40vh !important;
    }
    
    table td {
        padding: 10px 15px !important;
        font-size: 0.9em;
    }
    
    h1 {
        font-size: 2.5em !important;
        padding: 0 20px;
    }
    
    h2 {
        font-size: 2em !important;
        padding: 0 20px;
    }
    
    .divH1 {
        height: auto !important;
        padding: 20px 0;
    }
    
    .divMenu {
        height: auto !important;
        padding: 20px 0;
    }

    .flag {
        min-height: 50px;
        min-width: 50px;
        display: flex;
        border-radius: 15px;
        justify-content: center;
        align-items: center;
        padding: 15px;
    }
}

/* Tablet adjustments */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .flags {
        gap: 50px !important;
    }
    
    .flag img {
        width: 110px;
        height: auto;
    }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
    .flag img:hover {
        transform: none;
    }
    
    .flag img:active {
        transform: scale(0.95);
        transition: transform 0.1s;
    }
    
    .flag {
        padding: 15px;
        border-radius: 15px;
        display: inline-block;
    }

    .flag img {
    max-width: 100%;
    height: auto;
}
}

@media screen and (max-width: 480px) {
    .flags {
        gap: 5px !important;
        padding: 15px;
    }
    
    .flag img {
        width: 100px !important;
        border-radius: 5px !important;
    }
    
    .flag img:active {
        transform: scale(0.95);
    }

    .divDcas {
        padding: 5px 15px 50px 15px !important;
        gap: 25px !important;
    }
    
    table {
        width: 95% !important;
        font-size: 1.5em !important;
    }
    
    table td {
        padding: 8px 12px !important;
        font-size: 0.85em;
    }
    
    h1 {
        font-size: 2em !important;
        padding: 0 15px;
    }
    
    h2 {
        font-size: 1.7em !important;
        padding: 0 15px;
    }
    
    /* Make phone and address links more touch-friendly */
    table a {
        display: inline-block;
        padding: 5px 0;
        min-height: 44px;
        line-height: 1.3;
    }
}

/* Very small screens */
@media screen and (max-width: 360px) {

    .flags {
        padding: 5px;
    }

    .flag img {
        width: 100px !important;
        border-radius: 5px !important;
    }
    
    table {
        width: 98% !important;
        font-size: 1.2em !important;
    }
    
    table td {
        padding: 6px 8px !important;
        font-size: 0.8em;
    }
    
    h1 {
        font-size: 1.8em !important;
    }
    
    h2 {
        font-size: 1.5em !important;
    }
}

/* Landscape mobile orientation */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .divH1 {
        height: auto !important;
        padding: 15px 0;
    }
    
    .divMenu {
        height: auto !important;
        padding: 15px 0;
    }
    
    .flags {
        height: auto !important;
        padding: 20px;
    }
    
    .divDcas {
        height: auto !important;
        padding: 30px 20px 40px 20px !important;
    }
    
    h1 {
        font-size: 2.2em !important;
    }
    
    h2 {
        font-size: 1.8em !important;
    }
}