* {
margin:0;
padding: 0%;
box-sizing: border-box;
}

body {
height: 100%;
background-color: #fff;
background-image: none;
background-size: cover;
background-position: center;
}

.label-2 {
    font-size:0.938rem;
    letter-spacing: -0.3px;
    font-family:"DM Sans", sans-serif;
}
.main-text {
    font-size: 4.125rem;
    letter-spacing: -4px;
    font-family:"Work Sans", sans-serif;
}
.subtitle{
    font-size: 2.5rem;
    letter-spacing: -2.4px;
    font-family:"Work Sans", sans-serif;
}
.undersub{
    font-size: 1.875rem;
    letter-spacing: -1.2px;
    font-family:"Work Sans", sans-serif;
}
.tiny{
    font-size:1.125rem;
    letter-spacing: -0.7px;
    font-family:"Work Sans", sans-serif;
}
.mini-paragraph{
    font-size: 1rem;
    letter-spacing: -1.2px;
    font-family:"Work Sans", sans-serif;

}
.paragraph{
font-size: 1.875rem;
letter-spacing: -0.9px;
font-family:"Work Sans", sans-serif;

}

/* --- Tablet Breakpoint (<= 900px) --- */

@media (max-width: 900px) {
    .main-text {
        font-size: 3.5rem;
        letter-spacing: -3.5px;
    }

    .subtitle {
        font-size: 2.125rem;
        letter-spacing: -2px;
    }

    .undersub {
        font-size: 1.625rem;
        letter-spacing: -1px;
    }

    .tiny {
        font-size: 1rem;
        letter-spacing: -0.6px;
    }

    .mini-paragraph {
        font-size: 0.9rem;
        letter-spacing: -1px;
    }

    .paragraph {
        font-size: 1.625rem;
        letter-spacing: -0.8px;
    }

    /* .label-2 is small, so we'll only reduce it slightly */
    .label-2 {
        font-size: 0.9rem;
    }
}


/* --- Mobile Breakpoint (<= 600px) --- */

@media (max-width: 600px) {
    .main-text {
        font-size: 2.75rem;
        letter-spacing: -2.5px;
    }

    .subtitle {
        font-size: 1.75rem;
        letter-spacing: -1.5px;
    }

    .undersub {
        font-size: 1.375rem;
        letter-spacing: -0.8px;
    }

    .tiny {
        font-size: 0.9rem;
        letter-spacing: -0.5px;
    }

    .mini-paragraph {
        font-size: 0.875rem;
        letter-spacing: -0.8px;
    }

    .paragraph {
        font-size: 1.375rem;
        letter-spacing: -0.7px;
    }

    .label-2 {
        font-size: 0.875rem;
        letter-spacing: -0.2px;
    }
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #000;
font-family:"DM Sans", sans-serif;
}


