/* CSS for LV Infotech Services */

:root {
    --primary-color: #0056b3;
    /* Professional Tech Blue */
    --primary-dark: #003d80;
    --accent-color: #ff8c00;
    /* Dark Orange Accent */
    --text-dark: #333333;
    --text-light: #666666;
    --white: #ffffff;
    --light-bg: #f8f9fa;
    --dark-bg: #1a1a1a;
    --border-color: #e0e0e0;
    --shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s ease;
}

/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--white);
    overflow-x: hidden;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

img {
    max-width: 100%;
    display: block;
}

/* Layout Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.text-center {
    text-align: center;
}

.bg-light {
    background-color: var(--light-bg);
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}

.col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 15px;
}

.col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 15px;
}

.align-items-center {
    align-items: center;
}

.mb-4 {
    margin-bottom: 1.5rem;
}

.mt-3 {
    margin-top: 1rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: var(--transition);
    border: 2px solid transparent;
}

.btn-primary {
    background-color: var(--accent-color);
    color: var(--white);
}

.btn-primary:hover {
    background-color: #e07b00;
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    border-color: var(--white);
    color: var(--white);
}

.btn-outline:hover {
    background-color: var(--white);
    color: var(--primary-color);
}

.btn-block {
    width: 100%;
    text-align: center;
}

/* Typography */
h1,
h2,
h3,
h4 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
    color: #111;
}

.section-title {
    font-size: 2.5rem;
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 50px;
}

.accent-text {
    color: var(--accent-color);
}

