@font-face {
    font-family: "Coolvetica";
    src: url(../fonts/coolveticarg.ttf);
}
@font-face {
    font-family: "Heading Pro";
    src: url(../fonts/Heading-Pro-Wide-Light-iF67d95b5430d59.ttf);
    font-weight: 300;
}
@font-face {
    font-family: "Heading Pro";
    src: url(../fonts/Heading-Pro-Wide-Regular-iF67d95b5414837.ttf);
    font-weight: 400;
}
@font-face {
    font-family: "Heading Pro";
    src: url(../fonts/Heading-Pro-Wide-Heavy-iF67d95b5456204.ttf);
    font-weight: 700;
}

body {
    font-family: "Poppins", sans-serif;
}

button {
    cursor: pointer;
}

.font-heading {
    font-family: "Heading Pro", sans-serif;
}

#cloudBandWrap {
    will-change: transform;
}
#cloudBand {
    display: block;
    width: 100%;
    height: 100%;
}
#trees {
    transform-origin: center top;
    transform: translateX(-50%) translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale3d(var(--s, 1), var(--s, 1), 1);
    will-change: transform;
}
#kids {
    transform-origin: center top;
    transform: translateX(-50%) translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale3d(var(--s, 1), var(--s, 1), 1);
    will-change: transform;
}
#materials {
    transform-origin: center top;
    transform: translateX(-2.5rem) translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale3d(var(--s, 1), var(--s, 1), 1);
    will-change: transform;
}
#hero-title {
    transform-origin: center top;
    transform: translateX(0) translate3d(var(--tx, 0px), var(--ty, 0px), 0) scale3d(var(--s, 1), var(--s, 1), 1);
    will-change: transform;
}

.button:before,
.button:after {
    position: absolute;
    content: "";
    width: 150%;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1000;
    background-repeat: no-repeat;
}

.button:hover:before {
    top: -70%;
    background-image: radial-gradient(circle, #e99a3f 20%, transparent 20%), radial-gradient(circle, transparent 20%, #e99a3f 20%, transparent 30%), radial-gradient(circle, #e99a3f 20%, transparent 20%), radial-gradient(circle, #e99a3f 20%, transparent 20%), radial-gradient(circle, transparent 10%, #e99a3f 15%, transparent 20%), radial-gradient(circle, #e99a3f 20%, transparent 20%), radial-gradient(circle, #e99a3f 20%, transparent 20%), radial-gradient(circle, #e99a3f 20%, transparent 20%), radial-gradient(circle, #e99a3f 20%, transparent 20%);
    background-size:
            10% 10%,
            20% 20%,
            15% 15%,
            20% 20%,
            18% 18%,
            10% 10%,
            15% 15%,
            10% 10%,
            18% 18%;
    background-position: 50% 120%;
    animation: greentopBubbles 1s ease;
}

@keyframes greentopBubbles {
    0% {
        background-position:
                5% 90%,
                10% 90%,
                10% 90%,
                15% 90%,
                25% 90%,
                25% 90%,
                40% 90%,
                55% 90%,
                70% 90%;
    }

    50% {
        background-position:
                0% 80%,
                0% 20%,
                10% 40%,
                20% 0%,
                30% 30%,
                22% 50%,
                50% 50%,
                65% 20%,
                90% 30%;
    }

    100% {
        background-position:
                0% 70%,
                0% 10%,
                10% 30%,
                20% -10%,
                30% 20%,
                22% 40%,
                50% 40%,
                65% 10%,
                90% 20%;
        background-size:
                0% 0%,
                0% 0%,
                0% 0%,
                0% 0%,
                0% 0%,
                0% 0%;
    }
}

.button:hover::after {
    bottom: -70%;
    background-image: radial-gradient(circle, #e99a3f 20%, transparent 20%), radial-gradient(circle, #e99a3f 20%, transparent 20%), radial-gradient(circle, transparent 10%, #e99a3f 15%, transparent 20%), radial-gradient(circle, #e99a3f 20%, transparent 20%), radial-gradient(circle, #e99a3f 20%, transparent 20%), radial-gradient(circle, #e99a3f 20%, transparent 20%), radial-gradient(circle, #e99a3f 20%, transparent 20%);
    background-size:
            15% 15%,
            20% 20%,
            18% 18%,
            20% 20%,
            15% 15%,
            20% 20%,
            18% 18%;
    background-position: 50% 0%;
    animation: greenbottomBubbles 1s ease;
}

@keyframes greenbottomBubbles {
    0% {
        background-position:
                10% -10%,
                30% 10%,
                55% -10%,
                70% -10%,
                85% -10%,
                70% -10%,
                70% 0%;
    }

    50% {
        background-position:
                0% 80%,
                20% 80%,
                45% 60%,
                60% 100%,
                75% 70%,
                95% 60%,
                105% 0%;
    }

    100% {
        background-position:
                0% 90%,
                20% 90%,
                45% 70%,
                60% 110%,
                75% 80%,
                95% 70%,
                110% 10%;
        background-size:
                0% 0%,
                0% 0%,
                0% 0%,
                0% 0%,
                0% 0%,
                0% 0%;
    }
}

@media (max-width: 1023.98px) {
    .scroll-card.is-inview .img-bg-1 {
        opacity: 1;
        transform: scale(1.05);
    }
    .scroll-card.is-inview .img-bg-2 {
        transform: scale(1.1);
    }
    .scroll-card.is-inview .card-title {
        color: #ffffff;
    }
    .scroll-card.is-inview .card-btn {
        background-color: #000000;
        padding-left: 1.25rem; /* px-5 */
        padding-right: 1.25rem;
    }
}

.swiper-button-disabled {
    opacity: 0.4;
}

.footer-obj {
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition:
            opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
            transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
}

/* object_1: soldan gelsin */
.footer-obj[data-footer-obj="1"] {
    transform: translate3d(-40px, 0, 0);
}

/* object_2: aşağıdan gelsin */
.footer-obj[data-footer-obj="2"] {
    transform: translate3d(0, 40px, 0);
}

/* object_3: sağdan gelsin */
.footer-obj[data-footer-obj="3"] {
    transform: translate3d(40px, 0, 0);
}

/* Ekrana girdiği an: yerine otur + görünür */
.footer-obj.footer-obj-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.hero {
    -webkit-clip-path: url(#heroWaveDesktop);
    clip-path: url(#heroWaveDesktop);
}

@media (max-width: 1024px) {
    .hero {
        -webkit-clip-path: url(#heroWaveMobile);
        clip-path: url(#heroWaveMobile);
    }
}