header {
    width: 100%;
    position:relative;
    padding: 0 2rem;
}
/* Navbar */
.navbar {
    background: #fff;
    width: 100%;
    padding: 0 2%; 
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo img {
    transition: transform 0.3s ease;
}
.logo a:hover img {
    transform: scale(1.05); /* Scales to 105% of its size */
}

.links {
    display: flex;
    align-items: center;
    gap: 5rem;
}

.links a {
    border: 1px solid transparent;
    border-radius: 100px;
    padding: 10px;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: inset 0 0 0 0px #07174a;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;

}

.links a:hover,
.links a:focus,
.links a:active {
    color: #fff;
    background-color: #07174a;
    border-radius: 100px;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

/* Contact btn from header*/
.action_btn {
    border: 1px solid transparent;
    border-radius: 100px;
    padding: 10px 20px; 
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: inset 0 0 0 1px #07174a;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;

}

.action_btn:hover,
.action_btn:focus,
.action_btn:active {
    color: #fff;
    background-color: #07174a;
    border-radius: 100px;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}


/* Drop down menu*/

.toggle_btn {
    font-weight: lighter;
    font-size: 5rem;
    letter-spacing: -6.4px;
    font-family:"Work Sans", sans-serif;
    color: #07174a;
    font-size: 1.5rem;
    cursor: pointer;
    display: none;
}

.dropdown_menu {
    display: none; 
    position: absolute;
    right: 2rem;
    top: 80px; 
    width: 300px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
   border: 2px solid #07174a; /* Or use #000 for black */
}


.dropdown_menu.open {
    display: block;
}

.dropdown_menu li {
    list-style: none; 
    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: inset 0 0 0 0px #07174a;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
   
}
.dropdown_menu li:hover,
.dropdown_menu li:focus,
.dropdown_menu li:active {
    background-color: #07174a;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.dropdown_menu li:hover a,
.dropdown_menu li:focus a,
.dropdown_menu li:active a {
    color: #fff;
}
/* NAVBAR RESPONSIVE START */
@media (max-width: 992px) {
  
    .links,
    .navbar .action_btn {
    display: none;
    }


    .toggle_btn {
    display: block;
    }
}


@media (max-width: 576px) {
    .dropdown_menu {
        left: 2rem;
        width: unset; /* Let it be almost full width */
    }
}

/* NAVBAR RESPONSIVE END */

/* Index Video Section */
.video-container { 
     width: 100%;
     height: 100vh; 
     display: grid;
     grid-template-areas: "stack";
     place-items: center; 
     position: relative; 
}

.video-container video {
    grid-area: stack;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
 

}
.color-overlay {
    grid-area: stack;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color:#03185682;
    z-index: -1;
}

.overlay-text-container {
    grid-area: stack;
    z-index: 2;
    color: white;
    text-align: center;
    padding: 20px;
}

.overlay-text-container .label-2 {
    margin-bottom: 5px;
}


.overlay-text-container .main-text {
    margin-bottom: 5px;
}
.overlay-text-container .paragraph {
    margin-bottom: 5px;
}
/* Contact btn on index*/


.mainquote_btn{
    font-size:1.875rem;
    letter-spacing: -1.2px;
    margin-top: 10px;
    border: 1px solid transparent; 
    border-radius: 100px;  
    padding-right: 25px;
    padding-left: 25px;  
    padding-top: 5px;
    padding-bottom: 5px;
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: inset 0 0 0 1px #ffffff; 
    color: #fff;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;

}
.mainquote_btn:hover, .mainquote_btn:focus, .mainquote_btn:active {
    color: #07174a;
    background-color: #ffffff;
    border-radius: 100px;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    
}
/* Responsive Video Section*/
/* --- Tablet Breakpoint (<= 900px) --- */

@media (max-width: 900px) {
    .mainquote_btn {
        font-size: 1.625rem;
        letter-spacing: -1px;
        padding-left: 22px;
        padding-right: 22px;
    }
}


/* --- Mobile Breakpoint (<= 600px) --- */

@media (max-width: 600px) {
    .video-container {
        /* Reduces height on mobile so it's not overwhelmingly tall */
        height: 90vh; 
    }

    .overlay-text-container {
        /* Reduces padding on small screens */
        padding: 15px; 
    }

    .mainquote_btn {
        font-size: 1.375rem;
        letter-spacing: -0.8px;
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* Why us Index */
.why-us{
    background-color: #fff; 
    width: 100%;
}
.why-us-title {
    display: flex;         
    align-items: center;   
    width: 100%;
    color: #031856;         
    margin-bottom: 40px;
    margin-top: 40px;
    padding-left: 2rem;
    padding-right: 2rem;
}
.why-us-title::before,
.why-us-title::after {
    content: '';
    flex-grow: 1;
    height: 1px; 
    background-color: #031856;
}
/* Reasons index */
.Reasons-main-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: auto auto; 
    gap: 2em;
    justify-content: center;
    align-content: center;
    padding: 0 2em; 
    grid-template-areas: 
    "box-reason-1 box-reason-2 box-reason-3 box-reason-4"
    "box-reason-5 box-reason-5 box-reason-5 box-reason-5";
}

/* Reasons */
.reason-item {
  position: relative;
  overflow: hidden;  
  height: 300px;
}

.reason-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  display: block;
  transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out;
}

.icon-reason {
  position: absolute; 
  top: 15px;
  left: 15px;
  color: white;      
  font-size: 24px;   
  z-index: 2;
  padding: 5px 10px; 
  border-radius: 5px; 
}

.text-reason {
 font-family: "Work Sans", sans-serif;
  position: absolute;
  bottom: 0;             
  left: 0;               
  width: 100%;           
  background-color: #031856; 
  color: white;          
  padding: 15px 10px;    
  text-align: center;    
  z-index: 1;            
  box-sizing: border-box; 
  font-size: 1.2em;
  transition: opacity 0.3s ease-in-out;
}
.reason-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    z-index: 5; 
    transition: opacity 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

.reason-hover-overlay p {
    font-size: 1.1em;
    line-height: 1.5;
}
.reason-item:hover .reason-hover-overlay {
    background-color: #031856;
    opacity: 1;
}

.reason-item:hover img {
    transform: scale(1.05);
    filter: brightness(0.8); 
}

.reason-item:hover .text-reason {
    opacity: 0; 
}

.reason-item:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
}

/* why us responsive */
/* --- Breakpoint de Tablet (<= 900px) --- */

@media (max-width: 900px) {
    .why-us-title {
        margin-bottom: 30px;
        margin-top: 30px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .Reasons-main-container {
        /* Cambia a 2 columnas */
        grid-template-columns: repeat(2, 1fr); 
        gap: 1.5em;
        padding: 0 1.5em;
        /* Redefine las áreas para 2 columnas */
        grid-template-areas:
            "box-reason-1 box-reason-2"
            "box-reason-3 box-reason-4"
            "box-reason-5 box-reason-5";
    }

    .text-reason {
        font-size: 1.15rem; /* Texto un poco más pequeño */
    }

    .reason-hover-overlay p {
        font-size: 1.0rem; /* Texto hover un poco más pequeño */
    }
}


/* --- Breakpoint de Móvil (<= 600px) --- */

@media (max-width: 600px) {
    .why-us-title {
        margin-bottom: 25px;
        margin-top: 25px;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .Reasons-main-container {
        /* Cambia a 1 columna */
        grid-template-columns: 1fr; 
        gap: 1.5em;
        padding: 0 1em;
        /* Redefine las áreas para 1 columna */
        grid-template-areas:
            "box-reason-1"
            "box-reason-2"
            "box-reason-3"
            "box-reason-4"
            "box-reason-5";
    }

    .reason-item {
        /* Reduce la altura en pantallas pequeñas */
        height: 250px; 
    }

    .icon-reason {
        font-size: 22px; /* 1.375rem */
        top: 10px;
        left: 10px;
    }

    .text-reason {
        font-size: 1.0rem; /* 16px */
        padding: 10px;
    }

    .reason-hover-overlay {
        padding: 15px; /* Menos padding */
    }

    .reason-hover-overlay p {
        font-size: 0.9rem; 
    }
}


/* What is Stucco */
.stucco-container {
    display: flex; 
    margin: 0 auto; 
    background-color: #ffffff;
    overflow: hidden; 
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 3rem;
    padding-bottom: 2rem;
}

/* image column */
.what-is-stucco-image-column {
    flex: 1;
    min-width: 40%; 
}

.what-is-stucco-image-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* text column*/
.what-is-stucco-text-column {
    flex: 1.5;
    padding: 2.5rem;
}

.what-is-stucco-text-column .subtitle {
    margin-bottom: 1rem;
    color: #031856;
}

.stucco-type {
    margin-top: 1.5rem;
}

.stucco-type .label-2 {
    font-family: "DM Sans" sans-serif;
    color: #031856; 
    display: block; 
}

.stucco-type .undersub  {
    color: #000; 
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

.stucco-type .mini-paragraph {
    color: #000; 
    margin-bottom: 0;
}

/* responsive stucco type*/
/* --- Tablet Breakpoint (<= 900px) --- */

@media (max-width: 900px) {
    .stucco-container {
        /* Reduce side padding */
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .what-is-stucco-text-column {
        /* Reduce padding to give text more room */
        padding: 2rem;
    }
}


/* --- Mobile Breakpoint (<= 600px) --- */

@media (max-width: 600px) {
    .stucco-container {
        /* Stack the columns vertically */
        flex-direction: column; 
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 2rem;
    }

    .what-is-stucco-image-column {
        min-width: 100%;
        /* Give the image a fixed height when stacked */
        height: 300px; 
    }

    .what-is-stucco-text-column {
        /* Remove side padding (container already has it) */
        padding: 2rem 0; 
        /* Ensure it takes full width */
        flex: 1; 
    }
}

/* (foo)ter */
.site-footer {
    background-color: #ffffff; 
    color: #000; 
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    padding: 40px 0;
    border-top: 1px solid #e0e0e0;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 30px;
}

.footer-col {
    flex: 1;
    min-width: 220px; 
}

.footer-col h3 {
    font-size: 16px;
    margin-bottom: 15px;
    color: #000;
}

.footer-col p,
.footer-col li {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #555; 
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}


.footer-logo {
    max-width: 120px; 
    margin-bottom: 15px;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icons a {
    display: block;
    width: 30px;
    height: 30px;
    background-color: #e0e0e0; 
    border-radius: 50%;
}


.subscribe-form {
    display: flex;
    width: 100%;
}

.subscribe-form input[type="email"] {
    flex-grow: 1;
    border: none;
    background-color: #f0f0f0; 
    padding: 12px;
    font-size: 14px;
    margin: 0;
    border-radius: 0;
}

.subscribe-form button {
    border: none;
    background-color: #000000; 
    width: 40px; 
    padding: 12px;
    cursor: pointer;
    margin: 0;
    border-radius: 0;
}



.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; 
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    font-size: 12px;
    color: #777;
}

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

.footer-links a {
    color: #777;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* Responsive (foo)ter */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column; 
        gap: 20px;
    }
    
    .footer-bottom {
        flex-direction: column; 
        gap: 10px;
        text-align: center;
    }
}

/* Portfolio Container */
.portfolio-container {
    max-width: 100%;
    background-color: #fff;
    margin: 0 auto;
    padding: 3rem 2rem;
    display: flex;
    align-items: center;
    gap: 3rem;
}

.portfolio-text {
    flex: 1;
    margin-bottom: 1.5rem;
    
}

.portfolio-text .subtitle {
    margin-bottom: 1rem;
    color: #000;
}

.portfolio-text .paragraph {
    color: #000; 
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

.portfolio-text .label-2 {
    color: #031856; /* Lighter blue from the image */
    display: block; /* Puts it on its own line */
    
}

/* --- Buttons --- */
.portfolio-buttons {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.p-btn {
    display: inline-block;
    background-color: #031856;
    color: #ffffff;
    padding: 0.75rem 2rem;
    text-decoration: none;
    border-radius: 50px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.p-btn:hover {
    background-color: #065bca;
    transform: translateY(-2px);
}


.portfolio-images {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.portfolio-images img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-images img:hover {
    transform: scale(1.05); /* Makes the image 5% larger */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Adds a stronger shadow */
    cursor: pointer; /* Changes mouse to a pointer */
}

/* --- Porfolio top mobile --- */

/* --- Breakpoint de Tablet (<= 900px) --- */

@media (max-width: 900px) {
    .portfolio-container {
        /* Reduce el padding y el espacio */
        padding: 2.5rem 1.5rem;
        gap: 2rem;
    }

    .p-btn {
        /* Botones ligeramente más pequeños */
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }

    /* La cuadrícula de 2 columnas para imágenes está bien aquí */
}


/* --- Breakpoint de Móvil (<= 600px) --- */

@media (max-width: 600px) {
    .portfolio-container {
        /* Apila los elementos verticalmente */
        flex-direction: column;
        padding: 2rem 1rem;
        gap: 2rem;
    }

    .portfolio-text {
        margin-bottom: 0; /* Resetea el margen */
        width: 100%; /* Asegura que ocupe todo el ancho */
    }

    .portfolio-buttons {
        /* Apila los botones */
        flex-direction: column;
        align-items: stretch; /* Estira los botones al ancho */
        gap: 0.75rem;
    }

    .p-btn {
        /* Centra el texto en los botones apilados */
        text-align: center;
        font-size: 1rem; /* Restaura el tamaño de fuente para legibilidad */
        padding: 0.75rem 1.5rem;
    }

    .portfolio-images {
        /* Cambia la cuadrícula a 1 columna */
        grid-template-columns: 1fr;
        width: 100%; /* Asegura que ocupe todo el ancho */
    }
}

/* stats */
.stats-banner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    grid-template-areas: "exp proj cust desc";
    background-color: #031856; 
    color: #ffffff;
    padding: 0;
    gap: 0;
    align-items: stretch; 
}

.stat-experience {
    grid-area: exp;
}
.stat-projects {
    grid-area: proj;
}
.stat-customers {
    grid-area: cust;
}
.stat-description {
    grid-area: desc;
}
.stat-item {
    display: flex;
    flex-direction: column;
    padding: 3rem 2.5rem;
    height: 100%;
}

.stat-experience,
.stat-projects,
.stat-customers {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
}


/* stats responsive */

@media (max-width: 900px) {
    .stats-banner {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "exp   proj"
            "cust  desc";
        gap: 0; 
    }

    .stat-experience {
        border-right: 1px solid rgba(255, 255, 255, 0.15);
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    .stat-projects {
        border-right: 0; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
    .stat-customers {
        border-right: 1px solid rgba(255, 255, 255, 0.15);
        border-bottom: 0; 
    }
}

@media (max-width: 600px) {
    .stats-banner {
        grid-template-columns: 1fr;
        grid-template-areas:
            "exp"
            "proj"
            "cust"
            "desc";
        gap: 0; 
    }


    .stat-experience,
    .stat-projects,
    .stat-customers {
        border-right: 0; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }
}
/* --- Estilos Base (Escritorio / > 900px) --- */

.recent-work {
    max-width: 1200px;
    margin: 40px auto;
    text-align: center;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-sizing: border-box;
}

.recent-work .subtitle {
    margin-bottom: 25px;
    margin-top: 0;
}

.recent-work-gallery-grid {
    display: grid;
    gap: 15px;
    /* 3 columnas */
    grid-template-columns: 1fr 1fr 1.2fr;
    grid-template-rows: auto auto;
    grid-template-areas:
        "item1 item2 item5"
        "item3 item4 item5";
}

.item-1 { grid-area: item1; }
.item-2 { grid-area: item2; }
.item-3 { grid-area: item3; }
.item-4 { grid-area: item4; }
.item-5 { grid-area: item5; }

.rwi {
    overflow: hidden;
    /* Añadido para que el hover funcione bien con el borde */
    border-radius: inherit; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.rwi img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* El hover se aplica al contenedor .rwi */
.rwi:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    z-index: 10; /* Asegura que la sombra se vea sobre otros elementos */
    position: relative; /* Necesario para z-index */
}


/* --- Breakpoint de Tablet (<= 900px) --- */

@media (max-width: 900px) {
    .recent-work {
        margin: 30px auto;
        padding: 20px;
    }

    .recent-work-gallery-grid {
        /* Cambia a 2 columnas */
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        /* Reorganiza las áreas para 2 columnas */
        grid-template-areas:
            "item1 item5"
            "item2 item5"
            "item3 item4";
    }
    
    /* Nota: item5 seguirá ocupando 2 filas de alto, 
       pero item1/item2 y item3/item4 definirán esas alturas */
}


/* --- Breakpoint de Móvil (<= 600px) --- */

@media (max-width: 600px) {
    .recent-work {
        margin: 20px auto;
        /* Reduce el padding en móvil */
        padding: 15px;
    }

    .recent-work-gallery-grid {
        /* Cambia a 1 columna */
        grid-template-columns: 1fr;
        gap: 10px;
        /* Apila todas las imágenes verticalmente */
        grid-template-areas:
            "item1"
            "item2"
            "item3"
            "item4"
            "item5";
    }
    
}

/* --- Base Styles (Desktop / > 900px) --- */
/* --- Contact Section (Top) --- */

.contact-us-section {
    width: 100%;
    background-color: #fff;
    padding: 3rem 2rem;
    box-sizing: border-box; /* Added for good practice */
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

/* Info */

.contact-info .paragraph {
    color: #000;
    padding-bottom: 20px;
}

.contact-column .undersub {
    color: #031856;
    padding-top: 20px;
    padding-bottom: 15px;
}

.contact-column .mini-paragraph {
    color: #000;
    margin-bottom: 5px;
}

/* details --- */

.contact-details {
    display: flex;
    gap: 30px;
}

.contact-column a {
    color: #000;
    text-decoration: none;
}

.contact-column a:hover {
    text-decoration: underline;
}

.contact-form {
    width: 100%;
}

.form-group {
    margin-bottom: 15px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 18px 20px;
    border: none;
    background-color: #031856;
    color: #fff;
    font-size: 1.063rem; /* Good size - avoids iOS zoom */
    /* Corrected font-family syntax */
    font-family: "DM Sans", sans-serif; 
    box-sizing: border-box;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #ffffff;
    opacity: 1;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form button {
    display: inline-block;
    background-color: #000000;
    color: white;
    padding: 15px 40px;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
    float: right;
}

.contact-form button:hover {
    background-color: #333;
}

/* map */
.service-area {
    padding: 3rem 2rem;
    background-color: #fff;
    width: 100%;
    text-align: center;
    box-sizing: border-box; /* Added for good practice */
}

.service-area .undersub {
    margin-bottom: 30px;
}

.map-container {
    width: 100%;
    height: 450px;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}


/* --- Tablet Breakpoint (<= 900px) --- */

@media (max-width: 900px) {
    .contact-us-section {
        padding: 2.5rem 1.5rem;
    }

    .contact-container {
        /* Stack the columns */
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .service-area {
        padding: 2.5rem 1.5rem;
    }

    .map-container {
        height: 400px; /* Slightly shorter map */
    }
}


/* --- Mobile Breakpoint (<= 600px) --- */

@media (max-width: 600px) {
    .contact-us-section {
        padding: 2rem 1rem;
    }

    .contact-container {
        gap: 30px;
    }

    .contact-details {
        /* Stack the contact details (phone, email, etc.) */
        flex-direction: column;
        gap: 15px;
    }

    .contact-form button {
        /* Make button full-width for easy tapping */
        float: none;
        width: 100%;
    }

    .service-area {
        padding: 2rem 1rem;
    }

    .service-area .undersub {
        margin-bottom: 20px;
    }

    .map-container {
        height: 350px; /* Shorter map for mobile */
    }
}

/* responsive contact section*/

/*faq*/
.faq-section {
    background-color: #fff;
    width: 100%;
    margin: 40px auto;
    text-align: center;
    padding: 3rem 2rem;
}

.faq-section .subtitle {
    color: #000;
    margin-bottom: 10px;
}

.faq-section .paragraph {
    color: #000;
    margin-bottom: 20px;
}

/* Accordion */
.faq-container {
    text-align: left;
}

details {
    background-color: #031856;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden; 
}

summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 25px;
    color: #fff;
    cursor: pointer;
    list-style: none; 
}


summary::-webkit-details-marker {
    display: none;
}

.faq-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: transform 0.3s ease;
}

/* "v"*/
.faq-icon::after {
    content: '';
    display: inline-block;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

details[open] .faq-icon::after {
    transform: rotate(-135deg);
}

.faq-answer {
    background-color: #f0f0f0; 
    color: #000;
    padding: 25px;
    line-height: 1.6;
    overflow-wrap: break-word;
    
}

.faq-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.faq-cta p {

    margin-right: 20px;
}

.cta-button {
    display: inline-block;
    background-color: #031856;
    color: #ffffff;
    padding: 0.75rem 2rem;
    text-decoration: none;
    border-radius: 50px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.cta-button:hover {
    background-color: #065bca;
    transform: translateY(-2px);
}

/* Responsive Faq */

/*who are we */
.who-are-we-section {
    width: 100%;
    margin: 2rem auto;
    background-color: #fff; 
    box-sizing: border-box;
}
.who-are-we-text-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 2rem;
    box-sizing: border-box;
}


.who-are-we-text-wrapper .main-text {
    flex-basis: 30%;
    margin: 0; 
    color: #000;
}

.who-are-we-text-wrapper .paragraph {
    padding: 2rem; 
    color: #000; 
    margin: 0;
    flex: 1; 
}
.who-are-we-image-wrapper {
width: 100%;

}
/* --- Image Styles --- */
.who-are-we-image-wrapper img {
    width: 100%; /* Makes the image fill its container */
    height: auto; /* Maintains the image's aspect ratio */
    display: block; /* Removes any extra space below the image */
}

/* --- Responsive --- */
/* --- Tablet Breakpoint (<= 900px) --- */

@media (max-width: 900px) {
    .who-are-we-section {
        margin: 1.5rem auto;
    }
    
    .who-are-we-text-wrapper {
        padding: 1.5rem;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .who-are-we-text-wrapper .main-text {
        /* Allow heading to be a bit wider */
        flex-basis: 40%; 
    }

    .who-are-we-text-wrapper .paragraph {
        /* Reduce padding to save space */
        padding: 1rem;
    }
}


/* --- Mobile Breakpoint (<= 600px) --- */

@media (max-width: 600px) {
    .who-are-we-section {
        margin: 1rem auto 0; /* Remove bottom margin, handled by wrapper */
    }

    .who-are-we-text-wrapper {
        /* Stack the text elements */
        flex-direction: column; 
        padding: 1rem;
        gap: 1rem; /* This will now be vertical space */
        margin-bottom: 1rem;
    }

    .who-are-we-text-wrapper .main-text {
        /* Take up full width when stacked */
        flex-basis: auto; 
    }

    .who-are-we-text-wrapper .paragraph {
        /* Remove padding, not needed when stacked */
        padding: 0; 
    }
}


/* --- Main Section --- */
.process-section {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: #ffffff;
    text-align: center;
}

/* --- 1. Text Header --- */
.process-header {
    margin-bottom: 3.5rem;
}

.process-header .undersub {
    margin-bottom: 1rem;
    color: #000;
}

.process-header .paragraph {
    color: #000;
    max-width: 1200px;
    margin: 0 auto;
}

.process-steps-container {
    width: 100%;
}

.process-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    position: relative;
}

.process-steps::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 50px; 
    right: 50px;
    height: 3px;
    background-color: #e0e0e0;
    z-index: 1; 
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.step-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #031856;
    background-color: #ffffff;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; 
}

.step-circle img,
.step-circle svg {
    width: 50px;
    height: 50px;
}

.step-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    max-width: 140px; 
}


/* * ======================================================
 * NEW RESPONSIVE STYLES (Vertical Stack)
 * ======================================================
*/
@media (max-width: 1000px) {
    
    /* 1. Change the list from Grid to a vertical Flex stack */
    .process-steps {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center the stack */
        grid-template-columns: none; /* Turn off grid */
        gap: 2rem; /* Add vertical space between items */
    }

    /* 2. Hide the long horizontal desktop line */
    .process-steps::before {
        display: none;
    }
    
    /* 3. Give each item a consistent width */
    .step-item {
        width: 100%;
        max-width: 250px; /* Stop it from being too wide */
    }

    /* 4. Add new VERTICAL connecting lines */
    .step-item:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: -2rem; /* Positions it in the "gap" space */
        left: 50%; /* Center the line */
        transform: translateX(-50%);
        height: 2rem; /* Same as the "gap" */
        width: 3px;
        background-color: #e0e0e0;
        z-index: 1; 
    }
    
    /* 5. Add extra space *below* the last item */
    .step-item:last-child {
        padding-bottom: 2rem;
    }
}
/* --- Base Styles (Desktop / > 900px) --- */
/* Review/Google */

.reviews-section {
    max-width: 100%;
    margin: 3rem auto;
    display: flex;
    gap: 0;
    overflow: hidden;
}

/* --- Left Column: Testimonial Carousel --- */
.testimonial-carousel {
    flex: 1;
    background-color: #03185683; /* Fallback */
    background-image: url('/WAW-Images/WAW-2.jpg');
    background-size: cover;
    background-position: center;
    color: #ffffff;
    padding: 3rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

.testimonial-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #03185683;
    z-index: 1; /* Below content, above background */
}


.testimonial-carousel > * {
    position: relative;
    z-index: 2;
}

.carousel-content {
    margin-bottom: 2rem;
}

.carousel-content .undersub {
    margin-bottom: 1.5rem;
    /* Uses the responsive .undersub size from our first file */
}

.carousel-content .paragraph {
    font-size: 1.1rem; /* Base size */
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-style: italic;
}


.carousel-navigation {
    display: flex;
    gap: 0.75rem;
    margin-top: auto;
}

.nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.nav-dot.active {
    background-color: #ffffff;
}

/* Google Review CTA*/
.google-review-cta {
    flex: 1;
    background-color: #ffffff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.google-review-cta .label-2 {
    font-size: 0.85rem;
    color: #031856;
    margin-bottom: 0.5rem;
}

.google-review-cta .undersub {
    margin-bottom: 1rem;
    color: #000;
}

.google-review-cta .paragraph {
    font-size: 1rem; /* Base size */
    color: #555;
    margin-bottom: 2rem;
}

.rate-us-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background-color: #031856;
    color: #fff;
    padding: 0.8rem 1.5rem;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.3s ease, width 0.3s ease;
}

.rate-us-button:hover {
    background-color: #004085;
}

.google-icon {
    width: 20px;
    height: 20px;
    filter: brightness(0) invert(1);
}


/* --- Tablet Breakpoint (<= 900px) --- */

@media (max-width: 900px) {
    .reviews-section {
        /* Stack the columns */
        flex-direction: column;
        margin: 2rem auto;
    }

    .testimonial-carousel {
        padding: 2.5rem 1.5rem;
    }

    .carousel-content .paragraph {
        font-size: 1.0rem; /* Slightly smaller */
    }

    .google-review-cta {
        padding: 2.5rem 1.5rem;
        text-align: center; /* Center-align CTA when stacked */
        align-items: center; /* Center flex items */
    }

    .google-review-cta .paragraph {
        font-size: 0.95rem; /* Slightly smaller */
    }
}


/* --- Mobile Breakpoint (<= 600px) --- */

@media (max-width: 600px) {
    .reviews-section {
        margin: 1rem auto;
    }
    
    .testimonial-carousel {
        padding: 2rem 1rem;
    }

    .carousel-content {
        margin-bottom: 1.5rem;
    }

    .carousel-content .paragraph {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .google-review-cta {
        padding: 2rem 1rem;
    }

    .google-review-cta .paragraph {
        font-size: 0.9rem;
    }

    .rate-us-button {
        /* Make button full-width */
        display: flex;
        width: 100%;
        justify-content: center; /* Center text and icon */
        padding: 1rem; /* Easier to tap */
    }
}
/* --- Base Styles (Desktop / > 900px) --- */
/* --- Main Values Section --- */

.values-section {
    max-width: 100%;
    margin: 3rem auto;
    padding: 2rem;
    background-color: #ffffff; /* White background */
    box-sizing: border-box; /* Added for good practice */
}

/* --- 1. Header Area --- */
.values-header {
    text-align: left;
    margin-bottom: 3rem;
}

.values-section .label-2 {
    color: #031856;
    margin: 0;
}

.values-section .undersub {
    margin: 0.25rem 0 0 0;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

.value-item {
    text-align: left;
}

.value-item .tiny {
    margin: 0 0 1rem 0;
    position: relative;
    min-height: 50px;
    display: flex;
    align-items: left;
}

/* NOTE: Corrected typo. */
.value-item .mini-paragraph {
    color: #000;
    margin: 0;
}


/* --- Tablet Breakpoint (<= 900px) --- */

@media (max-width: 900px) {
    .values-section {
        margin: 2rem auto;
        padding: 1.5rem;
    }

    .values-header {
        margin-bottom: 2rem;
    }

    .values-grid {
        /* Change to 2 columns */
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* --- Mobile Breakpoint (<= 600px) --- */

@media (max-width: 600px) {
    .values-section {
        margin: 1.5rem auto;
        padding: 1rem;
    }

    .values-header {
        margin-bottom: 1.5rem;
    }

    .values-grid {
        /* Change to 1 column */
        grid-template-columns: 1fr;
        gap: 1.5rem;
        /* Remove side padding from grid itself */
        padding-left: 0;
        padding-right: 0;
    }

    .value-item {
        /* Add a bit of separation for stacked items */
        padding-bottom: 1rem;
    }
}

/* --- Estilos Base (Escritorio / > 900px) --- */

.mission-and-vision-content {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.info-block {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
    background-color: #ffffff;
    /* Corrección: Es mejor usar 'padding' para los 4 lados */
    padding: 2rem;
    border-radius: 8px;
}

.info-text {
    flex: 1; 
}

.info-image {
    flex: 1; 
}

.info-image img {
    width: 100%;
    height: auto;
    display: block;
}

.info-text .undersub {
    margin-top: 0;
    margin-bottom: 15px;
    color: #000;
}

.info-text .paragraph {
    font-size: 1rem;
    /* Usará los tamaños de .paragraph responsivos que definimos antes */
}

.info-block.reverse {
    flex-direction: row-reverse;
}


/* --- Breakpoint de Tablet (<= 900px) --- */

@media (max-width: 900px) {
    .mission-and-vision-content {
        margin: 30px auto;
    }

    .info-block {
        /* Reduce el espacio y el padding en tablet */
        gap: 30px;
        padding: 1.5rem;
        margin-bottom: 30px;
    }
}


/* --- Breakpoint de Móvil (<= 600px) --- */

@media (max-width: 600px) {
    .mission-and-vision-content {
        margin: 20px auto;
        padding: 0 1rem;
    }

    .info-block {
        /* APILA las columnas verticalmente */
        flex-direction: column;
        gap: 20px;
        padding: 1rem;
        margin-bottom: 20px;
    }

    /* IMPORTANTE: Sobrescribe la clase .reverse para que también se apile */
    .info-block.reverse {
        flex-direction: column;
    }

    .info-text {
        /* Opcional: Centra el texto cuando está apilado */
        text-align: center;
    }
    
    .info-text .paragraph {
        font-size: 0.95rem; /* Texto ligeramente más pequeño */
    }
}



/* --- Estilos Base (Escritorio / > 900px) --- */

/* Services */
.services-section {
    padding-left: 2rem;
    padding-right: 2rem;
    background-color: #fff;
    width: 100%;
    position: relative;
    box-sizing: border-box; /* Buena práctica */
}

.services-intro {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: start;
    gap: 30px;
    width: 90%;
    max-width: 1100px;
}

.intro-image img {
    width: 100%;
    height: auto;
    display: block;
}

.intro-text .subtitle {
    color: #000;
    margin-top: 0;
    margin-bottom: 15px;
}

.intro-text .paragraph {
    color: #000;
    line-height: 1.10; /* Advertencia: Esto es muy apretado, considera 1.4 */
    margin: 0;
}

/* responsive mission y vision */

.slider-wrapper {
    position: relative;
    width: 100%;
    margin: 30px 0;
}

.slider-container {
    overflow: hidden;
}

.slider-track {
    display: flex;
    gap: 20px; /* 1.25rem */
    transition: transform 0.5s ease-in-out, gap 0.3s ease;
}

.service-card {
    /* Muestra 4 tarjetas: calc(25% - (20px * 3 / 4)) */
    flex: 0 0 calc(25% - 15px);
    position: relative;
    overflow: hidden;
    transition: flex-basis 0.5s ease; /* Transición suave del ancho */
}

.service-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: #031856;
    color: white;
    padding: 20px;
}

.card-content .tiny {
    margin-top: 0;
    margin-bottom: 5px;
}

.card-content .mini-paragraph {
    line-height: 1.5;
    margin: 0;
}

.slider-btn {
    position: absolute;
    top: -50px; /* Posición arriba del carrusel */
    right: 0;
    transform: translateY(-50%);
    background-color: #031856;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s;
}

.slider-btn.prev {
    right: 50px; /* Espacio del botón 'next' */
}

.slider-btn.next {
    right: 0;
}

.slider-btn:hover {
    background-color: #1a3294;
}

.slider-btn:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* --- 3. CTA --- */
.services-cta {
    text-align: center;
    margin-top: 50px;
}

.services-cta .undersub {
    color: #000;
    margin-bottom: 10px;
}

.services-cta .paragraph {
    color: #000;
    margin-bottom: 25px;
}

.cta-services-button {
    display: inline-block;
    background-color: #031856;
    color: #fff;
    padding: 0.75rem 2rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: 30px;
    transition: background-color 0.3s ease, transform 0.2s ease, width 0.3s ease;
    /* Corrección: Eliminado 'background-color' duplicado */
    margin-bottom: 25px;
}

.cta-services-button:hover {
    background-color: #065bca;
    transform: translateY(-2px);
}


/* --- Breakpoint de Tablet (<= 900px) --- */

@media (max-width: 900px) {
    .services-section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .services-intro {
        /* Apila en 1 columna */
        grid-template-columns: 1fr;
        width: 100%;
        gap: 20px;
    }

    .intro-image {
        /* Centra la imagen para que no se vea rara */
        max-width: 500px;
        margin: 0 auto;
    }
    
    .service-card {
        /* Muestra 3 tarjetas: calc(33.333% - (20px * 2 / 3)) */
        flex-basis: calc(33.333% - 13.33px);
    }
}


/* --- Breakpoint de Móvil (<= 600px) --- */

@media (max-width: 600px) {
    .services-section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .intro-image {
        max-width: 100%; /* Ancho completo en móvil */
    }

    .slider-wrapper {
        /* Mueve los botones para que no se superpongan con el texto apilado */
        margin-top: 50px; 
    }
    
    .slider-track {
        /* Reduce el espacio en móvil */
        gap: 1rem; /* 16px */
    }

    .service-card {
        /* Muestra 2 tarjetas: calc(50% - (16px / 2)) */
        flex-basis: calc(50% - 8px);
    }

    .slider-btn {
        /* Botones más pequeños y ajustados */
        top: -40px; 
        width: 36px;
        height: 36px;
        font-size: 1.25rem;
    }

    .slider-btn.prev {
        right: 46px; /* 36px + 10px de espacio */
    }

    .services-cta {
        margin-top: 40px;
    }

    .cta-services-button {
        /* Botón de ancho completo */
        width: 100%;
        padding: 1rem; /* Más fácil de presionar */
    }
}

/* --- Estilos Base (Escritorio / > 900px) --- */

.commercial-section {
    display: grid;
    grid-template-areas: "stacked-item";
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    padding: 2rem;
    box-sizing: border-box; /* Añadido para consistencia */
}

.background-visual-commercial,
.color-cover,
.content-text {
    grid-area: stacked-item;
}

.background-visual-commercial {
    background-image: url('/Portfolio/shake-portfolio/shake-4.jpg');
    background-size: cover;
    background-position: center;
    z-index: 1;
}

.color-cover {
    background-color: #03185683;
    z-index: 2;
}

.content-text {
    z-index: 3;
    color: white;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    max-width: 90%;
    margin-left: 5%;
    box-sizing: border-box; /* Añadido para consistencia */
}

.content-text .main-text {
    color: #fff;
    margin-top: 0;
}

.content-text .paragraph {
    line-height: 1.2;
}


/* --- Breakpoint de Tablet (<= 900px) --- */

@media (max-width: 900px) {
    .commercial-section {
        /* Reduce el padding exterior */
        padding: 1.5rem;
    }

    .content-text {
        /* Ensancha el bloque de texto y lo alinea con el nuevo padding */
        max-width: 90%;
        margin-left: 0;
        padding: 1.5rem;
    }

    /* Tamaños de fuente responsivos que definimos antes */
    .content-text .main-text {
        font-size: 3.5rem;
    }

    .content-text .paragraph {
        font-size: 1.625rem;
    }
}


/* --- Breakpoint de Móvil (<= 600px) --- */

@media (max-width: 600px) {
    .commercial-section {
        /* Altura ligeramente menor en móvil */
        height: 350px;
        padding: 1rem;
    }

    .content-text {
        /* Centra el texto y usa el ancho completo */
        max-width: 100%;
        margin-left: 0;
        padding: 1rem;
        text-align: left;
        align-items: left; /* Centra el contenido del flex-column */
    }

    /* Tamaños de fuente responsivos que definimos antes */
    .content-text .main-text {
        font-size: 2.75rem;
    }

    .content-text .paragraph {
        font-size: 1.375rem;
    }
}
.view-recent-work-commercial {
    width: 100%;
      margin: 2rem auto;
      background: #ffffff;
      border-radius: 12px;
      padding: 2rem;
    }

    /* --- Section Header --- */
.recent-work-commercial-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.recent-work-commercial-header .undersub {
    margin: 0;
    color: #000;
}

/* --- Navigation Buttons --- */
.recent-work-commercial-nav {
    display: flex;
    gap: 0.5rem;
}

.recent-work-nav-com-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #031856;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, width 0.3s ease, height 0.3s ease;
}

.recent-work-nav-com-btn:hover {
    background-color: #065bca;
    transform: scale(1.1);
}

.recent-work-nav-com-btn:disabled {
    background-color: #b0bec5;
    cursor: not-allowed;
    transform: scale(1);
}

/* --- Carousel Styles --- */
.recent-work-com-carousel-wrapper {
    overflow: hidden;
    width: 100%;
}

.recent-work-com-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.5s ease-in-out, gap 0.5s ease;
}

/* --- Project Card Styles --- */
.recent-work-com-card {
    flex-shrink: 0;
    /* Muestra 4 artículos */
    width: calc(25% - (1.5rem * 3 / 4));
    display: block;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, width 0.5s ease;
}

.recent-work-com-card:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    z-index: 10;
    position: relative; /* Añadido para z-index */
}

.recent-work-com-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    background-color: #eee;
}

.recent-work-com-label {
    background-color: #031856;
    color: white;
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
    letter-spacing: -0.7px;
    /* Sintaxis corregida: añadida coma */
    font-family: "Work Sans", sans-serif;
}


/* --- Breakpoint de Tablet (<= 900px) --- */

@media (max-width: 900px) {
    .view-recent-work-commercial {
        /* Reduce el padding y margen del contenedor */
        margin: 1.5rem auto;
        padding: 1.5rem;
    }

    .recent-work-nav-com-btn {
        width: 36px;
        height: 36px;
        font-size: 1.5rem;
    }

    .recent-work-com-card {
        /* Muestra 3 artículos */
        width: calc(33.333% - (1.5rem * 2 / 3));
    }

    .recent-work-com-card img {
        height: 220px;
    }

    .recent-work-com-label {
        font-size: 1rem;
        padding: 0.9rem 1.1rem;
    }
}


/* --- Breakpoint de Móvil (<= 600px) --- */

@media (max-width: 600px) {
    .view-recent-work-commercial {
        /* Reduce más el padding/margen y el radio del borde */
        margin: 1rem auto;
        padding: 1rem;
        border-radius: 8px;
    }

    .recent-work-commercial-header {
        justify-content: center;
    }

    .recent-work-com-track {
        gap: 1rem;
    }

    .recent-work-com-card {
        /* Muestra 2 artículos */
        width: calc(50% - (1rem / 2));
    }

    .recent-work-com-card img {
        height: 200px;
    }

    .recent-work-com-label {
        font-size: 0.9rem;
        padding: 0.8rem 1rem;
    }
}


    /* Card project */
.project-hero-shared {
  width: 100%; 
  padding: 4rem 0;
  color: white; 
  box-sizing: border-box; 
  background-size: cover;
  background-position: center;
}
.project-aldi {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/aldi-portfolio/Aldi-1.jpg');
}

.project-barros {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/barros-portfolio/BP-1.jpg');
}
.project-starbucks {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/starbucks-portfolio/sb-2.png');
}
.project-mcdonalds {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/mcdonalds-portfolio/mcdonalds-2.jpg');
}
.project-gh {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/gh-portfolio/gh-2.jpg');
}
.project-dgr {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/dgr-portfolio/DGR-2.jpg');
}
.project-casita {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/casita-portfolio/casita-2.jpg');
}

.project-al {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/al-portfolio/al-2.jpg');
}
.project-lanai {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/lanai-portfolio/lanai-2.jpg');
}
.project-tps {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/tps-portfolio/tps-2.jpg');
}
.project-mcw {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/mcw-portfolio/mcw-2.png');
}
.project-ol {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/ol-portfolio/ol-2.jpg');
}
.project-ss {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/ss-portfolio/ss-2.jpg');
}
.project-ssl {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/ssl-portfolio/ssl-2.jpg');
}
.project-rhc {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/rhc-portfolio/rhc-2.jpg');
}
.project-saguaro {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/saguaro-portfolio/saguaro-2.png');
}
.project-shake {
  background-image: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), url('/Portfolio/shake-portfolio/shake-2.jpg');
}
/* --- 2. El Contenedor del Contenido --- */
.project-hero-content {
  /* Limita el ancho del texto para que no sea ilegible en pantallas grandes */
  max-width: 1100px; 
  
  /* Centra el contenedor de contenido */
  margin: 0 auto; 
  
  /* Añade padding lateral para que el texto no toque los bordes en móviles */
  padding: 0 2rem; 
}

/* --- Descripción Superior --- */
.project-description .subtitle {
  margin-top: 0;
  margin-bottom: 1rem;
}

.project-description .paragraph {
  line-height: 1.6; /* Espacio entre líneas para legibilidad */
  max-width: 75ch; /* Limita el ancho del párrafo (aprox. 75 caracteres) */
  margin-bottom: 0;
}

/* --- 3. Línea Divisora --- */
.divider {
  border: none; /* Quitamos el borde feo por defecto */
  height: 1px;
  /* Un color blanco semitransparente, como en la imagen */
  background-color: rgba(255, 255, 255, 0.4); 
  margin: 2.5rem 0; /* Espacio arriba y abajo de la línea */
}

/* --- 4. Detalles (la cuadrícula de 4 columnas) --- */
.project-details {
  display: grid; /* Usamos CSS Grid para las columnas */
  
  /* Crea 4 columnas de igual tamaño */
  grid-template-columns: repeat(4, 1fr); 
  
  gap: 1.5rem; /* Espacio entre las columnas */
}
.detail-item{
    text-align: center;
}
.detail-item .undersub {
  margin: 0 0 0.25rem 0; /* Espacio pequeño solo abajo */
}

.detail-item .tiny {
  margin: 0;
}

/* --- 5. Responsividad (para móviles) --- */
@media (max-width: 768px) {
  .project-hero-shared {
    padding: 3rem 0; /* Menos espaciado en pantallas pequeñas */
  }

  .project-description .subtitle {
    font-size: 2.2rem; /* Título más pequeño */
  }

  .project-details {
    /* Cambiamos de 4 a 2 columnas en pantallas medianas (tablets) */
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem; /* Un poco más de espacio entre filas */
  }
}
/* residential page */

.residential-section {
  display: grid;
  grid-template-areas: "stacked-item"; 
  position: relative; 
  width: 100%; 
  height: 400px; 
  overflow: hidden; 
  padding: 2rem;
}

.background-visual-residential,
.color-cover,
.content-text {
  grid-area: stacked-item;
}

.background-visual-residential {
  background-image: url('/Resi\ preview/RP-5.JPG'); 
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.color-cover {
  background-color: #03185683; /* Dark blue with 70% opacity */
  z-index: 2; /* Place the overlay above the image */
}

.content-text {
  z-index: 3; /* Place the text above the overlay */
  color: white; /* Text color */
  padding: 2rem; /* Adjust padding as needed */
  display: flex; /* Use flexbox for easy content alignment within the grid cell */
  flex-direction: column;
  justify-content: center; /* Vertically center the text */
  text-align: left; /* Left justify text */
  /* To limit the width of the text block */
  max-width: 80%; /* Adjust this value as needed */
  margin-left: 5%; 
}

.content-text .main-text {
color: #fff;
margin-top: 0;
}

.content-text .paragraph {
  line-height: 1.2;
}
/* Residential top responsive */

/* --- Tablet Breakpoint (<= 900px) --- */

@media (max-width: 900px) {
    .residential-section {
        padding: 1.5rem;
    }

    .content-text {
        /* Widen the text block and remove the margin */
        max-width: 75%;
        margin-left: 0;
        padding: 15px;
    }

    /* --- ADDED FONT SIZES --- */
    .content-text .main-text {
        font-size: 3.5rem; /* Down from 4.125rem */
    }

    .content-text .paragraph {
        font-size: 1.625rem; /* Down from 1.875rem */
    }
}
/* --- Mobile Breakpoint (<= 600px) --- */

@media (max-width: 600px) {
    .residential-section {
        height: 350px; /* Slightly shorter height for mobile */
        padding: 1rem;
    }

    .content-text {
        /* Make text full-width and centered */
        max-width: 100%;
        margin-left: 0;
        padding: 10px;
        text-align: left;
        align-items: left; /* Align flex items to center */
    }

    .content-text .main-text {
        /* Use the responsive font sizes from earlier */
        font-size: 2.75rem; 
    }

    .content-text .paragraph {
        /* Use the responsive font sizes from earlier */
        font-size: 1.375rem;
    }
}
/* --- Estilos Base (Escritorio / > 900px) --- */

.view-recent-work-residential {
    width: 100%;
    margin: 2rem auto;
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    box-sizing: border-box; /* Buena práctica */
}

/* --- Section Header --- */
.recent-work-residential-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.recent-work-residential-header .undersub {
    margin: 0;
    color: #000;
}

/* --- Navigation Buttons --- */
.recent-work-residential-nav {
    display: flex;
    gap: 0.5rem;
}

.recent-work-nav-res-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: #031856;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, width 0.3s ease, height 0.3s ease;
}

.recent-work-nav-res-btn:hover {
    background-color: #065bca;
    transform: scale(1.1);
}

.recent-work-nav-res-btn:disabled {
    background-color: #b0bec5;
    cursor: not-allowed;
    transform: scale(1);
}

/* --- Carousel Styles --- */
.recent-work-res-carousel-wrapper {
    overflow: hidden;
    width: 100%;
}

.recent-work-res-track {
    display: flex;
    gap: 1.5rem;
    transition: transform 0.5s ease-in-out, gap 0.5s ease;
}

/* --- Project Card Styles --- */
.recent-work-res-card {
    flex-shrink: 0;
    /* Muestra 4 artículos */
    width: calc(25% - (1.5rem * 3 / 4));
    display: block;
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, width 0.5s ease;
}

.recent-work-res-card:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    z-index: 10;
    position: relative; /* Añadido para z-index */
}

.recent-work-res-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    background-color: #eee;
}

.recent-work-res-label {
    background-color: #031856;
    color: white;
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
    letter-spacing: -0.7px;
    /* Sintaxis corregida: añadida coma */
    font-family: "Work Sans", sans-serif;
}


/* --- Breakpoint de Tablet (<= 900px) --- */

@media (max-width: 900px) {
    .view-recent-work-residential {
        /* Reduce el padding y margen del contenedor */
        margin: 1.5rem auto;
        padding: 1.5rem;
    }

    .recent-work-nav-res-btn {
        width: 36px;
        height: 36px;
        font-size: 1.5rem;
    }

    .recent-work-res-card {
        /* Muestra 3 artículos */
        width: calc(33.333% - (1.5rem * 2 / 3));
    }

    .recent-work-res-card img {
        height: 220px;
    }

    .recent-work-res-label {
        font-size: 1rem;
        padding: 0.9rem 1.1rem;
    }
}


/* --- Breakpoint de Móvil (<= 600px) --- */

@media (max-width: 600px) {
    .view-recent-work-residential {
        /* Reduce más el padding/margen y el radio del borde */
        margin: 1rem auto;
        padding: 1rem;
        border-radius: 8px;
    }

    .recent-work-residential-header {
        justify-content: center;
    }

    .recent-work-res-track {
        gap: 1rem;
    }

    .recent-work-res-card {
        /* Muestra 2 artículos */
        width: calc(50% - (1rem / 2));
    }

    .recent-work-res-card img {
        height: 200px;
    }

    .recent-work-res-label {
        font-size: 0.9rem;
        padding: 0.8rem 1rem;
    }
}

   /* Barros Portfolio */
.barros-gallery-sec {
    /* ...your other styles... */
    width: 90%; /* Give the container a max width */
    max-width: 1200px;
    margin: 2em auto; /* Center it */
}

/* ...undersub style... */

.barros-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    /* Set a minimum height for rows, especially for 'auto' */
    min-height: 200px;
}

.barros-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.barros-box:hover img {
    transform: scale(1.05);
}


.portfolio-barros-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-template-areas:
        "barros-box-1 barros-box-2 barros-box-2 barros-box-3"
        "barros-box-1 barros-box-2 barros-box-2 barros-box-4"
        "barros-box-5 barros-box-5 barros-box-5 barros-box-6"
        "barros-box-5 barros-box-5 barros-box-5 barros-box-7"
        "barros-box-8 barros-box-8 barros-box-9 barros-box-9"
        "barros-box-8 barros-box-8 barros-box-9 barros-box-9";
}

.barros-box-1 { grid-area: barros-box-1; }
.barros-box-2 { grid-area: barros-box-2; }
.barros-box-3 { grid-area: barros-box-3; }
.barros-box-4 { grid-area: barros-box-4; }
.barros-box-5 { grid-area: barros-box-5; }
.barros-box-6 { grid-area: barros-box-6; }
.barros-box-7 { grid-area: barros-box-7; }
.barros-box-8 { grid-area: barros-box-8; }
.barros-box-9 { grid-area: barros-box-9; }

/* --- TABLET LAYOUT: (e.g., screens smaller than 900px) --- */
@media (max-width: 900px) {
    .portfolio-barros-gallery-container {
        /* Change to 2 columns */
        grid-template-columns: 1fr 1fr;
        
        /* Redefine the grid areas for a 2-column layout */
        grid-template-areas:
            "barros-box-1 barros-box-2"
            "barros-box-1 barros-box-2"
            "barros-box-3 barros-box-4"
            "barros-box-5 barros-box-5"
            "barros-box-5 barros-box-5"
            "barros-box-6 barros-box-7"
            "barros-box-8 barros-box-9";
            /* Note: We had to simplify the 9-box layout to fit 2 columns */
    }
}


/* --- MOBILE LAYOUT: (e.g., screens smaller than 600px) --- */
@media (max-width: 600px) {
    .portfolio-barros-gallery-container {
        /* Change to 1 column */
        grid-template-columns: 1fr;
        
        /* Remove all grid areas to let items stack */
        grid-template-areas: none; 
    }

    /* * Tell each box to reset its grid area and stack naturally.
     * We also give them a fixed aspect-ratio so they look consistent.
    */
    .barros-box {
        grid-area: auto !important; /* Reset the area */
        min-height: 0; /* Reset min-height */
        aspect-ratio: 16 / 9; /* Look nice in a single column */
    }

    /* * You could also define a simple stack manually if you want a
     * specific order, but letting them stack automatically is easiest.
    */
}

 /* Aldi Portfolio */
 .aldi-gallery-sec {
    width: 90%;
    max-width: 1200px;
    margin: 2em auto; 
}


.aldi-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.aldi-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.aldi-box:hover img {
    transform: scale(1.05);
}


.portfolio-aldi-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);


    grid-auto-rows: auto;


    grid-template-areas:
        "aldi-box-1 aldi-box-2 aldi-box-3 aldi-box-4"
        "aldi-box-5 aldi-box-5 aldi-box-6 aldi-box-6"
        "aldi-box-5 aldi-box-5 aldi-box-7 aldi-box-7"
        "aldi-box-8 aldi-box-8 aldi-box-9 aldi-box-9";
}


.aldi-box-1 { grid-area: aldi-box-1; }
.aldi-box-2 { grid-area: aldi-box-2; }
.aldi-box-3 { grid-area: aldi-box-3; }
.aldi-box-4 { grid-area: aldi-box-4; }
.aldi-box-5 { grid-area: aldi-box-5; }
.aldi-box-6 { grid-area: aldi-box-6; }
.aldi-box-7 { grid-area: aldi-box-7; }
.aldi-box-8 { grid-area: aldi-box-8; }
.aldi-box-9 { grid-area: aldi-box-9; }


@media (max-width: 900px) {
    .portfolio-aldi-gallery-container {

        grid-template-columns: 1fr 1fr;
    
        grid-template-areas:
            "aldi-box-1 aldi-box-2"
            "aldi-box-1 aldi-box-2"
            "aldi-box-3 aldi-box-4"
            "aldi-box-5 aldi-box-5"
            "aldi-box-5 aldi-box-5"
            "aldi-box-6 aldi-box-7"
            "aldi-box-8 aldi-box-9";
      
    }
}
/* --- MOBILE LAYOUT: (e.g., screens smaller than 600px) --- */
@media (max-width: 600px) {
    .portfolio-aldi-gallery-container {
        grid-template-columns: 1fr;
        grid-template-areas: none; 
    }
    .aldi-box {
        grid-area: auto !important; 
        min-height: 0; 
        aspect-ratio: 16 / 9; 
    }


}

/* Starbucks Portfolio */
 .starbucks-gallery-sec {
    width: 90%; 
    max-width: 1200px;
    margin: 2em auto; 
}

.starbucks-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.starbucks-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.starbucks-box:hover img {
    transform: scale(1.05);
}


.portfolio-starbucks-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-template-areas:
        "starbucks-box-1 starbucks-box-2 starbucks-box-2 starbucks-box-3"
        "starbucks-box-1 starbucks-box-4 starbucks-box-4 starbucks-box-5"
        "starbucks-box-1 starbucks-box-4 starbucks-box-4 starbucks-box-6"
        "starbucks-box-1 starbucks-box-7 starbucks-box-8 starbucks-box-9";
}

