@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.heading {
    font-family: "Bricolage Grotesque", sans-serif;
}

.color-bg {
    background-image: 
        radial-gradient(circle farthest-corner at 125% 100%, #fff 19%, #fff0 41%), 
        linear-gradient(325deg, #fff0 78%, #ffffff), 
        linear-gradient(343deg, #fff 10%, #fff0 22%), 
        linear-gradient(152deg, #fff, #fff0 91%), 
        radial-gradient(circle farthest-corner at 0 -50%, #fff0 15%, #70cdff00 38%, #fff0 65%), 
        repeating-linear-gradient(214deg, #fff0, #ffffff4d 25%, #fff0 71%), 
        repeating-linear-gradient(135deg, #0000 51%, #0098f938 64%, #fff0 80%);
}

.dots:before {
    background-color: #ff980069;
    border-radius: 50%;
    content: "";
    height: 6px;
    left: -16px;
    position: absolute;
    top: 7px;
    width: 6px;
}

.floated-icon {
    position: absolute;
    transition: all 5s ease;
    animation: cloud 5s infinite ease-in-out;
}

.floated-icon.left {
    top: 40%;
    left: 1%;
}

.floated-icon.right {
    bottom: 0%;
    right: 1%;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
}

.masked-overflow {
    -webkit-mask-image: linear-gradient(90deg, #ffffff54, #fff 3%, #fff 97%, #ffffff54);
}

.font {
    font-size: 180px;
    position: absolute;
    transform: translate(-48%, -50%);
    margin: 0;
    left: 50%;
}

.first {
    color: transparent;
    -webkit-text-stroke: 1px #004aad;
}

.second {
    color: #c1ff72;
    -webkit-text-stroke: 1px #004aad;
    animation: waves 4s ease-in-out infinite;
}

@keyframes waves {
    0%, 100% {
        clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
    }
    50% {
        clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee {
    animation: marquee 15s linear infinite;
}

@keyframes cloud {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-30px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes slideRight {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes slideLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.mobile-menu.show {
    animation: slideRight 0.5s ease-out forwards;
}

.mobile-menu.hide {
    animation: slideLeft 0.5s ease-out forwards;
}