/* =========================================
   RESTRICTED AREA
========================================= */

.restricted-title{

    text-align:center;

    color:#0098a8;

    font-size:2.4rem;

    margin-bottom:40px;

    text-shadow:
        0 0 10px rgba(0,220,255,.4),
        0 0 25px rgba(0,220,255,.25);

}

.restricted-icons{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:120px;

    margin:80px 0;

    text-align:center;

}

.restricted-card{

    width:260px;

    cursor:pointer;

    transition:.35s ease;

    opacity:0;

    animation:

        restrictedReveal

        1.2s

        ease-out

        forwards;

}

.restricted-card:nth-child(1){

    animation-delay:.4s;

}

.restricted-card:nth-child(2){

    animation-delay:1.3s;

}

.restricted-icon{

    font-size:7rem;

    transition:.35s ease;

}

.restricted-card h3{

    color:#0098a8;

    margin:15px 0 10px;

}

.restricted-card p{

    color:#555;

    font-size:15px;

}

.restricted-card:hover{

    transform:

        translateY(-10px);

}

.restricted-card:hover .restricted-icon{

    transform:

        scale(1.15);

    text-shadow:

        0 0 25px rgba(
            0,
            220,
            255,
            .9
        );

}

.restricted-card:hover h3{

    text-shadow:

        0 0 15px rgba(
            0,
            220,
            255,
            .8
        );

}

.restricted-message{

    color:#ff3b3b;

    font-size:1.2rem;

    font-weight:700;

    text-align:center;

    opacity:0;

    animation:

        restrictedMessageReveal

        1s

        ease-out

        2.3s

        forwards;

}

@keyframes restrictedReveal{

    from{

        opacity:0;

        transform:

            translateY(40px)

            scale(.9);

    }

    to{

        opacity:1;

        transform:

            translateY(0)

            scale(1);

    }

}

@keyframes restrictedMessageReveal{

    from{

        opacity:0;

        transform:
            translateY(20px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}

@media (max-width:768px){

    .restricted-icons{

        flex-direction:column;

        gap:50px;

        align-items:center;

    }

    .restricted-card{

        width:90%;

        max-width:320px;

    }

    .restricted-icon{

        font-size:5rem;

    }

    .restricted-title{

        font-size:1.8rem;

    }

}