/* Container that clips the scrolling content */
    .logo-container {
      overflow: hidden;
      white-space: nowrap;
      background: inherit;
      padding: 1.5rem 0;
      position: relative;
    }

    /* The scrolling wrapper */
    .logo-scroll {
      display: inline-block;
      animation: scroll-left 15s linear infinite;
    }

    /* Individual logo styling */
    .logo-scroll img {
      display: inline-block;
      height: 60px;
      width: auto;
      margin-right: 2rem;
      vertical-align: middle;
      transition: transform 0.3s ease, filter 0.3s ease;
      filter: saturate(0.5);
    }

    /* Hover effects */
    .logo-scroll img:hover {
      transform: scale(1.2);
      filter: saturate(1.2);
    }

    /* Perfect seamless scroll animation */
    @keyframes scroll-left {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }

    /* Pause on container hover */
    .logo-container:hover .logo-scroll {
      animation-play-state: paused;
    }
  
  .hero-bottom-content {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3; /* Above other hero elements */
    color: #ccc;
    font-size: 14px;
    text-align: center;
    pointer-events: auto;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.hero-bottom-content:hover {
    opacity: 1;
}

.scroll-indicator {
    font-size: 18px;
    margin-top: 8px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

	
	
	/* Clients Marquee Section */
.clients-section {
    padding: 120px 0;
    background: rgba(26, 26, 26, 0.3); /* Very translucent */
    backdrop-filter: blur(15px);
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    position: relative;
}

.clients-section .section-subtitle {
    font-size: 16px;
    color: #cccccc;
    margin-top: 20px;
    margin-bottom: 60px;
    line-height: 1.8;
    font-weight: 400;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* Marquee Container */
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 40px 0;
}
.marquee-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100px;
}

.marquee-content {
    display: flex;
    align-items: center;
    gap: 80px;
    position: absolute;
    white-space: nowrap;
    animation: scroll-left 40s linear infinite;
    height: 100%;
}

/* Pause animation on hover */
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

/* Client Logo Styling */
.client-logo {
    flex-shrink: 0;
    width: 160px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.client-logo:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%) brightness(0.8);
    transition: filter 0.3s ease;
}

.client-logo:hover img {
    filter: grayscale(0%) brightness(1);
}

/* Subtle glow effect on hover */
.client-logo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, 
        rgba(255, 255, 255, 0.05) 0%, 
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.client-logo:hover::before {
    opacity: 1;
}

/* Infinite scroll animation */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Fade edges effect */
.marquee-wrapper::before,
.marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    z-index: 2;
    pointer-events: none;
}

