.hero {
    display: flex;
    margin-top: 93px;
    flex-direction: row; /* Default to row layout */
}

.hero-left {
    width: 50%;
    padding: 0 0 0 200px; /* Left padding */
}

.hero-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 80px; /* Left padding */
    color: white;
}

.hero-mini-titles {
    font-size: 21px;
    font-family: poppins;
    font-weight: 400;
}

.hero-title {
    font-size: 60px;
    font-family: roboto;
    font-weight: 700;
    color: #FD4F04;
}

.download-cv {
    cursor: pointer;
    background-color: #FD4F04;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 21px 40px;
}

.my-work {
    cursor: pointer;
    background-color: black;
    color: white;
    border: 1px solid white;
    border-radius: 8px;
    padding: 21px 53.785px;
}

.hero-buttons {
    display: flex;
    gap: 25px;
    margin-top: 40px;
}

/* Responsive styles */
@media (max-width: 768px) {
    .hero {
        flex-direction: column; /* Stack items vertically */
        margin-top: 70px; /* Adjust margin for mobile */
        padding: 0 20px; /* Add padding for smaller screens */
    }

    .hero-left {
        width: 100%; /* Full width on mobile */
        padding: 0; /* Remove padding */
        text-align: center; /* Center the image */
    }

    .hero-left img {
        width: 100%; /* Make image responsive */
        height: auto; /* Maintain aspect ratio */
        margin-top: 50px;
    }

    .hero-right {
        width: 100%; /* Full width on mobile */
        padding: 20px 0; /* Add vertical padding */
        text-align: center; /* Center the text */
    }

    .hero-mini-titles {
        font-size: 18px; /* Smaller font size for mobile */
    }

    .hero-title {
        font-size: 36px; /* Smaller font size for mobile */
    }

    .hero-buttons {
        flex-direction: column; /* Stack buttons vertically */
        margin-top: 20px; /* Adjust margin for mobile */
        gap: 15px; /* Adjust button gap */
    }

    .download-cv,
    .my-work {
        padding: 15px 30px; /* Adjust button padding */
        width: 100%; /* Full width buttons */
        font-size: 17px;
    }
}