.scroll {
    margin: 0 auto;
    text-align: center;
    color: var(--second-text);
    font-size: 2vh;
    position: fixed;
    top: 85vh;
    left: 0;
    width: 100%;
    z-index: 11;
}

.scroll img {
    height: 4vh;
    animation: bounce 2s ease infinite;
}

@keyframes bounce {
    70% { transform:translateY(0%); }
    80% { transform:translateY(-15%); }
    90% { transform:translateY(0%); }
    95% { transform:translateY(-7%); }
    97% { transform:translateY(0%); }
    99% { transform:translateY(-3%); }
    100% { transform:translateY(0); }
}

.first {
    width: 80%;
    margin: 0 auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
    position: relative;
}

.first h1 {
    font-size: 5rem;
    color: var(--main-text);
}

.first p {
    font-size: 1rem;
    color: var(--second-text);
}

/*second section*/
.second {
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20vh;
    z-index: 10;
    position: relative;
}

.second h1 {
    font-size: 5rem;
    color: var(--main-text);
}

.second_left {
    display: flex;
    flex-direction: column;
}

.second_right {
    display: flex;
    width: 50%;
    margin-left: 10vw;
    margin-top: 40px;
}

.second p {
    font-size: 1rem;
    color: var(--second-text);
}

.second a {
    font-size: 1rem;
    color: var(--third-text);
    text-decoration: none;
}

.second img {
    width: 25vw;
    border-radius: 20px;
}

/*third section*/
.third {
    width: 80%;
    margin: 0 auto;
    justify-content: center;
    margin-bottom: 20vh;
    z-index: 10;
    position: relative;
}

.third h1 {
    font-size: 5rem;
    color: var(--main-text);
}

.third_img {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.third img {
    width: 100%;
    height: 80vh;
    object-fit: cover;
    border-radius: 20px;
}

/*fourth section*/
.fourth {
    width: 80%;
    margin: 0 auto;
    height: 80vh;
    justify-content: center;
    margin-bottom: 20vh;
    z-index: 10;
    position: relative;
}

.fourth h1 {
    font-size: 5rem;
    color: var(--main-text);
}

.fourth_projects {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 20px;
}

.fourth_p1, .fourth_p2, .fourth_p3, .fourth_p4 {
    background-color: var(--main-overlay);
    border: 2px solid var(--third-text);
    padding: 60px 20px;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
    text-align: center;
    color: var(--main-text);
}