:root{
    --primary-green:#76bc21;
    --primary-blue:#008cc9;
    --dark:#0a0f1c;
    --gray:#6b7280;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    transition:all .25s ease;
}

html{scroll-behavior:smooth;}
body{
    font-family:Poppins;
    background:var(--dark);
    color:#fff;
}

/* ================= NAVBAR ================= */
.header{
    position:fixed;
    top:0;
    width:100%;
    background:rgba(10,15,28,0.75);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,0.06);
    z-index:1000;
}
.header.scrolled{
    background:rgba(10,15,28,0.95);
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
}
.nav-container{
    max-width:1200px;
    margin:auto;
    padding:6px 6%;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.header.scrolled .nav-container{ padding:4px 6%; }
.logo-box{
    padding:6px 18px;
    background:rgba(255,255,255,0.04);
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.08);
}
/* Make logo fully responsive */
.logo-img {
    max-height: 86px; /* max height for large screens */
    height: auto;      /* scale naturally */
    width: auto;       /* maintain aspect ratio */
    display: block;
    max-width: 100%;   /* prevent overflow on very small screens */
}

/* Optional: adjust logo box padding on smaller screens */
@media (max-width: 768px) {
    .logo-box {
        padding: 4px 12px;
    }
}
.nav-menu{
    display:flex;
    gap:25px;
}
.nav-menu a{
    color:#cbd5e1;
    text-decoration:none;
    font-size:13px;
    position:relative;
}
.nav-menu a::after{
    content:''; position:absolute; left:0; bottom:-6px;
    width:0; height:2px;
    background:linear-gradient(90deg,var(--primary-green),var(--primary-blue));
}
.nav-menu a:hover{ color:#fff; }
.nav-menu a:hover::after{ width:100%; }
.nav-menu a.active{ color:#fff; }
.nav-menu a.active::after{ width:100%; }
.nav-cta{
    background:linear-gradient(90deg,var(--primary-green),var(--primary-blue));
    padding:8px 16px;
    border-radius:6px;
    color:#fff;
    text-decoration:none;
    font-size:13px;
}

/* ================= HERO ================= */
#hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:160px 6%;
    background:
      linear-gradient(to right, rgba(1,12,32,.9),transparent),
      url('../image/body11.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position:relative;
    overflow:hidden;
}
.hero-title{
    font-size:52px;
    font-weight:600;
    line-height:1.2;
}
.hero-title span{
    background:linear-gradient(90deg,var(--primary-green),var(--primary-blue));
    -webkit-background-clip:text;
    color:transparent;
    display:inline-block;
    overflow:hidden;
    border-right:2px solid #76bc21;
    white-space:nowrap;
    animation: typing 3s steps(25,end) infinite alternate, blink 0.7s step-end infinite;
}
@keyframes typing{ 0% {width:0;} 100%{width:100%;} }
@keyframes blink{ 0%,100%{border-color:transparent;} 50%{border-color:#76bc21;} }
.hero-sub{ margin:20px 0; color:#cbd5e1; font-size:17px; }
.hero-trust{ margin-top:20px; font-size:13px; color:#9ca3af; font-weight:500; letter-spacing:0.5px; }
.btn{
    display:inline-block;
    padding:14px 32px;
    border-radius:8px;
    background:linear-gradient(90deg,var(--primary-green),var(--primary-blue));
    color:#fff;
    text-decoration:none;
    position:relative;
    overflow:hidden;
    z-index:1;
    font-weight:600;
    transition: all 0.3s ease;
}
.btn::before{
    content:''; position:absolute; top:0; left:-50%; width:200%; height:100%;
    background:linear-gradient(90deg,#76bc21,#008cc9,#76bc21,#008cc9);
    background-size:400% 100%;
    filter:blur(10px);
    opacity:0.6;
    z-index:-1;
    border-radius:inherit;
    transition: all 0.3s ease;
}
.btn:hover::before{ animation: buttonGlow 3s linear infinite; opacity:1; }
@keyframes buttonGlow{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

/* ================= SECTION ================= */
section{ padding:120px 6%; }
.section-title{ text-align:center; font-size:34px; margin-bottom:10px; }
.section-sub{ text-align:center; color:#6b7280; margin-bottom:60px; }

/* ================= SERVICES ================= */
#services{ background:#fff; color:#000; }
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; }
.service-card{
    padding:25px; border-radius:12px; border:1px solid #eee;
    position:relative; overflow:hidden; z-index:0; transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card p{ margin:10px 0;color:var(--gray) }
.service-card li{ list-style:none; margin:6px 0; }
.service-btn{ margin-top:10px; display:inline-block; padding:8px 16px; background:linear-gradient(90deg,var(--primary-green),var(--primary-blue)); color:#fff; border-radius:6px; text-decoration:none; }
.service-card::before{
    content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background: linear-gradient(45deg,#76bc21,#008cc9,#76bc21,#008cc9);
    background-size:400% 400%;
    filter: blur(20px);
    opacity:0.6;
    border-radius:inherit; z-index:-1;
    animation: gradientMove 8s linear infinite;
}
.service-card > *{ position:relative; z-index:1; }
@keyframes gradientMove{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
.service-card:hover::before{ opacity:1; filter:blur(25px); }
.service-card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.15); }

/* ================= WHY CHOOSE ================= */
#why-choose{ background:#fff; color:#000; }
#why-choose .service-card { cursor: default; transform: translateY(50px); opacity: 0; transition: all 0.6s ease; }
#why-choose .service-card:hover { transform: translateY(-8px) scale(1.03); box-shadow: 0 20px 40px rgba(0,0,0,0.15); }
#why-choose .service-card h3 { font-weight: 600; margin-bottom: 10px; background: linear-gradient(90deg,var(--primary-green),var(--primary-blue)); -webkit-background-clip: text; color: transparent; }
#why-choose .service-card p { color: var(--gray); }

/* ================= PRICING ================= */
#pricing{ background:#f4f6f9; color:#000; }
.pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; }
.price-card{ padding:30px; background:#fff; border-radius:14px; text-align:center; position:relative; overflow:hidden; z-index:0; transition:transform 0.3s ease, box-shadow 0.3s ease; }
.price-card h2{ font-size:32px; margin:10px 0; }
.price-card li{ list-style:none; margin:6px 0; }
.price-btn{ margin-top:10px; display:inline-block; padding:10px 20px; background:linear-gradient(90deg,var(--primary-green),var(--primary-blue)); color:#fff; border-radius:6px; text-decoration:none; }
.price-card::before{
    content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background: linear-gradient(45deg,#76bc21,#008cc9,#76bc21,#008cc9);
    background-size:400% 400%;
    filter: blur(20px);
    opacity:0.6;
    border-radius:inherit; z-index:-1;
    animation: gradientMove 8s linear infinite;
}
.price-card > *{ position:relative; z-index:1; }
.price-card:hover::before{ opacity:1; filter:blur(25px); }
.price-card:hover{ transform:translateY(-8px); box-shadow:0 20px 40px rgba(0,0,0,0.15); }
.popular{ border:2px solid var(--primary-blue); }

/* ================= CONTACT ================= */
#contact{ background:#fff; color:#000; position:relative; overflow:hidden; border-radius:12px; }
#contact::before{
    content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
    background: linear-gradient(135deg,#76bc21,#008cc9,#76bc21,#008cc9);
    background-size:400% 400%;
    filter:blur(25px);
    opacity:0.3; z-index:0;
    animation: gradientMoveContact 12s linear infinite;
}
#contact > *{ position:relative; z-index:1; }
.contact-wrapper{ max-width:1100px; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.contact-form input, .contact-form textarea{ width:100%; padding:12px; margin-bottom:12px; border:1px solid #ddd; border-radius:6px; }
.contact-form button{ width:100%; padding:12px; background:linear-gradient(90deg,var(--primary-green),var(--primary-blue)); border:none; color:#fff; }
.contact-btn{ display:inline-block; margin-top:15px; background:#25d366; color:#fff; padding:10px 18px; border-radius:6px; text-decoration:none; transition:all 0.3s ease;}
.contact-btn:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 12px 30px rgba(37,211,102,0.6);}

/* ================= FOOTER ================= */
footer{ background:#020617; padding:60px 6% 20px; }
.footer-container{ max-width:1200px; margin:auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:30px; }
.footer-container h4{ margin-bottom:10px; }
.footer-container a{ display:block; color:#cbd5e1; text-decoration:none; margin:5px 0; }
.footer-bottom{ text-align:center; margin-top:20px; font-size:13px; }

/* ================= WHATSAPP UPDATED ================= */
.whatsapp-float{
    position:fixed;
    bottom:20px;
    right:20px;
    background:linear-gradient(90deg,#25d366,#128c7e);
    padding:14px 22px;
    border-radius:40px;
    color:#fff;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:10px;
    box-shadow:0 10px 25px rgba(37,211,102,0.5);
    animation:floatPulse 2s infinite;
}

.notify-dot{
    width:10px;
    height:10px;
    background:#ff3b3b;
    border-radius:50%;
    position:absolute;
    top:6px;
    right:8px;
    animation:blink 1s infinite;
}

@keyframes blink{
    0%,100%{opacity:1;}
    50%{opacity:0;}
}

@keyframes floatPulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.08);}
    100%{transform:scale(1);}
}
/* ===== HAMBURGER MENU WITH ANIMATION ===== */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 20px;
    cursor: pointer;
    z-index: 1001; /* Above nav-menu */
}

.hamburger span {
    display: block;
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Transform hamburger into X when active */
.hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
    opacity: 0;
}

.hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Show hamburger only on tablets & mobiles */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }
    .nav-menu {
        flex-direction: column;
        position: fixed;
        top: 60px;
        right: -100%;
        width: 200px;
        height: calc(100% - 60px);
        padding: 20px;
        background: rgba(10,15,28,0.95);
        transition: right 0.3s ease;
        border-left: 1px solid rgba(255,255,255,0.1);
        z-index: 999;
    }
    .nav-menu.active {
        right: 0;
    }
}