:root {
            --primary-blue: #000;
            --dark-navy: #012652;
            --text-main: #1f2937;
            --text-muted: #4b5563;
            --bg-light: #f9fafb;
            --transition: all 0.3s ease;
        }

  :root {
            --bg-dark: #000;
            --accent-gradient: linear-gradient(90deg, #0072bc, #8a2be2);
            --brand-green: #9fd843;
            --text-muted: #888;
            --container-max: 1300px;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
       /* Apply to all Paragraphs and general text */
body, p, span, li, a, input, button {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    line-height: 1.6;
}

/* Apply to ALL Headings */
h1, h2, h3, h4, h5, h6, .logo {
    font-family: 'TWK Everett', sans-serif;
    font-weight: 500; /* Or 400 depending on your preference */
    letter-spacing: -0.02em; /* Everett looks best with slight negative tracking */
}
a {
  text-decoration: none;
}


      body {
            background-color: var(--bg-dark);
            color: #fff;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            margin: 0;
            overflow-x: hidden;
        }

        /* --- Global Container --- */
        .container {
            max-width: var(--container-max);
            margin: 0 auto;
           
            width: 90%; 
        }









/* Adjusting the large ghost-header from your previous blocks */
.ghost-header {
    font-family: 'TWK Everett', sans-serif;
    text-transform: lowercase; /* Matches the Kyndryl design style */
}


   /* Import TWK Everett (Ensure the file path is correct) */
    @font-face {
        font-family: 'TWK Everett';
        src: url('fonts/TWKEverett-Regular.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'TWK Everett';
        src: url('fonts/TWKEverett-Medium.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
		}

        /* --- NAVIGATION BAR --- */
        .navbar {
            height: 90px;
            background: #fff;
            display: flex;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
			    background: #e5f5e0 !important;
          
        }

        .nav-container {
            max-width: 1400px;
            width: 95%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-box { display: flex; align-items: center; gap: 10px; }
        .logo-img {
    height: 34px;
    margin-top: 8px;
}

        .nav-links { display: flex; list-style: none; gap: 25px; }
        .nav-links a { text-decoration: none; color: #333; font-weight: 500; font-size: 20px; transition: var(--transition); }
        .nav-links a:hover { color: var(--primary-blue); }

        .nav-actions { display: flex; align-items: center; gap: 15px; }
        
        .btn { padding: 10px 24px; border-radius: 4px; font-weight: 600; cursor: pointer; transition: var(--transition); border: none; font-size: 15px; }
        .btn-outline { background: transparent; color: var(--primary-blue); border: 1px solid var(--primary-blue); }
        .btn-fill { background: #9bca3b; color: #fff; }
        .btn-fill:hover { opacity: 0.9; transform: translateY(-1px); }

        .menu-btn { display: none; font-size: 24px; cursor: pointer; color: var(--text-main); }

        /* --- HERO SPLIT SECTION --- */
        .hero-split {
            display: flex;
            width: 100%;
            min-height: 85vh; /* Sets a base height */
            background: #fff;
            align-items: stretch; /* Forces both sides to be equal height */
        }

        .hero-image-side {
            flex: 1;
            /* Updated to use your local image directly via CSS */
            background: url('img/awer.png') no-repeat center center;
            background-size: cover;
            min-height: 100%; /* Ensures it fills the container height */
        }
		  .hero-image-side2 {
           
            background: url('img/202a.png') no-repeat center center;
           
        }
		.AAaaxx {background: url('img/100ss.png') no-repeat center center !important;background-size: contain !important;}

.ddrer {
           
            background: url('ser.png') no-repeat center center;
           
        }
        .hero-content-side {
            flex: 1;
            background-color: #0b3231;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 8% 8%;
            color: #fff;
        }

        .hero-content-side h1 {
            font-size: clamp(36px, 5vw, 64px);
            line-height: 1.1;
            font-weight: 800;
            margin-bottom: 30px;
        }

        .hero-content-side p {
            font-size: 18px;
            max-width: 500px;
            margin-bottom: 40px;
            opacity: 0.9;
        }

        .hero-btns { display: flex; gap: 20px; }
        .btn-white { background: #9bca3b; color: #fff;}
        .btn-trans { background: transparent; color: #fff; border: 1px solid #fff; }

        /* --- SERVICES SECTION --- */
        .services-section { padding: 100px 0;  margin: 0 auto; }
        .service-card { 
            background: #fff; padding: 40px 30px; border-radius: 12px; 
            border: 1px solid #eee; text-align: center; transition: var(--transition);
            margin: 10px;
        }
        .service-card:hover { border-color: var(--primary-blue); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        .service-card i { font-size: 40px; color: var(--primary-blue); margin-bottom: 20px; }

        /* --- MODAL --- */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(1, 38, 82, 0.8); display: none; 
            justify-content: center; align-items: center; z-index: 2000;
        }
        .modal-content {
            background: #fff; padding: 40px; border-radius: 12px;
            width: 90%; max-width: 500px; position: relative;
            transform: translateY(-50px); transition: var(--transition);
        }
        .modal-overlay.active { display: flex; }
        .modal-overlay.active .modal-content { transform: translateY(0); }
        .close-modal { position: absolute; top: 20px; right: 20px; font-size: 20px; cursor: pointer; }

        /* --- RESPONSIVE --- */
        @media (max-width: 1024px) {
            .nav-links {
                position: fixed; top: 80px; right: -100%; width: 80%; height: calc(100vh - 80px);
                background: #fff; flex-direction: column; align-items: left; padding-top: 50px;
                transition: 0.4s; z-index: 999;
            }
			.nav-links a{
               
			   padding-left:30px;
            }
            .nav-links.show { right: 0; }
            .nav-actions .btn-outline { display: none; }
            .menu-btn { display: block; }

            .hero-split { flex-direction: column; min-height: auto; }
            .hero-image-side { min-height: 400px; width: 100%; }
            .hero-content-side { padding: 60px 5%; width: 100%; }
        }
		/* --- VALUE DELIVERY SECTION --- */
.value-section {
    padding: 80px 0%;
background: rgb(240, 240, 240) !important;
    margin: 0 auto;
   
}

.value-header {
    color: #e63946; /* Matches the red/orange header in the image */
    font-size: 28px;
    margin-bottom: 60px;
    font-weight: 500;
}

.value-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.value-card {
    display: flex;
    flex-direction: column;
}

.value-card .img-container {
    position: relative;
    width: 100%;
    height: 300px;
    
    overflow: hidden;
    margin-bottom: 30px;
}

.value-card .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Outlined Numbers Overlay */
.value-card .number-overlay {
    position: absolute;
    bottom: 20px;
    left: 30px;
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.8);
    font-family: 'Inter', sans-serif;
}

.value-card h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--text-main);
}

/* Red Accent Line below Title */
.value-card h3::after {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background: #0b3231;
    margin-top: 10px;
}

.value-card p {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 90%;
}

/* Pill Button Styling */
.btn-learn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 20px;
    border: 1px solid #ccc;
    border-radius: 50px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    transition: var(--transition);
}

.btn-learn:hover {
    background: #f4f4f4;
    border-color: #999;
}

@media (max-width: 991px) {
	.contact-grid-section .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
background-color: #fff; 
    border-top: 1px solid  #fff;
    border-bottom: 0px solid #e5e5e5;
    width: 100%;
}
	
.entry-title {
    font-size: 1.5rem !important;
   
}
    .value-grid { grid-template-columns: 1fr; }
    .value-card .img-container { height:250px; }
}
/* --- CLIENT IMPACT SLIDER --- */
.impact-section {
    background-color: #14464a;
    padding: 100px 5%;
    color: #fff;
    overflow: hidden;
}

.impact-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 400px 1fr; /* Fixed width for text, flexible for slider */
    gap: 60px;
    align-items: center;
}

.impact-text h4 {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: #9ca3af;
}

.impact-text h2 {
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 30px;
    font-weight: 500;
}

.impact-text p {
    color: #9ca3af;
    margin-bottom: 40px;
    line-height: 1.6;
}

.btn-view-more {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 12px 25px;
   
    color: #fff;
    text-decoration: none;
    transition: var(--transition);
	background: #9bca3b;
}

.btn-view-more:hover {
    background: #fff;
    color: #000;
}

/* Card Styling */
.impact-card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    color: #000;
    height: 100%;
}

.impact-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.impact-card-content {
    padding: 30px;
}

.impact-card-content h3 {
    font-size: 20px;
    margin-bottom: 15px;
    line-height: 1.4;
}

.impact-card-content p {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 25px;
}

.card-learn-more {
    text-decoration: none;
    color: #000;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

/* Custom Owl Dots */
.impact-section .owl-dots {
    margin-top: 40px !important;
    text-align: left;
}

.impact-section .owl-dot span {
    width: 12px !important;
    height: 12px !important;
    background: #4b5563 !important;
    border-radius: 0 !important; /* Square dots like image */
}

.impact-section .owl-dot.active span {
    background: #06b6d4 !important; /* Teal active dot */
}

@media (max-width: 1100px) {
    .impact-container { grid-template-columns: 1fr; }
    .impact-text { text-align: center; }
    .impact-text p { margin: 0 auto 40px; }
}
/* --- FIXED MOBILE VISIBILITY FOR IMPACT TEXT --- */
@media (max-width: 1100px) {
    .impact-container { 
        display: flex; 
        flex-direction: column; /* Ensures vertical stacking */
        gap: 30px; 
    }

    .impact-text { 
        text-align: left; /* Keeps alignment consistent with the cards */
        width: 100%;
        padding: 0 10px; /* Prevents text from touching screen edges */
        position: relative;
        z-index: 10; /* Ensures it stays above background layers */
    }

    .impact-text h2 { 
        font-size: 32px; /* Scales down header for smaller screens */
        margin-bottom: 20px;
    }

    .impact-text p { 
        margin-bottom: 30px; 
        font-size: 16px;
    }
    
    /* Adjusts the slider to ensure it doesn't overlap the text */
    .impact-slider {
        width: 100%;
        margin-top: 20px;
    }
}
/* --- TALL CARD ALIGNMENT --- */
/* 1. Force Owl Carousel's internal stage to use flexbox */
.impact-slider .owl-stage {
    display: flex;
    display: -webkit-flex;
}

/* 2. Force the item container to fill the full height of the stage */
.impact-slider .owl-item {
    display: flex;
    flex: 1 0 auto;
}

/* 3. Ensure the card itself fills the item container */
.impact-card {
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    color: #000;
    display: flex;
    flex-direction: column; /* Stack image and content vertically */
    width: 100%;
    height: 100%; /* This now works because the parent is a flex-item */
}

/* 4. Push the 'Learn More' link to the bottom of the card */
.impact-card-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* This pushes the content to fill available space */
}

.card-learn-more {
    margin-top: auto; /* Aligns the button to the bottom of every card */
    padding-top: 20px;
}
/* --- OUR ADVANTAGE SECTION --- */
.advantage-section {
    background-color: #265d62; /* Specific deep teal background */
    padding: 100px 5%;
    position: relative;
    overflow: hidden;
    color: #fff;
}

/* Large Background Text Effect */
.bg-text-watermark {
    position: absolute;
    top: -40px;
    left: -20px;
    font-size: 180px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.1); /* Very faint white */
    white-space: nowrap;
    pointer-events: none;
    line-height: 1;
}

.advantage-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.advantage-intro {
    margin-left: auto;
    width: 60%;
    font-size: 32px;
    line-height: 1.3;
    margin-bottom: 80px;
    font-weight: 400;
}

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

.advantage-item h3 {
    font-size: 28px;
    font-weight: 500;
    margin-bottom: 20px;
}

/* Accent line below subheaders */
.advantage-item h3::after {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    background: #4ade80; /* Light green accent line */
    margin-top: 15px;
}

.advantage-item p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

.advantage-item a {
    color: #4ade80;
    text-decoration: underline;
}

/* Mobile Responsiveness */
@media (max-width: 991px) {
    .advantage-intro { width: 100%; font-size: 24px; }
    .advantage-grid { grid-template-columns: 1fr; gap: 50px; }
    .bg-text-watermark { font-size: 100px; top: -20px; }
}
/* --- AI GRID SECTION --- */
.ai-impact-section {
    padding: 80px 5%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    align-items: center;
    background: #fff;
}

.ai-text-side {
    flex: 1;
}

.ai-text-side h4 {
    color: #265d62;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
    font-weight: 700;
}

.ai-text-side h2 {
    font-size: 44px;
    color: #333;
    line-height: 1.1;
    margin-bottom: 25px;
}

.ai-text-side p {
    color: #555;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 500px;
}

.btn-explore {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    border: 1px solid #333;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Grid Layout */
.ai-grid-side {
    flex: 1;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
}

.ai-tile {
    position: relative;
    overflow: hidden;
    color: #fff;
    min-height: 170px;
}

.ai-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-tile-label {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 16px;
    font-weight: 500;
}

.ai-tile-plus {
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 20px;
}
.ai-tile {
    position: relative;
    height: 206px;
 
}
/* Large Specialized Card */
.ai-tile-main {
    grid-row: span 2;
    background: #006b6b;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 412px;
}


.ai-tile-main h3 { font-size: 22px; margin-bottom: 10px; }
.ai-tile-main p { font-size: 14px; opacity: 0.9; margin-bottom: 20px; }

/* Central Badge */
.floating-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    color: #000;
    padding: 12px 20px;
    font-weight: 800;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    z-index: 10;
}

@media (max-width: 1024px) {
    .ai-impact-section { flex-direction: column; text-align: center; }
    .ai-text-side p { margin-left: auto; margin-right: auto; }
}

/* --- AI IMPACT GRID SECTION --- */
.ai-impact-section {
    padding: 100px 5%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.ai-text-side h4 {
    color: #265d62;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.ai-text-side h2 {
    font-size: 48px;
    color: #1f2937;
    line-height: 1.2;
    margin-bottom: 30px;
}

.ai-text-side p {
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 40px;
    font-size: 17px;
}

.btn-explore {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 15px 30px;
    border: 1px solid #1f2937;
    color: #1f2937;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-explore:hover {
    background: #1f2937;
    color: #fff;
}

/* 4-Tile Grid Styling */
.ai-grid-container {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 15px;
}

.ai-tile {
    position: relative;
    height: 170px;
    overflow: hidden;
    color: #fff;
    background: #004d4d; /* Fallback teal */
}

.ai-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  
    transition: transform 0.5s ease;
}

.ai-tile:hover img { transform: scale(1.05); }

.ai-tile-label {
    position: absolute;
    top: 20px;
    left: 20px;
    font-weight: 600;
    font-size: 18px;
    z-index: 2;
}

.ai-tile-plus {
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 24px;
    z-index: 2;
}

/* The Bottom-Left Large Card */
.ai-tile-large {
    grid-row: span 2;
    height: 230px;
    background: #006666;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.ai-tile-large h3 { font-size: 24px; margin-bottom: 15px; }
.ai-tile-large p { font-size: 14px; color: rgba(255,255,255,0.8); margin-bottom: 20px; }

/* Central AI Badge */
.central-ai-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    color: #000;
    padding: 15px 25px;
    font-weight: 800;
    font-size: 28px;
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

@media (max-width: 1024px) {
    .ai-impact-section { grid-template-columns: 1fr; }
    .ai-grid-container { max-width: 600px; margin: 0 auto; }
}

/* --- FOOTER SECTION --- */
footer {
    background-color: #f9f8f6;
    padding: 80px 5% 40px;
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
}

.footer-top {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}

.footer-logo img { height: 35px; }

.footer-socials { display: flex; gap: 20px; font-size: 24px; }
.footer-socials a { color: #fff; transition: 0.3s; }

.footer-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr; /* Services takes more space */
    gap: 40px;
}

.footer-col-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.footer-col h3 {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
	color:#fff;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 30px; height: 2px;
    background: #e63946;
}

.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { 
    text-decoration: none; 
    color: #4b5563; 
    font-size: 15px; 
    transition: 0.3s; 
	color:#fff;
}
.footer-links a:hover { color: #000; }

/* Bottom Bar */
.footer-bottom {
    max-width: 1400px;
    margin: 60px auto 0;
    padding-top: 30px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 13px;
    color: #6b7280;
}

.legal-links { display: flex; gap: 15px; flex-wrap: wrap; }
.legal-links a { color: #6b7280; text-decoration: none; border-right: 1px solid #ccc; padding-right: 15px; }
.legal-links a:last-child { border: none; }

/* --- MOBILE ACCORDION --- */
@media (max-width: 768px) {
    .footer-top { flex-direction: column; gap: 30px; }
    .footer-grid { grid-template-columns: 1fr; }
    
    .footer-col h3 {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0;
        padding: 15px 0;
        border-top: 1px solid #9d9d9d !important;
    }
    
    .footer-col h3::after { display: none; } /* Remove red line on mobile */
    
    .footer-col h3::before {
        content: '+';
        order: 2;
        font-size: 20px;
    }

    .footer-col.active h3::before { content: '-'; }

    .footer-links {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    .footer-col.active .footer-links {
        max-height: 500px;
        padding: 15px 0;
    }
}

@media (max-width: 768px) {
    /* Hide links by default */
    .footer-links {
        display: block; /* Change from none to block for transition to work */
        max-height: 0;
        overflow: hidden;
        transition: max-grow 0.4s ease, opacity 0.3s ease;
        opacity: 0;
        padding: 0;
        margin: 0;
    }

    /* Show links when active */
    .footer-col.active .footer-links {
        max-height: 1000px; /* Large enough to fit all links */
        opacity: 1;
        padding-top: 15px;
        padding-bottom: 20px;
    }

    /* Rotate the plus sign to a minus or X */
    .footer-col h3::before {
        transition: transform 0.3s ease;
    }
    
    .footer-col.active h3::before {
        transform: rotate(0deg); /* Turns + into x */
    }
}

/* --- INSIGHTS GRID SECTION --- */
.insights-grid-section {
    padding: 60px 5%;
    background-color: #f5f5f5;

    margin: 0 auto;
}

.insights-grid-section h2 {
    font-size: 42px;
    font-weight: 500;
    margin-bottom: 0px;
    color: #1a1a1a;
}

.insights-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}
.chairmaninsights-wrapper {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    }

.insight-card {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
	
}


.insight-thumb {
    width: 100%;
    height: 240px;
    overflow: hidden;
    margin-bottom: 20px;
}

.insight-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.insight-card:hover .insight-thumb img {
    transform: scale(1.05);
}

.insight-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}

.insight-meta span strong {
    color: #1a1a1a;
}

.insight-card h3 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
    color: #1a1a1a;
    transition: color 0.3s;
}

.insight-card:hover h3 {
    
}

/* Explore All Button */
.insights-footer {
    display: flex;
    justify-content: center;
}

.btn-explore-all {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 15px 40px;
    border: 1px solid #ccc;
    background: #f9f9f9;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    transition: all 0.3s ease;
}

.btn-explore-all:hover {
    background: #fff;
    border-color: #333;
}

@media (max-width: 991px) {
    .insights-wrapper { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .insights-wrapper { grid-template-columns: 1fr; }
    .insight-thumb { height: 200px; }
}

/* --- CAREERS SECTION --- */
.careers-section {
    padding: 100px 5%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background-color: #fff;
    gap: 80px;
}

.careers-content {
    flex: 1.2;
}

.careers-content h2 {
    font-size: 72px; /* Large statement header */
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.1;
    margin-bottom: 40px;
}

.careers-content p {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 550px;
}

/* Explore Button */
.btn-opportunities {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 15px 35px;
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-opportunities:hover {
    background: #000;
    color: #fff;
}

/* Image Side with Circular Badge */
.careers-image-side {
    flex: 1;
    position: relative;
}

.careers-image-side img {
    width: 100%;
    display: block;
    object-fit: cover;
}

.circular-badge {
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    pointer-events: none;
    animation: rotateText 20s linear infinite;
}

@keyframes rotateText {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.circular-badge text {
    fill: #ff462d !important;
   font-size: 11px !important;
     letter-spacing: 1px !important;
    text-transform: uppercase;
	 font-weight: 900 !important;
}


@media (max-width: 991px) {
    .careers-section { flex-direction: column; text-align: center; }
    .careers-content h2 { font-size: 48px; }
    .careers-content p { margin-left: auto; margin-right: auto; }
    .circular-badge { width: 120px; height: 120px; right: 0; bottom: -20px; }
}
/* --- OUR STORY SECTION --- */
.story-section {
    background-color: #000;
    color: #fff;
    padding: 120px 8%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 700px;
    overflow: hidden;
}

.story-content {
    flex: 1;
    max-width: 600px;
}

.story-content h2 {
    font-size: 84px; /* Matches the large header scale */
    font-weight: 300;
    margin-bottom: 40px;
    letter-spacing: -2px;
}

.story-content p {
    font-size: 22px;
    line-height: 1.5;
    color: #ccc;
    margin-bottom: 50px;
    font-weight: 300;
}

/* Outlined Button */
.btn-about {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 18px 45px;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    transition: all 0.3s ease;
}

.btn-about:hover {
    background: #fff;
    color: #000;
}

/* 3D Sphere Side */
.story-visual {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sphere-image {
    width: 100%;
 
    z-index: 1;
}

/* Floating Stats Overlays */
.stat-overlay {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 15px;
}

.stat-overlay strong {
    font-size: 28px;
    color: #fff;
}

.stat-overlay span {
    font-size: 13px;
    color: #aaa;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Specific Positions from the Screenshot */
.stat-top { top: 30%; right: 10%; }
.stat-bottom { bottom: 25%; left: 5%; }

@media (max-width: 1024px) {
    .story-section { flex-direction: column; text-align: center; padding: 80px 5%; }
    .story-content h2 { font-size: 60px; }
    .story-visual { margin-top: 60px; }
    .stat-overlay { position: relative; margin: 10px; left: auto; right: auto; bottom: auto; top: auto; }
}
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* Start completely off-screen to the right */
        width: 80%;    /* Adjust width as needed */
        height: 100vh;
        background: #fff;
        flex-direction: column;
        padding: 80px 40px;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth slide effect */
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        z-index: 1000;
        display: flex; /* Ensure it stays flex but vertical */
    }

    .nav-menu.active {
        right: 0; /* Slide in to the right edge */
    }
    
    /* Overlay to dim the background when menu is open */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 999;
    }
    
    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

/* --- VALUE DELIVERY SECTION --- */
.value-delivery-section {
    padding: 100px 8%;
    
  
    margin: 0 auto;
	background: #0b3231;
}

.value-delivery-section h2 {
    color: #eb3300; /* Specific vibrant red/orange from screenshot */
    font-size: 32px;
    font-weight: 400;
    margin-bottom: 60px;
}

.value-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    margin-bottom: 50px;
}

.value-card {
    display: flex;
    flex-direction: column;
}

/* Image Container with Number Overlay */
.value-img-wrapper {
    position: relative;
    width: 100%;
    height: 150px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 35px;
	display:none;
}

.value-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hollow-number {
        position: absolute;
    bottom: 10px;
    left: -8px;
    font-size: 160px;
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.7);
    pointer-events: none;
    font-family: 'Inter', sans-serif;
    -webkit-text-stroke: 1px rgb(8 0 0 / 80%);
}

/* Text Content */
.value-info h3 {
    font-size: 26px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
    padding-top: 15px;
}

/* Red accent bar */
.value-info h3::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 35px;
    height: 2px;
    
}

.value-info p {
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    margin-bottom: 25px;
}

/* Rounded Learn More Button */
.btn-value-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    border: 1px solid #1a1a1a;
    border-radius: 50px;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    width: fit-content;
}

.btn-value-link:hover {
    background-color: #1a1a1a;
    color: #fff;
}

@media (max-width: 991px) {
    .value-grid { grid-template-columns: 1fr; }
    .value-img-wrapper { height: 150px; }
    .hollow-number { font-size: 100px; }
	
	.ai-tile-large {
    height: 380px !important;
    padding: 15px;
}

@media (max-width: 991px) {
    .ai-tile-large {
        height: 210px !important;
        padding: 15px;
    }
}
.ai-tile-large p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    line-height: 16px;
}
.ai-tile-large h3 {
     line-height: 21px !important;

    padding-top: 20px;
}
.hollow-number {
    
    left: 0px;
    font-size: 100px;
    font-weight: 900;
  
   
  
}
.value-grid {
   
    gap: 0px !important;
   
}
.value-img-wrapper {
   
    margin-bottom: 0px !important;
}
    .hollow-number {
      
        letter-spacing: -8px !important;
    }
	.value-delivery-section h2 {
  line-height: 32px;
    margin-bottom: 20px;
}
.footer-grid {

    gap: 0px;
}
    .footer-col h3 {
     
        border-top: 1px solid #9d9d9d;
    }
	
	.footer-col h3 {
       
       border-top: 1px solid #9d9d9d !important;
    }
}

