/*====================================
Service Cards
====================================*/

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

body{
    font-family:'Manrope',sans-serif;
    background:#FAFBFD;
    color:#0E1E3A;
}

a{
    text-decoration:none;
}

.container{
    width:min(1240px,92%);
    margin:auto;
}


/*====================================
    SERVICES SECTION
====================================*/

.sp-services-section{

    padding:120px 0;

    background:
    radial-gradient(circle at top left,#F8F5EE 0%,transparent 35%),
    radial-gradient(circle at bottom right,#EEF5FF 0%,transparent 35%),
    #ffffff;

}


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

.sp-services-grid{

    display:grid;

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

    gap:28px;

}


/*====================================
    CARD
====================================*/

.sp-service-card{

    position:relative;

    background:#ffffff;

    border-radius:26px;

    padding:30px 22px;

    border:1px solid rgba(23,72,138,.08);

    overflow:hidden;

    transition:.45s;

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

}

.sp-service-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        transparent,
        rgba(214,184,113,.10),
        transparent
    );

    opacity:0;

    transition:.45s;

}

.sp-service-card:hover::before{

    opacity:1;

}

.sp-service-card:hover{

    transform:translateY(-12px);

    border-color:#D6B87155;

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

}


/*====================================
    ICON
====================================*/

.sp-card-icon{

    width:68px;

    height:68px;

    border-radius:22px;

    background:
    linear-gradient(135deg,#F8FAFD,#EEF4FB);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:24px;

    color:#17488A;

    margin-bottom:20px;

    transition:.4s;

}

.sp-service-card:hover .card-icon{

    background:
    linear-gradient(
        135deg,
        #17488A,
        #2D69C4
    );

    color:#fff;

    transform:rotate(-8deg);

}


/*====================================
    TEXT
====================================*/

.sp-service-card h3{

    font-size:1.15rem;

    color:#081F45;

    margin-bottom:18px;

    line-height:1.4;

}

.sp-service-card h3::after{

    content:"";

    display:block;

    width:45px;

    height:3px;

    background:#D6B871;

    border-radius:50px;

    margin-top:18px;

}

.sp-service-card p{

    color:#70788B;

    line-height:1.9;

    font-size:.97rem;

    margin-bottom:28px;

}


/*====================================
    LINK
====================================*/

.sp-service-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#17488A;

    font-weight:700;

    transition:.35s;

}

.sp-service-card:hover a{

    color:#D6B871;

}

.sp-service-card a i{

    transition:.35s;

}

.sp-service-card:hover a i{

    transform:translateX(6px);

}


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

@media(max-width:992px){

.sp-services-grid{

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

}

}

@media(max-width:650px){

.sp-services-grid{

grid-template-columns:1fr;

}

.sp-service-card{

padding:35px 26px;

}

}
/* Keep service-card title accents aligned across one- and two-line headings. */
.sp-service-card h3 {
  display: flex;
  flex-direction: column;
  min-height: calc(2.8em + 21px);
}

.sp-service-card h3::after {
  margin-top: auto;
}
/* Keep service-card Learn More actions aligned across the grid. */
.sp-service-card {
  display: flex;
  flex-direction: column;
}

.sp-service-card a {
  margin-top: auto;
}