:root{
  --navy:#0A1931;
  --navy-2:#102542;
  --red:#D90429;
  --red-dark:#B00020;
  --orange:#f10d18;
  --light:#F8F9FC;
  --gray:#6C757D;
  --black:#0E0E10;
  --header:#061845;
}
*{font-family:'Outfit', 'Inter', sans-serif;}
body{background:#fff;color:#222;overflow-x:hidden;}
/* Header - angled */
.top-header{background:var(--header);position:relative;overflow:hidden;z-index:99;}
.top-header::before{content:'';position:absolute;left:28%;top:0;width:50%;height:100%;background:#071f5b;transform:skewX(-18deg);z-index:0;}
.navbar-custom{position:relative;z-index:2;padding:12px 0;}
.navbar-custom .nav-link{color:#fff !important;font-weight:500;margin:0 12px;position:relative;transition:.3s;}
.navbar-custom .nav-link.active::after{content:'';position:absolute;bottom:-4px;left:0;width:100%;height:2px;background:var(--orange);}
.navbar-custom .nav-link:hover{color:var(--orange) !important;}
.btn-orange{background:var(--orange);color:#fff;border-radius:0 18px 0 18px;padding:10px 28px;font-weight:600;transition:.3s;border:none;}
.btn-orange:hover{background:#fff;color:var(--black);transform:translateY(-2px);}
.btn-dark-custom{background:#222;color:#fff;border-radius:18px 0 18px 0;padding:10px 28px;font-weight:600;border:none;}
.btn-dark-custom:hover{background:var(--red);color:#fff;}

/* Hero Slider */
.hero-slider{position:relative;height:85vh;min-height:560px;overflow:hidden;}
.hero-slider .carousel-item{height:85vh;min-height:560px;}
.hero-slider .carousel-item img{object-fit:cover;width:100%;height:100%;filter:brightness(.65);}
.hero-content{position:absolute;left:6%;bottom:12%;z-index:3;max-width:620px;}
.hero-content h1{font-size:clamp(28px, 4vw, 46px);font-weight:800;color:#fff;line-height:1.15;text-shadow:0 4px 18px rgba(0,0,0,.4);}
.hero-content p{color:#e9ecef;margin:14px 0 24px;font-size:18px;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;}
.hero-btns .btn-orange{border-radius:0 22px 0 22px;}
.hero-btns .btn-link{color:#fff;text-decoration:none;border-bottom:1.5px solid var(--orange);padding-bottom:3px;font-weight:600;}
.hero-btns .btn-link:hover{color:var(--orange);}

/* Clients marquee */
.clients-marquee{background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.08);padding:18px 0;position:relative;z-index:2;}
.marquee{display:flex;gap:80px;animation:scroll 28s linear infinite;align-items:center;}
.marquee span{font-weight:700;color:#222;opacity:.75;letter-spacing:.5px;white-space:nowrap;font-size:15px;}
.marquee img{height:36px;filter:grayscale(1);opacity:.7;}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Features */
.feature-icon{width:44px;height:44px;background:#FFF1E6;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--orange);font-size:20px;flex-shrink:0;}
.feature-item{display:flex;gap:14px;align-items:flex-start;}
.feature-item h6{font-weight:700;font-size:15px;margin-bottom:2px;}

/* Services */
.section-title{text-align:center;margin-bottom:48px;}
.section-title h2{font-weight:800;font-size:42px;}
.section-title .line{width:80px;height:3px;background:var(--orange);margin:8px auto;border-radius:10px;display:block;}
.service-card{background:#fff;border-radius:20px 20px 20px 4px;padding:32px 24px;box-shadow:0 10px 40px rgba(0,0,0,.07);transition:.35s;border:1px solid #f1f1f1;height:100%;position:relative;overflow:hidden;}
.service-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:4px;background:var(--orange);transform:scaleX(0);transition:.35s;transform-origin:left;}
.service-card:hover{transform:translateY(-8px);box-shadow:0 18px 50px rgba(0,0,0,.12);}
.service-card:hover::before{transform:scaleX(1);}
.service-card .icon{width:62px;height:62px;background:#FFF1E6;border-radius:16px;display:flex;align-items:center;justify-content:center;color:var(--orange);font-size:26px;margin:0 auto 16px;}
.service-card h5{font-weight:800;text-align:center;}
.service-card p{color:var(--gray);font-size:14.5px;text-align:center;line-height:1.7;}
.service-card .learn{margin:18px auto 0;display:block;width:fit-content;background:var(--black);color:#fff;padding:8px 22px;border-radius:0 16px 0 16px;font-size:13px;font-weight:600;text-decoration:none;transition:.3s;}
.service-card .learn:hover{background:var(--orange);}

/* CTA */
.cta-dark{background:linear-gradient(rgba(0,0,0,.72), rgba(0,0,0,.72)), url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop');background-size:cover;background-position:center;padding:84px 0;text-align:center;color:#fff;background-attachment:fixed;}
.cta-dark h2{font-weight:800;font-size:clamp(22px,3vw,34px);line-height:1.3;}

/* About tabs */
.about-img{border-radius:16px;overflow:hidden;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.18);}
.about-img img{width:100%;height:100%;object-fit:cover;}
.about-img .overlay{position:absolute;bottom:0;left:0;width:100%;padding:18px;background:linear-gradient(transparent, rgba(0,0,0,.85));color:#fff;}
.tabs-nav{display:flex;gap:0;border-bottom:1px solid #eee;margin-bottom:22px;}
.tabs-nav button{border:none;background:none;padding:12px 20px;font-weight:600;color:#888;position:relative;}
.tabs-nav button.active{color:var(--orange);}
.tabs-nav button.active::after{content:'';position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:var(--orange);}

/* Service grid */
.grid-box{background:#fff;border:1px solid #eee;border-radius:12px;padding:28px 20px;text-align:center;transition:.3s;height:100%;}
.grid-box:hover{border-color:var(--orange);box-shadow:0 10px 30px rgba(255,122,0,.12);transform:translateY(-4px);}
.grid-box.highlight{border-color:var(--orange);box-shadow:0 10px 30px rgba(255,122,0,.18);border-radius:22px 22px 4px 22px;}
.grid-box i{font-size:28px;color:var(--orange);margin-bottom:12px;}
.grid-box h6{font-weight:700;margin:0;}

/* Progress */
.progress-custom{height:18px;border-radius:4px;background:#f1f3f5;overflow:hidden;}
.progress-custom .bar{height:100%;background:var(--orange);border-radius:4px;display:flex;align-items:center;padding-left:10px;color:#fff;font-size:11px;font-weight:700;}

/* Callback */
.callback{background:var(--black);padding:72px 0;color:#fff;text-align:center;position:relative;overflow:hidden;}
.callback::before{content:'';position:absolute;right:-10%;top:-30%;width:60%;height:140%;background:radial-gradient(circle, rgba(255,122,0,.12) 0%, transparent 70%);}
.callback input, .callback select{border-radius:4px !important;padding:12px 16px !important;border:none !important;}
.callback .btn-orange{width:100%;border-radius:0 18px 0 18px;padding:14px;}

/* Testimonials */
.testimonial-card{background:#fff;border:1px solid #eee;border-radius:12px;padding:26px 22px;height:100%;position:relative;}
.testimonial-card .quote{font-size:28px;color:#ddd;}

/* Footer */
.footer{background:#0A0A0A;color:#bbb;padding:64px 0 24px;}
.footer h6{color:#fff;font-weight:700;margin-bottom:16px;position:relative;padding-bottom:10px;}
.footer h6::after{content:'';position:absolute;left:0;bottom:0;width:40px;height:2px;background:var(--orange);}
.footer a{color:#aaa;text-decoration:none;transition:.2s;}
.footer a:hover{color:var(--orange);}
.footer .contact-item{display:flex;gap:12px;margin-bottom:12px;}
.footer .contact-item i{color:var(--orange);margin-top:3px;}
.social a{width:36px;height:36px;background:#1a1a1a;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;margin-right:8px;}
.social a:hover{background:var(--orange);color:#fff;}

/* WhatsApp floating */
.whatsapp-float{position:fixed;right:22px;bottom:88px;z-index:9999;display:flex;align-items:center;gap:10px;}
.whatsapp-float .label{background:#fff;padding:6px 14px;border-radius:20px;box-shadow:0 4px 16px rgba(0,0,0,.15);font-size:13px;font-weight:600;}
.whatsapp-float .icon{width:52px;height:52px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;box-shadow:0 6px 20px rgba(37,211,102,.4);animation:pulse 2s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 14px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.go-top{position:fixed;right:22px;bottom:22px;width:46px;height:46px;background:var(--orange);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:9998;cursor:pointer;box-shadow:0 6px 18px rgba(255,122,0,.4);}

@media(max-width:768px){
  .hero-content{left:5%;right:5%;bottom:8%;}
  .top-header::before{display:none;}
  .marquee{gap:40px;}
  .cta-dark{background-attachment:scroll;}
}

/* CLIENTS MARQUEE SECTION */
.clients-section {
    width: 100%;
    background: #ffffff;
    padding: 18px 0;
    overflow: hidden;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.12);
}

.clients-marquee {
    width: 100%;
    overflow: hidden;
}

.clients-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: clientsScroll 35s linear infinite;
}

.client-logo {
    width: 240px;
    height: 90px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 30px;
}

.client-logo img {
    max-width: 100%;
    max-height: 75px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Infinite Animation */
@keyframes clientsScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Pause on Hover */
.clients-marquee:hover .clients-track {
    animation-play-state: paused;
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {

    .clients-section {
        padding: 12px 0;
    }

    .client-logo {
        width: 155px;
        height: 75px;
        padding: 8px 18px;
    }

    .client-logo img {
        max-height: 58px;
        max-width: 100%;
    }

    .clients-track {
        animation-duration: 25s;
    }
}

/* SMALL MOBILE */
@media (max-width: 480px) {

    .client-logo {
        width: 130px;
        height: 65px;
        padding: 6px 14px;
    }

    .client-logo img {
        max-height: 50px;
    }

}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .clients-track {
        animation: none;
    }
}