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

        * { 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 */
}

/* 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-color: #fee600;
            display: flex;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
           border-bottom: 1px solid #b2b2b2;
			border-top: 1px solid #ff462d;
        }

        .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: 40px;
    margin-top: 13px;
}

        .nav-links { display: flex; list-style: none; gap: 25px; }
        .nav-links a { text-decoration: none; color: var(--text-main); 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: var(--primary-blue); 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('100.png') no-repeat center center;
            background-size: cover;
            min-height: 100%; /* Ensures it fills the container height */
        }
		  .hero-image-side2 {
           
            background: url('download.webp') no-repeat center center;
           
        }

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

        .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: #000; color: #fff; }
        .btn-trans { background: transparent; color: #fff; border: 1px solid #fff; }

        /* --- SERVICES SECTION --- */
        .services-section { padding: 100px 0; max-width: 1200px; width: 90%; 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: 90px; right: -100%; width: 80%; height: calc(100vh - 80px);
               background-color: #fee600; 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 5%;
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: 500px;
    border-radius: 12px;
    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: #e63946;
    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) {
	

    .value-grid { grid-template-columns: 1fr; }
    .value-card .img-container { height: 400px; }
}
/* --- CLIENT IMPACT SLIDER --- */
.impact-section {
    background-color: #000;
    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;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    transition: var(--transition);
}

.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: #333; 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;
}

.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; 
}
.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: 100px 5%;
    background-color: #f5f5f5;

    margin: 0 auto;
}

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

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

.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 {
    color: #006b6b; /* Accent color from your other blocks */
}

/* 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%;
    max-width: 550px;
    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: #F2F1EE;
}

.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;
}

.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: #ffea00;
    -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: #1a1a1a;
    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: #4b5563;
    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-color: var(--primary-blue);
}
.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: #cd0202;
    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;
    border: 1px solid #cd0202;
}

.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: #000000;
    margin-bottom: 35px;
}

.about-content-container p {
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #333333;
    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%;
    background-color: #ffffff;
    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 */
    overflow: hidden;
    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: #F2F1EE;
}

/* --- 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: rgb(198 198 198) !important;
 
}
.btn-learn {
   
    border: 1px solid #000000;

}
@media (max-width: 991px) {
    .value-img-wrapper {
        height: 118px;
    }
}
.value-header {
    color: #000000;
    
}
.value-delivery-section h2 {
    color: #000000;
	
}

/* --- HERO DARK SECTION --- */
.hero-dark-section {
    position: relative;
    width: 100%;
    min-height: 80vh;
    background-color: var(--primary-blue);
    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;
    background: radial-gradient(circle, rgba(0, 56, 150, 0.4) 0%, rgba(0, 0, 0, 0) 70%);
    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: #000;
    margin-bottom: 30px;
    letter-spacing: -1px;
}

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

.hero-content p {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #000;
    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: #ffea00;
    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: #000;
    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 {
    border-left: 1px solid #7F00FF; /* Brand Purple accent */
    padding-left: 30px;
}

.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 {
    border-left: 1px solid #ff462d;
    padding-left: 30px;
}

.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;
  
}
.uacc-top-ticker {
   background: #000000;
    background-color: #fee600;
    color: #000000;
    padding: 15px;
    height: 52px;
    display: flex;
    align-items: center;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1)
}

.ticker-wrapper {
    width: 100%;
    overflow: hidden;
}

.ticker-content {
    display: flex;
    white-space: nowrap;
    animation: ticker-scroll 30s linear infinite; /* Adjust time for speed */
}

.ticker-content span {
    padding: 0 50px; /* Space between messages */
    display: flex;
    align-items: center;
    gap: 10px;
}

.ticker-content i {
    color: #FF823B; /* Your brand orange for icons */
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Pause on hover so people can read */
.uacc-top-ticker:hover .ticker-content {
    animation-play-state: paused;
    cursor: pointer;
}


:root {
    --brand-yellow: #FFEA00;
    --dark-charcoal: #2D2E36;
}

body {
    background-color: var(--brand-yellow);
}

.hero {
    height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 20px;
    text-align: center;
}

/* Typography */
.logo-text {
    font-size: clamp(4rem, 15vw, 10rem);
    font-weight: 900;
    color: var(--dark-charcoal);
    letter-spacing: -2px;
    margin-bottom: 20px;
    line-height: 1;
}

.outline {
    color: transparent;
    -webkit-text-stroke: 2px var(--dark-charcoal);
}

.description {
    max-width: 700px;
    margin: 0 auto 40px;
    font-size: 1.1rem;
    color: var(--dark-charcoal);
    line-height: 1.6;
    font-weight: 500;
}

/* Buttons */
.button-group {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.btn {
    padding: 15px 45px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.btn-dark {
    background-color: var(--dark-charcoal);
    color: var(--brand-yellow);
    border: 2px solid var(--dark-charcoal);
}

.btn-outline {
    background-color: transparent;
    color: var(--dark-charcoal);
    border: 1px solid var(--dark-charcoal);
}

.btn:hover {
    transform: translateY(-2px);
}

/* Decorative Chevrons */
.chevron {
    position: absolute;
    width: 80px;
    height: 80px;
    border-bottom: 20px solid var(--dark-charcoal);
    border-right: 20px solid var(--dark-charcoal);
    opacity: 0.9;
}

.left {
    left: 10%;
    transform: rotate(135deg);
}

.right {
    right: 10%;
    transform: rotate(-45deg);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .chevron {
        display: none; /* Hide decorative arrows on small screens */
    }
    .button-group {
        flex-direction: column;
    }
}

.hero-split {
    
    border-top: 1px solid #b2b2b2;
}
.value-delivery-section {
     border-top: 1px solid #b2b2b2;
}
.hero-dark-section{border-top: 1px solid #b2b2b2;}
footer {
   border-top: 1px solid #b2b2b2;
}

.btn-expertise {
  
    border: 1px solid #000000;
    color: #000 !Important;
  
}