.fa-bars:before, .fa-navicon:before {
    content: "\f550";
}
.ai-tile {
   
    border-radius: 10px;
}
.ai-tile-large h3 {
    font-size: 21px;
  
    line-height: 27px;
    text-align: left;
}
.ai-tile-large {
   
    height: 230px;
  
    padding: 15px;
   
   
}
.ai-tile-large p {
   
    text-align: left;
}
.fa-arrow-right { text-align: left !important;}

footer {
   
    padding: 80px 5% 40px;
    color: #1a1a1a;
    font-family: 'Inter', sans-serif;
    background: #0b3231;
}
.footer-bottom {
    
    border-top: 1px solid #9d9d9d;

}

/* --- WORKING WITH US ACCORDION --- */
.work-accordion-section {
    padding: 100px 8%;
    background-color: #fff;
}

.work-accordion-section h2 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 42px;
    margin-bottom: 50px;
    color: #1a1a1a;
}

.accordion-container {
    display: flex;
    width: 100%;
    height: 500px;
    gap: 15px;
    overflow: hidden;
}

.accordion-item {
    position: relative;
    flex: 1; /* Default equal width */
    overflow: hidden;
    border-radius: 8px;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}

/* The Hover Expansion */
.accordion-container:hover .accordion-item {
    flex: 0.5; /* Shrink others when container is hovered */
}

