@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins&display=swap');

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

body {
    background-color: #edf4fc;
    font-family: 'Poppins', sans-serif;
    width: 100vw;
    overflow-x: hidden;
}

.hidden {
    display: none;
}



/* Show the navItems when #navItems is the target */
#navItems {
    width: 85%;
    height: 100vh;
    position: fixed;
    top: 0px;
    right: 0px;
    background-color: white;
    z-index: 10;
    padding: 20px;
}


.hideOverlay {
    display: none;
}

#overlay {
    width: 1000%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: black;
    opacity: 60%;
}
.hero_banner{
    animation: animateHeroBanner 3s ease-in-out 0.01s 1;
}

.hero-title {
    width: 100%;
    text-align: start;
    font-size: 46px;
    font-weight: 900;
    background: -webkit-linear-gradient(rgb(17 94 89), #1ea0c4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animateTitle 0.5s ease-in-out 0.15s;
}
@keyframes animateHeroBanner {
    0% {
        transform: scale(1,1);
    }

    100% {
        transform: scale(1.2,1.2);
    }
}

.transform_left {
    animation: transformLeft 500ms ease-out 0.15s;
}

@keyframes animateTitle {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

@keyframes transformLeft {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

.faq-container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-top: 40px;
}

.faq-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-bottom: 20px;
    border: 1px solid #3bc6f0;
    border-radius: 5px;
}

.faq-question {
    width: 100%;
    text-align: start;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    font-weight: 900;
    padding: 10px;
}

.faq-answer {
    display: none;
    margin: 10px 0px;
    padding: 0px 20px;
    font-weight: 500;
    font-size: 15px;
    text-align: justify;
}

/* For animation */
.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
}

.reveal-right {
    position: relative;
    transform: translateX(80px);
    opacity: 0;
    transition: 1s all ease;
}

.reveal-left {
    position: relative;
    transform: translateX(-80px);
    opacity: 0;
    transition: 1s all ease;
}

.reveal-top {
    position: relative;
    transform: translateY(-80px);
    opacity: 0;
    transition: 1s all ease;
}

.reveal-bottom {
    position: relative;
    transform: translateY(80px);
    opacity: 0;
    transition: 1s all ease;
}

.active {
    transform: translateY(0) translateX(0);
    opacity: 1;
}

.animate-icon {
    animation: animateIcon infinite ease-in-out 0.5s infinite;
}

@keyframes animateIcon {
    0% {
        transform: scale(0)rotate(0deg);
    }

    100% {
        transform: scale(1.5)rotate(180deg);
    }
}


.gradient-circle {
    background: radial-gradient(circle at 50% 50%,
            rgba(83, 197, 203, 0.4) 1%,
            rgba(240, 247, 255, 1) 55%,
            rgba(240, 247, 255, 1) 100%);
}
.gradient-circle2 {
    background: radial-gradient(circle at 50% 50%,
            rgba(83, 197, 203, 0.4) 1%,
            rgba(240, 247, 255, 1) 55%,
            rgb(23, 112, 96) 100%);
}
.linear_gradient1 {
    background: linear-gradient(to bottom right,
            rgba(83, 197, 203, 0.4),
            #edf4fc 55%,
            #edf4fc 100%);
}

.linear_gradient2 {
    background: linear-gradient(to top left,
            rgba(83, 197, 203, 0.4),
            #edf4fc 55%,
            #edf4fc 100%);
}
/* Wave */
.wave {
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
    position: absolute;
    top: -198px;
    width: 6400px;
    height: 198px;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
}

.wave:nth-of-type(2) {
    top: -175px;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
    opacity: 1;
}

@keyframes wave {
    0% {
        margin-left: 0;
    }

    100% {
        margin-left: -1600px;
    }
}

@keyframes swell {

    0%,
    100% {
        transform: translate3d(0, -25px, 0);
    }

    50% {
        transform: translate3d(0, 5px, 0);
    }
}