.modal{

    position: fixed;

    inset: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 40px;

    background: rgba(5,10,20,.9);

    backdrop-filter: blur(20px);

    opacity: 0;

    visibility: hidden;

    transition: .35s ease;

    z-index: 9999;

}

.modal.active{

    opacity: 1;

    visibility: visible;

}

.modal-content{

    position: relative;

    max-width: 1000px;

    width: 100%;

    max-height: 90vh;

    animation: modalZoom .35s ease;

}

.modal-image{

    width: 100%;

    max-height: 90vh;

    object-fit: contain;

    border-radius: 18px;

    border: 1px solid rgba(255,255,255,.08);

    box-shadow: 0 25px 60px rgba(0,0,0,.45);

}

.modal-close{

    position: absolute;

    top: -18px;

    right: -18px;

    width: 52px;

    height: 52px;

    display: flex;

    justify-content: center;

    align-items: center;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);

    color: var(--white);

    font-size: 1.2rem;

    backdrop-filter: blur(15px);

    transition: .3s;

}

.modal-close:hover{

    background: var(--primary-color);

    border-color: var(--primary-color);

    transform: rotate(90deg);

}

.modal-prev,

.modal-next{

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 58px;

    height: 58px;

    display: flex;

    justify-content: center;

    align-items: center;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.12);

    color: var(--white);

    font-size: 1.3rem;

    backdrop-filter: blur(15px);

    transition: .3s;

}

.modal-prev{

    left: -85px;

}

.modal-next{

    right: -85px;

}

.modal-prev:hover,

.modal-next:hover{

    background: var(--primary-color);

    border-color: var(--primary-color);

    transform: translateY(-50%) scale(1.08);

}

.modal-caption{

    margin-top: 20px;

    text-align: center;

}

.modal-caption h3{

    color: var(--white);

    font-size: 1.4rem;

    margin-bottom: 10px;

}

.modal-caption p{

    color: var(--text-secondary);

    line-height: 1.8;

}

.modal-loader{

    width: 55px;

    height: 55px;

    border: 4px solid rgba(255,255,255,.15);

    border-top-color: var(--primary-color);

    border-radius: 50%;

    animation: spin .8s linear infinite;

}

.modal-content iframe,

.modal-content video{

    width: 100%;

    border-radius: 18px;

}

.modal::-webkit-scrollbar{

    display: none;

}

@keyframes modalZoom{

    from{

        opacity: 0;

        transform: scale(.85);

    }

    to{

        opacity: 1;

        transform: scale(1);

    }

}

@keyframes spin{

    to{

        transform: rotate(360deg);

    }

}