.accordion-item:hover {
    flex: 2; /* Expand the specific hovered item */
}

.accordion-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
    transition: transform 0.6s ease;
}

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

/* Text Overlays */
.accordion-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
    z-index: 2;
}

.accordion-content h3 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 28px;
    margin-bottom: 10px;
    white-space: nowrap;
}

.accordion-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    
    transform: translateY(20px);
    transition: all 0.4s ease 0.2s; /* Delay for smooth text reveal */
    max-width: 300px;
}

.accordion-item:hover .accordion-content p {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .accordion-container {
        flex-direction: column;
        height: auto;
    }
    .accordion-item {
        height: 250px;
        flex: none !important;
    }
}


/* Keep your Desktop Styles as provided previously */

@media (max-width: 768px) {
    .accordion-container {
        display: block; /* Disable flex so Owl Carousel can work */
        height: auto;
        overflow: visible;
    }

    .accordion-item {
        flex: none !important;
        width: 100%;
        height: 400px; /* Fixed height for mobile slides */
        margin-bottom: 0;
    }

    /* Ensure content is always visible on mobile since there is no 'hover' */
    .accordion-content p {
        opacity: 1;
        transform: translateY(0);
        font-size: 13px;
    }
    
    .accordion-item img {
        filter: brightness(0.7); /* Slightly darker for text readability on touch */
    }

    /* Style the slider dots to match your brand */
    .owl-dots {
        margin-top: 20px !important;
    }
    .owl-theme .owl-dots .owl-dot span {
        background: #ccc;
    }
    .owl-theme .owl-dots .owl-dot.active span {
        background: #1a1a1a;
    }
}

.work-accordion-section {
    padding: 100px 8%;
    background-color: #f1ece5;
}
.legal-links a {
    color: #585858;
    text-decoration: none;
    border-right: 1px solid #767676;
    padding-right: 15px;
}
/* --- FIXED FEEDBACK BUTTON --- */
.feedback-btn {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg); /* Rotates text vertically */
    transform-origin: right bottom;
background: #9bca3b;
    color: #fff;
    padding: 12px 25px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px 4px 0 0; /* Rounded corners on the "top" when vertical */
    z-index: 9999;
    transition: all 0.3s ease;
}

.feedback-btn:hover {
    background-color: #ffffff;
    color: #1a1a1a;
    padding-right: 35px; /* Slight "slide out" effect */
}

.feedback-btn i {
    margin-right: 8px;
    transform: rotate(90deg); /* Keeps the icon upright */
}

/* Hide on very small screens if it overlaps content */
@media (max-width: 600px) {
    .feedback-btn {
        padding: 8px 15px;
        font-size: 12px;
    }
}
/* --- FOOTER AI AGENT BUTTON --- */
.ai-agent-container {
    margin-top: 20px;
}

.ai-agent-container p {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 20px;
    line-height: 1.5;
}

.btn-ai-agent {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #1a1a1a;
    border: 1px solid #374151;
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    text-align: left;
}

.btn-ai-agent span {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.ai-icon-wrapper {
    position: relative;
    width: 32px;
    height: 32px;
    background: #7F00FF; /* Using your brand purple */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-icon-wrapper i {
    font-size: 14px;
    z-index: 2;
}

/* Pulsing effect to show the AI is "Live" */
.pulse-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #7F00FF;
    border-radius: 50%;
    opacity: 0.6;
    animation: pulse-animation 2s infinite;
}

@keyframes pulse-animation {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.8); opacity: 0; }
}

.btn-ai-agent:hover {
    background: #262626;
    border-color: #7F00FF;
    transform: translateY(-2px);
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .btn-ai-agent {
        justify-content: center;
    }
}

/* --- FIXED AI CHATBOT BUTTON --- */
.ai-chat-fixed {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The Label that appears on hover */
.ai-chat-label {
    background: #ffffff;
    color: #1a1a1a;
    padding: 8px 16px;
    border-radius: 50px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.ai-chat-fixed:hover .ai-chat-label {
    opacity: 1;
    transform: translateX(0);
}

/* The Circular Button */
.btn-ai-float {
    width: 60px;
    height: 60px;
    background: #ff462d; /* Brand Purple */
    border: none;
    border-radius: 50%;
    color: #ffffff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(127, 0, 255, 0.3);
    position: relative;
    transition: transform 0.3s ease;
}

.btn-ai-float:hover {
    transform: scale(1.1);
}

/* The Notification Ping */
.ai-ping {
    position: absolute;
    top: 0;
    right: 0;
    width: 15px;
    height: 15px;
    background: #f4ff00;
    border: 3px solid #ac91c7;
    border-radius: 50%;
}

.ai-ping::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
   background: #f4ff00;
    border-radius: 50%;
    animation: ai-ping-wave 2s infinite;
}

@keyframes ai-ping-wave {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.5); opacity: 0; }
}

/* Mobile Adjustment */
@media (max-width: 768px) {
    .ai-chat-fixed { bottom: 20px; right: 20px; }
    .ai-chat-label { display: none; } /* Hide label on mobile to save space */
}

/* --- MOBILE FIXED BOTTOM NAV --- */
.mobile-bottom-nav {
    display: none; /* Hidden on Desktop */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    z-index: 10001; /* Above everything including the footer */
    box-shadow: 0 -2px 15px rgba(0,0,0,0.08);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #6b7280;
    gap: 4px;
}

.nav-item i {
    font-size: 18px;
}

.nav-item span {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Center AI Button */
.ai-nav-btn {
    position: relative;
    transform: translateY(-15px); /* Lift the center button */
}

.ai-orb {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #7F00FF;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(127, 0, 255, 0.4);
    z-index: -1;
}

.ai-nav-btn i {
    color: #fff;
    font-size: 20px;
}

/* Show only on mobile */
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: grid;
    }
    
    /* Add padding to body so content isn't cut off by the nav */
    body {
        
    }
}
@media (max-width: 768px) {
    .ai-chat-fixed {
        bottom:90px;
        left: 20px;
    }
}
.mobile-bottom-nav {
  background: #000000;

    height: 80px;

}
@media (max-width: 768px) {
    .footer-col h3::before {
        content: '+';
        order: 2;
        font-size: 27px;
    }
}
/* --- ABOUT CIDCOS EXACT LAYOUT --- */
.about-section-exact {
    display: flex;
    width: 100%;
    background-color: #ffffff;
    min-height: 700px;
}

/* Image takes up roughly 40% of the width */
.about-img-container {
    flex: 0 0 42%;
    position: relative;
}

.about-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text takes up the remaining 58% */
.about-content-container {
    flex: 1;
    padding: 100px 10% 100px 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-content-container h2 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 35px;
}

.about-content-container p {
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #fff;
    margin-bottom: 45px;
    max-width: 650px;
}

/* Learn More Link */
.about-cta {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
}

.about-cta i {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.about-cta:hover i {
    transform: translateX(5px);
}

/* Mobile Responsiveness */
@media (max-width: 991px) {

.value-card {

    margin-bottom: 30px;
}
    .about-section-exact {
        flex-direction: column;
    }
    .about-img-container {
        height: 450px;
        flex: none;
    }
    .about-content-container {
        padding: 60px 8%;
    }
    .about-content-container h2 {
        font-size: 36px;
    }
}

/* --- CASE STUDIES GRID SECTION --- */
.case-studies-section {
    padding: 100px 8%;
 
    max-width: 1400px;
    margin: 0 auto;
}

.case-studies-section h2 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 42px;
    font-weight: 400;
    margin-bottom: 50px;
    color: #1a1a1a;
}

.case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.case-card {
    position: relative;
    height: 500px; /* Fixed height for consistent grid */
   
    border-radius: 4px;
    text-decoration: none;
    display: block;
}

.case-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Dark gradient overlay for text readability */
.case-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
    z-index: 1;
}

.case-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    z-index: 2;
    color: #ffffff;
}

.case-category {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: block;
    font-weight: 500;
}

.case-content h3 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 0;
}

/* Hover Animations */
.case-card:hover img {
    transform: scale(1.08);
}

.case-card:hover h3 {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

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

@media (max-width: 650px) {
    .case-grid { grid-template-columns: 1fr; }
    .case-card { height: 400px; }
}

.about-content-container {
   
    background: #000;
}

/* --- SLIDE-IN MODAL DRAWER --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 10002;
    display: none; /* Hidden by default */
    opacity: 0;
    transition: opacity 0.4s ease;
}

.case-modal-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 50%; /* Desktop width */
    height: 100%;
    background: #ffffff;
    z-index: 10003;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    transform: translateX(100%); /* Start off-screen to the right */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 60px 5%;
    overflow-y: auto;
}

