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

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

/* @media (max-width: 768px) {
    * {
        overflow-x: hidden;
    }
} */

/* Hero */
.hero-section {
    height: 450px;
    position: relative;
    background: linear-gradient(135deg, var(--pink), var(--yellow));

}

.hero-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.girl-plane {
    position: absolute;
    width: 20vw;
    left: 14vw;
    bottom: 16vh;
    animation: float-rotate 5s ease-in-out infinite;
    transform-origin: bottom center;

}

.galaxy {
    position: absolute;
    top: 15vh;
    left: 34vw;
    width: 8vw;
    height: auto;
    z-index: 0;
    pointer-events: none;
    /* transform: rotate(15deg); */
    animation: float 10s ease-in-out infinite;
  }

@keyframes float {

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

  50% {
    transform: translateY(-16px);/
  }
}

@keyframes float-rotate {
    0% {
        transform: rotate(0deg) translateY(0);
    }

    50% {
        transform: rotate(-10deg) translateY(0);
    }

    100% {
        transform: rotate(0deg) translateY(0);
    }
}

.butterfly {
    position: absolute;
    top: 0;
    right: 240px;
    width: 10vw;
    animation: float-rotate 5s ease-in-out infinite;
    transform-origin: top center;
}


.hanging-monkey {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18vw;
    animation: float-rotate 5s ease-in-out infinite;
    transform-origin: top right;
    z-index: 100;
}


@media (max-width:768px) {
    .girl-plane {
        width: 28vw;
        left: 6vw;
        bottom: 6vh;
    }

    .galaxy {
        top: 22vh;
        left: 12vw;
        width: 16vw;
    }

    .butterfly {
        width: 16vw;
        right: 40vw;
    }

    .hanging-monkey {
        width: 24vw;
        animation: float 5s ease-in-out infinite;
    }
}



.hero-container {
    padding-top: 180px;
    display: flex;
    align-items: center;
    gap: 0;
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.hero-title {
    font-family: "Chewy", Sans-serif;
    background-color: var(--bg-color);
    font-size: 1.5rem;
    color: var(--dark-blue);
    font-weight: 100;
    border-radius: 40px;
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* Responsive */
@media (max-width: 768px) {

    .hero-section {
        height: 426px;
    }

    .hero-container {
        flex-direction: column;
        gap: 3rem;
        padding-top: 150px;
    }

    .hero-text {
        margin-bottom: 0;
        max-width: 100%;
        padding: 0 1rem;
        text-align: center;
    }

    .hero-title {
        font-size: 2.0rem;
        line-height: 50px;
    }
}

/* === Hero Section Divider === */
.hero-divider {
    position: relative;
    /* overflow: hidden; */
}

.hero-divider::after {
    content: '';
    position: absolute;
    bottom: -0px;
    left: 0px;
    width: 100%;
    height: 100px;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 171% 42px;
    background-position: 81% 0%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 7' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cmask id='cutout'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Cpath d='M0 0a1 1 0 007 0 1 1 0 0010 0 1 1 0 008 0 1 1 0 0011 0 1 1 0 0013 0 1 1 0 0010 0 1 1 0 0012 0 1 1 0 0013 0 1 1 0 0011 0 1 1 0 009 0 1 1 0 0012 0 1 1 0 0012 0z' fill='black' opacity='0.6'/%3E%3Cpath d='M0 0a1 1 0 005 0 1 1 0 003 0 1 1 0 004 0 1 1 0 003 0 1 1 0 002 0 1 1 0 005 0 1 1 0 007 0 1 1 0 005 0 1 1 0 0010 0 1 1 0 005 0 1 1 0 008 0 1 1 0 005 0 1 1 0 006 0 1 1 0 005 0 1 1 0 0011 0 1 1 0 005 0 1 1 0 008 0 1 1 0 006 0 1 1 0 008 0 1 1 0 0010 0 1 1 0 007 0z' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='white' mask='url(%23cutout)'/%3E%3C/svg%3E");
}

/*Responsive Tweaks */
@media (max-width: 2100px) {
    .hero-divider::after {
        background-size: 120% calc(2vw + 80px);
    }
}

@media (max-width: 1024px) {
    .hero-divider::after {
        background-size: 100% 90px;
        background-position: 50% 0%;
    }
}

@media (max-width: 768px) {
    .hero-divider::after {
        height: 60px;
        background-size: 180% 64px;
        background-position: 20% 0%;
    }
}