/* ###### GLOBAL ###### */
:root {
    --black: #050505;
    --black-2: #0a0a0a;
    --black-3: #101010;
    --green: #00ff88;
    --green-dark: #00c96b;
    --white: #ffffff;
    --text: #f5f5f5;
    --muted: #9b9b9b;
    --border: rgba(0, 255, 136, 0.15);
}

html {scroll-behavior: smooth;}
body {
    width: 100%;
    max-width: 100%;
    font-family: 'Inter', sans-serif;
    background: var(--black);
    color: var(--text);
    overflow-x: hidden;
}

section {position: relative;}
a {text-decoration: none;}
.text-green {color: var(--green);}
.bg-black {background: var(--black);}
.bg-black-2 {background: var(--black-2);}
.section-padding {padding: 80px 0;}


/* ###### NAVBAR ###### */
.navbar {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    background: rgba(5, 5, 5, 0.88);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 18px 0;
    transition: background .3s ease, padding .3s ease;
}
.navbar-brand img {max-width: 200px;}
.navbar-brand span {color: var(--green);}
.navbar-nav .nav-link {
    color: #aaa;
    font-size: 14px;
    font-weight: 500;
    margin-left: 25px;
    transition: .3s;
}
.navbar-nav .nav-link:hover {color: var(--green);}


/* ###### ANIMATED BURGER BUTTON ###### */
.navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid
    rgba(0,255,136,.35);
    border-radius: 8px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: border-color .3s ease, background .3s ease;
}
.navbar-toggler:hover {border-color: var(--green);background:rgba(0,255,136,.05);}
.navbar-toggler:focus {box-shadow:0 0 0 .2remrgba(0,255,136,.08);}
/* Remove Bootstrap's default hamburger */
.navbar-toggler-icon {display: none;}
/* Hamburger container */
.hamburger {width: 22px;height: 18px;position: relative;display: block;}
.hamburger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--green);border-radius: 10px;
    transition: top .3s ease, transform .3s ease, opacity .2s ease;
}
.hamburger span:nth-child(1) {top: 0;}
.hamburger span:nth-child(2) {top: 8px;}
.hamburger span:nth-child(3) {top: 16px;}

/* BURGER → X */
.navbar-toggler.active .hamburger span:nth-child(1) {top: 8px;transform:rotate(45deg);}
.navbar-toggler.active .hamburger span:nth-child(2) {opacity: 0;transform:translateX(10px);}
.navbar-toggler.active .hamburger span:nth-child(3) {top: 8px;transform:rotate(-45deg);}

/* BUTTONS */
.btn-green {
    background: var(--green);
    color: #000;
    font-weight: 700;
    padding: 13px 27px;
    border-radius: 7px;
    border: 2px solid var(--green);
    transition: .3s;
}
.btn-green:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--black);;
    transform: translateY(-3px);
    box-shadow:0 10px 35px rgba(0, 255, 136, 0.22);
}
.btn-outline-green {
    border: 2px solid var(--green);
    color: var(--green);
    font-weight: 600;
    padding: 13px 27px;
    border-radius: 7px;
    transition: .3s;
}
.btn-outline-green:hover {
    border: 2px solid var(--white);
    background: var(--white);
    color: var(--black);;
    transform: translateY(-3px);
    box-shadow: 0 10px 35px rgba(0, 255, 136, 0.15);
}

/* ###### HERO / JUMBOTRON ###### */
.jumbotron {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: radial-gradient(circle at 75% 40%, rgba(0, 255, 136, 0.12), transparent 32%), var(--black);
}
/* Grid background */
.jumbotron::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.07;
    background-image: linear-gradient(rgba(0, 255, 136, 0.7) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 136, 0.7) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: linear-gradient(to bottom, black, transparent);
}
/* Hero glow */
.hero-glow {
    position: absolute;
    width: 450px;
    height: 450px;
    right: -120px;
    top: 20%;
    border-radius: 50%;
    background: var(--green);
    filter: blur(180px);
    opacity: 0.08;
    pointer-events: none;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}
