/* =========================================
        SERVICES HERO
========================================= */

.services-hero{
    padding:140px 8% 90px;
    text-align:center;
    position:relative;
}

.services-hero-content{
    max-width:850px;
    margin:auto;
}

.section-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 22px;
    border-radius:50px;
    border:1px solid #e5e7eb;
    background:#ffffff;
    color:#2563eb;
    font-weight:600;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.services-hero h1{
    font-size:55px;
    line-height:1.15;
    margin:25px 0;
    font-weight:800;
    color:#111827;
}

.services-hero h1 span{
    background:linear-gradient(90deg,#2563eb,#7c3aed);
    -webkit-background-clip:text;
    color:transparent;
}

.services-hero p{
    font-size:18px;
    color:#6b7280;
    max-width:650px;
    margin:auto;
    line-height:1.8;
}


/* =========================================
        COMMON SECTION
========================================= */

.section-heading{
    text-align:center;
    max-width:700px;
    margin:auto;
    margin-bottom:60px;
}

.section-heading span{
    color:#2563eb;
    font-weight:700;
    letter-spacing:1px;
}

.section-heading h2{
    font-size:42px;
    margin:15px 0;
    color:#111827;
}

.section-heading p{
    color:#6b7280;
    line-height:1.7;
}



/* =========================================
        SERVICES GRID
========================================= */

.services-section,
.tech-section,
.work-process,
.service-details,
.why-services{
    padding:90px 8%;
}


.services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}


.service-card{

    padding:40px 30px;

    border-radius:25px;

    background:#ffffff;

    border:1px solid #e5e7eb;

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

    transition:.4s ease;

    position:relative;
    overflow:hidden;
}



.service-card::before{

    content:"";

    position:absolute;

    width:100px;
    height:100px;

    right:-40px;
    top:-40px;

    border-radius:50%;

    background:linear-gradient(
    135deg,
    #dbeafe,
    #ede9fe
    );

}



.service-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 25px 60px rgba(37,99,235,.15);

}



.service-card i{

    font-size:40px;

    color:#2563eb;

    margin-bottom:20px;

}



.service-card h3{

    font-size:22px;

    color:#111827;

}



.service-card p{

    color:#6b7280;

    line-height:1.7;

}



/* =========================================
        TECHNOLOGIES
========================================= */


.tech-grid{

    display:grid;

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

    gap:20px;

}


.tech-card{

    padding:30px 15px;

    text-align:center;

    border:1px solid #e5e7eb;

    border-radius:20px;

    transition:.3s;

}


.tech-card i{

    font-size:38px;

    color:#2563eb;

}


.tech-card h3{

    margin-top:15px;

    font-size:17px;

}



.tech-card:hover{

    transform:translateY(-8px);

    border-color:#2563eb;

    box-shadow:0 15px 35px rgba(37,99,235,.12);

}



/* =========================================
        PROCESS
========================================= */


.process-grid{

    display:grid;

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

    gap:25px;

}


.process-card{

    text-align:center;

    padding:35px;

    border-radius:20px;

    border:1px solid #e5e7eb;

    transition:.3s;

}


.process-card h3{

    font-size:45px;

    color:#2563eb;

    margin:0;

}


.process-card p{

    font-size:18px;

    font-weight:600;

}


.process-card:hover{

    transform:scale(1.05);

}



/* =========================================
        CTA
========================================= */


.services-cta{

    padding:80px 8%;

}


.cta-box{

    padding:70px 40px;

    text-align:center;

    border-radius:35px;

    border:1px solid #e5e7eb;

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

}



.cta-box h2{

    font-size:42px;

}



.cta-box p{

    color:#6b7280;

    max-width:600px;

    margin:20px auto;

}



.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:30px;

}


.primary-btn,
.secondary-btn{

    padding:15px 35px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}


.primary-btn{

    background:#2563eb;

    color:white;

}


.secondary-btn{

    border:1px solid #2563eb;

    color:#2563eb;

}



.primary-btn:hover,
.secondary-btn:hover{

    transform:translateY(-5px);

}




/* =========================================
        DETAILED SERVICES
========================================= */


.details-grid{

    display:grid;

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

    gap:35px;

}



.detail-card{

    display:flex;

    gap:25px;

    padding:35px;

    border-radius:25px;

    border:1px solid #e5e7eb;

    transition:.4s;

}


.detail-card:hover{

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

    transform:translateY(-8px);

}



.detail-icon i{

    font-size:45px;

    color:#2563eb;

}


