:root{
    --wp-green:#22c55e;
    --wp-green-dark:#16a34a;
    --wp-dark:#0f172a;
    --wp-dark-2:#1e293b;
    --wp-light:#f8fafc;
    --wp-grey:#64748b;
}
body{
    font-family:'Inter',sans-serif;
    color:#334155;
    line-height:1.7;
}
h1,h2,h3,h4,h5{
    font-family:'Poppins',sans-serif;
    font-weight:600;
}
.navbar{
    background:#fff;
    box-shadow:0 2px 15px rgba(0,0,0,.05);
}
.logo-text{
    font-size:4rem;
    font-weight:700;
    color:#000;
}
.logo-text span{
    color:var(--wp-green);
}

.hero-network-image {
    width: 100%;
    max-width: 550px;

    animation:
        rotateNetwork 90s linear infinite,
        floatingNetwork 50s ease-in-out infinite;

    filter:
        drop-shadow(0 0 20px rgba(34,197,94,.3))
        drop-shadow(0 0 40px rgba(34,197,94,.2));

}

@keyframes floatingNetwork {

    0%,
    100% {
        transform:
            translateY(0px)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-12px)
            rotate(180deg);
    }

}

.hero-network-image-2 {
    width: 180%;
    max-width: 300px;
    position: absolute;
    opacity: 0.7 !important;
        animation:
        rotateNetwork 40s linear infinite,
        floatingNetwork 20s ease-in-out infinite;
}

.btn-primary-custom{
    background:var(--wp-green);
    border:none;
    color:#fff;
    padding:12px 28px;
    border-radius:50px;
    font-weight:600;
}
.btn-primary-custom:hover{
    background:var(--wp-green-dark);
    color:#fff;
}
.btn-outline-custom{
    border:2px solid var(--wp-green);
    color:var(--wp-green);
    border-radius:50px;
    padding:12px 28px;
    font-weight:600;
}
.hero{
    background:
        radial-gradient(circle at top right,
        rgba(34,197,94,.25),
        transparent 35%),
        var(--wp-dark);
    color:#fff;
    padding:120px 0;
    position:relative;
    overflow:hidden;
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:40px 40px;
}
.hero-content{
    position:relative;
    z-index:2;
}
.hero h1{
    font-size:4rem;
    font-weight:700;
}
.hero p{
    font-size:1.25rem;
    max-width:700px;
}
.hero-network {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.node {
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(34,197,94,.7);
    border-radius: 50%;

    box-shadow:
        0 0 10px rgba(34,197,94,.7),
        0 0 25px rgba(34,197,94,.4);

    animation:
        pulse 5s infinite ease-in-out,
        floatNode 12s infinite ease-in-out;
}

.node-1 {
    top: 20%;
    left: 15%;
}

.node-2 {
    top: 30%;
    right: 20%;
}

.node-3 {
    top: 60%;
    left: 25%;
}

.node-4 {
    bottom: 20%;
    right: 15%;
}

.node-5 {
    top: 15%;
    left: 55%;
}

@keyframes pulse {

    0%,100% {
        transform: scale(1);
        opacity: .6;
    }

    50% {
        transform: scale(1.5);
        opacity: 1;
    }
}

@keyframes floatNode {

    0%,100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-30px);
    }
}

.hero-network::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(34,197,94,.15) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(34,197,94,.15) 1px,
            transparent 1px
        );

    background-size: 140px 140px;

    animation: gridShift 30s linear infinite;
}

@keyframes gridShift {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(30px);
    }
}

