/* Responsive styles for tablets and smaller screens */
@media screen and (max-width: 1100px) {
    /* Adjust header for smaller screens */
    header {
        padding: 0.5rem 1rem;
    }
    
    /* Adjust logo size */
    header .logo img {
        transform: scale(0.8);
        transform-origin: left center;
    }
    
    /* Adjust menu for smaller screens */
    .menu ul {
        gap: 2rem;
    }   

    body {
    padding-top: 60px; /* Adjust based on header height */
    }
/* Using inline SVGs for menu icons now. Hide pseudo-element icons from earlier versions */
#servicios-industriales .menu a::before { display: none !important; }

/* Inline SVG menu icons */
#servicios-industriales .menu .menu-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    margin-right: 6px;
    margin-bottom: 0; /* keep aligned with text */
    vertical-align: middle;
    flex: 0 0 20px;
}

/* Ensure inline SVGs inherit the link color */
.menu .menu-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
    stroke: none;
}

.google-maps-container > iframe {
    width: 100%;
    max-width: 550px;
}
}


@media screen and (max-width: 979px) {
    /* Move header to bottom of screen */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        padding-bottom: 80px; /* Add padding to prevent content being hidden behind fixed header */
        padding-top: 0px; /* Adjust based on header height */
    }
    
    header {
        position: fixed;
        bottom: 0;
        left: 0;  
        top: initial;      
        width: 100%;
        background-color: var(--white);
        padding: 0.75rem 1rem;
        z-index: 1000;
        max-height: 80px;
    }
    
    /* Hide logo */
    header .logo {
        display: none;
    }  
    
    /* Optimize menu for bottom navigation */
    .menu {
        width: 100%;
    }
    
    .menu ul {
        width: 100%;
        justify-content: space-around;
        padding: 0;
        margin: 0;
    }
    
    .menu a.active,
    .menu a.is-active {
        color: var(--primary-red) !important;
        background-color: var(--white);
        padding: 0;
        height: auto !important;
        line-height: normal !important;
    }

    /* override icons to red when active */
    /* Use a single SVG per element and color it via currentColor for consistency */
    .menu a {
        color: #454545; /* default icon/text color */
    }

    .menu a.active,
    .menu a.is-active {
        color: var(--primary-red) !important; /* active color applied to icon SVGs via currentColor */
    }

    /* Inline SVGs used — pseudo-element background images removed */

    .menu a:hover::after {
        width: 0rem;
        height: 0em;
        z-index: -1;
    }

    /* Make icons inherit anchor color and show red on touch/active */
    .menu a,
    .menu a:link,
    .menu a:visited {
        color: #454545; /* default text/icon color */
    }

    /* Immediate feedback for touch devices */
    .menu a:active,
    .menu a.is-active,
    .menu a.active {
        color: var(--primary-red) !important; /* icons (SVG with currentColor) and text will turn red */
    }

    /* Also style links marked as current for accessibility */
    .menu a[aria-current="true"],
    .menu a[aria-current="page"] {
        color: var(--primary-red) !important;
    }

    /* Visible focus for keyboard users */
    .menu a:focus {
        outline: 3px solid rgba(220, 38, 38, 0.2);
        outline-offset: 2px;
    }

    
    .menu li {
        text-align: center;
    }
    
    .menu a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0.5rem 0;
        font-size: 0.9rem;
    }

