/* ==========================
   Reset
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Cairo",sans-serif;
    color:#fff;
    overflow-x:hidden;

    background-color:#121212;

    background:
        radial-gradient(circle at 15% 15%, rgba(230,0,0,.12), transparent 28%),
        radial-gradient(circle at 85% 75%, rgba(230,0,0,.08), transparent 30%),
        linear-gradient(180deg,#121212 0%, #181818 50%, #121212 100%);

    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size:cover;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    max-width:100%;
    display:block;
}

ul{
    list-style:none;
}


/* ==========================
   Section Divider
========================== */

section{
    position: relative;
    padding: 80px 0;
}

section:not(:last-of-type)::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 2px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(230,0,0,.9),
        transparent
    );

    box-shadow: 0 0 12px rgba(230,0,0,.45);
    border-radius: 50px;
}

/* ==========================
   Reveal Animation
========================== */

.reveal{
    opacity:0;
    transform:translateY(60px);
    transition:
        opacity .8s ease,
        transform .8s ease;
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}