/* State when active */
.modal-overlay.active {
    display: block;
    opacity: 1;
}

.case-modal-drawer.active {
    transform: translateX(0); /* Slide in to view */
}

/* Typography inside Modal */
.modal-category {
    font-family: 'Poppins', sans-serif;
    color: #7F00FF;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.modal-title {
    font-family: 'TWK Everett', sans-serif;
    font-size: 36px;
    margin: 20px 0 40px;
    line-height: 1.2;
}

.close-drawer {
    background: none;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 768px) {
    .case-modal-drawer {
        width: 100%; /* Full screen on mobile */
    }
}
/* --- SERVICE GRID --- */
.service-grid-section {
    padding: 100px 8%;
    background-color: #ffffff;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
   
}

.service-card {
    background-color: #fff;
    padding: 60px 40px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    transition: background 0.3s ease;
}

.service-card:hover {
    background-color: #f9fafb;
}

.service-num {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #9ca3af;
    margin-bottom: 30px;
}

.service-card h3 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #1a1a1a;
}

.service-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #4b5563;
    line-height: 1.6;
}

.read-more-btn {
    margin-top: auto;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- DRAWER (RIGHT TO LEFT) --- */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10002;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.service-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 450px; /* Drawer width */
    height: 100%;
    background: #fff;
    z-index: 10003;
    transform: translateX(100%); /* Start off-screen */
    transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    padding: 60px 40px;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
}

.drawer-overlay.active { display: block; opacity: 1; }
.service-drawer.active { transform: translateX(0); }

#closeDrawer {
    background: none;
    border: none;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 40px;
}

.drawer-category {
    font-family: 'Poppins', sans-serif;
    color: #7F00FF; /* Brand Purple */
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

#drawerTitle {
    font-family: 'TWK Everett', sans-serif;
    font-size: 32px;
    margin: 15px 0 30px;
}

@media (max-width: 991px) {
	#navLinks li{padding-bottom: 20px;
    border-bottom: 1px solid #090000;}
    .service-grid { grid-template-columns: 1fr; }
    .service-drawer { width: 100%; }
	.value-grid {
 
    margin-bottom: 0px;
}

.hero-content {
    
    text-align: left !important;
    
}
	
}
@media (max-width: 1024px) {
    .ai-impact-section {
        grid-template-columns: 1fr;
        text-align: left;
    }
}
.value-section {
  
        background: #fff !important;
 
}
.btn-learn {
   
    border: 1px solid #000000;

}
@media (max-width: 991px) {
	.hero-split .btn {
    padding: 10px 14px;
  
    font-size: 12px;
}
	.insights-grid-section {
    padding: 50px 5%;
    background-color: #f5f5f5;
    margin: 0 auto;
}
.insights-grid-section h2 {
  
    margin-bottom: 30px;
   
}
	
    .value-img-wrapper {
        height: 118px;
    }
}
.value-header {
    color: #000000;
    
}
.value-delivery-section h2 {
    color: #fff;
	
}

/* --- HERO DARK SECTION --- */
.hero-dark-section {
    position: relative;
    width: 100%;
    min-height: 80vh;
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 100px 5%;
}

/* The Blue Glow Effect from the screenshot */
.glow-effect {
    position: absolute;
    bottom: -10%;
    right: -5%;
    width: 600px;
    height: 600px;
   
    filter: blur(60px);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
}

.hero-content h1 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 72px;
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

.text-blue {
    color: #00A3FF; /* The specific blue from the Design text */
}

.hero-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #cccccc;
    margin-bottom: 50px;
    padding: 0 10%;
}

/* Ghost Button */
.btn-expertise {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 15px 35px;
    border: 1px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-expertise:hover {
    background-color: #ffffff;
    color: #000000;
}

.btn-expertise i {
    font-size: 14px;
}

/* Responsive */
@media (max-width: 768px) {
    .hero-content h1 { font-size: 42px; }
    .hero-content p { font-size: 16px; padding: 0; }
    .hero-dark-section { min-height: 60vh; }
}

/* --- WHO WE ARE SECTION --- */
.who-we-are-section {
    display: flex;
    width: 100%;
    min-height: 100vh;
    background-color: #ffffff;
}

/* Left Column (40%) */
.col-content {
    flex: 0 0 40%;
    padding: 100px 5% 100px 8%;
    display: flex;
    align-items: center;
}

.content-inner { max-width: 500px; }

.section-label {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #333;
}

.accent-line {
    width: 30px;
    height: 2px;
    background-color: #FF4500;
    margin: 10px 0 30px;
}

.col-content h2 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 400;
    color: #1a1a1a;
    margin-bottom: 30px;
}

.col-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 60px;
}

/* Bottom Nav Links */
.content-nav {
    display: flex;
    gap: 30px;
    border-top: 1px solid #eee;
    padding-top: 30px;
}

.content-nav a {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.content-nav a:hover { color: #000; }

/* Right Column (60%) */
.col-brand {
    flex: 1;
    background-color: #FF4500; /* Vibrant Orange */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 8%;
    position: relative;
}

.brand-heading {
        font-family: 'TWK Everett', sans-serif;
    font-size: 110px;
    color: #ffffff;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 70px;
}

.btn-watch {
    position: absolute;
    bottom: 100px;
    left: 8%;
    padding: 15px 40px;
    border: 1px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    transition: all 0.3s;
}

.btn-watch:hover {
    background-color: #ffffff;
    color: #FF4500;
}

/* Responsive */
@media (max-width: 1024px) {
    .who-we-are-section { flex-direction: column; }
    .col-content, .col-brand { flex: none; width: 100%; padding: 60px 8%; }
    .brand-heading { font-size: 67px; }
    .btn-watch { position: static; margin-top: 40px; display: inline-block; }
}
/* --- HORIZONTAL SCROLL MENU --- */
.horizontal-scroll-menu {
    position: sticky;
    top: 90px; /* Adjust this if your main header is also sticky (e.g., top: 80px) */
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    z-index: 1000;
    overflow: hidden;
	z-index:99;
}

.scroll-wrapper {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 15px 8%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
	    background: rgb(198 198 198) !important;
}

.scroll-wrapper::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.scroll-item {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    margin-right: 35px;
    padding-bottom: 5px;
    position: relative;
    transition: color 0.3s ease;
}

.scroll-item:hover {
    color: #000;
}

.scroll-item.active {
    color: #000;
}

/* The Active Underline */
.scroll-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #ff462d; /* Your Brand Purple */
}

@media (max-width: 768px) {
    .scroll-wrapper {
        padding: 15px 5%;
    }
    .scroll-item {
        margin-right: 25px;
    }
}


/* --- ABOUT & VALUES BLOCK --- */
.about-values-section {
    padding: 100px 8%;
    background: #fff;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.value-card {
   
}

.value-card h3 { font-size: 24px; margin-bottom: 15px; }

/* Responsive adjustments for mobile */
@media (max-width: 1024px) {
    .innovation-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: 1fr; }
}

/* --- INNOVATION GRID --- */
.innovation-grid {
    display: grid;
    /* Desktop: 4 columns */
    grid-template-columns: repeat(4, 1fr); 
    gap: 1px;
    background-color: #e5e5e5;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
}

.innovation-node {
    background-color: #ffffff;
    padding: 60px 40px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    transition: background 0.3s ease;
}

.node-number {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #000;
    margin-bottom: 30px;
}

.innovation-node h3 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
    color: #1a1a1a;
    margin: 0;
}

.node-link {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- RESPONSIVE: 2 BLOCKS PER ROW --- */
@media (max-width: 1024px) {
    .innovation-grid {
        /* This ensures 1 & 2 stay in a single row on tablets and phones */
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 768px) {
    .innovation-node {
        padding: 40px 25px;
        min-height: 300px;
    }
    .innovation-node h3 {
        font-size: 22px; /* Adjusted for smaller screens */
    }
}

@media (max-width: 480px) {
    .innovation-node {
        padding: 30px 20px;
        min-height: 250px;
    }
    .innovation-node h3 {
        font-size: 18px; /* Ensure text fits in 2-column mobile view */
    }
}

/* --- CONTACT GRID --- */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background-color: #e5e5e5;
    border-top: 1px solid #e5e5e5;
}

.contact-node {
    background-color: #ffffff;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 320px;
}

.node-label {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: #7F00FF; /* Brand Purple */
    margin-bottom: 20px;
    display: block;
}

/* --- CONTACT FORM --- */
.contact-form-section {
    padding: 100px 8%;
    background: #000; /* Dark theme contrast */
    color: #fff;
}

.form-container {
    display: flex;
    gap: 80px;
}

.form-info { flex: 0 0 40%; }
.form-info h2 { font-family: 'TWK Everett', sans-serif; font-size: 42px; margin-bottom: 30px; }

.form-wrapper { flex: 1; }

.cidcos-form input, .cidcos-form select, .cidcos-form textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #333;
    color: #fff;
    padding: 15px 0;
    margin-bottom: 30px;
    font-family: 'Poppins', sans-serif;
}

.btn-submit {
    background: #7F00FF;
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: 0.3s;
}

/* Responsive: 2 per row for grid */
@media (max-width: 1024px) {
    .contact-grid { grid-template-columns: repeat(2, 1fr); }
    .form-container { flex-direction: column; gap: 50px; }
    .form-info { flex: none; }
}

/* --- GLOBAL GRID LOGIC (1px Border) --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 1px; 
    background-color: #e5e5e5;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    width: 100%;
}

.grid-node {
    background-color: #ffffff;
    padding: 60px 40px;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    transition: background 0.3s ease;
}

.grid-node:hover { background-color: #f9f9f9; }

/* --- DARK THEME BLOCKS --- */
.dark-block {
    background-color: #000;
    color: #fff;
    padding: 100px 8%;
}

.flex-split {
    display: flex;
    gap: 80px;
    align-items: flex-start;
}

.split-left { flex: 0 0 40%; }
.split-right { flex: 1; }

/* --- TYPOGRAPHY --- */
.node-num { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: #7F00FF; margin-bottom: 30px; display: block; }
.node-title { font-family: 'TWK Everett', sans-serif; font-size: 28px; line-height: 1.2; color: #1a1a1a; }
.node-link { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600; color: #000; display: flex; align-items: center; gap: 10px; margin-top: auto; }

/* --- RESPONSIVE: STRICT 2 COLUMNS --- */
@media (max-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* Forces 1&2 in a single row */
    }
    .flex-split { flex-direction: column; gap: 50px; }
    .split-left { flex: none; width: 100%; }
}

@media (max-width: 650px) {
    .grid-node { padding: 40px 20px; min-height: 280px; }
    .node-title { font-size: 20px; }
}
.split-right {
    flex: 1;
    width: 100%;
}
.brand-heading {

    line-height: 100px !important;
}

/* --- INSIGHTS PAGE BLOCKS --- */
.insights-section {
    padding: 100px 8%;
    background-color: #ffffff;
}

.insights-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 40px;
}

.insights-header .label {
    font-family: 'Poppins', sans-serif;
    color: #7F00FF; /* Brand Purple */
    letter-spacing: 2px;
    font-weight: 600;
    font-size: 12px;
}

.insights-header h2 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 48px;
    margin-top: 10px;
}

.insights-header .header-right {
    max-width: 400px;
    font-family: 'Poppins', sans-serif;
    color: #666;
    font-size: 15px;
}

/* --- THE GRID --- */
.insights-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: #e5e5e5; /* The grid line */
}