.marquee-wrapper::before {
    left: 0;
    background: linear-gradient(to right, #1a1a1a, transparent);
}

.marquee-wrapper::after {
    right: 0;
    background: linear-gradient(to left, #1a1a1a, transparent);
}

/* Responsive Design */
@media (max-width: 768px) {
    .clients-section {
        padding: 80px 0;
    }
    
    .marquee-content {
        gap: 60px;
        animation-duration: 30s;
    }
    
    .client-logo {
        width: 140px;
        height: 70px;
        padding: 12px;
    }
    
    .marquee-wrapper {
        padding: 30px 0;
    }
    
    .marquee-container {
        height: 90px;
    }
    
    .clients-section .section-subtitle br {
        display: none;
    }
}

@media (max-width: 480px) {
    .marquee-content {
        gap: 40px;
        animation-duration: 25s;
    }
    
    .client-logo {
        width: 120px;
        height: 60px;
        padding: 10px;
    }
    
    .marquee-container {
        height: 80px;
    }
    
    .marquee-wrapper {
        padding: 25px 0;
    }
    
    .marquee-wrapper::before,
    .marquee-wrapper::after {
        width: 50px;
    }
}

/* Alternative reverse direction marquee (optional) */
.marquee-reverse .marquee-content {
    animation: scroll-right 45s linear infinite;
}

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

	
	
	
/* Careers Section */
.careers-section {
    padding: 120px 20px;
    background: #1a1a1a;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.section-subtitle {
    font-size: 18px;
    color: #cccccc;
    margin-top: 20px;
    margin-bottom: 40px;
    line-height: 1.6;
    font-weight: 400;
}

/* Toggle Button */
.toggle-btn {
    background: linear-gradient(135deg, #ffffff, #cccccc);
    color: #1a1a1a;
    border: none;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin: 20px auto 60px;
    display: block;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

.toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}

.toggle-btn.active {
    background: linear-gradient(135deg, #cccccc, #999999);
}

.toggle-btn.active .btn-text::after {
    content: ' ← Back to Jobs';
}

/* Glowing effect */
.btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.6s ease;
}

.toggle-btn:hover .btn-glow {
    left: 100%;
}

/* Cards Container */
.cards-container {
    position: relative;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: top center;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Benefits Container - Hidden by default */
.benefits-container {
    position: relative; /* Changed from absolute to relative */
    opacity: 0;
    transform: translateY(30px);
    pointer-events: none;
    height: 0; /* Collapse height when hidden */
    overflow: hidden;
    transition: opacity 0.6s ease, transform 0.6s ease, height 0.6s ease;
}

.benefits-container .cards-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Animation States */
.cards-container.sliding-down {
    transform: translateY(50px);
    opacity: 0;
    pointer-events: none;
    height: 0;
    overflow: hidden;
}

.benefits-container.showing {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    height: auto; /* Restore height when shown */
    transition-delay: 0.2s;
}


/* Job Cards */
.job-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 35px 30px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    perspective: 1000px;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    min-height: 320px;
}

.job-header h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
    position: relative;
    z-index: 2;
}

.job-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.job-meta span {
    font-size: 0.85rem;
    color: #888888;
    font-weight: 500;
}

.job-content {
    flex-grow: 1;
    position: relative;
    z-index: 2;
}

.job-content p {
    color: #cccccc;
    line-height: 1.6;
    font-size: 1rem;
    margin-bottom: 20px;
}

.job-requirements h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}

.job-requirements ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.job-requirements li {
    color: #cccccc;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 8px;
    padding-left: 16px;
    position: relative;
}

.job-requirements li::before {
    content: '•';
    color: #ffffff;
    position: absolute;
    left: 0;
    font-weight: bold;
}

.apply-btn {
    background: linear-gradient(135deg, #ffffff, #cccccc);
    color: #1a1a1a;
    border: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px;
    align-self: flex-end;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.apply-btn:hover {
    background: linear-gradient(135deg, #cccccc, #999999);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
}

/* Benefit Cards */
.benefit-card {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 15px;
    padding: 40px 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.benefit-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px rgba(255, 255, 255, 0.1);
}

.benefit-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #ffffff;
    transition: all 0.3s ease;
}

.benefit-card:hover .benefit-icon {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.benefit-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.benefit-card p {
    font-size: 15px;
    color: #cccccc;
    line-height: 1.7;
    font-weight: 400;
}

/* Card Hover Effects */
.job-card:hover, .job-card:focus {
    transform: rotateX(8deg) rotateY(8deg) scale(1.03);
    box-shadow: 0 20px 50px rgba(255, 255, 255, 0.15);
    z-index: 10;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Shimmer Effects */
.job-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(120deg, 
        transparent 0%, 
        rgba(255,255,255,0.1) 40%, 
        rgba(255,255,255,0.4) 50%, 
        rgba(255,255,255,0.1) 60%, 
        transparent 100%
    );
    transform: skewX(-25deg);
    transition: opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.job-card:hover::before, .job-card:focus::before {
    opacity: 1;
    animation: shimmer 1.5s ease-out forwards;
}

@keyframes shimmer {
    0% {
        left: -75%;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        left: 125%;
        opacity: 0;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .careers-section {
        padding: 80px 15px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .job-card:hover, .job-card:focus {
        transform: rotateX(4deg) rotateY(4deg) scale(1.02);
    }
    
    .job-meta {
        flex-direction: column;
        gap: 8px;
    }
    
    .benefits-container .cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .job-card, .benefit-card {
        padding: 25px 20px;
    }
    
    .job-card {
        min-height: 280px;
    }
    
    .job-header h3 {
        font-size: 1.4rem;
    }
    
    .section-subtitle br {
        display: none;
    }
}

	
    /* ------------- BASE ------------- */
    *{margin:0;padding:0;box-sizing:border-box}
    body{
        font-family:'Inter',sans-serif;
        background:#000000;color:#fff;
        line-height:1.6;font-weight:400;
        overflow-x:hidden}
    body.menu-open{overflow:hidden}
    .container{margin:0 auto;padding:0 40px}
/* ------------- LOGO ------------- */
.logo {
    display: flex;
    align-items: center;
    gap: 12px; /* Space between image and text */
}

.logo-image {
    width: 4em;
    height: 4em;
    object-fit: contain; /* Maintains aspect ratio */
    flex-shrink: 0; /* Prevents image from shrinking */
}

.logo-icon {
    display: none; /* Hidden since you're removing the diamond */
}

.diamond-outer {
    display: none; /* Hidden since you're removing the diamond */
}

.diamond-inner {
    display: none; /* Hidden since you're removing the diamond */
}

.logo-text {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: 1; /* Removes extra vertical spacing */
}

/* ------------- NAV ------------- */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(26,26,26,.95);
    backdrop-filter: blur(20px);
    padding: 25px 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
    z-index: 1000;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    max-width: 1200px;
    margin: 0 auto;
    /* Removed height: 1em constraint */
}

.nav-menu {
    display: flex;
    gap: 50px;
    list-style: none;
    align-items: center; /* Ensures menu items are vertically centered */
}

.nav-menu a {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color .3s;
}

.nav-menu a:hover {
    color: #fff;
}

    /* --- Hamburger Icon --- */
    .hamburger-menu{display:flex;flex-direction:column;justify-content:space-between;width:30px;height:20px;cursor:pointer;z-index:1001}
    .hamburger-line{width:100%;height:2px;background:#fff;border-radius:2px;transition:all .3s cubic-bezier(.23,1,.32,1)}
    .hamburger-menu.active .hamburger-line:nth-child(1){transform:translateY(9px) rotate(45deg)}
    .hamburger-menu.active .hamburger-line:nth-child(2){opacity:0;transform:scaleX(0)}
    .hamburger-menu.active .hamburger-line:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

    /* ------------- MOBILE MENU ------------- */
    .menu-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;
                   background:rgba(0,0,0,.8);backdrop-filter:blur(10px);
                   opacity:0;visibility:hidden;
                   transition:all .4s cubic-bezier(.23,1,.32,1);z-index:998}
    .menu-backdrop.active{opacity:1;visibility:visible}

    .mobile-menu{position:fixed;top:0;right:-100%;max-width:400px;width:100%;height:100%;
                 background:rgba(26,26,26,.95);backdrop-filter:blur(20px);
                 border-left:1px solid rgba(255,255,255,.1);
                 transition:right .4s cubic-bezier(.23,1,.32,1);z-index:999;overflow-y:auto}
    .mobile-menu.active{right:0}

    .mobile-menu-content{padding:100px 40px 40px;display:flex;flex-direction:column;height:100%}
    .mobile-menu-header{margin-bottom:60px}
    .mobile-nav{flex:1;display:flex;flex-direction:column}
    .mobile-nav-link{display:flex;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.1);
                     text-decoration:none;color:#fff;transition:all .3s;transform:translateX(30px);opacity:0}
    .mobile-menu.active .mobile-nav-link{transform:translateX(0);opacity:1}
    .mobile-menu.active .mobile-nav-link:nth-child(1){transition-delay:.1s}
    .mobile-menu.active .mobile-nav-link:nth-child(2){transition-delay:.15s}
    .mobile-menu.active .mobile-nav-link:nth-child(3){transition-delay:.2s}
    .mobile-menu.active .mobile-nav-link:nth-child(4){transition-delay:.25s}
    .mobile-menu.active .mobile-nav-link:nth-child(5){transition-delay:.3s}
    .mobile-nav-link:hover{background:rgba(255,255,255,.05);padding-left:10px}
    .nav-number{font-size:12px;color:#888;font-weight:600;letter-spacing:2px;min-width:30px}
    .nav-text{font-size:18px;font-weight:500;text-transform:uppercase}

    .mobile-menu-footer{margin-top:40px;padding-top:40px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:30px}
    .mobile-menu-footer .contact-label{font-size:11px;color:#888;text-transform:uppercase;letter-spacing:2px;font-weight:600}
    .mobile-menu-footer .contact-value{font-size:14px;font-weight:500}

    /* --- Blur on open --- */
    .main-content{transition:filter .4s cubic-bezier(.23,1,.32,1)}
    .main-content.blur{filter:blur(4px)}

    /* ------------- HERO ------------- */
    .hero{
        min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;
        padding:120px 40px 80px;position:relative;overflow:hidden}
    #threejs-container{position:absolute;inset:0;z-index:0;pointer-events:none}
    .hero-content{margin-top: 18em; position:relative;z-index:1}
    #hover-area{position:absolute;inset:0;z-index:2}
    .hero-logo{margin:0 auto 60px;width:60px;height:60px}
    .hero-logo .diamond-outer{width:36px;height:36px;border-width:3px}
    .hero-logo .diamond-inner{width:12px;height:12px}
    .hero-title{font-size:clamp(2.5rem,5vw,4.5rem);font-weight:800;line-height:1.1;margin-bottom:40px;letter-spacing:-1px}
    .accent{color:cyan;font-weight:800}
    .hero-subtitle{max-width:800px;margin:0 auto;font-size:16px;color:#ccc;line-height:1.8}

    /* ------------- SERVICES ------------- */
    .services{padding:120px 0;background:#1a1a1a}
    .section-header{text-align:center;margin-bottom:80px}
    .section-header .logo-icon{margin:0 auto 30px}
    .section-title{font-size:2.5rem;font-weight:700;letter-spacing:2px;text-transform:uppercase}
    .services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:60px;max-width:1000px;margin:0 auto}
    .service-number{font-size:14px;color:#888;font-weight:600;letter-spacing:2px;margin-bottom:20px;text-transform:uppercase}
    .service-card h3{font-size:1.5rem;font-weight:600;margin-bottom:20px}
    .service-card p{font-size:16px;color:#ccc;line-height:1.7}
	
	
	/* Services Section */
.services-section {
    padding: 7.5em 0;
    background: #1a1a1a;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.services-section .section-subtitle {
    font-size: 1em;
    color: #cccccc;
    margin-top: 1.25em;
    margin-bottom: 3.75em;
    line-height: 1.8;
    font-weight: 400;
    max-width: 43.75em;
    margin-left: auto;
    margin-right: auto;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(21.875em, 1fr));
    gap: 2.5em;
    max-width: 75em;
    margin: 0 auto;
}

/* Service Cards */
.service-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.25em;
    padding: 2.5em;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-0.625em);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 1.25em 2.5em rgba(255, 255, 255, 0.1);
}

/* Service Icon */
.service-icon {
    width: 4.375em;
    height: 4.375em;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    margin-bottom: 1.5em;
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

/* Service Title */
.service-title {
    font-size: 1.5em;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1em;
    letter-spacing: 0.03125em;
    line-height: 1.2;
}

/* Service Description */
.service-description {
    font-size: 1em;
    color: #cccccc;
    line-height: 1.7;
    margin-bottom: 1.5em;
    flex-grow: 1;
}

/* Feature Tags */
.service-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin-bottom: 2em;
}

.feature-tag {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    padding: 0.375em 0.75em;
    border-radius: 1.25em;
    font-size: 0.75em;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.0625em;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.service-card:hover .feature-tag {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Service Button */
.service-button {
    background: linear-gradient(135deg, #ffffff, #cccccc);
    color: #1a1a1a;
    border: none;
    padding: 0.875em 1.5em;
    border-radius: 3.125em;
    font-weight: 600;
    font-size: 0.875em;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.0625em;
    align-self: flex-start;
    position: relative;
    overflow: hidden;
}

.service-button:hover {
    background: linear-gradient(135deg, #cccccc, #999999);
    transform: translateY(-0.125em);
    box-shadow: 0 0.5em 1.25em rgba(255, 255, 255, 0.2);
}

.service-button:active {
    transform: translateY(0.0625em);
}

/* Button Glow Effect */
.service-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
    );
    transition: left 0.6s ease;
}

.service-button:hover::before {
    left: 100%;
}

/* Card Hover Shimmer Effect */
.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.05), 
        transparent
    );
    transition: left 0.6s ease;
    pointer-events: none;
}

.service-card:hover::before {
    left: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
    .services-section {
        padding: 5em 0;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
        gap: 2em;
        padding: 0 1em;
    }
    
    .service-card {
        padding: 2em 1.5em;
    }
    
    .service-icon {
        width: 3.75em;
        height: 3.75em;
    }
    
    .service-title {
        font-size: 1.25em;
    }
    
    .service-description {
        font-size: 0.9em;
    }
    
    .services-section .section-subtitle br {
        display: none;
    }
}

@media (max-width: 480px) {
    .service-card {
        padding: 1.5em 1em;
    }
    
    .service-icon {
        width: 3.125em;
        height: 3.125em;
        margin-bottom: 1em;
    }
    
    .service-title {
        font-size: 1.125em;
    }
    
    .service-features {
        gap: 0.375em;
    }
    
    .feature-tag {
        font-size: 0.6875em;
        padding: 0.25em 0.5em;
    }
}

	
	/* Intelligence Section - Side by Side Layout */
.intelligence-section {
    min-height: 100vh;
    background: #0f0f0f;
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.intelligence-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
    display: flex;
    align-items: center;
}

.intelligence-content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    min-height: 80vh;
}

/* Left Side - About Cards */
.about-cards-section {
    display: flex;
    flex-direction: column;
}

.about-intro {
    margin-bottom: 40px;
}

.about-intro-text {
    font-size: 16px;
    color: #cccccc;
    line-height: 1.8;
    font-weight: 400;
    margin-bottom: 30px;
}

.about-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

/* About Card Styling */
.about-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 25px 20px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.about-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}

.about-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #ffffff;
    transition: all 0.3s ease;
}

.about-card:hover .about-icon {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.about-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.about-card-description {
    font-size: 13px;
    color: #cccccc;
    line-height: 1.5;
    font-weight: 400;
}

/* Right Side - Cube (Keep Original) */
.cube-container {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

.cube {
    width: 300px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateCube 20s infinite linear;
}

.cube-face {
    position: absolute;
    width: 300px;
    height: 300px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.02);
}

.cube-face.front {
    transform: rotateY(0deg) translateZ(150px);
}

.cube-face.back {
    transform: rotateY(180deg) translateZ(150px);
}

.cube-face.right {
    transform: rotateY(90deg) translateZ(150px);
}

.cube-face.left {
    transform: rotateY(-90deg) translateZ(150px);
}

.cube-face.top {
    transform: rotateX(90deg) translateZ(150px);
}

.cube-face.bottom {
    transform: rotateX(-90deg) translateZ(150px);
}

@keyframes rotateCube {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .intelligence-content {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }
    
    .about-cards-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }
    
    .cube {
        width: 200px;
        height: 200px;
    }
    
    .cube-face {
        width: 200px;
        height: 200px;
    }
    
    .cube-face.front,
    .cube-face.back {
        transform: rotateY(0deg) translateZ(100px);
    }
    
    .cube-face.back {
        transform: rotateY(180deg) translateZ(100px);
    }
    
    .cube-face.right {
        transform: rotateY(90deg) translateZ(100px);
    }
    
    .cube-face.left {
        transform: rotateY(-90deg) translateZ(100px);
    }
    
    .cube-face.top {
        transform: rotateX(90deg) translateZ(100px);
    }
    
    .cube-face.bottom {
        transform: rotateX(-90deg) translateZ(100px);
    }
}

@media (max-width: 768px) {
    .intelligence-container {
        padding: 0 20px;
    }
    
    .about-cards-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .about-card {
        padding: 20px 15px;
    }
    
    .about-intro-text br {
        display: none;
    }
}

	
	
	
	
	
	
	

    /* ------------- ABOUT (Cube) ------------- */
    .intelligence-section{min-height:100vh;background:#0f0f0f;padding:80px 0;overflow:hidden}
    .intelligence-container{max-width:1400px;margin:0 auto;padding:0 40px;height:100%;display:flex;align-items:center}
    .intelligence-content{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;gap:80px;align-items:center;min-height:80vh;width:100%}
    .intelligence-title{font-size:clamp(2.5rem,4vw,3.5rem);font-weight:400;line-height:1.2;margin-bottom:0.5em;     margin-top: 2em;}
    .intelligence-description{font-size:16px;color:#ccc;line-height:1.8}
    .intelligence-description strong{font-weight:600;color:#fff}

    .cube-container{display:flex;justify-content:center;align-items:center;perspective:1000px}
    .cube{width:300px;height:300px;transform-style:preserve-3d;animation:rotateCube 20s linear infinite}
    .cube-face{position:absolute;width:300px;height:300px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.02)}
    .cube-face.front  {transform:rotateY(  0deg) translateZ(150px)}
    .cube-face.back   {transform:rotateY(180deg) translateZ(150px)}
    .cube-face.right  {transform:rotateY( 90deg) translateZ(150px)}
    .cube-face.left   {transform:rotateY(-90deg) translateZ(150px)}
    .cube-face.top    {transform:rotateX( 90deg) translateZ(150px)}
    .cube-face.bottom {transform:rotateX(-90deg) translateZ(150px)}
    @keyframes rotateCube{0%{transform:rotateX(0) rotateY(0)}100%{transform:rotateX(360deg) rotateY(360deg)}}

    .intelligence-footer{margin-top:40px}
    .footer-title{font-size:clamp(2rem,3.5vw,2.8rem);font-weight:400;margin-bottom:20px}
    .footer-subtitle{font-size:1.8rem;color:#888;font-style:italic}

    /* ------------- PORTFOLIO ------------- */
    .portfolio{padding:120px 0;background:#1a1a1a;border-top:1px solid rgba(255,255,255,.1)}
    .portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:60px;max-width:1000px;margin:0 auto}
    .portfolio-item{border:1px solid rgba(255,255,255,.1);padding:40px;transition:.3s}
    .portfolio-item:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.02)}
    .portfolio-content h3{font-size:1.3rem;font-weight:600;margin-bottom:15px}
    .portfolio-content p{font-size:15px;color:#ccc;line-height:1.7;margin-bottom:25px}
    .portfolio-meta{display:flex;justify-content:space-between;font-size:12px;color:#888;text-transform:uppercase}

    /* ------------- CONTACT ------------- */
    .contact{padding:120px 0;background:#1a1a1a;border-top:1px solid rgba(255,255,255,.1);text-align:center}
    .contact-content{max-width:600px;margin:0 auto}
    .contact-subtitle{font-size:16px;color:#ccc;margin:60px 0;line-height:1.8}
    .contact-info{display:flex;justify-content:center;gap:80px;margin-bottom:60px}
    .contact-item{display:flex;flex-direction:column;gap:15px}
    .contact-label{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:2px;font-weight:600}
    .contact-value{font-size:16px;font-weight:500}

    /* ------------- FOOTER ------------- */
    .footer{padding:60px 0;background:#1a1a1a;border-top:1px solid rgba(255,255,255,.1)}
    .footer-content{display:flex;justify-content:space-between;align-items:center}
    .footer-content p{font-size:14px;color:#888}

    /* ------------- RESPONSIVE ------------- */
    @media(min-width:1025px){
        .hamburger-menu{display:none}
    }
    @media(max-width:1024px){
        .nav-menu{display:none}
        .hamburger-menu{display:flex}
        .intelligence-content{grid-template-columns:1fr;grid-template-rows:auto auto auto;text-align:center}
        .cube{width:200px;height:200px}.cube-face{width:200px;height:200px}
        .cube-face.front{transform:rotateY(0) translateZ(100px)}
        .cube-face.back {transform:rotateY(180deg) translateZ(100px)}
        .cube-face.right{transform:rotateY(90deg) translateZ(100px)}
        .cube-face.left {transform:rotateY(-90deg) translateZ(100px)}
        .cube-face.top  {transform:rotateX(90deg) translateZ(100px)}
        .cube-face.bottom{transform:rotateX(-90deg) translateZ(100px)}
    }
    @media(max-width:768px){
        .container,.nav-container{padding:0 20px}
        .hero{padding:100px 20px 60px}
        .services-grid,.portfolio-grid{grid-template-columns:1fr;gap:40px}
        .contact-info{flex-direction:column;gap:40px}
        .footer-content{flex-direction:column;gap:30px;text-align:center}
        .section-title{font-size:2rem}
        .mobile-menu{max-width:100%}
        .mobile-menu-content{padding:100px 20px 40px}
    }
    @media(max-width:480px){
        .hero-title{font-size:2rem}
        .cube{width:150px;height:150px}.cube-face{width:150px;height:150px}
        .cube-face.front{transform:rotateY(0) translateZ(75px)}
        .cube-face.back {transform:rotateY(180deg) translateZ(75px)}
        .cube-face.right{transform:rotateY(90deg) translateZ(75px)}
        .cube-face.left {transform:rotateY(-90deg) translateZ(75px)}
        .cube-face.top  {transform:rotateX(90deg) translateZ(75px)}
        .cube-face.bottom{transform:rotateX(-90deg) translateZ(75px)}
    }
  
  
  
  
  
/* Contact Form Section */
.contact-form-section {
    padding: 7.5em 0;
    background: #1a1a1a;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.contact-form-section .section-subtitle {
    font-size: 1em;
    color: #cccccc;
    margin-top: 1.25em;
    margin-bottom: 3.75em;
    line-height: 1.8;
    font-weight: 400;
    max-width: 43.75em;
    margin-left: auto;
    margin-right: auto;
}

/* Form Container */
.form-container {
    max-width: 50em;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border-radius: 1.25em;
    padding: 3em 2.5em;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.form-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 0%, 
        rgba(255, 255, 255, 0.05) 0%, 
        transparent 50%
    );
    pointer-events: none;
}

/* Form Grid */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18.75em, 1fr));
    gap: 2em;
    margin-bottom: 2em;
}

/* Form Groups */
.form-group {
    position: relative;
    margin-bottom: 2em;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

/* Input Styling */
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1em 0 0.5em 0;
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1em;
    font-family: inherit;
    outline: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    z-index: 2;
}

.form-group textarea {
    resize: vertical;
    min-height: 6.25em;
    padding-top: 1.5em;
}

/* Fix dropdown option text visibility */
.form-group select option {
    background-color: #2a2a2a;
    color: #ffffff;
    padding: 0.5em;
    font-size: 1em;
    border: none;
}

/* Ensure dropdown text is visible */
.form-group select {
    color: #ffffff; /* Make sure the selected text is white */
    background-color: transparent;
}

/* Fix for different browsers */
.form-group select option:checked {
    background-color: #3a3a3a;
    color: #ffffff;
}

/* Webkit browsers (Chrome, Safari) */
.form-group select option:hover {
    background-color: #3a3a3a;
    color: #ffffff;
}

/* Floating Labels */
.form-group label {
    position: absolute;
    top: 1em;
    left: 0;
    color: #888;
    font-size: 1em;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: left center;
    z-index: 1;
}

/* Animated Line */
.form-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #fff, #ccc);
    transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Focus States */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.form-group input:focus + label,
.form-group select:focus + label,
.form-group textarea:focus + label,
.form-group input:valid + label,
.form-group select:valid + label,
.form-group textarea:valid + label {
    transform: translateY(-1.5em) scale(0.85);
    color: #fff;
    font-weight: 500;
}

.form-group input:focus ~ .form-line,
.form-group select:focus ~ .form-line,
.form-group textarea:focus ~ .form-line {
    width: 100%;
}

/* Submit Button */
.submit-btn {
    width: 100%;
    padding: 1em 2em;
    background: linear-gradient(135deg, #ffffff, #cccccc);
    color: #1a1a1a;
    border: none;
    border-radius: 3.125em;
    font-weight: 700;
    font-size: 1.1em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    margin-top: 1.5em;
    box-shadow: 0 0.25em 0.9375em rgba(255, 255, 255, 0.2);
}

.submit-btn:hover {
    transform: translateY(-0.125em);
    box-shadow: 0 0.5em 1.5625em rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #cccccc, #999999);
}

.submit-btn:active {
    transform: translateY(0.0625em);
}

/* Button States */
.btn-text {
    display: inline-block;
    transition: opacity 0.3s ease;
}

.btn-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.25em;
    height: 1.25em;
    border: 2px solid transparent;
    border-top: 2px solid #1a1a1a;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
    );
    transition: left 0.6s ease;
}

.submit-btn:hover .btn-glow {
    left: 100%;
}

/* Loading State */
.submit-btn.loading .btn-text {
    opacity: 0;
}

.submit-btn.loading .btn-loader {
    opacity: 1;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Form Status */
.form-status {
    margin-top: 1.5em;
    padding: 1em;
    border-radius: 0.5em;
    text-align: center;
    font-weight: 500;
    opacity: 0;
    transform: translateY(1.25em);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.form-status.show {
    opacity: 1;
    transform: translateY(0);
}

.form-status.success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.form-status.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

/* Error States */
.form-group.error input,
.form-group.error select,
.form-group.error textarea {
    border-bottom-color: #ef4444;
    animation: shake 0.5s ease-in-out;
}

.form-group.error label {
    color: #ef4444;
}

.form-group.error .form-line {
    background: #ef4444;
    width: 100%;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-0.3125em); }
    75% { transform: translateX(0.3125em); }
}

/* Success Animation */
@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.submit-btn.success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    animation: successPulse 0.6s ease-in-out;
}

/* Responsive Design */
@media (max-width: 768px) {
    .form-container {
        padding: 2em 1.5em;
        margin: 0 1em;
    }
    
    .form-grid {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }
    
    .contact-form-section .section-subtitle br {
        display: none;
    }
}

@media (max-width: 480px) {
    .form-container {
        padding: 1.5em 1em;
    }
    
    .submit-btn {
        font-size: 1em;
    }
}