.starbucks-box-1 { grid-area: starbucks-box-1; }
.starbucks-box-2 { grid-area: starbucks-box-2; }
.starbucks-box-3 { grid-area: starbucks-box-3; }
.starbucks-box-4 { grid-area: starbucks-box-4; }
.starbucks-box-5 { grid-area: starbucks-box-5; }
.starbucks-box-6 { grid-area: starbucks-box-6; }
.starbucks-box-7 { grid-area: starbucks-box-7; }
.starbucks-box-8 { grid-area: starbucks-box-8; }
.starbucks-box-9 { grid-area: starbucks-box-9; }

/* --- TABLET LAYOUT: (e.g., screens smaller than 900px) --- */
@media (max-width: 900px) {
    .portfolio-starbucks-gallery-container {
        /* Change to 2 columns */
        grid-template-columns: 1fr 1fr;
        
        /* Redefine the grid areas for a 2-column layout */
        grid-template-areas:
            "starbucks-box-1 starbucks-box-2"
            "starbucks-box-1 starbucks-box-2"
            "starbucks-box-3 starbucks-box-4"
            "starbucks-box-5 starbucks-box-5"
            "starbucks-box-5 starbucks-box-5"
            "starbucks-box-6 starbucks-box-7"
            "starbucks-box-8 starbucks-box-9";
            /* Note: We had to simplify the 9-box layout to fit 2 columns */
    }
}
/* --- MOBILE LAYOUT: (e.g., screens smaller than 600px) --- */
@media (max-width: 600px) {
    .portfolio-starbucks-gallery-container {
        /* Change to 1 column */
        grid-template-columns: 1fr;
        
        /* Remove all grid areas to let items stack */
        grid-template-areas: none; 
    }

    /* * Tell each box to reset its grid area and stack naturally.
     * We also give them a fixed aspect-ratio so they look consistent.
    */
    .starbucks-box {
        grid-area: auto !important; /* Reset the area */
        min-height: 0; /* Reset min-height */
        aspect-ratio: 16 / 9; /* Look nice in a single column */
    }

    /* * You could also define a simple stack manually if you want a
     * specific order, but letting them stack automatically is easiest.
    */
}

