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

@font-face {
    font-family: 'Poppins';
    src: url("fonts/Poppins-Regular.ttf");

}

body {
    justify-content: center;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(-225deg, rgba(106, 170, 158) 0%, rgba(179, 221, 158) 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 150px;
    z-index: 1;
    transition: 0.6s;
}

header .logo {
    font-size: 28px;
    width: 200px;
    color: rgba(159, 217, 221);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 2s;
}

header .prologo {
    margin-left: 60px;
}

header .prologo img {
    width: 60px;
    align-items: center;
    margin-left: -40px;
    transition: 0.6s;
    margin-top: 10px;
}

header ul {
    display: flex;
    justify-content: center;
    align-items: center;
}

header ul li {
    text-align: center;
    height: 60px;
    width: 230px;
    list-style: none;
}

header ul li:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

header ul li a:hover {
    color: rgba(159, 217, 221);
}

header ul li a img {
    padding: -20px;
    width: 15px;
}

header ul li a {
    height: 100%;
    width: 100%;
    line-height: 60px;
    text-align: center;
    font-size: 20px;
    margin: 0 0;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-weight: 500;
    letter-spacing: 2px;
    transition: 0.6s;
}

.banner1 {
    height: 100vh;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    background: url("backgroundimg.png");
    background-size: 100%;
    /* background-image: linear-gradient(-20deg, #6e45e2 0%, #88d3ce 100%); */
    /* background: rgba(192, 230, 238); */

}

.banner2 {
    height: 20000px;
    position: relative;
    width: 100%;
    /* background-image: linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%); */
}

header.sticky {
    height: 0;
    background: linear-gradient(to right, rbga(162, 204, 254) 0%, rgba(194, 228, 227) 19%, rgba(162, 204, 254) 42%, rgba(138, 171, 214) 79%, rgba(254, 245, 230) 100%);

}

header.sticky .logo,
header.sticky ul li a {
    color: white;
}

header.sticky img {
    width: 0px;
}

header ul li ul {
    display: none;
}

header ul li:hover ul {
    width: 230px;
    display: block;
    background-image: linear-gradient(to right, #3ab5b0 0%, #3d99be 31%, #6AA99E 100%);
}

header ul li ul li a {
    margin: auto;
    font-size: 20px;
    text-align: center;
}

header ul li ul li:hover {
    background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
}




.h5title {
    position: absolute;
    z-index: 2;
    font-size: 1vw;
    font-family: 'Snat';
    font-weight: 700;
    width: 10vw;
    left: 45vw;
    top: 90vh;
    text-align: center;
    animation: upanddown 4s infinite;
    transition: all 0.5s;
}

.h5title.is-in {
    opacity: 0;
    pointer-events: none;
}


@keyframes upanddown {
    0% {
        transform: translateY(0vh);
    }

    25% {
        transform: translateY(2vh);
    }

    50% {
        transform: translateY(0vh);
    }

    75% {
        transform: translateY(2vh);
    }

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

.h5titlea {
    color: black;
}

.container .side_nav_scroll .fig {
    text-align: center;
    font-size: 16px;
}