/*====================================
        MODERN SERVICES
====================================*/

.services-modern{
    position:relative;
    padding:30px 0;
    background:#fff;
    overflow:hidden;
}

.services-modern::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:350px;
    background:linear-gradient(to bottom,
    rgba(212,175,55,.12),
    transparent);
}

/* Heading */

.services-header{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:80px;
    align-items:end;
    margin-bottom:80px;
    position:relative;
    z-index:2;
}

.service-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 20px;
    border-radius:40px;
    background:#eef4ff;
    color:#0B2C52;
    font-size:.8rem;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
}

.service-badge i{
    color:#D4AF37;
}

.services-heading h1{
    margin-top:25px;
    font-size:3.5rem;
    line-height:1.2;
    color:#0B2C52;
}

.services-heading span{
    color:#5b7294;
    font-style:italic;
}

.services-header p{
    color:#666;
    font-size:1.05rem;
    line-height:1.9;
    text-align:right;
}

/* Cards */

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

.service-card{
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.45s;
}

.service-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 55px rgba(0,0,0,.15);
}

.service-image{
    position:relative;
    overflow:hidden;
}

.service-image img{
    width:100%;
    height:280px;
    object-fit:cover;
    transition:transform .7s;
}

.service-card:hover img{
    transform:scale(1.1);
}

.service-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
    rgba(11,44,82,.65),
    transparent);
}

.service-number{
    position:absolute;
    left:25px;
    top:20px;
    font-size:2rem;
    font-weight:700;
    color:white;
}

.service-icon{
    position:absolute;
    top:20px;
    right:20px;
    width:50px;
    height:50px;
    border-radius:50%;
    background:white;
    display:flex;
    justify-content:center;
    align-items:center;
}

.service-icon i{
    color:#0B2C52;
    font-size:20px;
}

.service-content{
    padding:35px;
}

.service-content h2{
    font-size:1.7rem;
    color:#0B2C52;
}

.service-content p{
    margin:18px 0;
    line-height:1.8;
    color:#666;
}

.service-content ul{
    list-style:none;
    margin-bottom:30px;
}

.service-content li{
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#444;
}

.service-content li i{
    color:#D4AF37;
}

.service-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#0B2C52;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.service-link:hover{
    gap:18px;
}

@media (max-width:991px){

    .services-header{
        grid-template-columns:1fr;
        gap:30px;
        text-align:center;
    }

    .services-header p{
        text-align:center;
        max-width:650px;
        margin:auto;
    }

    .services-heading h1{
        font-size:2.6rem;
    }

    .services-grid{
        grid-template-columns:1fr;
        gap:30px;
    }
}

@media (max-width:768px){

    .services-modern{
        padding:80px 0;
    }

    .services-heading h1{
        font-size:2rem;
    }

    .service-content{
        padding:25px;
    }

    .service-image img{
        height:220px;
    }

    .service-content h2{
        font-size:1.4rem;
    }

    .service-content p{
        font-size:.95rem;
    }
}