* {
    margin: 0;
    padding: 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body {
    background-image: url("./images/home/background-home-desktop.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}


/* Navbar */

.navbar {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 70px;
    width: 100%;
    position: fixed;
    top: 2rem;
}

.nav-logo {
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar hr {
    width: 30%;
    border: 0;
    border-top: 1px solid rgb(43, 43, 53);
}

.nav-links {
    width: 55%;
    display: flex;
    justify-content: space-evenly;
    position: relative;
    left: -3.5rem;
    z-index: -1;
    background: #050526;
    background: linear-gradient(90deg, rgba(5, 5, 38, 1) 0%, rgba(67, 67, 89, 1) 41%, rgba(25, 46, 69, 1) 53%, rgba(75, 75, 99, 1) 71%, rgba(25, 42, 66, 1) 100%);
    height: 70px;
    align-items: center;
    opacity: 0.9;
}

.nav-links li a {
    text-decoration: none;
    color: rgb(201, 201, 201);
    font-size: 0.8rem;
    font-weight: 300;
}

.nav-links li {
    list-style: none;
}

.nav-links li span {
    font-weight: 600;
    padding-right: 0.3rem;
    color: white;
}

.nav-links li a:hover {
    border-bottom: 2px solid white;
    padding-bottom: 1.3rem;
}

.nav-links li a.active {
    border-bottom: 2px solid white;
    padding-bottom: 1.3rem;
}




/* Main Section */


.main-content {
    display: flex;
    color: rgb(214, 214, 214);
    margin: 15rem auto 0 auto;
    justify-content: space-between;
    width: 70%;
}

.content {
    width: 40%;
    color: rgb(201, 201, 201);
}

.content h3 {
    font-size: 1.5rem;
    font-weight: lighter;
}

.content h1 {
    font-size: 5.5rem;
    font-weight: 400;
    color: white;
}

.content p {
    font-size: 0.9rem;
}

.main-btn {
    width: 19%;
    align-self: flex-end;
}

.main-btn div {
    border-radius: 50%;
    width: 180px;
    height: 180px;
    background: linear-gradient(to top, rgb(255, 255, 255), rgb(249, 192, 136));
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
}

.main-btn a {
    color: black;
    text-decoration: none;
}

.main-btn a:hover {
    color: rgb(105, 104, 104);
}

.white-dots img {
    width: 5px;
    animation: dots 7s linear infinite;
    opacity: 0;
    z-index: -1;
}

.white-dots {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: 0;
}

@keyframes dots {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    70% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-80vh);
    }
}

.white-dots img:nth-child(1) {
    animation-delay: 0.5s;
    background-color: rgb(247, 224, 148);
    border-radius: 7px;
    width: 2px;
    box-shadow: 1px 1px 2px 1px rgb(248, 248, 248);
}

.white-dots img:nth-child(2) {
    animation-delay: 3s;
    background-color: antiquewhite;
    border-radius: 7px;
    width: 2px;
    box-shadow: 0px 1px 3px 2px rgb(252, 233, 152);
}

.white-dots img:nth-child(3) {
    animation-delay: 2s;
    background-color: rgb(243, 231, 190);
    border-radius: 7px;
    width: 3px;
}

.white-dots img:nth-child(4) {
    animation-delay: 0.2s;
    background-color: rgb(151, 141, 108);
    border-radius: 7px;
    width: 1.8px;
    box-shadow: 0px 1px 3px 2px rgb(252, 233, 152);
}

.white-dots img:nth-child(5) {
    animation-delay: 5s;
    background-color: rgb(247, 224, 148);
    width: 3px;
    border-radius: 7px;
}

.white-dots img:nth-child(6) {
    animation-delay: 1s;
}

.white-dots img:nth-child(7) {
    animation-delay: 4s;
    background-color: rgb(120, 128, 197);
    border-radius: 7px;
    width: 1.5px;
}

.white-dots img:nth-child(8) {
    animation-delay: 2s;
}

.white-dots img:nth-child(9) {
    animation-delay: 6s;
    background-color: rgb(73, 82, 160);
    border-radius: 7px;
    width: 2px;
}

.white-dots img:nth-child(10) {
    animation-delay: 4s;
}

.white-dots img:nth-child(11) {
    animation-delay: 0.5s;
    background-color: rgb(194, 169, 87);
    border-radius: 7px;
    width: 1.5px;
    box-shadow: 0px 1px 3px 2px rgb(252, 233, 152);
}

.white-dots img:nth-child(12) {
    animation-delay: 5s;
}

.white-dots img:nth-child(13) {
    animation-delay: 2s;
    background-color: rgb(184, 183, 180);
    border-radius: 7px;
    width: 1.5px;
    box-shadow: 0px 1px 3px 2px rgb(122, 128, 211);
}

.white-dots img:nth-child(14) {
    animation-delay: 6s;
}

.white-dots img:nth-child(15) {
    animation-delay: 3s;
    width: 2.5px;
}



/* Responsiveness */


@media screen and (max-width: 1200px) {

    .nav-links {
        left: -2.5rem;
    }

    .main-content {
        margin: 12rem auto 0 auto;
    }

    .content {
        width: 55%;
    }
}



@media screen and (max-width: 1024px) {

    .navbar hr {
        width: 20%;
        visibility: hidden;
    }

    .nav-links {
        width: 65%;
    }

    .content {
        width: 60%;
    }

    .content h3 {
        font-size: 1.3rem;
    }

    .content h1 {
        font-size: 5.2rem;
    }

    .main-btn div {
        border-radius: 50%;
        width: 150px;
        height: 150px;
        font-size: 1.2rem;
    }

    .main-btn {
        width: 25%;
    }
}


@media screen and (max-width:768px) {

    body {
        background-image: url("./images/home/background-home-tablet.jpg");
    }

    .navbar {
        top: 0;
        justify-content: space-between;
        height: 70px;
    }

    .navbar hr {
        display: none;
    }

    .nav-links {
        position: static;
        background: #00001f;
        background: linear-gradient(90deg, rgb(42, 42, 54) 0%, rgb(44, 44, 53) 41%, rgb(39, 46, 54) 53%, rgb(52, 52, 66) 71%, rgb(39, 47, 58) 100%);
    }

    .nav-links li a {
        font-size: 0.7rem;
    }

    .nav-links li span {
        display: none;
    }

    .nav-logo {
        width: 20%;
    }

    .main-content {
        flex-direction: column;
        width: 90%;
        margin: 7rem auto 0 auto;
        gap: 3rem;
        align-items: center;
    }

    .content {
        text-align: center;
    }

    .content h3 {
        font-size: 1.05rem;
    }

    .content h1 {
        font-size: 5rem;
    }

    .content p {
        font-size: 0.8rem;
    }

    .main-btn {
        align-self: center;
        width: 19%;
    }

    .main-btn div {
        border-radius: 50%;
        width: 130px;
        height: 130px;
        font-size: 1.1rem;
    }
}


@media screen and (max-width:480px) {

    body {
        background-image: url("./images/home/background-home-mobile.jpg");
    }

    .nav-links li {
        display: none;
    }

    .nav-links {
        width: 7.2%;
        background: url("./images/shared/icon-hamburger.svg");
        background-size: cover;
        background-position: center;
        opacity: 1;
        position: relative;
        height: 28px;
    }

    .main-content {
        width: 97%;
    }

    .content {
        width: 90%;
    }

    .content h1 {
        font-size: 4rem;
    }

    .main-btn {
        width: 50%;
        display: flex;
        justify-content: center;
    }

    .main-btn div {
        width: 120px;
        height: 120px;
    }

}