.insight-node {
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.node-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.node-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.insight-node:hover img { transform: scale(1.05); }

.category-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #fff;
    padding: 5px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.node-content {
    padding: 40px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.node-date {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #999;
    margin-bottom: 15px;
}

.node-content h3 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 20px;
}

.node-content p {
    font-family: 'Poppins', sans-serif;
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.read-more {
    margin-top: auto;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 15px;
}

/* --- RESPONSIVE: 2 BLOCKS IN ROW --- */
@media (max-width: 1024px) {
    .insights-featured-grid {
        grid-template-columns: repeat(2, 1fr); /* Maintains your 2-column rule */
    }
}

@media (max-width: 600px) {
    .insights-header { flex-direction: column; align-items: flex-start; }
    .insights-header .header-right { margin-top: 20px; }
}

.insight-node {

    border: 1px solid #000;
}
.insights-featured-grid {
   
    gap: 8px;
    background-color: transparent !important;
    /* border: 1px solid #000; */
}

/* --- INSIGHTS PAGE BLOCKS --- */
.insights-section {
    padding: 100px 8%;
    background-color: #ffffff;
}

.insights-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 40px;
}

.insights-header .label {
    font-family: 'Poppins', sans-serif;
    color: #7F00FF; /* Brand Purple */
    letter-spacing: 2px;
    font-weight: 600;
    font-size: 12px;
}

.insights-header h2 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 48px;
    margin-top: 10px;
}

.insights-header .header-right {
    max-width: 400px;
    font-family: 'Poppins', sans-serif;
    color: #666;
    font-size: 15px;
}

/* --- THE GRID --- */
.insights-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background-color: #e5e5e5; /* The grid line */
}

.insight-node {
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
}

.node-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.node-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.insight-node:hover img { transform: scale(1.05); }

.category-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #fff;
    padding: 5px 12px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.node-content {
    padding: 40px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.node-date {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #999;
    margin-bottom: 15px;
}

.node-content h3 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 20px;
}

.node-content p {
    font-family: 'Poppins', sans-serif;
    color: #666;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.read-more {
    margin-top: auto;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- RESPONSIVE: 2 BLOCKS IN ROW --- */
@media (max-width: 1024px) {
    .insights-featured-grid {
        grid-template-columns: repeat(2, 1fr); /* Maintains your 2-column rule */
    }
}

@media (max-width: 600px) {
    .insights-header { flex-direction: column; align-items: flex-start; }
    .insights-header .header-right { margin-top: 20px; }
}

.ai-tile-large h3 {
    font-size: 16px;
    line-height: 20px;
    text-align: left;
    padding-top: 13px;
}

.nav-actions .btn {
    padding: 6px 12px;
   
}

.value-card {
  
}

.uacc-announcement-bar {
        background-color: #003B49; /* Deep Teal/Navy background */
        color: #FFFFFF;
        padding: 20px 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        font-family: 'TWK Everett', sans-serif;
    }

    .uacc-banner-content {
        display: flex;
        align-items: center;
        gap: 60px;
        max-width: 1200px;
        width: 100%;
    }

    .text-group h3 {
        font-size: 1.1rem;
        font-weight: 300;
        margin-bottom: 4px;
        opacity: 0.9;
    }

    .text-group p {
        font-size: 1.2rem;
        font-weight: 700;
        margin: 0;
    }

    .read-more-btn {
        border: 1px solid #FFFFFF;
        color: #FFFFFF;
        padding: 12px 28px;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 15px;
        font-weight: 500;
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    .read-more-btn:hover {
        background-color: #FFFFFF;
        color: #003B49;
    }

    .close-banner {
        background: none;
        border: none;
        color: #FFFFFF;
        font-size: 1.2rem;
        cursor: pointer;
        position: absolute;
        right: 20px;
        opacity: 0.7;
    }

    @media (max-width: 768px) {
        .uacc-banner-content {
            flex-direction: column;
            gap: 20px;
            text-align: left;
        }
    }


@media (max-width: 768px) {
	   .uacc-banner-content {
     
        align-items: left !important;
        
    }
	.text-group p {
    font-size: 15px;
    font-weight: 500;
    margin: 0;
    line-height: 18px;
}
.impact-card img {
     height: 174px;
   
}
}
.uacc-banner-content {

    align-items: baseline;
  
}

.dertt {
    padding: 15px;
    background: #d3d3d3;
}
.insight-thumb {
   
    margin-bottom: 0px;
}

.insight-card h3 {
    
    
	padding-bottom: 10px;
}
.dertt p{padding-top:10px;}


.dertt {
    padding: 30px 15px;
}


/* --- Global Container --- */
.uacc-container {
    width: 100%;
   
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}
.uacc-breadcrumb-nav {
    padding: 30px 0 10px 0;
    /* background-color: #0c0000; */
    background-color: #003B49;
    padding: 28px 5%;
}

/* --- Breadcrumb Navigation --- */
.uacc-breadcrumb-nav {
    padding: 30px 0 10px 0; /* Adjust spacing as per your Hero layout */
        background-color: #003B49;
}

.uacc-breadcrumb-nav {
    padding: 10px 0 10px 0;
    background-color: #003B49;
}
.uacc-container {
    padding: 20px 5%;
}
.uacc-breadcrumb-list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'TWK Everett', sans-serif; /* Your brand font */
    font-size: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase; /* Optional: for a cleaner corporate look */
}

.uacc-breadcrumb-item a {
    color: #888888; /* Muted gray for past links */
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.uacc-breadcrumb-item a:hover {
    color: #7F00FF; /* Your brand primary purple */
}

.uacc-breadcrumb-separator {
    margin: 0 15px;
    color: #DDDDDD;
    font-weight: 300;
}

.uacc-breadcrumb-item.active {
    color: #000000; /* Darker/Bold for the current page */
    font-weight: 600;
}
.uacc-breadcrumb-item.active {
    color: #ffffff;
    font-weight: 600;
}
.uacc-breadcrumb-item i {
    font-size: 12px;
}
.uacc-breadcrumb-item a {
    color: #ffffff;
    
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .uacc-container {
        padding: 0 20px;
    }
    .uacc-breadcrumb-list {
        font-size: 12px;
    }
	.uacc-breadcrumb-nav {
    padding: 20px 0 20px 0;
    background-color: #003B49;
}
}
@media (max-width: 768px) {
    .insight-thumb {
        height: 240px;
    }
}
.pad-b-20 {padding-bottom:20px;}
.pad-t-10{padding-top:20px;border-top:1px solid #000;}

.node-num {

    font-size: 60px;
    
    color: #003b49;
   
}




@media (max-width: 1024px) {
    /* Hide by default */
    .sub-menu {
        max-height: 0;
        overflow: hidden;
        list-style: none;
        background: rgba(255, 255, 255, 0.05); /* Subtle contrast */
        transition: max-height 0.4s ease-in-out;
        padding-left: 20px;
    }

    /* Show when active */
    .sub-menu.active {
        max-height: 500px; /* Adjust based on content */
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Rotate icon when active */
    .dropdown-toggle.icon-rotate i {
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }
}

/* Ensure it stays hidden/hover-only on Desktop */
@media (min-width: 1025px) {
    .sub-menu {
        display: none;
        position: absolute;
        /* ... your desktop styles ... */
    }
    .has-dropdown:hover .sub-menu {
        display: block;
    }
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 50px 5%;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    opacity: 0.9;
}

.gallery-item:hover img {
    transform: scale(1.1);
    opacity: 1;
}

.gallery-item .overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    background: rgba(127, 0, 255, 0.4); /* Your UACC Purple */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .overlay {
    opacity: 1;
}

/* Styling to match your premium UACC UI */
    .gallery-item {
        position: relative;
        overflow: hidden;
        border-radius: 4px;
        background: #000;
        aspect-ratio: 16 / 9;
    }

    .gallery-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.8;
        transition: all 0.5s ease;
    }

    .overlay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.2);
        transition: background 0.3s ease;
    }

    .play-icon-circle {
        width: 70px;
        height: 70px;
        background: rgba(127, 0, 255, 0.9); /* UACC Purple */
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 24px;
        padding-left: 5px; /* Centers the triangle visually */
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .gallery-item:hover img {
        transform: scale(1.05);
        opacity: 1;
    }

    .gallery-item:hover .play-icon-circle {
        transform: scale(1.1);
        background: #FF823B; /* UACC Orange on hover */
    }
	
	.uacc-fancy-slider {
    padding: 60px 0;
    background: #fff;
}

.uaccFancySwiper {
    padding: 0 5% 40px 5%; /* Side padding allows seeing next/prev slides */
}

.slider-image-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: #000;
    cursor: pointer;
}

.slider-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.zoom-overlay {
    position: absolute;
    inset: 0;
    background: rgba(127, 0, 255, 0.3); /* UACC Purple Overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.slider-image-card:hover img {
    transform: scale(1.1);
}

.slider-image-card:hover .zoom-overlay {
    opacity: 1;
}

/* Customizing Swiper Arrows to match UACC style */
.swiper-button-next, .swiper-button-prev {
    color: #000;
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
}
.gallery-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    background: #000;
}

.gallery-item img {
    width: 100%;
    display: block;
    opacity: 0.8;
    transition: 0.4s ease;
}

.gallery-item:hover img {
    opacity: 1;
    transform: scale(1.05);
}

.play-btn-uacc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 65px;
    height: 65px;
    background: #7F00FF; /* UACC Purple */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 0 25px rgba(127, 0, 255, 0.6);
    z-index: 2;
    transition: all 0.3s ease;
}