.service-card{
    border:none;
    border-radius:20px;
    padding:40px 30px;
    transition:.3s;
    height:100%;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.service-card:hover{
    transform:translateY(-8px);
}
.service-icon{
    width:70px;
    height:70px;
    border-radius:15px;
    background:#ecfdf5;
    color:var(--wp-green);
    font-size:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
}
.service-list{
    list-style:none;
    padding-left:0;
    margin-top:20px;
}

.service-list li{
    padding:8px 0;
    border-bottom:1px solid #eef2f7;
}

.service-list li:before{
    content:'✓';
    color:var(--wp-green);
    font-weight:700;
    margin-right:12px;
}
.service-feature{
    padding:60px;
    border-radius:24px;
    background:#fff;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}
.service-image{
    background:
    linear-gradient(135deg,
    var(--wp-dark),
    var(--wp-green));

    min-height:350px;
    border-radius:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-size:2rem;
    font-weight:600;
}
.section{
    padding:100px 0;
}
.section-title{
    margin-bottom:60px;
}
.section-title h2{
    font-size:2.5rem;
    margin-bottom:15px;
}
.bg-light-custom{
    background:var(--wp-light);
}
.feature-box{
    padding:20px 0;
}
.feature-box i{
    color:var(--wp-green);
    font-weight:bold;
}
.project-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.project-image{
    height:220px;
    background:
    linear-gradient(135deg,
    var(--wp-dark),
    var(--wp-green));
}
.process-step{
    text-align:center;
    padding:30px;
}
.process-number{
    width:70px;
    height:70px;
    border-radius:50%;
    background:var(--wp-green);
    color:#fff;
    font-size:28px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}
.cta{
    background:
    linear-gradient(135deg,
    var(--wp-green),
    var(--wp-green-dark));
    color:#fff;
    padding:80px 0;
}
.why-section{
    background:var(--wp-dark);
    color:#fff;
}

.why-card{
    background:rgba(255,255,255,.05);
    padding:30px;
    border-radius:20px;
    height:100%;
}

.case-study {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
    margin-bottom: 60px;
}

.case-image {
    min-height: 350px;
    background:
        linear-gradient(135deg,
            var(--wp-dark),
            var(--wp-green));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
}

.case-content {
    padding: 50px;
}

.project-tag {
    display: inline-block;
    background: #e8fff0;
    color: var(--wp-green-dark);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.challenge-box,
.solution-box,
.result-box {
    background: #f8fafc;
    padding: 25px;
    border-radius: 16px;
    margin-top: 20px;
}

.challenge-box h5 {
    color: #dc2626;
}

.solution-box h5 {
    color: #2563eb;
}

.result-box h5 {
    color: #16a34a;
}

.stats {
    background: var(--wp-dark);
    color: white;
    text-align: center;
}

.stat {
    padding: 40px 20px;
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--wp-green);
}

.profile-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .08);
}

.profile-image {
    min-height: 450px;
    background:
        linear-gradient(135deg,
            var(--wp-dark),
            var(--wp-green));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 6rem;
    font-weight: 700;
}

.profile-content {
    padding: 50px;
}

.highlight-box {
    background: #f8fafc;
    padding: 25px;
    border-radius: 16px;
    margin-bottom: 20px;
}

.values-section {
    background: var(--wp-light);
}

.value-card {
    background: white;
    border-radius: 20px;
    padding: 35px;
    height: 100%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .06);
}

.timeline-item {
    border-left: 4px solid var(--wp-green);
    padding-left: 30px;
    margin-bottom: 40px;
}

.timeline-year {
    color: var(--wp-green);
    font-weight: 700;
}

/* Contact Page Specific Styles */

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 3rem;
}

.contact-info-card,
.contact-form-card {
    background:
    linear-gradient(135deg,
    var(--wp-dark),
    var(--wp-green));
    min-height:350px;
    border-radius:24px;
    padding: 2rem;
    color: white;
}

.contact-info-item {
    margin-bottom: 2rem;
}

.contact-form {
    display: grid;
    gap: 1rem;
}

.feature-grid,
.faq-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.feature-card,
.faq-card,
.availability-card {
    background:
    linear-gradient(135deg,
    var(--wp-dark),
    var(--wp-green));
    border-radius:24px;
    padding: 2rem;
    transition: .3s;
    align-items: center;
    justify-content: center;
    color: white;

}

.feature-card:hover {
    transform: translateY(-5px);
}

/* =========================
   Scroll Reveal Animation
========================= */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered delay helpers */

.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

.footer{
    background:var(--wp-dark);
    color:#cbd5e1;
    padding:60px 0 30px;
}
.footer h5{
    color:#fff;
}
@media(max-width:768px){
.hero h1{
    font-size:2.8rem;
}
.section{
    padding:70px 0;
}
}