*
{
    box-sizing:border-box;
}

body
{
    margin:0;
    font-family:Arial;
    background:linear-gradient(135deg,#eef,#ddf)
}

header
{
    background:linear-gradient(90deg,#1e3c72,#2a5298);
    position:sticky;
    top:0;
    box-shadow:0 4px 10px rgba(0,0,0,.3)
}

nav

ul
{
    display:flex;
    list-style:none;
    margin:0;
    padding:15px;
    justify-content:center;
    gap:25px
}

nav 

a
{
    color:#fff;
    text-decoration:none;
    font-weight:bold
}

.grid
{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;padding:30px
}

.card
{
    background:#fff;
    border-radius:16px;
    padding:18px;
    box-shadow:0 8px 18px rgba(0,0,0,.2);
    transition:.3s
}

.card:hover
{
    transform:translateY(-8px) scale(1.02)
}

button,a.btn
{
    background:#df3636;
    color:#fff;
    padding:10px 16px;
    border:none;
    border-radius:8px;
    text-decoration:none;
    cursor:pointer
}

.modal
{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    align-items:center;
    justify-content:center
}

.modall
{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    align-items:center;
    justify-content:center
}


.box
{
    background:#fff;
    padding:15px;border-radius:22px;
    animation:zoom .25s
}

video
{
    max-width:80vw;
    max-height:70vh
}

@keyframes zoom
{
    from{transform:scale(.8);opacity:0
}

to
{
    transform:scale(1);opacity:1
}
}