/* =================================
   MODAL
================================= */

.modal{

    position:fixed;

    inset:0;

    z-index:9999;

    display:none;
}

.modal.active{
    display:block;
}

.modal-overlay{

    position:absolute;

    inset:0;

    background:rgba(15,23,42,.75);

    backdrop-filter:blur(8px);
}

.modal-container{

    position:absolute;

    top:50%;
    left:50%;

    transform:
        translate(-50%,-50%)
        scale(.95);

    width:min(1100px,92%);

    max-height:90vh;

    overflow-y:auto;

    background:#fff;

    border-radius:28px;

    padding:50px;

    transition:.3s;
}

.modal.active .modal-container{

    transform:
        translate(-50%,-50%)
        scale(1);
}

.modal-close{

    position:absolute;

    right:20px;
    top:20px;

    width:46px;
    height:46px;

    border:none;

    border-radius:50%;

    background:#f1f5f9;

    cursor:pointer;

    transition:.3s;
}

.modal-close:hover{

    background:#e2e8f0;
}
.service-modal-banner{

    margin-bottom:35px;
}

.service-modal-banner img{

    width:100%;

    height:300px;

    object-fit:cover;

    border-radius:20px;

    display:block;
}
.service-modal-header{

    display:flex;

    align-items:center;

    gap:25px;

    margin-bottom:30px;
}

.service-modal-icon{

    width:90px;
    height:90px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(13,71,161,.08);

    flex-shrink:0;
}

.service-modal-icon i{

    font-size:38px;

    color:var(--primary);
}

.service-category{

    display:block;

    margin-bottom:10px;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    color:var(--primary);
}

.service-modal-content h2{

    font-size:52px;

    line-height:1.1;

    color:var(--dark);
}
.service-description{

    font-size:19px;

    line-height:1.9;

    color:#64748b;

    margin-bottom:40px;
}
.service-features-grid{

    display:grid;

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

    gap:18px;
}

.feature-box{

    display:flex;

    align-items:center;

    gap:15px;

    padding:22px;

    border-radius:16px;

    border:1px solid #edf2f7;

    background:#fff;

    transition:.3s;
}

.feature-box:hover{

    border-color:rgba(13,71,161,.2);

    transform:translateY(-3px);
}

.feature-box i{

    color:#16a34a;

    font-size:16px;
}
@media(max-width:768px){

    .modal-container{

        padding:25px;
    }

    .service-modal-banner img{

        height:220px;
    }

    .service-modal-header{

        flex-direction:column;

        align-items:flex-start;
    }

    .service-modal-content h2{

        font-size:34px;
    }

    .service-description{

        font-size:16px;
    }

    .service-features-grid{

        grid-template-columns:1fr;
    }

}