/*================================
    SERVICE DETAIL PAGE
================================*/


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    font-family:'Poppins',sans-serif;

    background:#f6f9ff;

    color:#1b1b1b;

}



/* MAIN */

.service-page{

    min-height:100vh;

    padding:80px 0;

}



.container{

    width:90%;

    max-width:1200px;

    margin:auto;

}






/*================================
        HEADER
================================*/


.service-header{

    text-align:center;

    max-width:950px;

    margin:auto;

    animation:fadeDown .8s ease;

}



.icon-box{

    width:100px;

    height:100px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#0d6efd,#0056d6);

    color:white;

    border-radius:28px;

    font-size:45px;

    box-shadow:
    0 20px 45px rgba(13,110,253,.35);

    transition:.4s;

}



.icon-box:hover{

    transform:translateY(-8px) rotate(5deg);

}



.badge{

    display:inline-block;

    padding:10px 28px;

    border-radius:50px;

    background:#eaf3ff;

    color:#0d6efd;

    font-weight:600;

    margin-bottom:20px;

}




.service-header h1{

    font-size:54px;

    line-height:1.2;

    font-weight:800;

    color:#0b1f44;

    margin-bottom:25px;

}



.service-header h1 span{

    color:#0d6efd;

}



.service-header p{

    font-size:18px;

    color:#667085;

    line-height:1.9;

}







/*================================
        SECTION TITLE
================================*/


.title{

    text-align:center;

    margin:90px 0 45px;

}



.title h2{

    font-size:40px;

    color:#0b1f44;

    font-weight:800;

}



.title p{

    margin-top:10px;

    color:#666;

    font-size:16px;

}







/*================================
        SERVICE GRID
================================*/


.service-grid{

    display:grid;

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

    gap:30px;

}





.service-card{


    background:white;

    padding:35px 30px;

    border-radius:25px;

    border:1px solid #edf2f7;

    box-shadow:
    0 10px 35px rgba(0,0,0,.06);

    transition:.4s;

    position:relative;

    overflow:hidden;

}



.service-card::before{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    right:-50px;

    top:-50px;

    background:rgba(13,110,253,.08);

    border-radius:50%;

}



.service-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 25px 60px rgba(13,110,253,.18);

}



.service-card i{


    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#eaf3ff;

    color:#0d6efd;

    font-size:30px;

    border-radius:20px;

    margin-bottom:22px;

}




.service-card h3{

    font-size:21px;

    font-weight:700;

    color:#0b1f44;

    margin-bottom:15px;

}



.service-card p{

    color:#666;

    line-height:1.8;

    font-size:15px;

}







/*================================
        CONTENT BOX
================================*/


.content-box{

    background:white;

    margin-top:55px;

    padding:50px;

    border-radius:28px;

    box-shadow:
    0 10px 35px rgba(0,0,0,.06);

    transition:.3s;

}



.content-box:hover{

    transform:translateY(-5px);

}



.content-box h2{

    font-size:32px;

    font-weight:800;

    color:#0b1f44;

    margin-bottom:20px;

}



.content-box h2 i{

    color:#0d6efd;

    margin-right:12px;

}



.content-box p{

    font-size:17px;

    line-height:1.9;

    color:#555;

}







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


.cta-box{

    margin-top:70px;

    text-align:center;

    padding:70px 30px;

    border-radius:35px;

    background:
    linear-gradient(135deg,#0d6efd,#0047b8);

    color:white;

    box-shadow:
    0 20px 50px rgba(13,110,253,.25);

}



.cta-box h2{

    font-size:42px;

    font-weight:800;

    margin-bottom:15px;

}



.cta-box p{

    font-size:18px;

    margin-bottom:35px;

}



.cta-box a{


    display:inline-block;

    background:white;

    color:#0d6efd;

    padding:16px 40px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}



.cta-box a:hover{

    transform:translateY(-5px);

}







/*================================
        BACK BUTTON
================================*/


.back-btn{

    display:inline-block;

    margin-top:45px;

    padding:15px 38px;

    background:#0d6efd;

    color:white;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.back-btn:hover{

    background:#0047b8;

    color:white;

    transform:translateY(-4px);

}







/*================================
        ANIMATION
================================*/


@keyframes fadeDown{


from{

opacity:0;

transform:translateY(-35px);

}


to{

opacity:1;

transform:translateY(0);

}


}








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


@media(max-width:1100px){


.service-grid{

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

}


.service-header h1{

font-size:44px;

}


}





@media(max-width:700px){


.service-page{

padding:50px 0;

}



.container{

width:92%;

}



.service-grid{

grid-template-columns:1fr;

}



.service-header h1{

font-size:32px;

}



.service-header p{

font-size:16px;

}



.content-box{

padding:30px 22px;

}



.content-box h2{

font-size:25px;

}



.cta-box{

padding:45px 20px;

}



.cta-box h2{

font-size:28px;

}


}