.gallery-item:hover .play-btn-uacc {
    background: #FF823B; /* Brand Orange on hover */
    transform: translate(-50%, -50%) scale(1.1);
}
.swiper-button-next, .swiper-button-prev {
    color: #000;
    background: #fff;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: 'prev';
    font-size: 20px !important;
    font-weight: 900;
    color: #000;
}
.swiper-button-next:after, .swiper-button-prev:after {
  
    font-size: 20px !important;
    font-weight: 900;
    color: #000;
}
.swiper-horizontal {
    touch-action: pan-y;
    width: 90%;
}
/* Container & Global */
.uacc-main-wrapper { padding: 60px 0; background: #fff; }
.uacc-container { max-width:90%; margin: 0 auto; padding: 0 25px; }
.uacc-block { margin-top: 50px; }

/* Blog Header */
.blog-entry-header { margin-bottom: 40px; border-left: 4px solid #7F00FF; padding-left: 25px; }
.category-tag { color: #7F00FF; font-weight: 600; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }
.entry-title { font-size: 3.5rem; line-height: 1.1; margin: 15px 0; color: #000; }
.entry-meta { color: #888; font-size: 0.9rem; }

/* Media Block */
.header-media-block { position: relative; width: 100%; margin-bottom: 50px; }
.video-cover { width: 100%; height: 100%; object-fit: cover;  }
.play-button-large { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; text-align: center; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.play-button-large i { width: 70px; height: 70px; background: #7F00FF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: 0.3s; }
.play-button-large:hover i { background: #FF823B; transform: scale(1.1); }

/* Tabs */
.tab-nav { display: flex; border-bottom: 1px solid #eee; margin-bottom: 25px; }
.tab-link { padding: 15px 30px; border: none; background: none; cursor: pointer; font-family: 'TWK Everett'; font-weight: 600; color: #999; }
.tab-link.active { color: #000; border-bottom: 2px solid #7F00FF; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.5s ease; }

/* Accordion */
.acc-item { border-bottom: 1px solid #eee; }
.acc-trigger { padding: 25px 0; display: flex; justify-content: space-between; cursor: pointer; font-family: 'TWK Everett'; font-size: 1.3rem; }
.acc-content { max-height: 0; overflow: hidden; transition: 0.4s ease; color: #666; }
.acc-item.active .acc-content { max-height: 300px; padding-bottom: 25px; }
.acc-item.active i { transform: rotate(45deg); color: #7F00FF; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }


.about-values-section {
    padding: 100px 8%;
    background: #e6e6e6;
}

.ai-tile-label {
   
    color: #fff;
}
.ai-tile-plus {
    color: #fff;
}


.ai-tile-large h3 {
    color:#fff;
	text-decoration:none;
}
.ai-tile-large i {
    color:#fff;
}
.ai-tile-large a{text-decoration:none;}


.uacc-leadership {
    padding: 100px 0;
    background-color: #fff;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 50px;
}

.team-card {
    text-align: left;
}

.member-image {
    position: relative;
    aspect-ratio: 4 / 5; /* Professional portrait ratio */
    overflow: hidden;
    background-color: #f4f4f4;
    margin-bottom: 25px;
}

.member-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%); /* Signature institutional look */
    transition: all 0.5s ease;
}

.member-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #7F00FF; /* UACC Purple */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.member-overlay a {
    color: #fff;
    font-size: 1.2rem;
}

/* Hover Effects */
.team-card:hover .member-image img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.team-card:hover .member-overlay {
    transform: translateY(0);
}

.member-name {
    font-family: 'TWK Everett', sans-serif;
    font-size: 1.8rem;
    color: #000;
    margin-bottom: 5px;
    letter-spacing: -0.02em;
}

.member-role {
    font-family: 'Poppins', sans-serif;
    font-size: 0.9rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
}

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

@media (max-width: 767px) {
    .team-grid { grid-template-columns: 1fr; }
    .member-image { aspect-ratio: 1 / 1; }
}

.ssssss3 {
	    background-color: #dedcdc;
  
    color: #000000;
   
	
	
}

.ssssss3 .impact-card img {
    width: 100%;
    height: 154px;
    object-fit: cover;
}

.ssssss3 .impact-card-content {
   
   
}
.ssssss3 .btn-view-more {
 
    border: 1px solid #000;
    color: #000;
 
}
.ssssss3 .impact-text p {
   color: #000;
}
.ssssss3 .impact-text h4 {
 color: #000;
}
.ssssss3 .impact-card-content p {
    font-size: 14px;
    color: #4b5563;
    margin-bottom: -20px;
}



.section-title {
    text-align: center;
    color: var(--brand-teal);
    font-size: 2rem;
    margin-bottom: 40px;
}

/* --- GRID SYSTEM --- */
.leader-grid {
    display: grid;
    max-width: 1200px;
    margin: 0 auto;
    gap: 20px;
    /* Default: 4 columns for laptop/desktop */
    grid-template-columns: repeat(4, 1fr);
}

/* --- CARD STYLING --- */
.leader-card {
    display: flex;
    flex-direction: column;
}

.image-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* Keeps images square */
    overflow: hidden;
    margin-bottom: 15px;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures faces aren't stretched */
    filter: grayscale(20%); /* Optional aesthetic */
}

.leader-info h3 {
    font-size: 1.1rem;
    color: #005a70;
    margin: 0;
    display: flex;
    align-items: center;
}

.arrow {
    color: #f39200; /* Orange arrow color from image */
    margin-left: 8px;
    font-weight: bold;
}

.leader-info p {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 5px 0 0 0;
}

/* --- RESPONSIVENESS --- */
@media (max-width: 992px) {
    /* 2 columns for Tablets and Mobile */
    .leader-grid {
        grid-template-columns: repeat(2, 1fr);
    }
	
.leadership-section {padding:15px;}
}

@media (max-width: 480px) {
    /* Optional: 1 column for very small phones */
    /* .leader-grid { grid-template-columns: 1fr; } */
}


.leadership-section {
    padding: 80px 15px;
}

.sphere-image {
    width: 90%;
    max-width: auto !important;
    z-index: 1;
    border-radius: 20px;
}


/* --- Update the wrapper to let height flow naturally --- */
.image-wrapper {
    width: 100%;
    height: auto;       /* Changed from aspect-ratio: 1/1 */
    overflow: hidden;
    margin-bottom: 15px;
}

/* --- Update the image to use its natural proportions --- */
.image-wrapper img {
    width: 100%;
    height: auto;       /* Changed from height: 100% */
    display: block;     /* Removes any bottom whitespace gaps */
    object-fit: contain; /* Changed from cover to show the full image */
    filter: grayscale(20%);
}
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 42px;
        line-height: 31px;
    }
}
@media (max-width: 768px) {
    .hero-content p {
        font-size: 18px;
        padding: 0;
    }
	.hero-content h1 {
font-size: 32px !important;
    line-height: 34px;
    margin-bottom: 45px;
}
	
}


.hero-content h1 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 72px;
    font-weight: 300;
    color: #ffffff;
    margin-bottom: 30px;
    letter-spacing: -1px;
    line-height: 34px;
    margin-bottom: 45px;
}
/* Responsive adjustment for Insight Cards */
@media (max-width: 991px) {
   .chairmaninsights-wrapper {
    grid-template-columns: repeat(2, 1fr);
    
}
}

.chairmaninsights-wrapper .insight-thumb {
    width: 100%;
    height: 334px;
    overflow: hidden;
    margin-bottom: 20px;
}


.dertt {color:#000 !important;}
.uacc-main-wrapper {
    padding: 60px 0;
    background: #fff;
    width: 70%;
    margin: 0px auto 80px auto;
}
.sjsu {
    margin-bottom: 30px;
    width: 80%;
    margin-bottom: 50px !important;
}
@media (max-width: 991px) {
    .insights-grid-section h2 {
        margin-bottom: 0px;
    }
	.uacc-main-wrapper {
    padding: 60px 0;
    background: #fff;
    width: 100%;
    margin: 0px auto 80px auto;
}
.sjsu {
    margin-bottom: 30px;
    width: 100%;
   
}
.hero-container {
    height: 80vh !important;
  
    padding: 0 8%;
    color: white;
}
.hero-content h1 {

    margin-bottom: 0 !important;
}
	
}


.video-cover-chairman {
    /* width: 100%; */
    /* height: 100%; */
    object-fit: contain;
    height: 300px;
	width:auto;
}

/* Hero Section Styling */
.hero-container {
    height: 52vh;
    width: 100%;
    position: relative;
    background-image: linear-gradient(to right, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 60%), 
                      url('img/asw.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 0 8%;
    color: white;
}

.hero-content h1 {
    font-size: 4rem;
    font-weight: 300;
    margin-bottom: 20px;
}
.hero-content h1 {
    font-size: 30px;
    
    text-align: left;
}
.hero-content p {
    font-size: 1.1rem;
   
    font-weight: 400;
}
.hero-content p {
  
    text-align: left;
    padding: 0px;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 25px;
    border: 1px solid white;
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cta-button span {
    margin-left: 15px;
    font-size: 1.2rem;
}

.cta-button:hover {
    background: white;
    color: black;
}

/* Sticky Feedback Tab */
.feedback-tab {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right bottom;
    background-color: #00A3C4;
    color: white;
    padding: 8px 15px;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
}.hero-content h1 {
    font-size: 51px;
    text-align: left;
}
.hero-content h1 {
    font-size: 51px;
    text-align: left;
}

/* Sub-Navigation Styling */
.sub-nav {
    background-color: white;
    border-bottom: 1px solid #eee;
    width: 100%;
    /* Ensures the container stays at the top/bottom as intended */
    overflow: hidden; 
}

.nav-wrapper {
    display: flex;
    list-style: none;
    align-items: center;
    padding: 20px 5%;
    max-width: 100%;
    
    /* Horizontal Scroll Logic */
    overflow-x: auto;
    white-space: nowrap; /* Prevents items from dropping to next line */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    
    /* Gap between items instead of space-between to allow overflow */
    gap: 40px; 
}

/* Hide scrollbar for Chrome, Safari and Opera */
.nav-wrapper::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.nav-wrapper {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.sub-nav li {
    font-size: 0.75rem;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    letter-spacing: 0.8px;
    transition: color 0.2s;
    flex: 0 0 auto; /* Crucial: Prevents items from shrinking */
    padding-bottom: 5px;
}

.sub-nav li.active {
    border-bottom: 2px solid #000;
    color: #000;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto; /* Pushes Contact Us to the end if there's extra space */
    padding-right: 5%; /* Ensures padding at the very end of the scroll */
}

.SSSS34 a{color:#000 !important;}
.SSSS34b a{color:#000 !important;}
.pad-b-20 {
    padding-bottom: 20px;
    border-bottom: 1px solid #333;
}
.chairmaninsights-wrapper .insight-thumb {
    width: 100%;
    height: 334px;
    overflow: hidden;
    margin-bottom: 0px;
}
.chairmaninsights-wrapper .pad-b-20 {
    padding-bottom: 20px;
    border-bottom: 0px solid #333; 
}

.chairmaninsights-wrapper .insight-thumb {
    
    height: 260px;
   
}
/* Add to style.css */
.more-content {
    display: none; /* Hide the full data initially */
}

/* Ensure the button looks consistent with your current UI */
.insight-card1 .btn-learn {
    margin-top: 10px;
    cursor: pointer;
    background: none;
    border: 1px solid #ccc;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    transition: var(--transition);
}

.insight-card1 .btn-learn:hover {
    background: #f4f4f4;
}

.chairmaninsights-wrapper .value-card {
    border-left: 1px solid #ffffff;
    padding-left: 0;
}
.chairmaninsights-wrapper {
    
    gap: 6px;
}
.chairmaninsights-wrapper .dertt {
    padding: 15px;
    background: #e5e5e5;
}
@media (max-width: 991px) {
	
	.chairmaninsights-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    
}
.chairmaninsights-wrapper .dertt p {
    flex-grow: 1;
    margin-bottom: 20px !important;
}
    .chairmaninsights-wrapper .value-card {
        margin-bottom: 0px;
    }
	.chairmaninsights-wrapper .insight-thumb {
    height: 190px !important;
}
.chairmaninsights-wrapper .dertt {
    padding: 15px 10px;
    background: #e5e5e5;
}
.chairmaninsights-wrapper .value-card p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 0px;
    max-width: 90%;
}

.chairmaninsights-wrapper .value-card h3 {
    font-size: 16px;
    margin-bottom: 15px;
}
}

.chairmaninsights-wrapper .insight-thumb {
    height: 330px;
}

.chairmaninsights-wrapper .value-card p {
   
    margin-bottom: 0px;

}



.chairmaninsights-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    align-items: stretch; /* Forces all grid items to the same height */
}
.chairmaninsights-wrapper .value-card {
    border-left: 1px solid #ffffff;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensures the card matches the grid cell height */
    background: #e5e5e5; /* Maintains consistent background */
}
.chairmaninsights-wrapper .dertt {
    padding: 15px;
    background: #e5e5e5;
    flex-grow: 1; /* Pushes the button to the bottom */
    display: flex;
    flex-direction: column;
}

.chairmaninsights-wrapper .dertt p {
    flex-grow: 1; /* Ensures the text area takes up available space */
}

.chairmaninsights-wrapper .btn-learn {
    margin-top: auto; /* Aligns the button to the bottom of the card */
}


@media (max-width: 991px) {
    .sassafe h2 {
        margin-bottom: 23px !important;
        line-height: 43px;
        font-weight: 600;
    }
}
@media (max-width: 991px) {
    .chairmaninsights-wrapper .value-card h3 {
        font-size: 16px;
        margin-bottom: -5px !important;
    }
}
.chairmaninsights-wrapper .value-card h3::after {
  
    background: none;
 
}
 .chairmaninsights-wrapper .value-card h3 {
       
        margin-bottom: -5px !important;
    }
	
	.chairmaninsights-wrapper .dertt {
    padding: 15px 10px 30px 10px !important;
    
}


/* Keep your Desktop Styles as provided previously */

@media (max-width: 768px) {
    .accordion-container {
        display: block; /* Disable flex so Owl Carousel can work */
        height: auto;
        overflow: visible;
    }

    .accordion-item {
        flex: none !important;
        width: 100%;
        height: 400px; /* Fixed height for mobile slides */
        margin-bottom: 0;
    }

    /* Ensure content is always visible on mobile since there is no 'hover' */
    .accordion-content p {
        opacity: 1;
        transform: translateY(0);
        font-size: 13px;
    }
    
    .accordion-item img {
        filter: brightness(0.7); /* Slightly darker for text readability on touch */
    }

    /* Style the slider dots to match your brand */
    .owl-dots {
        margin-top: 20px !important;
    }
    .owl-theme .owl-dots .owl-dot span {
        background: #ccc;
    }
    .owl-theme .owl-dots .owl-dot.active span {
        background: #1a1a1a;
    }
}

.work-accordion-section {
    padding: 100px 8%;
    background-color: #f1ece5;
}
.legal-links a {
    color: #585858;
    text-decoration: none;
    border-right: 1px solid #767676;
    padding-right: 15px;
}

/* Text Overlays */
.accordion-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    color: #fff;
    z-index: 2;
}

.accordion-content h3 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 28px;
    margin-bottom: 10px;
    white-space: nowrap;
}

.accordion-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    
    transform: translateY(20px);
    transition: all 0.4s ease 0.2s; /* Delay for smooth text reveal */
    max-width: 300px;
}

.accordion-item:hover .accordion-content p {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 768px) {
    .accordion-container {
        flex-direction: column;
        height: auto;
    }
    .accordion-item {
        height: 250px;
        flex: none !important;
    }
}

/* The Hover Expansion */
.accordion-container:hover .accordion-item {
    flex: 0.5; /* Shrink others when container is hovered */
}

.accordion-item:hover {
    flex: 2; /* Expand the specific hovered item */
}

.accordion-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
    transition: transform 0.6s ease;
}

.accordion-item:hover img {
    transform: scale(1.05);
    filter: brightness(1);
}
.accordion-item {
    position: relative;
    flex: 1; /* Default equal width */
    overflow: hidden;
    border-radius: 8px;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}
.work-accordion-section {
    padding: 100px 8%;
    background-color: #fff;
}

.work-accordion-section h2 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 42px;
    margin-bottom: 50px;
    color: #1a1a1a;
}

.accordion-container {
    display: flex !important; /* Forces flex behavior over any library defaults */
    width: 100%;
    height: 500px;
    gap: 15px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    box-sizing: border-box; /* Ensures width includes padding/borders */
    align-items: stretch; /* Ensures items fill the 500px height */
}

/* You MUST ensure the items have a base flex value for the container to work */
.accordion-item {
    flex: 1; /* This ensures they take up equal space initially */
    height: 100%;
    min-width: 0; /* Prevents items from bursting out of the flex container */
}

.ddssee  {
    padding: 100px 8%;
    background-color: #e1e1e1;
}
.ddddsa {margin-top:40px;}


/* --- CONTACT GRID SECTION --- */
.contact-grid-section {
    padding: 100px 5%;
    background-color: #fff;
    max-width: 1400px;
    margin: 0 auto;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Forces 4 items in a single row */
    gap: 25px;
}

.contact-card {

   Background:#fff;
    padding: 40px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--text-main);
    transition: var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contact-grid-section .grid-container {
    display: grid;
    
    gap: 1px;
background-color: #fff; 
    border-top: 1px solid  #fff;
    border-bottom: 0px solid #e5e5e5;
    width: 100%;
}
.contact-card:hover {
    border-color: var(--primary-blue);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.icon-wrapper {
    font-size: 32px;
    color: var(--primary-blue);
    margin-bottom: 20px;
}

.contact-card h3 {
    font-family: 'TWK Everett', sans-serif;
    font-size: 22px;
    margin-bottom: 10px;
}

.contact-card p {
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.action-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Mobile Responsiveness */
@media (max-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2x2 grid on tablets */
    }
}

@media (max-width: 600px) {
    .grid-container {
        grid-template-columns: 1fr; /* Stacks vertically on small phones */
    }
}

@media (max-width: 991px) {
    .about-content-container h2 {
        font-size: 32px;
    }
}

.related-blogs {
    padding: 60px 0; /* Vertical padding only */
}

.related-blogs .owl-carousel {
    width: 100%;
    padding: 0 20px; /* Optional side padding so cards don't touch screen edges */
}

/* Ensure images maintain a consistent aspect ratio in the 4-column layout */
.related-blogs .impact-card img {
    width: 100%;
    height: 200px; 
    object-fit: cover;
}

.uacc-containerdds {
    max-width: 70%;
    margin: 0 auto;
    padding: 0 25px;
}
/* Container for the related section */
.related-grid-section {
    padding: 60px 20px;
    background: #f9fafb; /* Light contrast from the main post */
}

.related-grid-container {
    max-width: 1200px; /* Aligns with your laptop content width */
    margin: 0 auto;
    display: grid;
    /* Laptop: 4 Items */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
}

/* Mobile: 2 Items */
@media (max-width: 768px) {
    .related-grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .related-grid-section {
        padding: 40px 15px;
    }

    .related-grid-container .impact-card h3 {
        font-size: 14px; /* Slightly smaller text for 2-column mobile layout */
        line-height: 1.3;
    }
}

/* Ensure images look good in smaller grid boxes */
.related-grid-container .impact-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

.related-grid-section {
    padding: 60px 20px;
    background: #d6d6d6;
}
.tab-panel h3{padding-bottom: 20PX;
    font-size: 22px;}
	.tab-link{font-size:27px;}
	
	
	
	/* Gallery-specific overrides to match your existing style.css */
.related-grid-section {
    background: #ffffff; /* Clean white or use var(--bg-light) */
    padding: 80px 0;
}

.impact-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px); /* Glassmorphism effect */
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: var(--transition);
}

.impact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.impact-card img {
    width: 100%;
    height: 220px; /* Fixed height for gallery uniformity */
    object-fit: cover;
    filter: grayscale(20%); /* Modern minimalist touch */
}

.card-content {
    padding: 20px;
}

.card-content h3 {
    font-size: 1.25rem;
    color: var(--dark-navy);
    margin-bottom: 8px;
}

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

/* Mobile responsiveness (Matching your 768px breakpoint) */
@media (max-width: 768px) {
    .related-grid-container {
        grid-template-columns: repeat(1, 1fr); /* Single column for high mobile focus */
        padding: 0 20px;
    }
}

.related-grid-container .impact-card img {
    width: 100%;
    height: 160px;
    object-fit: contain;
}

.hero-container {
    height: 80vh;
    width: 100%;
    position: relative;
    background-image: linear-gradient(to right, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0) 60%), 
                      url('img/awe.webp');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 0 8%;
    color: white;
}

.hero-content h1 {
    font-size: 4rem;
    font-weight: 300;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    font-weight: 400;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 25px;
    border: 1px solid white;
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.cta-button span {
    margin-left: 15px;
    font-size: 1.2rem;
}

.cta-button:hover {
    background: white;
    color: black;
}

/* Sticky Feedback Tab */
.feedback-tab {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: right bottom;
    background-color: #00A3C4;
    color: white;
    padding: 8px 15px;
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
}

/* Sub-Navigation Styling */
.sub-nav {
    background-color: white;
    border-bottom: 1px solid #eee;
    width: 100%;
    /* Ensures the container stays at the top/bottom as intended */
    overflow: hidden; 
}

.nav-wrapper {
    display: flex;
    list-style: none;
    align-items: center;
    padding: 20px 5%;
    max-width: 100%;
    
    /* Horizontal Scroll Logic */
    overflow-x: auto;
    white-space: nowrap; /* Prevents items from dropping to next line */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    
    /* Gap between items instead of space-between to allow overflow */
    gap: 40px; 
}

/* Hide scrollbar for Chrome, Safari and Opera */
.nav-wrapper::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.nav-wrapper {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.sub-nav li {
    font-size: 0.75rem;
    font-weight: 700;
    color: #333;
    cursor: pointer;
    letter-spacing: 0.8px;
    transition: color 0.2s;
    flex: 0 0 auto; /* Crucial: Prevents items from shrinking */
    padding-bottom: 5px;
}

.sub-nav li.active {
    border-bottom: 2px solid #000;
    color: #000;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto; /* Pushes Contact Us to the end if there's extra space */
    padding-right: 5%; /* Ensures padding at the very end of the scroll */
}
	
	
	 .section-label {
    padding: 80px 0 20px;
    color: var(--text-muted);
    /* text-transform: uppercase; */
    /* letter-spacing: 2px; */
    font-size: 40px;
    font-weight: bold;
    color: #fff;
    padding-bottom: 30px;
	    line-height: 42px;
}

        /* --- SECTION 1: HERO GRID --- */
        .hero-section {
            display: grid;
            grid-template-columns: 400px 1fr;
            gap: 15px;
            padding-top: 40px;
        }

        .industry-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .industry-item {
            height: 120px;
            position: relative;
            background-color: #111;
            display: flex;
            align-items: flex-end;
            padding: 15px;
            text-decoration: none;
            color: white;
            font-size: 0.7rem;
            font-weight: bold;
            text-transform: uppercase;
           
            overflow: hidden;
            transition: 0.3s;
        }

        /* Background Image Logic for Industry Items */
        .industry-item img {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            z-index: 1;
            /* Matches the dark-washed look */
            transition: transform 0.5s ease, opacity 0.3s ease;
        }

        .industry-item span {
            position: relative;
            z-index: 2;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        .industry-item:hover img {
            transform: scale(1.1);
            opacity: 0.8;
        }

        .industry-item.active { 
            background: var(--accent-gradient); 
            border: none; 
        }
        
        .industry-item.active img { opacity: 0.3; mix-blend-mode: luminosity; }

        .hero-main {
            position: relative;
            background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url('img/100.png') center/cover;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            min-height: 520px;
           
        }

        .hero-main h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0; border-bottom: 3px solid white; width: fit-content; padding-bottom: 15px;}

        /* --- SECTION 2: INSIGHTS SLIDER --- */
        .slider-wrapper {
            overflow: hidden;
            padding-bottom: 60px;
        }

        .slider-container {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding: 20px calc((100% - var(--container-max)) / 2 + 20px);
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
        }
        .slider-container::-webkit-scrollbar { display: none; }

    .sdddd .insight-card {
    flex: 0 0 320px;
    height: 385px;
    padding: 35px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    transition: background 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

        .insight-card.light { background: #f4f4f4; color: #000; }
        .insight-card.dark { background: #111; color: #fff; border: 1px solid #333; }
        
        .insight-card.image-bg {
            background-size: cover;
            background-position: center;
        }

        .card-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; margin-bottom: 20px; position: relative; z-index: 2;}
        .card-title { font-size: 1.5rem; font-weight: 600; line-height: 1.2; margin: 0; position: relative; z-index: 2;}

        .description {
            max-height: 0; opacity: 0; overflow: hidden;
            transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.9rem; line-height: 1.5;
            position: relative; z-index: 2;
        }

        .insight-card:hover .description { max-height: 150px; opacity: 1; margin-top: 20px; }
        .card-graphic { margin-top: auto; position: relative; z-index: 2;}

        /* --- SECTION 3: CAREER GRID --- */
        .career-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
          
        }

        .career-card {
            position: relative;
            height: 520px;
            overflow: hidden;
            background: #000;
        }

        .career-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.8s ease; }
        .career-card::after {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
            z-index: 1;
        }

        .career-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; z-index: 2; }
        .career-title { color: white; font-size: 1.2rem; font-weight: 600; display: flex; align-items: center; gap: 10px; }
        .career-line { width: 40px; height: 3px; background: var(--accent-gradient); margin-top: 15px; transition: 0.4s ease; }

        .career-card:hover img { transform: scale(1.1); }
        .career-card:hover .career-line { width: 100%; }

        @media (max-width: 1100px) {
            .hero-section { grid-template-columns: 1fr; }
            .hero-main { min-height: 400px; }
            .career-grid { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 768px) {
            .insight-card { flex: 0 0 85vw; }
            .career-grid { grid-template-columns: 1fr; }
            .slider-container { padding: 20px; }
        }
		
		.sdddd {Background:#000;}
		
	.fess	.insight-card {
  
    padding: 0px !important;
  
}

.allll .hero-section{padding:130px 0px;     padding: 2px 0px 130px;}
.allll {   background-color: rgb(225, 225, 225);}
.industry-item.active {
  
    background: red;
}

.insight-card.aaasqk {background: #a1d99b !important;}
.insight-card.aaasqkq {
        background: #31a354;
    color: #000;
}

.insight-card h3 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
    color: #ffffff;
    transition: color 0.3s;
}
.sdddd .card-label {
  
    color: #fff;
}

#project-coop .insight-card h3 {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
    color: #000000;
    transition: color 0.3s;
	padding-top:20px;
}

@media (max-width: 1024px) {
    .hero-image-side {
        min-height: 400px;
        width: 100%;
        border-bottom: 1px solid #6e6c6c;
    }
}
@media (max-width: 991px) {
    .value-card .img-container {
        height: 180px;
    }
}
.value-section {
    background: #e5f5e0 !important;
}

.section-label { 
            padding: 80px 0 20px; 
            color: var(--text-muted); 
            text-transform: uppercase; 
            letter-spacing: 2px; 
            font-size: 0.8rem; 
            font-weight: bold;
        }

        /* --- BLOCK 0: INTRO SQUIGGLE HERO --- */
        .intro-hero {
            background-color: var(--bg-dark);
            min-height: 85vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding: 60px 0 20px 0;
        }

        .intro-grid {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            align-items: center;
            gap: 40px;
            position: relative;
            z-index: 2;
        }

        .tag-badge {
            background-color: #222;
            color: #ccc;
            font-size: 0.75rem;
            padding: 6px 16px;
            border-radius: 20px;
            display: inline-block;
            margin-bottom: 25px;
            border: 1px solid #333;
        }

        .intro-headline {
            font-size: clamp(2.5rem, 6vw, 4.2rem);
            font-weight: bold;
            line-height: 1.15;
            margin: 0 0 25px 0;
            letter-spacing: -1px;
        }

        .intro-summary {
            color: #aaa;
            font-size: 1.15rem;
            line-height: 1.6;
            margin: 0 0 35px 0;
            max-width: 540px;
        }

        .action-green-btn {
            background-color: var(--brand-green);
            color: #000;
            border: none;
            padding: 16px 36px;
            font-size: 0.95rem;
            font-weight: bold;
            cursor: pointer;
            border-radius: 4px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            transition: opacity 0.3s ease;
        }

        .action-green-btn:hover { opacity: 0.9; }

        .graphic-wrapper {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        .abstract-glass-structure {
            width: 100%;
            max-width: 500px;
            height: 450px;
            position: relative;
        }

        .glass-curve {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 90%;
            height: 90%;
            border-bottom: 35px solid rgba(159, 216, 67, 0.85);
            border-right: 25px solid rgba(0, 114, 188, 0.4);
            border-bottom-right-radius: 240px;
            filter: drop-shadow(0 0 40px rgba(159, 216, 67, 0.2));
        }

        .glass-curve-layer2 {
            position: absolute;
            bottom: -10px;
            right: -15px;
            width: 85%;
            height: 95%;
            border-bottom: 12px solid rgba(0, 180, 216, 0.6);
            border-right: 15px solid rgba(0, 180, 216, 0.3);
            border-bottom-right-radius: 260px;
            filter: blur(2px);
        }

        /* --- BLOCK 0.5: STATS/METRICS BLOCK --- */
        .stats-section {
            background-color: var(--bg-dark);
            padding: 60px 0 80px 0;
            border-bottom: 1px solid #1a1a1a;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
        }

        .stat-item {
            display: flex;
            flex-direction: column;
        }

        .stat-number {
            font-size: clamp(2.5rem, 4.5vw, 4rem);
            font-weight: 300;
            color: #fff;
            margin: 0 0 10px 0;
            line-height: 1;
        }

        .stat-desc {
            font-size: 0.95rem;
            color: #8a8a8a;
            line-height: 1.4;
            margin: 0;
            max-width: 160px;
        }

        /* --- BLOCK 1: NETSUITE SERVICES BLOCK --- */
        .services-section {
            background-color: #fff;
            color: #333;
            padding: 90px 0;
        }

        .services-badge {
            background-color: #f1f6eb;
            color: #62843a;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 6px 16px;
            border-radius: 20px;
            display: inline-block;
            margin-bottom: 20px;
        }

        .services-headline {
            font-size: clamp(2rem, 4vw, 3.2rem);
            font-weight: 700;
            color: #1e2e38;
            margin: 0 0 60px 0;
            letter-spacing: -0.5px;
            max-width: 600px;
            line-height: 1.15;
        }

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

        .service-column {
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid #eef1f4;
            padding-bottom: 30px;
        }

        .service-icon-box {
            width: 64px;
            height: 64px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .service-icon-box svg {
            width: 100%;
            height: 100%;
        }

        .service-title {
            font-size: 1.6rem;
            font-weight: 600;
            color: #1e2e38;
            margin: 0 0 20px 0;
            line-height: 1.25;
        }

        .service-text {
            font-size: 1rem;
            color: #55636c;
            line-height: 1.6;
            margin: 0 0 30px 0;
            flex-grow: 1;
        }

        .service-link {
            font-size: 0.95rem;
            font-weight: 700;
            color: #1e2e38;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: gap 0.2s ease;
        }

        .service-column:hover .service-link { gap: 14px; }

        /* --- SECTION 2: HERO INDUSTRY GRID --- */
        .hero-section {
            display: grid;
            grid-template-columns: 400px 1fr;
            gap: 15px;
            padding-top: 60px;
        }

        .industry-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .industry-item {
            height: 120px;
            position: relative;
            background-color: #111;
            display: flex;
            align-items: flex-end;
            padding: 15px;
            text-decoration: none;
            color: white;
            font-size: 0.7rem;
            font-weight: bold;
            text-transform: uppercase;
            border: 1px solid #333;
            overflow: hidden;
            transition: 0.3s;
        }

        .industry-item img {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            object-fit: cover;
            z-index: 1;
            opacity: 0.6;
            transition: transform 0.5s ease, opacity 0.3s ease;
        }

        .industry-item span {
            position: relative;
            z-index: 2;
            text-shadow: 0 2px 4px rgba(0,0,0,0.5);
        }

        .industry-item:hover img {
            transform: scale(1.1);
            opacity: 0.8;
        }

        .industry-item.active { background: var(--accent-gradient); border: none; }
        .industry-item.active img { opacity: 0.3; mix-blend-mode: luminosity; }

        .hero-main {
            position: relative;
            background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.8)), url('img/100.png') center/cover;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px;
            min-height: 520px;
            border: 1px solid #333;
        }

        .hero-main h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0; border-bottom: 3px solid white; width: fit-content; padding-bottom: 15px;}

        /* --- SECTION 3: INSIGHTS SLIDER (EXACT WIREFRAME DESIGN MATCH) --- */
        .slider-wrapper {
            overflow: hidden;
            padding-bottom: 60px;
        }

        .slider-container {
            display: flex;
            gap: 20px;
            overflow-x: auto;
            padding: 20px calc((100% - var(--container-max)) / 2 + 20px);
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
        }
        .slider-container::-webkit-scrollbar { display: none; }

      

        .insight-card.light { background: #f2f2f2; color: #000; }
        .insight-card.dark { background: #111; color: #fff; border: 1px solid #333; }
        .insight-card.image-bg { background-size: cover; background-position: center; }

        .card-label { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; margin-bottom: 20px; position: relative; z-index: 2; letter-spacing: 0.5px;}
        .card-title { font-size: 1.55rem; font-weight: 600; line-height: 1.25; margin: 0; position: relative; z-index: 2; letter-spacing: -0.3px;}

        .description {
            max-height: 0; opacity: 0; overflow: hidden;
            transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.9rem; line-height: 1.5;
            position: relative; z-index: 2;
        }

        .insight-card:hover .description { max-height: 150px; opacity: 1; margin-top: 20px; }
        .card-graphic { margin-top: auto; position: relative; z-index: 2; width: 100%; display: flex; justify-content: flex-start;}
        
        /* Fine Line-Art Vector Optimization for Cards 1 & 3 */
        .card-graphic svg.wireframe {
            width: 100%;
            height: auto;
            max-height: 160px;
        }

        /* Gradient spiral replacement asset for card 4 */
        .spiral-mesh {
            width: 140px;
            height: 140px;
            background: radial-gradient(circle at center, #8a2be2 10%, transparent 70%);
            border-radius: 50%;
            filter: blur(15px);
            opacity: 0.8;
        }

        /* --- SECTION 4: JOIN US BLOCK --- */
        .join-us-section {
            background-color: #f7f7f7;
            color: #333;
            padding: 80px 0 100px 0;
            margin-top: 40px;
        }

        .join-header-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 45px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .join-title-block { max-width: 750px; }
        .join-main-title { font-size: 3rem; font-weight: 700; color: #1a1a1a; margin: 0 0 12px 0; letter-spacing: -0.5px; }
        .join-subtitle { font-size: 1.1rem; color: #555; line-height: 1.6; margin: 0; }

        .know-more-btn {
            background: transparent; color: #222; border: 1px solid #222; padding: 14px 32px;
            font-size: 0.9rem; font-weight: 600; cursor: pointer; border-radius: 4px; transition: all 0.3s ease;
        }
        .know-more-btn:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

        .career-grid { display: grid; grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr; gap: 20px; }

        .career-card { position: relative; height: 490px; overflow: hidden; background: #000; }
        .career-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1); }
        .career-card::after {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 40%, transparent 100%); z-index: 1;
        }

        .career-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; z-index: 2; }
        .career-title { color: white; font-size: 1.3rem; font-weight: 600; display: flex; align-items: center; gap: 8px; margin: 0; }
        .career-line { width: 45px; height: 3px; background: var(--accent-gradient); margin-top: 14px; transition: width 0.4s ease; }

        .career-card:hover img { transform: scale(1.05); }
        .career-card:hover .career-line { width: 100%; }

        /* --- RESPONSIVE BREAKPOINTS --- */
        @media (max-width: 1100px) {
            .hero-section { grid-template-columns: 1fr; }
            .hero-main { min-height: 400px; }
            .career-grid { grid-template-columns: 1fr 1fr; }
            .services-grid { grid-template-columns: 1fr; gap: 30px; }
            .service-column { border-bottom: 1px solid #eef1f4; padding-bottom: 20px; }
            .intro-grid { grid-template-columns: 1fr; gap: 20px; }
            .graphic-wrapper { display: none; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
        }

        @media (max-width: 768px) {
            .insight-card { flex: 0 0 85vw; }
            .career-grid { grid-template-columns: 1fr; }
            .slider-container { padding: 20px; }
            .join-main-title { font-size: 2.2rem; }
            .stats-grid {  gap: 30px; }
        }
		
		
		
		
		.logo-box a{
			
			font-size: 20px;
    font-weight: 600;
    color: #000;
    padding-left: 10px;
		}