/* Add icons for better mobile experience */
    .menu a::before {
        content: '';
        height: 24px;
        width: 24px;
        margin-bottom: 5px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    
    /* Example icon placeholders - you can replace with actual icons */
    .menu li:nth-child(1) a::before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="currentColor"/></svg>');
    }
    
    .menu li:nth-child(2) a::before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="currentColor"/></svg>');
    }
    
    .menu li:nth-child(3) a::before {
        /* Services (gear/settings) icon */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.32.06-.65.06-.99s-.02-.67-.06-.99l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.11-.2-.35-.28-.56-.22l-2.39.96a7.007 7.007 0 0 0-1.7-.99L14.5 2.5c-.03-.22-.22-.38-.44-.38h-3.12c-.22 0-.41.16-.44.38l-.38 2.59c-.6.23-1.16.54-1.7.88l-2.39-.96c-.21-.08-.45.02-.56.22L2.7 8.39c-.11.2-.06.46.12.61l2.03 1.58c-.04.32-.06.65-.06.99s.02.67.06.99L2.82 15.1c-.18.14-.23.41-.12.61l1.92 3.32c.11.2.35.28.56.22l2.39-.96c.54.34 1.1.65 1.7.88l.38 2.59c.03.22.22.38.44.38h3.12c.22 0 .41-.16.44-.38l.38-2.59c.6-.23 1.16-.54 1.7-.88l2.39.96c.21.08.45-.02.56-.22l1.92-3.32c.11-.2.06-.46-.12-.61l-2.03-1.58zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5S10.07 8.5 12 8.5s3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" fill="currentColor"/></svg>');
    }
    
    .menu li:nth-child(4) a::before {
        /* Projects (folder) icon */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H2v16h20V6H12l-2-2z" fill="currentColor"/></svg>');
    }
    
    .menu li:nth-child(5) a::before {
        /* Clients (group) icon */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zM8 11c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3z" fill="currentColor"/><path d="M8 13c-2.67 0-8 1.34-8 4v2h14v-2c0-2.66-5.33-4-6-4zM24 17v-1c0-2.21-1.79-4-4-4h-1c0 2.21 1.79 4 4 4h1z" fill="currentColor"/></svg>');
    }

    /* 6th menu item: contact (phone) icon */
    .menu li:nth-child(6) a::before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C9.39 21 3 14.61 3 6c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.12.35.03.75-.24 1.02l-2.2 2.2z" fill="currentColor"/></svg>');
    }

    /* Red SVGs */

    .menu li:nth-child(1) .active::before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" fill="%23ec1d26"/></svg>');
    }
    
    .menu li:nth-child(2) .active::before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" fill="%23ec1d26"/></svg>');
    }
    
    .menu li:nth-child(3) .active::before {
        /* Services (gear/settings) icon */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.32.06-.65.06-.99s-.02-.67-.06-.99l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.11-.2-.35-.28-.56-.22l-2.39.96a7.007 7.007 0 0 0-1.7-.99L14.5 2.5c-.03-.22-.22-.38-.44-.38h-3.12c-.22 0-.41.16-.44.38l-.38 2.59c-.6.23-1.16.54-1.7.88l-2.39-.96c-.21-.08-.45.02-.56.22L2.7 8.39c-.11.2-.06.46.12.61l2.03 1.58c-.04.32-.06.65-.06.99s.02.67.06.99L2.82 15.1c-.18.14-.23.41-.12.61l1.92 3.32c.11.2.35.28.56.22l2.39-.96c.54.34 1.1.65 1.7.88l.38 2.59c.03.22.22.38.44.38h3.12c.22 0 .41-.16.44-.38l.38-2.59c.6-.23 1.16-.54 1.7-.88l2.39.96c.21.08.45-.02.56-.22l1.92-3.32c.11-.2.06-.46-.12-.61l-2.03-1.58zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5S10.07 8.5 12 8.5s3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" fill="%23ec1d26"/></svg>');
    }
    
    .menu li:nth-child(4) .active::before {
        /* Projects (folder) icon */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H2v16h20V6H12l-2-2z" fill="%23ec1d26"/></svg>');
    }
    
    .menu li:nth-child(5) .active::before {
        /* Clients (group) icon */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zM8 11c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3z" fill="%23ec1d26"/><path d="M8 13c-2.67 0-8 1.34-8 4v2h14v-2c0-2.66-5.33-4-6-4zM24 17v-1c0-2.21-1.79-4-4-4h-1c0 2.21 1.79 4 4 4h1z" fill="%23ec1d26"/></svg>');
    }

    /* 6th menu item: contact (phone) icon */
    .menu li:nth-child(6) .active::before {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C9.39 21 3 14.61 3 6c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.12.35.03.75-.24 1.02l-2.2 2.2z" fill="%23ec1d26"/></svg>');
    }
    
    /* Adjust the underline animation for mobile */
    .menu a::after {
        bottom: -2px;
    }

    .services-grid {
        width: 100vw; /* Full viewport width */
        grid-template-columns: 1fr 1fr;
    }


    #servicios-industriales {
    scroll-margin-top: -5px; /* Adjust this value to match your header's height */
    }

    /* Project Section */

    .media-group {
        padding: 0 1rem;
    }

    .media-element {
        max-width: 360px;
        padding-right: 2rem;

    }

    .media-element > .project-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* align children to left */
        justify-content: flex-start;
        text-align: left;
        width: 100%;
        margin-left: 0;
        padding-left: 0;
    }

    .project-header {
        gap: 0rem;
        padding-bottom: 1rem;
    }

    .project-header > * {
    padding-bottom: 0rem;
    font-size: clamp(0.3rem, 8cqw, 0.8rem);
    }

    .project-header > strong {
        font-size: clamp(0.5rem, 4.8cqw, 1.2rem);
        margin-bottom: 0.5rem;
    }

    .project-header > span {
        padding-bottom: 0.5rem;
    }

    .scope-list > li{
    list-style: circle;
    }

    .scope-list > li::before {
        width: 7px;
        height: 7px;
    }

    /* Project Section END*/

    .contact-form {
        height: 95%;
        margin: 1.2rem 0rem;
    }

    .contact-socialmedia {
        align-items: flex-end;
    }

    .form-container {
        margin-bottom: 0.2rem;
    }

     .section-grid > div {
        margin-left: 0rem;
     }

    .google-maps-container > iframe {
        aspect-ratio: 1/1;
    }
  


}
@media screen and (max-width: 659px) {
    /* Adjust font size for smaller screens */
    .menu a {
        font-size: 0.72rem; /* 20% smaller than 0.9rem */
    }

    /* Reduce icon size by 20% */
    .menu a::before {
        height: 19.2px; /* 20% smaller than 24px */
        width: 19.2px;
    }

    /* Reduce padding for smaller screens */
    header {
        padding: 0.5rem 1rem;
    }

    
}