/* Telecom Gradient Text */
.telecom-gradient-text {
    background: linear-gradient(to bottom, #90EE90 50%, #ffffff 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Ensure fallback doesn't override */
}

.telecom-gradient-text::after {
    background: linear-gradient(to right, #90EE90 50%, #ffffff 50%) !important;
}

/* Geospatial Gradient Text */
.geospatial-gradient-text {
    background: linear-gradient(to bottom, #FFD700 50%, #ffffff 50%);
    /* Gold and White */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.geospatial-gradient-text::after {
    background: linear-gradient(to right, #FFD700 50%, #ffffff 50%) !important;
}

/* Permitting Gradient Text */
.permitting-gradient-text {
    background: linear-gradient(to bottom, #333333 50%, #ffffff 50%);
    /* Dark Grey and White */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.permitting-gradient-text::after {
    background: linear-gradient(to right, #333333 50%, #ffffff 50%) !important;
}

/* Header & Navigation */
.header {
    background-color: var(--white);
    box-shadow: var(--shadow);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1100;
    /* Higher than mega menu */
    height: 80px;
    display: flex;
    align-items: center;
}

/* ... (lines 177-345 skipped) ... */

/* Mega Menu */
.mega-menu {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    background-color: var(--white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 30px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 990;
    /* Lower than header */
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo img {
    height: 50px;
    width: auto;
    animation: flip-logo 5s ease-in-out infinite;
}

.logo span {
    display: inline-block;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #000;
    -webkit-text-stroke: 0.5px #fff;
    text-shadow:
        1px 1px 0px #f0f0f0,
        2px 2px 0px #e8e8e8,
        3px 3px 0px #e0e0e0,
        4px 4px 0px #d8d8d8,
        5px 5px 0px #d0d0d0,
        6px 6px 1px rgba(0, 0, 0, 0.1);
    animation: none;
    font-weight: 900;
    /* Use extra bold for dominating look */
}

@keyframes flip-logo {
    0% {
        transform: perspective(400px) rotateY(0);
    }

    20% {
        transform: perspective(400px) rotateY(360deg);
    }

    100% {
        transform: perspective(400px) rotateY(360deg);
    }
}

@keyframes text-shimmer {

    0%,
    90% {
        color: var(--primary-color);
        opacity: 1;
    }

    95% {
        color: var(--accent-color);
        opacity: 0.5;
    }

    100% {
        color: var(--primary-color);
        opacity: 1;
    }
}

.nav-list {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-link {
    font-weight: 500;
    color: var(--text-dark);
    font-size: 1rem;
    position: relative;
    padding-bottom: 5px;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--accent-color);
    transition: width 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-color);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}


.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    min-width: 200px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    padding: 10px 0;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    color: var(--text-dark);
    font-size: 0.95rem;
}

.dropdown-menu li a:hover {
    background-color: var(--light-bg);
    color: var(--primary-color);
}

.header-btn {
    padding: 10px 20px;
    font-size: 0.9rem;
}

.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--text-dark);
    transition: var(--transition);
}

/* Mega Menu */
.mega-menu {
    position: fixed;
    top: 80px;
    /* Aligned to bottom of header */
    left: 0;
    width: 100%;
    background-color: var(--white);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    padding: 30px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 990;
    /* Lower than header (1100) */
}

.nav-item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
}

.mega-content {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1.5fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.mega-col-info h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
    display: inline-block;
}

.mega-col-info p {
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.6;
}

.mega-col-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mega-col-links a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
    color: var(--text-dark);
    font-weight: 500;
    font-size: 1rem;
    transition: var(--transition);
}

.mega-col-links a:last-child {
    border-bottom: none;
}

.mega-col-links a:hover {
    color: var(--accent-color);
    padding-left: 10px;
}

.mega-col-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

/* Responsive adjustments for Mega Menu */
@media (max-width: 992px) {
    .mega-menu {
        position: static;
        width: 100%;
        transform: none;
        box-shadow: none;
        padding: 0;
        display: none;
        opacity: 1;
        visibility: visible;
    }

    .nav-item.active .mega-menu {
        display: block;
    }

    .mega-content {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mega-col-image {
        display: none;
    }

    .mega-col-info {
        display: none;
    }
}

/* Hero Section */
/* Hero Slideshow Section */
.hero-slideshow {
    position: relative;
    height: 80vh;
    /* Full viewport height or adjusted */
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
    /* Offset for fixed header */
}

/* Blurred Background */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('assets/hero-bg.png') no-repeat center center/cover;
    filter: blur(5px);
    /* Slight blur as requested */
    z-index: 1;
    transform: scale(1.1);
    /* Prevent blurred edges */
}

/* Video Background */
.hero-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    filter: blur(5px);
    /* Added blur effect */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* Dark overlay for text readability */
    z-index: 2;
}

/* Hero Content for Rotating Text */
.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    width: 100%;
    padding: 0 20px;
}

.hero-rotating-text {
    font-size: 3rem;
    /* Reduced size */
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    letter-spacing: 2px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    position: relative;
    display: inline-block;
}

.hero-rotating-text::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 0;
    /* Start with 0 width */
    height: 4px;
    /* Thickness of the underline */
    background: linear-gradient(to right, #87CEEB 50%, #ffffff 50%);
    /* Half skyblue, half white */
    transition: width 1s ease-in-out;
    /* Animate with text */
}

.hero-rotating-text.active {
    opacity: 1;
    transform: translateY(0);
}

.hero-rotating-text.active::after {
    width: 100%;
    /* Expand to full width when active */
}

/* Single Word Rotator */
.word-rotator {
    display: inline-block;
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 1;
    transform: translateY(0);
    color: var(--accent-color);
    font-weight: 700;
    position: relative;
}

.word-rotator.fade-out {
    opacity: 0;
    transform: translateY(10px);
}

/* Background Slides for About Us */
.hero-bg-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

.hero-bg-slide.active {
    opacity: 1;
}

.hero-slideshow .container {
    position: relative;
    z-index: 3;
}

/* Slides */
.hero-slide {
    display: none;
    animation: fadeIn 1s ease-in-out;
}

.hero-slide.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Text Styles */
.hero-title-white {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-subtitle-white {
    font-size: 1.2rem;
    color: #f0f0f0;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Pagination Dots */
.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 10px;
}

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

.dot.active,
.dot:hover {
    background-color: #ffffff;
    transform: scale(1.2);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title-white {
        font-size: 2.2rem;
    }
}

.feature-list i {
    color: var(--accent-color);
    margin-right: 12px;
    font-size: 1.2rem;
}

.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.stat-card {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    border-top: 4px solid var(--primary-color);
}

.stat-card h3 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.stat-card p {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.service-card {
    background: var(--white);
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid #eee;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.service-icon {
    width: 70px;
    height: 70px;
    background-color: rgba(0, 86, 179, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    font-size: 1.8rem;
    color: var(--primary-color);
}

.service-title {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.service-desc {
    color: var(--text-light);
    font-size: 0.95rem;
}

/* Telecom Intro Section */
.telecom-intro-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Vertically center content and image */
    gap: 5%;
    /* Use percentage gap for better responsiveness */
    margin-bottom: 40px;
    /* Reduced bottom margin as Heading is close */
}

.telecom-intro-content {
    flex: 1;
    min-width: 300px;
    padding-right: 20px;
}

.intro-title {
    color: var(--primary-dark);
    font-size: 2.5rem;
    /* Slightly larger */
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.2;
}

.telecom-intro-content p {
    margin-bottom: 15px;
    font-size: 1rem;
    color: #333;
    /* Darker text for readability */
    line-height: 1.6;
    text-align: justify;
    /* Clean text block */
}

.telecom-intro-image {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: flex-end;
    /* Align image to the right */
}

.telecom-intro-image img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    /* Subtle radius */
    /* Removed large shadow for cleaner look matching reference */
}

.btn-intro-cta {
    display: inline-block;
    padding: 10px 35px;
    border: 2px solid var(--primary-dark);
    /* Dark border matching title */
    color: var(--primary-dark);
    font-weight: 600;
    border-radius: 0;
    /* Square/Sharp corners as per typical corporate design or slight radius */
    text-transform: capitalize;
    /* "Get in Touch" mixed case */
    transition: all 0.3s ease;
    margin-top: 20px;
    background: transparent;
    font-size: 1.1rem;
}

.btn-intro-cta:hover {
    background: var(--primary-dark);
    color: var(--white);
}


.section-heading-wrapper {
    text-align: center;
    /* Centered as requested */
    margin-bottom: 60px;
    padding-right: 0;
}

.main-heading {
    font-size: 2.5rem;
    color: var(--primary-dark);
    font-weight: 800;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.main-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--accent-color);
    display: block;
    /* Re-enable underline */
}

/* Telecom Hero Specifics */
.telecom-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-text-box {
    background: transparent;
    /* Removed background as requested */
    padding: 60px 30px;
    /* Elaborated vertical format (increased height) */
    text-align: center;
    width: 90%;
    /* Extended width with equal margins */
    max-width: 1200px;
    margin: 0 auto;
    border-radius: 5px;
    /* Clean radius */
    position: relative;
    /* Ensure z-index works */
    z-index: 2;
    /* Above blurred background */
}

.hero-bg-absolute {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(5px);
    z-index: 1;
    transform: scale(1.1);
    /* Prevent blurred edges from showing */
}

.hero-text-box .hero-title {
    font-size: 4.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: capitalize;
    color: #fff;
}

.hero-text-box .hero-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
    color: #fff;
}


/* Clients Section */
.clients-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    align-items: center;
    opacity: 0.7;
}

.client-logo {
    font-size: 1.2rem;
    font-weight: bold;
    color: #888;
    background: #eee;
    padding: 15px 30px;
    border-radius: 5px;
}

/* Projects Section */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.project-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-5px);
}

