/* LIGHT THEME VARIABLES */
:root {
    --navy: #09223f;
    --blue: #3498db;
    --green: #258d40;
    --light-bg: #f8fafc;
    --text: #334155;
}

.lab-container { overflow-x: hidden; }

/* HERO SECTION */
.lab-hero-wide {
    height: 75vh;
    background: url('images/computer-lab/computer-lab-wide.webp') center/cover no-repeat fixed;
    display: flex;
    align-items: center;
}
.hero-overlay {
    width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(9,34,63,0.9), rgba(9,34,63,0.3));
    display: flex; align-items: center; padding-left: 10%;
}
.hero-text-box h1 { color: white; font-size: 3.5rem; line-height: 1.2; }
.hero-text-box h1 span { color: var(--blue); }
.hero-text-box p { color: #ccc; max-width: 500px; margin-top: 15px; }
.badge { background: var(--blue); color: white; padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; }

/* INFRASTRUCTURE CARDS */
.content-width { max-width: 1200px; margin: 0 auto; padding: 80px 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.info-card { 
    background: white; padding: 40px; border-radius: 15px; text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: 0.4s;
}
.info-card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(52,152,219,0.2); }
.icon-circle { 
    width: 70px; height: 70px; background: var(--light-bg); color: var(--blue);
    display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
    border-radius: 50%; font-size: 1.5rem; transition: 0.4s;
}
.info-card:hover .icon-circle { background: var(--blue); color: white; transform: rotateY(360deg); }

/* SIDE-BY-SIDE */
.flex-split { display: flex; align-items: center; gap: 50px; }
.text-side { flex: 1; }
.image-side { flex: 1; }
.image-side img { width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
.custom-list { list-style: none; padding: 0; margin-top: 20px; }
.custom-list li { margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.custom-list i { color: var(--blue); }

/* GALLERY */
.center-title { text-align: center; margin-bottom: 40px; color: var(--navy); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.img-box { height: 250px; border-radius: 10px; overflow: hidden; }
.img-box img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; cursor: pointer; }
.img-box:hover img { transform: scale(1.1); filter: brightness(1.1); }

/* SAFETY BOX */
.safety-box-section { padding-bottom: 80px; text-align: center; }
.safety-card { 
    background: #e0f2fe; color: #0369a1; padding: 40px; 
    border-radius: 20px; max-width: 800px; margin: 0 auto;
}
.safety-card i { font-size: 3rem; margin-bottom: 15px; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .flex-split { flex-direction: column; }
    .hero-text-box h1 { font-size: 2.2rem; }
    .gallery-grid { grid-template-columns: 1fr 1fr; }
}



/* --- ZIG-ZAG BACKGROUND STYLES --- */
.section-white {
    background-color: #ffffff;
}

.section-gray {
    background-color: #f8fafc; /* Subtle light gray */
    border-top: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
}

/* Added extra padding for the content-width to make the zig-zag look cleaner */
.content-width {
    max-width: 1200px;
    margin: 0 auto;
    padding: 100px 20px; /* More vertical space for a premium feel */
}

/* Specific adjustment for Safety Section so it doesn't look too tall */
.safety-box-section.section-white {
    padding-bottom: 100px;
}