.detail-content h3{

    font-size:25px;

}



.detail-content p,
.detail-content li{

    color:#6b7280;

    line-height:1.7;

}



.detail-content ul{

    padding:0;

    list-style:none;

}


.detail-content li i{

    font-size:16px;

}



/* =========================================
        WHY SERVICES
========================================= */


.why-grid{

    display:grid;

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

    gap:30px;

}


.why-card{

    padding:35px;

    border-radius:25px;

    border:1px solid #e5e7eb;

    transition:.35s;

}


.why-card i{

    font-size:35px;

    color:#2563eb;

}


.why-card h3{

    margin:20px 0 10px;

}


.why-card p{

    color:#6b7280;

    line-height:1.7;

}



.why-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 50px rgba(37,99,235,.12);

}


/* =========================================
        FINAL CTA SECTION
========================================= */

.final-cta{

    padding:100px 8%;
    position:relative;

}


.final-cta-container{

    max-width:1000px;

    margin:auto;

    text-align:center;

    padding:80px 60px;

    border-radius:40px;

    background:#ffffff;

    border:1px solid #e5e7eb;

    position:relative;

    overflow:hidden;

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

}


/* Soft Gradient Glow */

.final-cta-container::before{

    content:"";

    position:absolute;

    width:300px;
    height:300px;

    background:linear-gradient(
        135deg,
        #dbeafe,
        #ede9fe
    );

    border-radius:50%;

    top:-150px;
    left:-120px;

    opacity:.7;

}



.final-cta-container::after{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    background:linear-gradient(
        135deg,
        #bfdbfe,
        #ddd6fe
    );

    border-radius:50%;

    bottom:-120px;
    right:-100px;

    opacity:.6;

}



/* Content Layer */

.final-cta-container > *{

    position:relative;

    z-index:2;

}



/* Badge */

.cta-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 25px;

    border-radius:50px;

    background:#ffffff;

    border:1px solid #dbeafe;

    color:#2563eb;

    font-size:15px;

    font-weight:600;

    box-shadow:
    0 10px 25px rgba(37,99,235,.12);

    animation:floatBadge 3s ease-in-out infinite;

}


.cta-badge i{

    font-size:20px;

}



@keyframes floatBadge{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-5px);

    }

}




/* Heading */

.final-cta h2{

    font-size:48px;

    line-height:1.2;

    margin:30px auto 20px;

    max-width:750px;

    color:#111827;

    font-weight:800;

}



.final-cta p{

    max-width:720px;

    margin:auto;

    font-size:18px;

    color:#6b7280;

    line-height:1.8;

}



/* Buttons */

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:40px;

}



.primary-btn,
.secondary-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:16px 35px;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.35s ease;

}



/* Primary */

.primary-btn{

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:white;

    box-shadow:

    0 15px 35px rgba(37,99,235,.3);

}


.primary-btn:hover{

    transform:translateY(-6px);

    box-shadow:

    0 25px 45px rgba(37,99,235,.4);

}



/* Secondary */

.secondary-btn{

    color:#2563eb;

    border:1.5px solid #2563eb;

    background:white;

}



.secondary-btn:hover{

    background:#2563eb;

    color:white;

    transform:translateY(-6px);

}



/* Button Icons */

.cta-buttons i{

    font-size:20px;

}




/* =========================================
        RESPONSIVE
========================================= */


@media(max-width:768px){


.final-cta{

    padding:70px 5%;

}


.final-cta-container{

    padding:55px 25px;

    border-radius:30px;

}


.final-cta h2{

    font-size:34px;

}


.final-cta p{

    font-size:16px;

}


.cta-buttons{

    flex-direction:column;

}


.primary-btn,
.secondary-btn{

    justify-content:center;

}


}
/* =========================================
        RESPONSIVE
========================================= */


@media(max-width:1000px){

.services-grid{
grid-template-columns:repeat(2,1fr);
}

.tech-grid{
grid-template-columns:repeat(3,1fr);
}

.process-grid{
grid-template-columns:repeat(2,1fr);
}

.why-grid{
grid-template-columns:repeat(2,1fr);
}

}



@media(max-width:650px){


.services-hero h1{
font-size:36px;
}


.services-grid,
.details-grid,
.why-grid,
.process-grid{

grid-template-columns:1fr;

}


.tech-grid{

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

}


.cta-box h2{

font-size:30px;

}


.cta-buttons{

flex-direction:column;

}


}