.project-content {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.project-content .btn {
    margin-top: auto;
    align-self: flex-start;
}

.project-tag {
    background-color: rgba(255, 140, 0, 0.1);
    color: var(--accent-color);
    padding: 5px 10px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 15px;
}

.project-title {
    font-size: 1.4rem;
    margin-bottom: 10px;
    min-height: 3rem;
    /* Ensures consistent title height */
    display: flex;
    align-items: center;
}

.project-location {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.project-desc {
    font-size: 0.95rem;
    min-height: 7rem;
    /* Ensures consistent description height */
}

/* Why Choose Us */
.feature-item {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.feature-icon {
    min-width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.why-us-box {
    background-color: var(--dark-bg);
    color: var(--white);
    padding: 50px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.why-us-box h3 {
    color: var(--white);
}

.why-us-box p {
    color: #ccc;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: 100px 0;
}

.cta-title {
    color: var(--white);
    font-size: 3rem;
    margin-bottom: 20px;
}

.cta-text {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

.cta-section .btn-primary {
    background-color: var(--white);
    color: var(--primary-color);
}

.cta-section .btn-primary:hover {
    background-color: var(--accent-color);
    color: var(--white);
}

/* Contact Section */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.contact-info {
    background-color: var(--primary-dark);
    color: var(--white);
    padding: 50px;
}

.contact-info h3 {
    color: var(--white);
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.info-item i {
    color: var(--accent-color);
}

.social-links {
    margin-top: 50px;
    display: flex;
    gap: 15px;
}

.social-links a {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.social-links a:hover {
    background-color: var(--accent-color);
}

/* Map Section */
.map-section {
    padding-bottom: 80px;
}

.map-container {
    width: 100%;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

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

.contact-form {
    padding: 50px;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    transition: var(--transition);
    font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Footer */
/* Footer */
.footer {
    background: #0b0f14;
    color: #fff;
    padding: 60px 8%;
    width: 100%
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    /* Logo takes 40%, others 20% each - balanced spacing */
    gap: 40px;
}

.footer-column h3 {
    margin-bottom: 20px;
    font-size: 18px;
    color: #fff;
    /* Ensure visibility */
}

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

.footer-column ul li {
    margin-bottom: 12px;
}

.footer-column ul li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-column ul li a:hover {
    color: #fff;
}

.footer-column p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    color: #ccc;
    font-size: 0.95rem;
}

.footer-column p i {
    color: var(--accent-color);
    font-size: 1.1rem;
    min-width: 20px;
    text-align: center;
}

.footer-logo {
    display: block;
    width: 170px;
    margin-bottom: 20px;
}

.footer-logo img {
    width: 100%;
    height: auto;
}

.social-icons {
    margin-bottom: 15px;
}

.social-icons a {
    color: white;
    margin-right: 12px;
    font-size: 20px;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--accent-color);
}

.footer-design-img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-top: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.social-icons-footer {
    display: flex;
    gap: 20px;
    margin-top: 25px;
    /* Spacing below image */
    justify-content: flex-start;
    /* Align left */
    padding-left: 120px;
    /* Shift icons to the right */
}

.social-icons-footer a {
    color: #fff;
    font-size: 1.5rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons-footer a:hover {
    color: var(--accent-color);
    transform: translateY(-3px);
}

.copyright {
    margin-top: 20px;
    color: #aaa;
    font-size: 0.9rem;
}

/* Responsive Footer */
@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-container {
        grid-template-columns: 1fr;
    }
}

/* Responsive */
@media (max-width: 992px) {
    .header-btn {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .nav {
        position: fixed;
        top: 80px;
        left: -100%;
        background-color: var(--white);
        width: 100%;
        height: calc(100vh - 80px);
        transition: 0.3s;
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav.active {
        left: 0;
    }

    .nav-list {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding-left: 20px;
    }

    .dropdown.active .dropdown-menu {
        display: block;
    }

    .hero-title {
        font-size: 3.8rem;
    }

    .contact-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {

    .row,
    .about-stats-grid {
        display: block;
        /* Stack flex/grid items */
    }

    .col-md-6,
    .col-lg-6 {
        max-width: 100%;
        margin-bottom: 30px;
    }

    .about-stats-grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-title {
        font-size: 3rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Telecom Page Specific Styles */
.telecom-section {
    padding: 60px 0;
}

.telecom-row {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 80px;
}

/* Alternating Layout */
.telecom-row:nth-child(even) {
    flex-direction: row-reverse;
}

.telecom-image,
.telecom-content {
    flex: 1;
}

.telecom-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.telecom-image img:hover {
    transform: scale(1.02);
}

.telecom-content h2 {
    color: var(--primary-dark);
    font-size: 2.2rem;
    margin-bottom: 20px;
    position: relative;
    display: inline-block;
}

/* decorative underline for headings */
.telecom-content h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--accent-color);
    margin-top: 10px;
    border-radius: 2px;
}

.telecom-content p {
    font-size: 1rem;
    /* Adjusted for better fit with more content */
    color: var(--text-light);
    margin-bottom: 20px;
    line-height: 1.8;
}

/* Accordion Styles */
.accordion-toggle {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin-top: 10px;
    transition: color 0.3s ease;
}

.accordion-toggle:hover {
    color: var(--accent-color);
}

.accordion-toggle i {
    transition: transform 0.3s ease;
}

.accordion-toggle.active i {
    transform: rotate(45deg);
    /* Rotates the plus icon to an X or indicate open */
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, margin-top 0.3s ease;
    margin-top: 0;
}

.accordion-content.active {
    margin-top: 15px;
    /* max-height will be set via JS */
}

.accordion-content ul {
    list-style: none;
    padding-left: 10px;
    border-left: 3px solid #eee;
    margin-left: 5px;
}

.accordion-content li {
    padding: 8px 0;
    color: var(--text-dark);
    position: relative;
    padding-left: 20px;
}

.accordion-content li::before {
    content: '•';
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1.2rem;
    position: absolute;
    left: 0;
    top: 2px;
}

/* Responsive Telecom */
@media (max-width: 992px) {

    .telecom-row,
    .telecom-row:nth-child(even) {
        flex-direction: column;
        gap: 30px;
    }

    .telecom-image {
        /* Reset order for column layout if needed */
        order: -1;
    }
}

/* Get in Touch CTA */
.get-in-touch-box {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    color: var(--white);
    padding: 60px;
    text-align: center;
    border-radius: 20px;
    margin: 60px 0;
    cursor: pointer;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 50, 100, 0.2);
}

.get-in-touch-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 50, 100, 0.3);
    background: linear-gradient(135deg, var(--accent-color), #e07b00);
}

.get-in-touch-box h2 {
    color: var(--white);
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.get-in-touch-box p {
    font-size: 1.2rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 30px;
}

.get-in-touch-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* Telecom Intro Specifics */
.telecom-intro-row {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 60px;
    padding: 40px 0;
}

.telecom-intro-content {
    flex: 1;
}

.telecom-intro-image {
    flex: 1;
}

.telecom-intro-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.intro-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--primary-dark);
}

/* Intro CTA Button */
.btn-intro-cta {
    display: inline-block;
    background: var(--accent-color);
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 20px;
    transition: background 0.3s;
}

.btn-intro-cta:hover {
    background: #e07b00;
    /* Darker orange */
}

@media (max-width: 992px) {
    .telecom-intro-row {
        flex-direction: column;
    }

    .telecom-intro-image {
        order: -1;
    }
}

/* TCP Cards Specifics */
.tcp-cards-container {
    margin-bottom: 80px;
    text-align: center;
    margin-top: 50px;
}

.tcp-cards-heading {
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

.tcp-cards-heading::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--accent-color);
    margin: 10px auto 0;
    border-radius: 2px;
}

.tcp-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    justify-content: center;
}

.tcp-card {
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.3s ease;
    border: 1px solid #eee;
}

.tcp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.project-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid #eee;
}

/* Hover effects removed as per request */


.tcp-card h4 {
    font-size: 1.3rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* Typography Updates */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    letter-spacing: -1px;
    text-transform: capitalize;
}

/* About Us Page Styles */
.about-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/hero-bg.png');
    /* Using verified existing image */
    background-size: cover;
    background-position: center;
    color: white;
    padding: 100px 0;
    text-align: center;
}

.about-intro {
    padding: 80px 0;
    text-align: center;
    background-color: #fff;
}

.help-section {
    padding: 80px 0;
    text-align: center;
    background-color: var(--primary-color);
    color: white;
}

.help-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: white;
}

.help-section p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.help-section .btn {
    background-color: white;
    color: var(--primary-color);
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.help-section .btn:hover {
    background-color: #f0f0f0;
}

.about-intro h2 {
    font-size: 2.5rem;
    margin-bottom: 30px;
    color: var(--primary-color);
}

.about-intro p {
    font-size: 1.1rem;
    color: #555;
    max-width: 900px;
    margin: 0 auto 20px;
    line-height: 1.8;
}

.who-we-serve {
    padding: 80px 0;
    background-color: #f9f9f9;
    text-align: center;
}

.who-we-serve h2 {
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: #333;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.service-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
}

.service-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 1.4rem;
    color: #333;
    font-weight: 600;
}

/* Responsive Adjustments for About Page */
@media (max-width: 576px) {

    .about-intro h2,
    .who-we-serve h2 {
        font-size: 2rem;
    }
}

.hero-subtitle {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 40px;
    color: #e0e0e0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Hero Section */
.hero {
    height: 60vh;
    /* Reduced height for image only */
    background: linear-gradient(rgba(0, 50, 100, 0.4), rgba(0, 20, 50, 0.4)), url('assets/hero-bg.png');
    /* Fallback */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
    padding-top: 80px;
    overflow: hidden;
    /* Ensure video doesn't overflow */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Reveal Text Animation */
.reveal-text {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    animation: textRevealLoop 5s cubic-bezier(0.5, 0, 0, 1) infinite;
    margin: 0 15px;
    font-size: 4rem;
    /* Adjust size as needed, user said "main text" */
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.text-3d {
    color: #fff;
    /* White text */
    text-shadow:
        0 1px 0 #555,
        0 2px 0 #4d4d4d,
        0 3px 0 #444,
        0 4px 0 #3c3c3c,
        0 5px 0 #333,
        0 6px 1px rgba(0, 0, 0, .5),
        0 0 5px rgba(0, 0, 0, .5),
        0 1px 3px rgba(0, 0, 0, .6),
        0 3px 5px rgba(0, 0, 0, .5),
        0 5px 10px rgba(0, 0, 0, .5),
        0 10px 10px rgba(0, 0, 0, .5),
        0 20px 20px rgba(0, 0, 0, .4);
    transition: all 0.3s ease;
}

.text-3d-pink {
    text-shadow:
        1px 1px 0 #FFB6C1,
        2px 2px 0 #FFB6C1,
        3px 3px 0 #FFB6C1,
        4px 4px 0 #FFB6C1,
        5px 5px 0 #FFB6C1,
        6px 6px 0 #FFB6C1,
        7px 7px 0 #FFB6C1 !important;
}

@keyframes textRevealLoop {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    10% {
        opacity: 1;
        transform: translateY(0);
    }

    80% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-30px);
        /* Optional: slide up on exit */
    }
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Behind overlay */
    filter: blur(3px) contrast(90%);
    /* Requested effects: slight blur, decreased contrast */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 20, 50, 0.3);
    /* Slight dark overlay on top of video */
    z-index: 1;
}

/* Intro Text Section (New) */
.intro-text-section {
    padding: 60px 0;
    text-align: center;
    background-color: var(--white);
}

.hero-content-moved {
    max-width: 800px;
    margin: 0 auto;
}

.hero-title-dark {
    font-size: 3rem;
    margin-bottom: 20px;
    color: var(--primary-color);
    /* Dark text */
    font-weight: 700;
}

.hero-subtitle-dark {
    font-size: 1.25rem;
    margin-bottom: 40px;
    color: var(--text-light);
    /* Darker subtitle */
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.btn-outline-dark {
    display: inline-block;
    padding: 12px 30px;
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-outline-dark:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

/* Value Props Section (Boxed Style) */
.value-props {
    padding: 0 0 80px 0;
    /* Remove top padding, keep bottom */
    background-color: var(--white);
    /* White outer bg */
}

.value-props .container {
    background-color: var(--primary-color);
    /* Dark Box Background */
    border-radius: 20px;
    /* Cut edges */
    padding: 60px 40px;
    color: var(--white);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    margin-top: -40px;
    /* Overlap slightly or just separate? User said "below". Let's keep it separate for now or slight negative margin for style if preferred, but user just said "below". Let's stick to standard flow first. */
    margin-top: 0;
}

.value-props-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 30px;
}

.value-prop-card {
    padding: 0;
    /* Remove padding from card since container has it */
    background: transparent;
    box-shadow: none;
    border: none;
    text-align: center;
}

.value-prop-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--white);
    font-weight: 700;
}

.value-prop-card p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.value-prop-icon {
    font-size: 3rem;
    color: var(--accent-color);
    /* Accent color for pop? Or white? User said "first image". First image had white/light icons. Let's use white or accent.  */
    color: var(--white);
    margin-bottom: 20px;
    display: inline-block;
}

/* 4-Column Footer Responsive */
@media (max-width: 992px) {
    .hero-title {
        font-size: 2.5rem;
    }


}

@media (max-width: 576px) {
    .header-container {
        padding: 0 15px;
        /* Adjust padding for mobile */
    }

    .section-header h2 {
        font-size: 2rem;
    }


}

/* Contact Page Styles - Refined Layout */
/* Contact Page Styles - Refined Layout */
.contact-wrapper {
    display: flex;
    flex-direction: row;
    /* Side-by-side on desktop */
    justify-content: center;
    align-items: flex-start;
    /* Align tops */
    gap: 30px;
    padding: 40px 0;
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens */
}

@media (max-width: 992px) {
    .contact-wrapper {
        flex-direction: column;
        align-items: center;
    }
}

.contact-info {
    flex: 1;
    width: 100%;
    max-width: 550px;
    /* Adjusted for side-by-side */
    background-color: var(--primary-color);
    color: white;
    padding: 60px 50px;
    /* Slightly reduced padding for better fit */
    border-radius: 15px;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.contact-info h3 {
    color: white;
    margin-bottom: 40px;
    font-size: 2rem;
    font-weight: 700;
}

.info-item {
    display: flex;
    flex-direction: row;
    /* Horizontal: Icon - Text */
    align-items: flex-start;
    margin-bottom: 40px;
    /* Increased spacing */
    gap: 25px;
    /* Increased gap */
}

.info-item i {
    font-size: 1.8rem;
    /* Increased icon size */
    color: var(--accent-color);
    width: 35px;
    text-align: center;
    margin-top: 5px;
}

.info-item p {
    font-size: 1.35rem;
    /* Increased text size */
    opacity: 1;
    line-height: 1.8;
    margin: 0;
    letter-spacing: 0.5px;
}

.contact-info .social-links {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-left: 60px;
    /* Indented to align with text (Icon width 35 + Gap 25) */
}

.contact-info .social-links a {
    background: rgba(255, 255, 255, 0.1);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.contact-info .social-links a:hover {
    background: var(--accent-color);
    transform: translateY(-3px);
}

.contact-form {
    flex: 1;
    width: 100%;
    max-width: 550px;
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--primary-color);
    outline: none;
}

.contact-form .btn {
    width: 100%;
}

@media (max-width: 768px) {
    .contact-info {
        padding: 40px 30px;
    }

    .contact-info .social-links {
        padding-left: 0;
        justify-content: flex-start;
    }
}

/* Explore Our Solutions Section */
.explore-solutions-section {
    padding: 80px 0;
    background-color: var(--light-bg);
}

.explore-image img {
    border-radius: 10px;
    box-shadow: var(--shadow);
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Footer Bottom Copyright */
.footer-bottom {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 40px;
    padding-top: 20px;
}

.footer-bottom .container {
    text-align: center;
}

.footer-bottom p {
    color: #888;
    font-size: 0.9rem;
    margin: 0;
}

/* Designing the Future Section */
.design-future {
    padding: 80px 0;
    background-color: var(--white);
}

.design-future-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.design-future-header h2 {
    font-size: 2.5rem;
    color: var(--primary-dark);
    margin-bottom: 20px;
}

.design-future-header h2 span {
    color: #00a9a5;
    /* Teal color from image */
}

.design-future-header p {
    color: var(--text-light);
    font-size: 1rem;
}

.future-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.future-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.future-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f0f0f0;
    /* Default bg */
}

/* Specific Icon Colors/Styles */
.icon-quality {
    color: #28a745;
    background: rgba(40, 167, 69, 0.1);
}

.icon-improvement {
    color: #007bff;
    background: rgba(0, 123, 255, 0.1);
}

.icon-flexible {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

.icon-collab {
    color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
}


.future-content h3 {
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: #000;
}

.future-content p {
    font-size: 0.95rem;
    color: var(--text-light);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .future-grid {
        grid-template-columns: 1fr;
    }
}

/* Video Background Section Styles */
.video-section {
    position: relative;
    overflow: hidden;
    color: white;
    /* Default text color for section */
}

.section-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Darker overlay for readability */
    z-index: 2;
}

.relative-z {
    position: relative;
    z-index: 3;
}

.card-transparent {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: none;
    /* Remove default shadow */
}

.icon-light {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

/* Helper classes for text colors if bootstrap/utility classes aren't enough */
.text-white {
    color: #ffffff !important;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Accelerating Engineering Outcomes Section */
.accelerating-section {
    background-color: #ffffff;
    /* White Background */
    padding: 80px 0;
    position: relative;
}

/* Orange Button Style */
.btn-orange {
    background-color: #ff9900;
    color: #ffffff;
    border: none;
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-orange:hover {
    background-color: #e68a00;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Helper for hero bg only */
.hero-bg-only {
    height: 60vh;
    /* Adjust height as preference, maybe shorter if NO text? */
}

/* Keep span accent color if needed, or make it white/gold */

/* Update grid for transparent cards */
.future-card {
    padding: 30px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.future-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

/* Auto Slideshow Styles */
.explore-slide-container {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

#explore-img {
    width: 100%;
    height: 400px;
    /* Keep the fixed height */
    object-fit: cover;
    display: block;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
    filter: blur(3px);
    /* Add slight blur */
}

#explore-caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff;
    text-align: center;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 2.5rem;
    /* Larger text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    /* Text shadow for readability */
    pointer-events: none;
    /* Let clicks pass through */
    transition: opacity 0.5s ease-in-out;
    width: 100%;
}

/* Responsive Projects Grid */
@media (max-width: 992px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
}