/* Import Poppins Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Apply Poppins Font Globally */
body, p, h1, h2, h3, h4, h5, h6, span, a, div, input, button {
    font-family: 'Poppins', sans-serif !important;
}

/* Ensure Font Awesome Icons Keep Their Font */
.fa, .fas, .far, .fal, .fab {
    font-family: "Font Awesome 6 Free" !important;
}

/* Define the rotating animation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* ZoomInOut Animatiom */
@keyframes zoomInOut {
    0% {
        -webkit-transform: rotate(0deg) scale(.7);
        transform: rotate(0deg) scale(.7);
        opacity: 0
    }

    50% {
        -webkit-transform: rotate(180deg) scale(1);
        transform: rotate(180deg) scale(1);
        opacity: 1
    }

    100% {
        -webkit-transform: rotate(360deg) scale(.7);
        transform: rotate(360deg) scale(.7);
        opacity: 0
    }
}

@-webkit-keyframes float-bob-y {
    0% {
        transform: translateY(-20px)
    }

    50% {
        transform: translateY(-10px)
    }

    100% {
        transform: translateY(-20px)
    }
}

/* Float Animaton */
@keyframes float-bob-y {
    0% {
        transform: translateY(-20px)
    }

    50% {
        transform: translateY(-10px)
    }

    100% {
        transform: translateY(-20px)
    }
}

/* Apply the animation to the rotating element */
.shape4.rotate-me {
    animation: rotate 5s linear infinite;
    display: inline-block;
    position: absolute;
    top: 87%;
    right:2rem;

}

.home.shape4.rotate-me {
    animation: rotate 50s linear infinite;
    display: inline-block;
    position: absolute;
    top: 0%;
    right:2rem;
}

.shape5 {
    position: absolute;
    top: 420px;
    right: 65px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #fff;
    opacity: .5;
    z-index: 20;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.ball {
    position: absolute;
    top: 30%;
    left: 70px;
    bottom: 200px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #fbca1d;
    z-index: 20;
}

.redball {
    position: absolute;
    top: 30%;
    right: 70px;
    bottom: 200px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: hsl(344, 97%, 55%);
    z-index: 20;
}

.shape1 {
    position: absolute;
    /* left: -140px; */
    /* top: 850px; */
    z-index: -1;
    width:auto;
}

.pos2.shape1 {
    position: absolute;
    /* left:0rem; */
    /* top: 10rem; */
    z-index: 2;
    width: auto;
}

.pos2.shape2 {
    position: absolute;
    /* left: 104%; */
    bottom: 0px;
    z-index: 2;
    width: auto;
}

.pos3.shape2 {
    position: absolute;
    /* left: -135; */
    top: 0px;
    z-index: 2;
    width: auto;
}

.banner-section{
    position: relative;
    overflow: hidden;
}

.zoominout {
    animation-name: zoomInOut;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: zoomInOut;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: zoomInOut;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    -ms-animation-name: zoomInOut;
    -ms-animation-duration: 3s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: ease-in-out;
    -o-animation-name: zoomInOut;
    -o-animation-duration: 3s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: ease-in-out
}

.float-bob-y {
    -webkit-animation-name: float-bob-y;
    animation-name: float-bob-y;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear
}