.hero {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);

    color: var(--white);

    padding: 150px 0 80px;

    margin-top: 80px;

}



.hero .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.hero-content {

    flex: 1;

    padding-right: 30px;

}



.hero h1 {

    font-size: 3.5rem;

    margin-bottom: 15px;

    line-height: 1.2;

}



.hero-subtitle {

    font-size: 1.5rem;

    margin-bottom: 20px;

    font-weight: 300;

}



.hero-description {

    font-size: 1.1rem;

    margin-bottom: 30px;

    max-width: 500px;

}



.hero-buttons {

    display: flex;

    gap: 15px;

}



.hero-buttons .btn {

    margin-right: 15px;

}



.hero-image {

    flex: 1;

    text-align: center;

}



.hero-image img {

    max-width: 100%;

    height: auto;

    max-height: 500px;

    animation: float 3s ease-in-out infinite;

}



@keyframes float {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-15px);

    }

    100% {

        transform: translateY(0px);

    }

}