@media screen and (max-width: 459px) {
    /* Further reduce font size for very small screens */
    .menu a {
        padding: 0.7rem 0rem; /* Good vertical touch area, minimal horizontal padding */

    }

    /* Further reduce icon size */
    .menu a::before {
        height: 20px; /* 20% smaller than 19.2px */
        width: 20px;
    }

        /* Optimize menu item size and spacing for 360px screens */

    .menu ul {
        gap: 0.5rem; /* Tight but comfortable spacing between items */
    }

    header {
        padding: 0.3rem 0.5rem; /* Slightly more padding for visual comfort */
    }

    .hero {
        justify-content: center;
        text-align: left;
        padding-bottom: 5rem; /* Add space for the bottom navigation */
    }

    .section-header {
        padding: 0rem 2rem 2rem 2rem;
    }
    
    .hero-content {
        margin: 0rem 25% 0rem 0rem;
        padding: 0rem;
    }
    
    .nosotros-section {
        padding-top: 2rem;
    }

    .nosotros-grid {
        display: grid;
        padding: 1rem;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        gap: 1em;
        max-width: 85%;
        margin: 0 auto;
        grid-template-areas: 
          "box-1"
          "box-2"
          "box-3";
        box-sizing: border-box;
    }

    .box {
        width: 100%;
    }

    .box > p {
        padding-right: 1rem;
        padding-bottom: 1rem;
    }

    .box-mission {
        margin-bottom: 1rem;
    }

    .mission-content {
        padding: 0.7rem 1rem;
        width: 90%;
    }

    .mission-content > h3 {
        font-size: 1rem;
    }

    .mission-content > p{
        margin: 0rem;
    }

    .nosotros-figure {
        padding: 0rem;
    }

    #servicios-industriales {
        padding-top: 2rem;
    }

    .services-grid {
    grid-template-columns: 1fr; /* Single column layout */
    padding: 1rem;
    padding-bottom: 2rem;
    }

    .service-card {
        padding: 0rem;
    }

    .service-card h3 {
        height: 4rem;
    }

    .service-card p {
        height: 90px;
    }

    .why-choose-us h3 {
        padding: 0rem 1.5rem;
    }

    .benefits-grid {
        padding: 0rem 1rem;
        gap: 0.7rem 0.7rem;
    }

    .benefit-item {
        width: 150px;
    }

    .icon-container > svg {
        width: 30px;
        height: 30px;
    }


    .media-group {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    align-items: stretch;
    padding: 0 1.5rem;
    }

    .media-group > * {
        max-width: 100%;
    }

    .media-element {
        width: 85%;
        margin: 0 auto; /* centers the element horizontally */
        justify-content: center;
        padding-right: 0rem;
    }

    .media-element:first-child {
        min-height: 360px;
    }

    .media-group > :nth-child(2) {
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* align children from the bottom up */
        align-items: center;       /* center horizontally */
        margin-bottom: 1rem;
    }

    #projectos-industriales {
        scroll-margin-top: 0px; /* Adjust this value to match your header's height */
    }

    .project-header {
        width: 100%;
        padding: 0rem;
        margin: 0rem;
        justify-content: space-between;
    }

    .project-header > *{
    padding-bottom: 0rem;
    }

    .project-header > span {
        padding-bottom: 1rem;
    }

    .carousel__btn {
    width: 1.8rem;
    height: 1.8rem;
    }

    .scope-list > li{
    list-style: circle;
    }

    /* Project Section END*/

    /* Clients Section */

    #clients {
        padding-top: 4rem;
        scroll-margin-top: 0px;
    }


    /* Clients Section END */

    /* Contact Section */

    #contact {
        scroll-margin-top: 0px;
    }

    .section-grid {
        padding-top: 0rem;
    }

    .section-grid > :nth-child(1) {
        order: 2;
    }

    .social-media-list li:first-child img {
        margin-top: 5px;
    }

    .social-media-list li:first-child a::after {
        margin-top: 5px;
    }

    .social-media-list {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    padding-bottom: 2rem;
    }

    .social-media-list > li {
        width: 260px;
    }

    .social-media-list a {
        position: relative;
        display: grid;
        place-items: center;
        width: 58px;
        height: 58px;
        border-radius: 999px;
        isolation: isolate;
    }

    .contact-socialmedia > h3 {
        text-align: center;
    }

     .contact-socialmedia {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .google-maps-container {
        width: 100%;
        margin-bottom: 1rem;
    }

    .google-maps-container > iframe {
        width: 100%;
        aspect-ratio: 1 / 1;
        height: auto;
    }

    .contact-form {
        width: 100%;
    }
    

    /* Contact Section END */

    

}
@media screen and (max-width: 390px) {
    /* Optimize menu item size and spacing for 360px screens */
    .menu a {
        padding: 0.7rem 0rem; /* Good vertical touch area, minimal horizontal padding */
    }

    .menu a::before {
        height: 20px; /* Large, clear icons */
        width: 20px;
    }

    .menu ul {
        gap: 0.5rem; /* Tight but comfortable spacing between items */
    }

    header {
        padding: 0.3rem 0.5rem; /* Slightly more padding for visual comfort */
    }

    /* clients section */

    .clients {
        padding-left: 0rem;
        padding-right: 0rem;
    }

    .clients-grid img {
        max-width: 140px;
    }

    /* clients seciton END */
    
}

@media screen and (max-width: 320px) {

    .menu > ul > li > a {
        font-size: 0.6rem;
    }
}