/*==========================================================
Homepage
==========================================================*/

.hero{

    position:relative;

    overflow:hidden;

    background:
        radial-gradient(circle at top right,
        rgba(46,204,113,.18),
        transparent 35%),
        radial-gradient(circle at bottom left,
        rgba(52,152,219,.15),
        transparent 40%),
        linear-gradient(180deg,#061428,#0E2748);

    color:#fff;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:url("/assets/images/grid.svg") center center;

    opacity:.08;

}

.hero .container{

    position:relative;

    z-index:2;

}

.hero-eyebrow{

    display:inline-block;

    color:#7ddc63;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:1rem;

}

.hero h1{

    font-size:clamp(2.8rem,5vw,5rem);

    line-height:1.05;

    font-weight:800;

    margin-bottom:1.5rem;

}

.hero h1 span{

    color:#6fd44f;

}

.hero .lead{

    font-size:1.25rem;

    color:#d5dce8;

    max-width:650px;

}

.hero-buttons{

    margin-top:2.25rem;

    display:flex;

    gap:1rem;

    flex-wrap:wrap;

}

.hero-services{

    margin-top:3rem;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:1rem;

}

.hero-services div{

    display:flex;

    align-items:center;

    gap:.75rem;

    font-weight:600;

}

.hero-services i{

    font-size:1.35rem;

    color:#6fd44f;

}

.hero-image{

    max-width:650px;

    animation:float 8s ease-in-out infinite;

    filter:drop-shadow(0 40px 70px rgba(0,0,0,.45));

}

@keyframes float{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

@media (max-width:991px){

.hero{

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-services{

    grid-template-columns:1fr;

    margin-bottom:3rem;

}

.hero-image{

    margin-top:3rem;

}

}

/*==========================================================
Services
==========================================================*/

.services{


}

.services .lead{

    max-width:760px;

}

.service-card{

    display:block;

    background:#13365c;

    border-radius:22px;

    padding:2.5rem;

    height:100%;

    color:#fff;

    border:1px solid rgba(0,0,0,.06);

    transition:.35s;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(0,0,0,.15);

    color:#1d3557;

    border-color:#2ecc71;

}

.service-icon{

    width:72px;

    height:72px;

    border-radius:18px;

    background:linear-gradient(135deg,#0E2748,#1f5b9f);

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:1.5rem;

}

.service-icon i{

    color:#fff;

    font-size:2rem;

}

.service-card h3{

    margin-bottom:1rem;

    font-weight:700;

}

.service-card p{

    color:#d5dce8;

    margin-bottom:2rem;

    min-height:80px;

}

.service-card span{

    color:#198754;

    font-weight:700;

}

.service-card span i{

    transition:.3s;

    margin-left:.35rem;

}

.service-card:hover span i{

    transform:translateX(6px);

}

/*==========================================================
Why Us
==========================================================*/

.why-us{

    background:#13365c;

}

.why-us .lead{

    margin-bottom:2rem;

}

.why-list{

    display:flex;

    flex-direction:column;

    gap:1.5rem;

}

.why-item{

    display:flex;

    align-items:flex-start;

    gap:1rem;

}

.why-item i{

    width:58px;

    height:58px;

    border-radius:16px;

    background:linear-gradient(135deg,#0E2748,#1f5b9f);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:1.4rem;

    flex-shrink:0;

}

.why-item h5{

    margin-bottom:.35rem;

    font-weight:700;

}

.why-item p{

    margin:0;

    color:#d5dce8;

}

/*==========================================================
Technology Strip
==========================================================*/

.quality-strip{

    background:#071A35;

    color:#fff;

}

.quality-strip .lead{

    color:#cfd8e3;

    max-width:760px;

    margin:auto;

}

.quality-item{

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:2rem 1rem;

    height:100%;

    transition:.35s;

}

.quality-item:hover{

    transform:translateY(-8px);

    border-color:#2ecc71;
    
    background:#13365c;

    box-shadow:0 20px 40px rgba(0,0,0,.50);

}

.quality-item i{

    display:block;

    font-size:2.5rem;

    color:#2ecc71;

    margin-bottom:1rem;

}

.quality-item h5{

    margin:0;

    font-weight:600;

}

/*==========================================================
Portfolio Preview
==========================================================*/

.portfolio-preview{

    background:#13365c;

}

.project-card{

    background:#071A35;

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

    transition:.35s;

    height:100%;
   
   border:1px solid rgba(0,0,0,.06); 
    

    
        display:block;



}

.project-card:hover{

    transform:translateY(-10px);
    

    box-shadow:0 30px 60px rgba(0,0,0,.30);

    color:#1d3557;

    border-color:#2ecc71;
    




}

.project-card img{

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

}

.project-body{

    padding:2rem;

}

.project-body h4{

    margin-bottom:1rem;

}

.project-body p{

    color:#d5dce8;

    min-height:90px;

}

.tech-stack{

    display:flex;

    flex-wrap:wrap;

    gap:.5rem;

    margin-bottom:1.5rem;

}

.tech-stack span{

    background:#eef3f8;

    border-radius:30px;

    padding:.4rem .9rem;

    font-size:.85rem;

    font-weight:600;

    color:#0E2748;

}

/*==========================================================
Our Process
==========================================================*/

.our-process{

   

}

.process-timeline{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:2rem;

    position:relative;

}

.process-step{

    position:relative;

    background:#13365c;

    border-radius:20px;

    padding:2rem;

    border:1px solid rgba(0,0,0,.08);

    box-shadow:0 15px 35px rgba(0,0,0,.05);

    transition:.35s;

    text-align:center;

}

.process-step:hover{

    transform:translateY(-8px);

    border-color:#2ecc71;
    
    

    box-shadow:0 25px 55px rgba(0,0,0,.30);

}

.step-number{

    width:72px;

    height:72px;

    margin:0 auto 1.5rem;

    border-radius:50%;

    background:linear-gradient(135deg,#0E2748,#1f5b9f);

    color:#fff;

    font-size:1.75rem;

    font-weight:700;

    display:flex;

    align-items:center;

    justify-content:center;

}

.process-step h4{

    margin-bottom:1rem;

    font-weight:700;

}

.process-step p{

    margin:0;

    color:#d5dce8;

}

@media (max-width:991px){

    .process-timeline{

        grid-template-columns:1fr;

    }

}

/*==========================================================
Technology Stack
==========================================================*/

.technology-stack{

    background:#071A35;

    color:#fff;

}

.technology-stack .lead{

    max-width:760px;

    margin:auto;

    color:#d7dee8;

}

.tech-card{

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    border-radius:20px;

    padding:2rem 1rem;

    text-align:center;

    height:100%;

    transition:.35s;

}

.tech-card:hover{

    transform:translateY(-8px);

    border-color:#2ecc71;
     background:#13365c;

    box-shadow:0 25px 50px rgba(0,0,0,.50);

}

.tech-card i{

    font-size:3rem;

    color:#2ecc71;

    margin-bottom:1rem;

    display:block;

}

.tech-card h5{

    margin-bottom:.5rem;

    font-weight:700;

}

.tech-card p{

    margin:0;

    color:#cdd6df;

    font-size:.95rem;

}



.hosting-features{

    background:#061726;
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);

}

.hosting-features i{

    font-size:2rem;
    color:var(--bs-success);
    display:block;
    margin-bottom:.75rem;

}

.hosting-features span{

    color:#fff;
    font-weight:600;
    font-size:.95rem;

}

.hosting-features .col-lg{

    transition:.25s;

}

.hosting-features .col-lg:hover{

    transform:translateY(-4px);

}

.hosting-features .col-lg:hover i{

    color:#4ade80;

}


.trusted-tech{

    background:#000;

}

.tech-logo{

    max-height:48px;
    opacity:.75;
    transition:.25s ease;

    filter:grayscale(100%);

}

.tech-logo:hover{

    opacity:1;
    filter:none;
    transform:scale(1.05);

}

.enterprise-platform{

    background:#071a2d;

}

.platform-card{

    background:#0d243d;

    border:1px solid rgba(255,255,255,.08);

    border-radius:18px;

    padding:35px 28px;

    height:100%;

    transition:.35s;

}

.platform-card:hover{

    transform:translateY(-8px);

    border-color:#36d27d;

    box-shadow:0 20px 40px rgba(0,0,0,.25);

}

.platform-card i{

    font-size:2.5rem;

    color:#36d27d;

    margin-bottom:20px;

    display:block;

}

.platform-card h4{

    color:#fff;

    font-weight:700;

    margin-bottom:15px;

}

.platform-card p{

    color:#c7d4df;

    margin:0;

    line-height:1.7;

}


.why-business{

      background:#13365c;

}

.value-card{

    text-align:center;

    padding:40px 30px;

    height:100%;

    border-radius:20px;

    transition:.35s;

}

.value-card:hover{

    transform:translateY(-8px);

}

.value-icon{

    width:90px;

    height:90px;

    border-radius:50%;

    background:#36d27d;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

}

.value-icon i{

    color:#fff;

    font-size:2.2rem;

}

.value-card h3{

    font-weight:700;

    margin-bottom:18px;

}

.value-card p{

    color:#6c757d;

    line-height:1.8;

}


.final-cta{

    background:
        linear-gradient(135deg,#061726 0%,#0b2745 100%);

    position:relative;

    overflow:hidden;

}

.final-cta::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(54,210,125,.10),
        transparent 45%);

    pointer-events:none;

}

.cta-box{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:auto;

    padding:70px 40px;

}

.final-cta h2{

    color:#fff;

    margin-bottom:25px;

}

.final-cta .lead{

    color:#d3dde6;

    max-width:700px;

    margin:auto;

    line-height:1.8;

}

.cta-buttons .btn{

    min-width:230px;
    margin:.5rem;

}