/* Macdonalds Portfolio */
 .macdonalds-gallery-sec {
    width: 90%; 
    max-width: 1200px;
    margin: 2em auto; 
}

.macdonalds-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.macdonalds-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.macdonalds-box:hover img {
    transform: scale(1.05);
}


.portfolio-macdonalds-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-template-areas:
        "macdonalds-box-1 macdonalds-box-1 macdonalds-box-1 macdonalds-box-2"
        "macdonalds-box-3 macdonalds-box-4 macdonalds-box-5 macdonalds-box-6";
}

.macdonalds-box-1 { grid-area: macdonalds-box-1; }
.macdonalds-box-2 { grid-area: macdonalds-box-2; }
.macdonalds-box-3 { grid-area: macdonalds-box-3; }
.macdonalds-box-4 { grid-area: macdonalds-box-4; }
.macdonalds-box-5 { grid-area: macdonalds-box-5; }
.macdonalds-box-6 { grid-area: macdonalds-box-6; }

/* --- TABLET LAYOUT: (e.g., screens smaller than 900px) --- */
@media (max-width: 900px) {
    .portfolio-macdonalds-gallery-container {
        /* Change to 2 columns */
        grid-template-columns: 1fr 1fr;
        
        /* Redefine the grid areas for a 2-column layout */
        grid-template-areas:
            "macdonalds-box-1 macdonalds-box-2"
            "macdonalds-box-1 macdonalds-box-2"
            "macdonalds-box-3 macdonalds-box-4"
            "macdonalds-box-5 macdonalds-box-5"
            "macdonalds-box-5 macdonalds-box-5"
            "macdonalds-box-6 macdonalds-box-6"
            /* Note: We had to simplify the 9-box layout to fit 2 columns */
    }
}
/* --- MOBILE LAYOUT: (e.g., screens smaller than 600px) --- */
@media (max-width: 600px) {
    .portfolio-macdonalds-gallery-container {
        /* Change to 1 column */
        grid-template-columns: 1fr;
        
        /* Remove all grid areas to let items stack */
        grid-template-areas: none; 
    }

    /* * Tell each box to reset its grid area and stack naturally.
     * We also give them a fixed aspect-ratio so they look consistent.
    */
    .macdonalds-box {
        grid-area: auto !important; /* Reset the area */
        min-height: 0; /* Reset min-height */
        aspect-ratio: 16 / 9; /* Look nice in a single column */
    }

    /* * You could also define a simple stack manually if you want a
     * specific order, but letting them stack automatically is easiest.
    */
}

