#hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    height: auto;
    
    min-height: 80vh;
    justify-content: center;
    margin: 10vh;
    margin-top: calc(60px + 3vh);
    overflow: visible;
}

#hero div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

@keyframes flameAnimation {
    0% {transform: scale(0.66);}
    50% {transform: scale(0.78);}
    100% {transform: scale(0.66);}
}
#animated-path {
    animation: flameAnimation 1s ease-in-out infinite;
    transform-origin: center;
}

@keyframes flyIn {
    0% { transform: translate(-100%, 100%) rotate(-10deg); }
    100% { transform: translate(0%, 0%) rotate(0deg); }
}

@keyframes rocket-shake {
    0%   { transform: rotate(1deg) translateY(0px); }
    10%  { transform: rotate(-1.5deg) translateY(2px); }
    20%  { transform: rotate(1.2deg) translateY(-2px); }
    30%  { transform: rotate(-1deg) translateY(2px); }
    40%  { transform: rotate(1deg) translateY(-2px); }
    50%  { transform: rotate(0deg) translateY(0px); }
    60%  { transform: rotate(-1deg) translateY(2px); }
    70%  { transform: rotate(1.2deg) translateY(-2px); }
    80%  { transform: rotate(-1.5deg) translateY(2px); }
    90%  { transform: rotate(1deg) translateY(-2px); }
    100% { transform: rotate(0deg) translateY(0px); }
}


.rocket-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin-top: 5vh;
    transform-origin: 60% 40%;
    animation:
        flyIn 0.7s ease,
        rocket-shake 1s ease-in-out infinite;
    animation-delay: 0s, 0.7s;
}

.rocket-img, .rocket-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#how-it-works .grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

#how-it-works .grid .glassCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

#how-it-works .grid .glassCard img {
    width: 50%;
    height: auto;
    max-width: 200px;
    margin-bottom: 20px;
}


.comparisonContainer {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-top: 5vh;
    gap: 2vh;

    div {
        padding: 2ch;
        flex: 1;
        ul {
            margin-top: 2ch;
            list-style: none;
            li {
                padding: 0.8ch 0;
            }
        }
    }
}


/*  pricing  */
.pricing-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 40px 0;
}

.pricing-plan {
    flex: 1;
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease;
}

.pricing-plan:hover {
    transform: scale(1.05);
}

.pricing-plan h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.price {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.pricing-plan ul {
    list-style-type: none;
    padding: 0;
}

.pricing-plan li {
    margin-bottom: 10px;
    font-size: 1rem;
}

#contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 5vh;
}
#contact a {
    width: unset;
}

@media (max-width:768px) {
    #hero {
        height: auto;
        flex-direction: column;
        justify-content: start;
        margin: 60px 5vw 5vw 5vw;
        margin-top: calc(60px + 3vh);
        width: calc(100% - 10vw);
    }

    .comparisonContainer {
        flex-direction: column;
    }

    .pricing-container {
        flex-direction: column;
    }

}