/*--------------------------------------------------------------
# Page 1
--------------------------------------------------------------*/
#page1 {
    min-height: 100vh;
    width: 100%;
    position: relative;
}

.carousel {
    margin-top: 8% !important;
    /* height: 80vh !important; */
    width: 100% !important;
    overflow: hidden !important;
    border-radius: 2vw;
    position: relative !important;
    z-index: 1;
    /* opacity: 0; */
}

.carousel-item {
    width: 100%;
    /* or fixed width like 300px */
    height: 80vh;
    /* or responsive height */
    background: #eee;
    text-align: center;
    overflow: hidden;
}

.carousel-item img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%
}

#carousel-circle-anime {
    height: 50%;
    width: 40%;
    background: linear-gradient(to top, rgb(41, 179, 234), blue);
    filter: blur(20px);
    position: absolute;
    border-radius: 100px 0 0 100px;
    right: 0%;
    bottom: -5%;
}

#carousel-circle-anime-circle1 {
    height: 50%;
    width: 40%;
    background: linear-gradient(to top, rgb(50, 176, 226), blue);
    /* background-color: red; */
    position: absolute;
    right: 0%;
    bottom: -5%;
    border-radius: 100px 0 0 100px;
    filter: blur(20px);
    animation-name: anime;
    animation-duration: 5s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes anime {
    from {
        transform: translate(0%, 5%) skew(0);
    }

    to {
        transform: translate(-10%, 20%) skew(10deg);
    }
}

@media (max-width: 1200px) {
    #page1 {
        margin-top: 110px;
    }

    .carousel-item {
        height: 67vh !important;
    }
}

@media (max-width: 1024px) {
    #page1 {
        margin-top: 100px;
        min-height: 70vh !important;
    }

    .carousel-item {
        height: 55vh !important;
    }
}

@media (max-width: 991px) {
    #page1 {
        min-height: 30vh !important;
    }

    .carousel {
        margin-top: 20% !important;
    }

    .carousel-item {
        width: 100%;
        height: 23vh !important;
    }
}

@media (max-width: 821px) {
    #page1 {
        min-height: 40vh !important;
    }

    .carousel-item {
        width: 100%;
        height: 30vh !important;
    }
}

@media (max-width: 768px) {
    #page1 {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-height: auto !important;
        margin-top: 0;
    }

    #page1>.container {
        margin: 5% 0 10% 0;
    }

    .carousel-item {
        height: 35vh !important;
    }

}

@media (max-width: 550px) {

    .carousel-item {
        height: 35vh !important;
    }
}

@media (max-width: 490px) {
    .carousel-item {
        height: 25vh !important;
    }
}

@media (max-width: 420px) {
    .carousel-item {
        height: 25vh !important;
    }
}

@media (max-width: 376px) {
    .carousel-item {
        height: 30vh !important;
    }
}

@media (max-width: 345px) {
    .carousel-item {
        height: 22vh !important;
    }
}