/* GH Portfolio */
 .gh-gallery-sec {
    width: 90%;
    max-width: 1200px;
    margin: 2em auto; 
}


.gh-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.gh-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gh-box:hover img {
    transform: scale(1.05);
}


.portfolio-gh-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(6, 1fr);


    grid-auto-rows: auto;


    grid-template-areas:
        "gh-box-1 gh-box-1 gh-box-1 gh-box-2 gh-box-2 gh-box-3"
        "gh-box-1 gh-box-1 gh-box-1 gh-box-4 gh-box-4 gh-box-3"
        "gh-box-5 gh-box-5 gh-box-6 gh-box-6 gh-box-7 gh-box-7"
        "gh-box-8 gh-box-8 gh-box-9 gh-box-9 gh-box-7 gh-box-7"
        "gh-box-10 gh-box-10 gh-box-10 gh-box-11 gh-box-11 gh-box-11";
}


.gh-box-1 { grid-area: gh-box-1; }
.gh-box-2 { grid-area: gh-box-2; }
.gh-box-3 { grid-area: gh-box-3; }
.gh-box-4 { grid-area: gh-box-4; }
.gh-box-5 { grid-area: gh-box-5; }
.gh-box-6 { grid-area: gh-box-6; }
.gh-box-7 { grid-area: gh-box-7; }
.gh-box-8 { grid-area: gh-box-8; }
.gh-box-9 { grid-area: gh-box-9; }
.gh-box-10 { grid-area: gh-box-10; }
.gh-box-11 { grid-area: gh-box-11; }

