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

.service-modal{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9999;

}

.service-modal.active{

    opacity:1;

    visibility:visible;

}

.modal-overlay{

    position:absolute;

    inset:0;

    background:rgba(8,17,32,.75);

    backdrop-filter:blur(10px);

}

.modal-box{

    position:relative;

    z-index:2;

    width:100%;

    max-width:1100px;

    background:#ffffff;

    border-radius:28px;

    overflow:hidden;

    display:grid;

    grid-template-columns:1fr 1fr;

    box-shadow:

    0 35px 80px rgba(0,0,0,.35);

    transform:scale(.9);

    transition:.35s ease;

}

.service-modal.active .modal-box{

    transform:scale(1);

}

.modal-close{

    position:absolute;

    top:20px;

    right:20px;

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#ffffff;

    cursor:pointer;

    font-size:1.2rem;

    color:#0B132B;

    box-shadow:

    0 10px 25px rgba(0,0,0,.15);

    transition:.3s;

    z-index:5;

}

.modal-close:hover{

    background:#1D4ED8;

    color:#ffffff;

    transform:rotate(90deg);

}

.modal-image{

    background:#F8FAFC;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

}

.modal-image img{

    width:100%;

    max-width:420px;

    transition:.4s;

}

.modal-image img:hover{

    transform:scale(1.05);

}

.modal-content{

    padding:50px;

}

.modal-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:30px;

    background:#EAF4FF;

    color:#1D4ED8;

    font-weight:700;

    margin-bottom:20px;

}

.modal-content h2{

    font-size:2.2rem;

    color:#0B132B;

    margin-bottom:20px;

}

.modal-content p{

    color:#64748B;

    line-height:1.9;

    margin-bottom:30px;

}

.modal-features{

    list-style:none;

    margin-bottom:35px;

}

.modal-features li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:#334155;

}

.modal-features li i{

    color:#00C2FF;

}

.modal-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

@media(max-width:991px){

    .modal-box{

        grid-template-columns:1fr;

        max-height:90vh;

        overflow-y:auto;

    }

    .modal-content{

        padding:35px;

    }

}

@media(max-width:768px){

    .modal-content h2{

        font-size:1.8rem;

    }

    .modal-buttons{

        flex-direction:column;

    }

    .modal-buttons a{

        width:100%;

        justify-content:center;

    }

}