/* Small hero badge */
.hero-badge {
    display: inline-block;
    margin-bottom: 22px;
    padding: 7px 15px;
    border: 1px solid var(--border);
    border-radius: 50px;
    background: var(--green-soft);
    color: var(--green);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
/* Hero heading */
.jumbotron h1 {
    font-size: clamp(3rem, 7vw, 6.5rem);
    line-height: 0.95;
    font-weight: 900;
    margin-bottom: 30px;
}
.jumbotron h1 span {color: var(--green); text-shadow: 0 0 40px rgba(0, 255, 136, 0.15);}
.hero-description {max-width: 650px;color: var(--gray);font-size: 1.15rem;margin-bottom: 35px;}
.hero-buttons {display: flex;align-items: center;gap: 15px;flex-wrap: wrap;}


/* ###### CODE CARD ###### */
.code-card {
    background: rgba(15,15,15,.9);
    border: 1px solid rgba(0,255,136,.15);
    border-radius: 15px;
    box-shadow: 0 0 80px rgba(0,255,136,.08), inset 0 0 30px rgba(0,255,136,.02);
    padding: 25px;
    transform: perspective(1000px) rotateY(-8deg);
    position: relative;
}
.code-header {display: flex;gap: 7px;margin-bottom:20px;}
.code-dot {width:10px;height:10px;border-radius:50%;background:#333;}
.code-line {color:#777;font-family:monospace;font-size:13px;line-height:2;}
.code-green {color: var(--green);}
.code-blue {color: #7dd3fc;}
.code-white {color: white;}


/* ###### SECTION TITLES ###### */
.section-label {color:var(--green);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:3px;margin-bottom:15px;}
.section-title {font-size:clamp(32px, 4vw, 50px);font-weight:800;letter-spacing:-2px;}
.section-description {color:var(--muted);max-width:650px;line-height:1.8;}


/* ###### SERVICES ###### */
.service-card {
    background:var(--black-3);
    border:1px solid rgba(255,255,255,.06);
    border-radius:12px;
    padding:35px;
    height:100%;
    transition:transform .4s ease,border-color .4s ease,box-shadow .4s ease;
}
.service-card:hover {transform:translateY(-8px);border-color:rgba(0,255,136,.3);box-shadow:0 20px 50px rgba(0,0,0,.5);}
.service-icon {
    width:55px;
    height:55px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(0,255,136,.08);
    border:1px solid rgba(0,255,136,.15);
    color:var(--green);
    font-size:25px;
    margin-bottom:25px;
}
.service-card h4 {font-size:20px;font-weight:700;margin-bottom:15px;}
.service-card p {color:var(--muted);line-height:1.7;margin-bottom:0;}

/* ###### INDUSTRIES ###### */
.industry-card {
    position: relative;
    min-height: 300px;
    padding: 35px;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(145deg,#111111,#080808);
    transition: var(--transition);
}
.industry-card:hover {border-color: rgba(0,230,118,0.4);transform: translateY(-5px);}
.industry-number {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 6rem;
    font-weight: 800;
    color: rgba(0,230,118,0.04);
}
.industry-icon {font-size: 2.3rem;color: var(--green);margin-bottom: 25px;}
.industry-card h4 {font-weight: 700;margin-bottom: 15px;}
.industry-card p {color: var(--gray);line-height: 1.7;}
.industry-list {padding: 0;margin: 20px 0 0;list-style: none;}
.industry-list li {color: #bbb;margin-bottom: 8px;font-size: 0.9rem;}
.industry-list i {color: var(--green);margin-right: 8px;}

/* ###### WHY US ###### */
.feature {display:flex;gap:18px;margin-bottom:30px;}
.feature-icon {
    min-width:40px;
    height:40px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:rgba(0,255,136,.1);
    color:var(--green);
}
.feature h5 {font-size:17px;font-weight:700;}
.feature p {color:var(--muted);font-size:14px;line-height:1.7;}


/* ###### STATS ###### */
.stats {border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);}
.stat {text-align:center;padding:35px 10px;}
.stat h3 {font-size:40px;font-weight:800;color:var(--green);}
.stat p {color:var(--muted);margin:0;}


/* ###### PROCESS ###### */
.process-item {position: relative;text-align: center;padding: 20px;}
.process-number {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 1px solid var(--green);
    color: var(--green);
    font-weight: 800;
    font-size: 1.2rem;
}
.process-item h5 {font-weight: 700;}
.process-item p {color: var(--gray);font-size: 0.9rem;line-height: 1.7;}

/* ###### TECHNOLOGY ###### */
.tech-item {border:1px solid rgba(255,255,255,.07);background:#0c0c0c;padding:18px;border-radius:8px;text-align:center;color:#aaa;font-weight:600;transition:.3s;}
.tech-item:hover {border-color:rgba(0,255,136,.4);color:var(--green);transform:translateY(-3px);}

/* ###### CTA ###### */
.cta {
    background:radial-gradient(circle at center,rgba(0,255,136,.12),transparent 55%),#090909;
    border-top:1px solid rgba(0,255,136,.1);
    border-bottom:1px solid rgba(0,255,136,.1);
}
.cta-box {padding:80px 30px;text-align:center;}
.cta-box h2 {font-size:clamp(35px, 5vw, 60px);font-weight:800;letter-spacing:-2px;}
.cta-box p {color:var(--muted);max-width:600px;margin:20px auto 30px;line-height:1.8;}

/* ###### WHATSAPP BUTTON ###### */
.whatsapp-btn {
    display: inline-flex;
    align-items: center;
    background-color: #25D366;
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.3s ease;
}
.whatsapp-btn:hover {background-color: #20ba5a;}
.whatsapp-btn img {width: 24px;height: 24px;margin-right: 10px;}

/* ###### CONTACT ###### */
.contact-box {background:#0b0b0b;border:1px solid rgba(255,255,255,.06);padding:35px;border-radius:12px;}
.form-control {background:#111;border:1px solid #222;color:white;padding:13px 15px;}
.form-control:focus {background:#111;color:white;border-color:var(--green);box-shadow:0 0 0 .2rem rgba(0,255,136,.08);}
.form-control::placeholder {color: #666;}
.form-label {color:#aaa;font-size:13px;font-weight:600;}


/* ###### FOOTER ###### */
footer {background:#030303;border-top:1px solid rgba(255,255,255,.05);}
.footer-logo {font-size:24px;font-weight:800;color:white;}
.footer-logo span {color: var(--green);}
footer p {color:#777;font-size:14px;line-height:1.8;}
.footer-links a {display:block;color:#777;margin-bottom:10px;font-size:14px;transition:.3s;}
.footer-links a:hover {color: var(--green);}
.copyright {border-top:1px solid rgba(255,255,255,.05);margin-bottom:10px;color:#555;font-size:13px;}


/* ###### SCROLL ANIMATIONS ###### */
.animate {opacity:0;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);}
.fade-up {transform:translateY(50px);}
.fade-down {transform: translateY(-50px);}
.fade-left {transform:translateX(-30px);}
.fade-right {transform:translateX(30px);}
.zoom-in {transform:scale(.8);}
.animate.show {opacity:1;transform:translate(0) scale(1);}
.delay-1 {transition-delay: .1s;}
.delay-2 {transition-delay: .2s;}
.delay-3 {transition-delay: .3s;}
.delay-4 {transition-delay: .4s;}
.delay-5 {transition-delay: .5s;}


/* ###### GREEN GLOW ###### */
.green-glow {text-shadow:0 0 15px rgba(0,255,136,.4);}


/* ###### RESPONSIVE ###### */
@media (max-width: 991px) {
    .navbar-nav {padding-top:15px;}
    .navbar-nav .nav-link {margin-left:0;padding:10px 0;}
    .navbar-nav .btn {display:inline-block;}
    .navbar > .container {width: 100%;max-width: 100%;padding-left: 15px;padding-right: 15px;}
    .container {width: 100%;max-width: 100%;padding-left: 15px;padding-right: 15px;}
    .code-card {margin-top:60px;transform:none;}
}
@media (max-width: 576px) {    
    .hero-title {letter-spacing:-2px;}
    .hero-description {font-size:16px;}
    .code-card {padding:18px;}
    .industry-card {padding: 25px;}
    .fade-left, .fade-right {transform: translateY(30px);} /* new add 8 */
    .g-recaptcha {transform: scale(0.77);-webkit-transform: scale(0.77);transform-origin: 0 0;-webkit-transform-origin: 0 0;}
}