/* --- TABLET LAYOUT: (e.g., screens smaller than 900px) --- */
@media (max-width: 900px) {
    .portfolio-gh-gallery-container {
        /* Change to 3 columns */
        grid-template-columns: repeat(3, 1fr);
        
        /* Redefine the grid areas for a 3-column layout */
        grid-template-areas:
            "gh-box-1 gh-box-1 gh-box-2"
            "gh-box-1 gh-box-1 gh-box-3"
            "gh-box-4 gh-box-4 gh-box-5"
            "gh-box-6 gh-box-6 gh-box-7"
            "gh-box-8 gh-box-9 gh-box-9"
            "gh-box-10 gh-box-10 gh-box-11";
    }

}
@media (max-width: 600px) {
    .portfolio-gh-gallery-container {
        grid-template-columns: 1fr;
        grid-template-areas: none; 
    }
    .gh-box {
        grid-area: auto !important; 
        min-height: 0; 
        aspect-ratio: 16 / 9; 
    }
}

/* DGR Portfolio */
 .dgr-gallery-sec {
    width: 90%;
    max-width: 1200px;
    margin: 2em auto; 
}


.dgr-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.dgr-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.dgr-box:hover img {
    transform: scale(1.05);
}


.portfolio-dgr-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);


    grid-auto-rows: auto;


    grid-template-areas:
        "dgr-box-1 dgr-box-1 dgr-box-2 dgr-box-2"
        "dgr-box-1 dgr-box-1 dgr-box-3 dgr-box-3"
        "dgr-box-4 dgr-box-5 dgr-box-6 dgr-box-7"
        "dgr-box-8 dgr-box-8 dgr-box-8 dgr-box-8";
}


.dgr-box-1 { grid-area: dgr-box-1; }
.dgr-box-2 { grid-area: dgr-box-2; }
.dgr-box-3 { grid-area: dgr-box-3; }
.dgr-box-4 { grid-area: dgr-box-4; }
.dgr-box-5 { grid-area: dgr-box-5; }
.dgr-box-6 { grid-area: dgr-box-6; }
.dgr-box-7 { grid-area: dgr-box-7; }
.dgr-box-8 { grid-area: dgr-box-8; }

/* --- VISTA DE TABLET: (ej. pantallas de menos de 900px) --- */
@media (max-width: 900px) {
    .portfolio-dgr-gallery-container {
        /* Cambiar a 2 columnas */
        grid-template-columns: 1fr 1fr;
        
        /* Redefinir las áreas del grid para 2 columnas */
        grid-template-areas:
            "dgr-box-1 dgr-box-1"
            "dgr-box-1 dgr-box-1"
            "dgr-box-2 dgr-box-3"
            "dgr-box-4 dgr-box-5"
            "dgr-box-6 dgr-box-7"
            "dgr-box-8 dgr-box-8";
    }
}

@media (max-width: 600px) {
    .portfolio-dgr-gallery-container {
        grid-template-columns: 1fr;
        grid-template-areas: none; 
    }
    .dgr-box {
        grid-area: auto !important; 
        min-height: 0; 
        aspect-ratio: 16 / 9; 
    }
}

/* Casita Portfolio */
 .casita-gallery-sec {
    width: 90%;
    max-width: 1200px;
    margin: 2em auto; 
}


.casita-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.casita-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.casita-box:hover img {
    transform: scale(1.05);
}
.portfolio-casita-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-template-areas:
        "casita-box-1 casita-box-1 casita-box-2 casita-box-2"
        "casita-box-3 casita-box-3 casita-box-2 casita-box-2"
        "casita-box-4 casita-box-5 casita-box-6 casita-box-6"
        "casita-box-7 casita-box-7 casita-box-8 casita-box-9"
        "casita-box-10 casita-box-10 casita-box-11 casita-box-11"
        "casita-box-12 casita-box-12 casita-box-12 casita-box-12";
}


.casita-box-1 { grid-area: casita-box-1; }
.casita-box-2 { grid-area: casita-box-2; }
.casita-box-3 { grid-area: casita-box-3; }
.casita-box-4 { grid-area: casita-box-4; }
.casita-box-5 { grid-area: casita-box-5; }
.casita-box-6 { grid-area: casita-box-6; }
.casita-box-7 { grid-area: casita-box-7; }
.casita-box-8 { grid-area: casita-box-8; }
.casita-box-9 { grid-area: casita-box-9; }
.casita-box-10 { grid-area: casita-box-10; }
.casita-box-11 { grid-area: casita-box-11; }
.casita-box-12 { grid-area: casita-box-12; }

/* --- VISTA DE TABLET: (ej. pantallas de menos de 900px) --- */
@media (max-width: 900px) {
    .portfolio-casita-gallery-container {
        /* Cambiar a 2 columnas */
        grid-template-columns: 1fr 1fr;
        
        /* Redefinir las áreas del grid para 2 columnas */
        grid-template-areas:
            "casita-box-1 casita-box-1"
            "casita-box-2 casita-box-2"
            "casita-box-3 casita-box-3"
            "casita-box-4 casita-box-5"
            "casita-box-6 casita-box-6"
            "casita-box-7 casita-box-7"
            "casita-box-8 casita-box-9"
            "casita-box-10 casita-box-10"
            "casita-box-11 casita-box-11"
            "casita-box-12 casita-box-12";
    }
}

@media (max-width: 600px) {
    .portfolio-casita-gallery-container {
        grid-template-columns: 1fr;
        grid-template-areas: none; 
    }
    .casita-box {
        grid-area: auto !important; 
        min-height: 0; 
        aspect-ratio: 16 / 9; 
    }
}

/* AL Portfolio */
 .al-gallery-sec {
    width: 90%;
    max-width: 1200px;
    margin: 2em auto; 
}


.al-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.al-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.al-box:hover img {
    transform: scale(1.05);
}


.portfolio-al-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);


    grid-auto-rows: auto;


    grid-template-areas:
        "al-box-1 al-box-1 al-box-2 al-box-2"
        "al-box-3 al-box-4 al-box-5 al-box-5"
        "al-box-6 al-box-7 al-box-5 al-box-5"
        "al-box-8 al-box-8 al-box-8 al-box-8"
        "al-box-9 al-box-9 al-box-10 al-box-10"
        "al-box-9 al-box-9 al-box-10 al-box-10"
        "al-box-11 al-box-12 al-box-13 al-box-14"
        "al-box-15 al-box-15 al-box-16 al-box-16"
        "al-box-17 al-box-18 al-box-19 al-box-19";
        
}


