.me-section {
    background: rgb(46,46,46);
    background: linear-gradient(180deg, rgba(46,46,46,1) 35%, rgba(51,51,51,1) 100%);
    height: 90dvh;
}

.intro {
    height: 60%;
    width: 90% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.intro h1 {
    font-weight: 600;
    font-size: 2.5rem;
    color: #ffffff;
}

.intro p {
    font-family: "Poppins", sans-serif;

    font-size: 1rem;
    font-weight: 100;
    color: #f1f1f1;
}

.intro br {
    display: block;
    margin: 10px 0;
    content: " ";
}


/* SCROLL BUTTON*/
.scroll-btn-container {
    display: flex;
}

.scroll-btn span {
    position: relative;
    display: block;
    content: "";

    width: 24px;
    height: 24px;

    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;

    cursor: pointer;

    transform-style: preserve-3d;

    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: scbt 2s infinite;
    animation: scbt 2s infinite;
}
.scroll-btn span:nth-of-type(1) {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}
.scroll-btn span:nth-of-type(2) {
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}
.scroll-btn span:nth-of-type(3) {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}
@-webkit-keyframes scbt {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes scbt {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}


/* STACK SECTION*/
.stack-section {
    background: rgb(241,241,241);
    /*background: linear-gradient(0deg, rgba(241,241,241,1) 80%, rgba(51,51,51,1) 100%);*/
    height: 80dvh;
}
.stack {
    height: 35%;
    width: 90% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stack h2 {
    font-weight: 600;
    font-size: 2.5rem;
}

.stack p {
    font-family: "Poppins", sans-serif;

    font-size: 1rem;
    font-weight: 100;
}

.stack-slider {
    height: 65%;
    min-height: 425px;
}


/*ON MOBILE VIEWPORT*/
@media only screen and (max-width: 400px) {
    .intro {
        height: 75%;
    }

    .stack-section {
        height: 90dvh;
    }
    .stack {
        padding-top: 60px;
        height: 30%;
    }
}

@media only screen and (max-height: 750px) {
    .stack-section {
        height: fit-content;
    }

    .stack-slider {
        height: fit-content;
        /*min-height: 425px;*/
    }
}