.al-box-1 { grid-area: al-box-1; }
.al-box-2 { grid-area: al-box-2; }
.al-box-3 { grid-area: al-box-3; }
.al-box-4 { grid-area: al-box-4; }
.al-box-5 { grid-area: al-box-5; }
.al-box-6 { grid-area: al-box-6; }
.al-box-7 { grid-area: al-box-7; }
.al-box-8 { grid-area: al-box-8; }
.al-box-9 { grid-area: al-box-9; }
.al-box-10 { grid-area: al-box-10; }
.al-box-11 { grid-area: al-box-11; }
.al-box-12 { grid-area: al-box-12; }
.al-box-13 { grid-area: al-box-13; }
.al-box-14 { grid-area: al-box-14; }
.al-box-15 { grid-area: al-box-15; }
.al-box-16 { grid-area: al-box-16; }
.al-box-17 { grid-area: al-box-17; }
.al-box-18 { grid-area: al-box-18; }
.al-box-19 { grid-area: al-box-19; }

/* --- RESPONSIVE CODE (Tablet) --- */
/* On screens 900px wide or less, these rules will apply */
@media (max-width: 900px) {
    .portfolio-al-gallery-container {
        /* 1. Change to 2 columns */
        grid-template-columns: repeat(2, 1fr);
        
        /* 2. Define a new 2-column grid-template-areas */
        /* This is just an example layout; you can rearrange as needed */
        grid-template-areas:
            "al-box-1 al-box-1"
            "al-box-2 al-box-2"
            "al-box-3 al-box-4"
            "al-box-5 al-box-5"
            "al-box-6 al-box-7"
            "al-box-8 al-box-8"
            "al-box-9 al-box-9"
            "al-box-10 al-box-10"
            "al-box-11 al-box-12"
            "al-box-13 al-box-14"
            "al-box-15 al-box-16"
            "al-box-17 al-box-18"
            "al-box-19 al-box-19";
    }
}

@media (max-width: 600px) {
    .portfolio-al-gallery-container {
        grid-template-columns: 1fr;
        grid-template-areas: none; 
    }
    .al-box {
        grid-area: auto !important; 
        min-height: 0; 
        aspect-ratio: 16 / 9; 
    }
}

/* Lanai Portfolio */
 .lanai-gallery-sec {
    width: 90%;
    max-width: 1200px;
    margin: 2em auto; 
}


.lanai-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.lanai-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.lanai-box:hover img {
    transform: scale(1.05);
}


.portfolio-lanai-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-template-areas:
        "lanai-box-1 lanai-box-1 lanai-box-2 lanai-box-2"
        "lanai-box-3 lanai-box-4 lanai-box-5 lanai-box-5"
        "lanai-box-6 lanai-box-7 lanai-box-5 lanai-box-5"
        "lanai-box-8 lanai-box-8 lanai-box-8 lanai-box-8"
        "lanai-box-9 lanai-box-9 lanai-box-10 lanai-box-10"
        "lanai-box-9 lanai-box-9 lanai-box-10 lanai-box-10"
        "lanai-box-11 lanai-box-12 lanai-box-13 lanai-box-14"   
}


.lanai-box-1 { grid-area: lanai-box-1; }
.lanai-box-2 { grid-area: lanai-box-2; }
.lanai-box-3 { grid-area: lanai-box-3; }
.lanai-box-4 { grid-area: lanai-box-4; }
.lanai-box-5 { grid-area: lanai-box-5; }
.lanai-box-6 { grid-area: lanai-box-6; }
.lanai-box-7 { grid-area: lanai-box-7; }
.lanai-box-8 { grid-area: lanai-box-8; }
.lanai-box-9 { grid-area: lanai-box-9; }
.lanai-box-10 { grid-area: lanai-box-10; }
.lanai-box-11 { grid-area: lanai-box-11; }
.lanai-box-12 { grid-area: lanai-box-12; }
.lanai-box-13 { grid-area: lanai-box-13; }
.lanai-box-14 { grid-area: lanai-box-14; }

/* --- RESPONSIVE CODE (900px) --- */
@media (max-width: 900px) {
    .portfolio-lanai-gallery-container {
        /* 1. Change to 2 columns */
        grid-template-columns: repeat(2, 1fr);
        
        /* 2. Define a new 2-column grid layout */
        /* (This is an example, you can customize it) */
        grid-template-areas:
            "lanai-box-1 lanai-box-1"
            "lanai-box-2 lanai-box-2"
            "lanai-box-3 lanai-box-4"
            "lanai-box-5 lanai-box-5"
            "lanai-box-6 lanai-box-7"
            "lanai-box-8 lanai-box-8"
            "lanai-box-9 lanai-box-9"
            "lanai-box-10 lanai-box-10"
            "lanai-box-11 lanai-box-12"
            "lanai-box-13 lanai-box-14";
    }
}

@media (max-width: 600px) {
    .portfolio-lanai-gallery-container {
        grid-template-columns: 1fr;
        grid-template-areas: none; 
    }
    .lanai-box {
        grid-area: auto !important; 
        min-height: 0; 
        aspect-ratio: 16 / 9; 
    }
}

/* TPS Portfolio */
 .tps-gallery-sec {
    width: 90%;
    max-width: 1200px;
    margin: 2em auto; 
}


.tps-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.tps-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.tps-box:hover img {
    transform: scale(1.05);
}


.portfolio-tps-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-template-areas:
        "tps-box-1 tps-box-1 tps-box-2 tps-box-2"
        "tps-box-3 tps-box-4 tps-box-5 tps-box-5"
        "tps-box-6 tps-box-7 tps-box-5 tps-box-5"
        "tps-box-8 tps-box-8 tps-box-8 tps-box-8"
        "tps-box-9 tps-box-9 tps-box-10 tps-box-10"
        "tps-box-9 tps-box-9 tps-box-10 tps-box-10"
        "tps-box-11 tps-box-12 tps-box-13 tps-box-14"
        "tps-box-15 tps-box-15 tps-box-16 tps-box-16"
        "tps-box-17 tps-box-18 tps-box-19 tps-box-19"
        "tps-box-20 tps-box-20 tps-box-20 tps-box-20"
}
.tps-box-1 { grid-area: tps-box-1; }
.tps-box-2 { grid-area: tps-box-2; }
.tps-box-3 { grid-area: tps-box-3; }
.tps-box-4 { grid-area: tps-box-4; }
.tps-box-5 { grid-area: tps-box-5; }
.tps-box-6 { grid-area: tps-box-6; }
.tps-box-7 { grid-area: tps-box-7; }
.tps-box-8 { grid-area: tps-box-8; }
.tps-box-9 { grid-area: tps-box-9; }
.tps-box-10 { grid-area: tps-box-10; }
.tps-box-11 { grid-area: tps-box-11; }
.tps-box-12 { grid-area: tps-box-12; }
.tps-box-13 { grid-area: tps-box-13; }
.tps-box-14 { grid-area: tps-box-14; }
.tps-box-15 { grid-area: tps-box-15; }
.tps-box-16 { grid-area: tps-box-16; }
.tps-box-17 { grid-area: tps-box-17; }
.tps-box-18 { grid-area: tps-box-18; }
.tps-box-19 { grid-area: tps-box-19; }
.tps-box-20 { grid-area: tps-box-20; }

/* --- RESPONSIVE CODE (Tablet) --- */
/* On screens 900px wide or less, these rules will apply */
@media (max-width: 900px) {
    .portfolio-tps-gallery-container {
        /* 1. Change to 2 columns */
        grid-template-columns: repeat(2, 1fr);
        
        grid-template-areas:
            "tps-box-1 tps-box-1"
            "tps-box-2 tps-box-2"
            "tps-box-3 tps-box-4"
            "tps-box-5 tps-box-5"
            "tps-box-6 tps-box-7"
            "tps-box-8 tps-box-8"
            "tps-box-9 tps-box-9"
            "tps-box-10 tps-box-10"
            "tps-box-11 tps-box-12"
            "tps-box-13 tps-box-14"
            "tps-box-15 tps-box-16"
            "tps-box-17 tps-box-18"
            "tps-box-19 tps-box-19"
            "tps-box-20 tps-box-20";
    }
}

@media (max-width: 600px) {
    .portfolio-tps-gallery-container {
        grid-template-columns: 1fr;
        grid-template-areas: none; 
    }
    .tps-box {
        grid-area: auto !important; 
        min-height: 0; 
        aspect-ratio: 16 / 9; 
    }
}

/* Mcw Portfolio */
.mcw-gallery-sec {
    /* ...your other styles... */
    width: 90%; /* Give the container a max width */
    max-width: 1200px;
    margin: 2em auto; /* Center it */
}

/* ...undersub style... */

.mcw-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    /* Set a minimum height for rows, especially for 'auto' */
    min-height: 200px;
}

.mcw-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mcw-box:hover img {
    transform: scale(1.05);
}


.portfolio-mcw-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-template-areas:
        "mcw-box-1 mcw-box-2 mcw-box-2 mcw-box-3"
        "mcw-box-1 mcw-box-2 mcw-box-2 mcw-box-4"
        "mcw-box-5 mcw-box-5 mcw-box-5 mcw-box-6"
        "mcw-box-5 mcw-box-5 mcw-box-5 mcw-box-7"
        "mcw-box-8 mcw-box-8 mcw-box-9 mcw-box-9"
        "mcw-box-8 mcw-box-8 mcw-box-9 mcw-box-9";
}

.mcw-box-1 { grid-area: mcw-box-1; }
.mcw-box-2 { grid-area: mcw-box-2; }
.mcw-box-3 { grid-area: mcw-box-3; }
.mcw-box-4 { grid-area: mcw-box-4; }
.mcw-box-5 { grid-area: mcw-box-5; }
.mcw-box-6 { grid-area: mcw-box-6; }
.mcw-box-7 { grid-area: mcw-box-7; }
.mcw-box-8 { grid-area: mcw-box-8; }
.mcw-box-9 { grid-area: mcw-box-9; }


@media (max-width: 900px) {
    .portfolio-mcw-gallery-container {
        display: grid;
        gap: 0.5em;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        grid-auto-rows: auto;
        grid-template-areas:
            "mcw-box-1 mcw-box-2"
            "mcw-box-3 mcw-box-4"
            "mcw-box-5 mcw-box-5" /* Box 5 spans full width */
            "mcw-box-6 mcw-box-7"
            "mcw-box-8 mcw-box-9";
    }
}

@media (max-width: 600px) {
    .portfolio-mcw-gallery-container {
        grid-template-columns: 1fr;
        grid-template-areas: none; 
    }
    .mcw-box {
        grid-area: auto !important; 
        min-height: 0; 
        aspect-ratio: 16 / 9; 
    }
}
/* Ol Portfolio */
.ol-gallery-sec {
    /* ...your other styles... */
    width: 90%; /* Give the container a max width */
    max-width: 1200px;
    margin: 2em auto; /* Center it */
}



/* Ol portfolio*/

.ol-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.ol-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ol-box:hover img {
    transform: scale(1.05);
}


.portfolio-ol-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-template-areas:
        "ol-box-1 ol-box-2 ol-box-3 ol-box-4"
        "ol-box-1 ol-box-2 ol-box-3 ol-box-4"
}

.ol-box-1 { grid-area: ol-box-1; }
.ol-box-2 { grid-area: ol-box-2; }
.ol-box-3 { grid-area: ol-box-3; }
.ol-box-4 { grid-area: ol-box-4; }

/* Styles for screens 900px and SMALLER (Tablet/Mobile)
  - A 2-column layout
*/
@media (max-width: 900px) {
    .portfolio-ol-gallery-container {
        display: grid;
        gap: 0.5em;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        grid-auto-rows: auto;
        grid-template-areas:
            "ol-box-1 ol-box-2"
            "ol-box-3 ol-box-4";
    }
}

@media (max-width: 600px) {
    .portfolio-ol-gallery-container {
        grid-template-columns: 1fr;
        grid-template-areas: none; 
    }
    .ol-box {
        grid-area: auto !important; 
        min-height: 0; 
        aspect-ratio: 16 / 9; 
    }
}

/* Ss portfolio*/

.ss-gallery-sec {
    /* ...your other styles... */
    width: 90%; /* Give the container a max width */
    max-width: 1200px;
    margin: 2em auto; /* Center it */
}

.ss-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.ss-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ss-box:hover img {
    transform: scale(1.05);
}


.portfolio-ss-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-template-areas:
        "ss-box-1 ss-box-1 ss-box-2 ss-box-2"
        "ss-box-1 ss-box-1 ss-box-3 ss-box-4"
        "ss-box-1 ss-box-1 ss-box-3 ss-box-4"
        "ss-box-1 ss-box-1 ss-box-5 ss-box-5";
}

.ss-box-1 { grid-area: ss-box-1; }
.ss-box-2 { grid-area: ss-box-2; }
.ss-box-3 { grid-area: ss-box-3; }
.ss-box-4 { grid-area: ss-box-4; }
.ss-box-5 { grid-area: ss-box-5; }

@media (max-width: 900px) {
    .portfolio-ss-gallery-container {
        display: grid;
        gap: 0.5em;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        grid-auto-rows: auto;
        grid-template-areas:
            "ss-box-1 ss-box-1"
            "ss-box-2 ss-box-2"
            "ss-box-3 ss-box-4"
            "ss-box-5 ss-box-5";
    }
}
@media (max-width: 600px) {
    .portfolio-ss-gallery-container {
        grid-template-columns: 1fr;
        grid-template-areas: none; 
    }
    .ss-box {
        grid-area: auto !important; 
        min-height: 0; 
        aspect-ratio: 16 / 9; 
    }
}

/* Ssl portfolio*/

.ssl-gallery-sec {
    /* ...your other styles... */
    width: 90%; /* Give the container a max width */
    max-width: 1200px;
    margin: 2em auto; /* Center it */
}

.ssl-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.ssl-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ssl-box:hover img {
    transform: scale(1.05);
}


.portfolio-ssl-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-template-areas:
        "ssl-box-1 ssl-box-1 ssl-box-2 ssl-box-2"
        "ssl-box-1 ssl-box-1 ssl-box-3 ssl-box-4"
        "ssl-box-1 ssl-box-1 ssl-box-3 ssl-box-4"
        "ssl-box-1 ssl-box-1 ssl-box-5 ssl-box-5";
}

.ssl-box-1 { grid-area: ssl-box-1; }
.ssl-box-2 { grid-area: ssl-box-2; }
.ssl-box-3 { grid-area: ssl-box-3; }
.ssl-box-4 { grid-area: ssl-box-4; }
.ssl-box-5 { grid-area: ssl-box-5; }

@media (max-width: 900px) {
    .portfolio-ssl-gallery-container {
        display: grid;
        gap: 0.5em;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        grid-auto-rows: auto;
        grid-template-areas:
            "ssl-box-1 ssl-box-1"
            "ssl-box-2 ssl-box-2"
            "ssl-box-3 ssl-box-4"
            "ssl-box-5 ssl-box-5";
    }
}
@media (max-width: 600px) {
    .portfolio-ssl-gallery-container {
        grid-template-columns: 1fr;
        grid-template-areas: none; 
    }
    .ssl-box {
        grid-area: auto !important; 
        min-height: 0; 
        aspect-ratio: 16 / 9; 
    }
}

/* Rhc portfolio*/

.rhc-gallery-sec {
    /* ...your other styles... */
    width: 90%; /* Give the container a max width */
    max-width: 1200px;
    margin: 2em auto; /* Center it */
}

.rhc-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.rhc-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.rhc-box:hover img {
    transform: scale(1.05);
}


.portfolio-rhc-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-template-areas:
        "rhc-box-1 rhc-box-1 rhc-box-2 rhc-box-2"
        "rhc-box-1 rhc-box-1 rhc-box-3 rhc-box-4"
        "rhc-box-1 rhc-box-1 rhc-box-3 rhc-box-4"
        "rhc-box-1 rhc-box-1 rhc-box-5 rhc-box-5"
        "rhc-box-6 rhc-box-6 rhc-box-7 rhc-box-7";
}

.rhc-box-1 { grid-area: rhc-box-1; }
.rhc-box-2 { grid-area: rhc-box-2; }
.rhc-box-3 { grid-area: rhc-box-3; }
.rhc-box-4 { grid-area: rhc-box-4; }
.rhc-box-5 { grid-area: rhc-box-5; }
.rhc-box-6 { grid-area: rhc-box-6; }
.rhc-box-7 { grid-area: rhc-box-7; }

@media (max-width: 900px) {
    .portfolio-rhc-gallery-container {
        display: grid;
        gap: 0.5em;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        grid-auto-rows: auto;
        grid-template-areas:
            "rhc-box-1 rhc-box-1"
            "rhc-box-2 rhc-box-2"
            "rhc-box-3 rhc-box-4"
            "rhc-box-5 rhc-box-5"
            "rhc-box-6 rhc-box-7";
    }
}
@media (max-width: 600px) {
    .portfolio-rhc-gallery-container {
        grid-template-columns: 1fr;
        grid-template-areas: none; 
    }
    .rhc-box {
        grid-area: auto !important; 
        min-height: 0; 
        aspect-ratio: 16 / 9; 
    }
}

/* Saguaro portfolio*/

.saguaro-gallery-sec {
    /* ...your other styles... */
    width: 90%; /* Give the container a max width */
    max-width: 1200px;
    margin: 2em auto; /* Center it */
}

.saguaro-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.saguaro-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.saguaro-box:hover img {
    transform: scale(1.05);
}


.portfolio-saguaro-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-template-areas:
        "saguaro-box-1 saguaro-box-1 saguaro-box-2 saguaro-box-2"
        "saguaro-box-1 saguaro-box-1 saguaro-box-3 saguaro-box-4"
        "saguaro-box-1 saguaro-box-1 saguaro-box-3 saguaro-box-4"
        "saguaro-box-1 saguaro-box-1 saguaro-box-5 saguaro-box-5"
        "saguaro-box-6 saguaro-box-6 saguaro-box-7 saguaro-box-7";
}

.saguaro-box-1 { grid-area: saguaro-box-1; }
.saguaro-box-2 { grid-area: saguaro-box-2; }
.saguaro-box-3 { grid-area: saguaro-box-3; }
.saguaro-box-4 { grid-area: saguaro-box-4; }
.saguaro-box-5 { grid-area: saguaro-box-5; }
.saguaro-box-6 { grid-area: saguaro-box-6; }
.saguaro-box-7 { grid-area: saguaro-box-7; }

@media (max-width: 900px) {
    .portfolio-saguaro-gallery-container {
        display: grid;
        gap: 0.5em;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        grid-auto-rows: auto;
        grid-template-areas:
            "saguaro-box-1 saguaro-box-1"
            "saguaro-box-2 saguaro-box-2"
            "saguaro-box-3 saguaro-box-4"
            "saguaro-box-5 saguaro-box-5"
            "saguaro-box-6 saguaro-box-7";
    }
}
@media (max-width: 600px) {
    .portfolio-saguaro-gallery-container {
        grid-template-columns: 1fr;
        grid-template-areas: none; 
    }
    .saguaro-box {
        grid-area: auto !important; 
        min-height: 0; 
        aspect-ratio: 16 / 9; 
    }
}

/* Shake portfolio*/

.shake-gallery-sec {
    /* ...your other styles... */
    width: 90%; /* Give the container a max width */
    max-width: 1200px;
    margin: 2em auto; /* Center it */
}

.shake-box {
    background-color: #07174a;
    overflow: hidden;
    position: relative;
    min-height: 200px;
}

.shake-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.shake-box:hover img {
    transform: scale(1.05);
}


.portfolio-shake-gallery-container {
    display: grid;
    gap: 0.5em;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    grid-template-areas:
        "shake-box-1 shake-box-1 shake-box-2 shake-box-2"
        "shake-box-3 shake-box-3 shake-box-3 shake-box-3"
        "shake-box-3 shake-box-3 shake-box-3 shake-box-3"
        "shake-box-4 shake-box-5 shake-box-6 shake-box-7"
        "shake-box-8 shake-box-8 shake-box-9 shake-box-9"
        "shake-box-10 shake-box-10 shake-box-11 shake-box-12"
        "shake-box-10 shake-box-10 shake-box-13 shake-box-13";
}

.shake-box-1 { grid-area: shake-box-1; }
.shake-box-2 { grid-area: shake-box-2; }
.shake-box-3 { grid-area: shake-box-3; }
.shake-box-4 { grid-area: shake-box-4; }
.shake-box-5 { grid-area: shake-box-5; }
.shake-box-6 { grid-area: shake-box-6; }
.shake-box-7 { grid-area: shake-box-7; }
.shake-box-8 { grid-area: shake-box-8; }
.shake-box-9 { grid-area: shake-box-9; }
.shake-box-10 { grid-area: shake-box-10; }
.shake-box-11 { grid-area: shake-box-11; }
.shake-box-12 { grid-area: shake-box-12; }
.shake-box-13 { grid-area: shake-box-13; }

/* Styles for screens 900px and SMALLER (Tablet/Mobile)
  - A 2-column layout
*/
@media (max-width: 900px) {
    .portfolio-shake-gallery-container {
        display: grid;
        gap: 0.5em;
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        grid-auto-rows: auto;
        grid-template-areas:
            "shake-box-1 shake-box-1"
            "shake-box-2 shake-box-2"
            "shake-box-3 shake-box-3"
            "shake-box-4 shake-box-5"
            "shake-box-6 shake-box-7"
            "shake-box-8 shake-box-8"
            "shake-box-9 shake-box-9"
            "shake-box-10 shake-box-10"
            "shake-box-11 shake-box-12"
            "shake-box-13 shake-box-13";
    }
}
@media (max-width: 600px) {
    .portfolio-shake-gallery-container {
        grid-template-columns: 1fr;
        grid-template-areas: none; 
    }
    .shake-box {
        grid-area: auto !important; 
        min-height: 0; 
        aspect-ratio: 16 / 9; 
    }
}

/* privacy */
.privacy-container {
    width: 100%;
    margin: 2rem auto; /* Centers the content */
    padding: 2rem;
}

/* --- Special Header Layout (H1 + Intro P) --- */
.policy-header {
    display: flex;
    flex-wrap: wrap; /* Allows stacking on small screens */
    align-items: flex-start; /* Aligns text to the top */
    justify-content: space-between;
    gap: 2rem; /* Space between the heading and the text */
}

.policy-header .main-text {
    flex: 1 1 200px; 
    margin: 0;
    color: #000000;
}

.policy-header .paragraph {
    flex: 2 1 400px; /* Takes up more space */
    margin: 0;
    padding-top: 0.5rem; /* Adjusts vertical alignment */
    color: #000000;
}

/* --- Horizontal Rule Separator --- */
hr {
    border: 0;
    height: 1px;
    background-color: #eee;
    margin: 2.5rem 0;
}

main {
    clear: both; /* Ensures it starts below the header content */
}

.privacy-container .undersub {
    margin-bottom: 1.1rem;
}
.privacy-container .tiny {
    margin-bottom: 1.1rem;
}
.privacy-container .paragraph {
    margin-bottom: 1.1rem;
}


.privacy-container .mini-paragraph {
    margin-bottom: 1.1rem;
}
.privacy-container .label-2 {
    margin-bottom: 1.1rem;
    color: #031856;
}



/* --- List Styling --- */
.list-privacy {
    list-style-type: disc;
    margin: 0 0 1.5rem 1.25rem;
    padding: 0;
    
}

.list-privacy-item {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    letter-spacing: -1.2px;
    font-family:"Work Sans", sans-serif;
    
}