/* Responsive Styles */
@media (max-width: 768px) {
    .hero {
        flex-direction: column;
        padding: 20px;
        min-height: auto;
    }

    .hero-title-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .hero-title {
        font-size: 30vw;
        opacity: 0.1;
    }

    .hero-overlay {
        position: static;
        width: 80%;
        transform: none;
        font-size: 4vw;
        margin-top: 1rem;
        text-align: justify;
        text-indent: 1.5em;
    }

    .hero-overlay1 {
        position: static;
        width: 100%;
        text-align: center;
        margin-top: 2rem;
        transform: none;
    }

    .coperta {
        width: 80%;
        height: auto;
        box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.3);
    }

    .hero-image {
        display: none;
    }

    .about-title {
        font-size: 4.5rem;
    }

    .card {
        width: 200px;
        height: 280px;
    }

    .card.left-2 {
        transform: translateX(-250px) scale(0.8) translateZ(-300px);
    }

    .card.left-1 {
        transform: translateX(-120px) scale(0.9) translateZ(-100px);
    }

    .card.right-1 {
        transform: translateX(120px) scale(0.9) translateZ(-100px);
    }

    .card.right-2 {
        transform: translateX(250px) scale(0.8) translateZ(-300px);
    }


    .author-section {
        flex-direction: column;
        gap: 2rem;
        margin-left: 0;
    }
    .poem-section {
        flex-direction: column-reverse;
        gap: 2rem;
        margin-left: 0;
    }
    .author-image {
        height: 400px;
    }

    .author-text {
        font-size: 4vw;
        width: 75%;
        max-width: none;
        text-align: justify;
    }

    .poem-image {
        flex: 0 0 100%;
        height: 300px;
        order: -1;
    }

    .poem {
        font-size: 4vw;
    }
}

@media (max-width: 480px) {
    .about-title {
        font-size: 3.5rem;
        top: 20px;
    }

    .carousel-container {
        height: 340px;
        margin-top: 40px;
    }

    .carousel-track {
        margin-top: 100px;
    }

    .card {
        width: 160px;
        height: 220px;
    }

    .card.left-2 {
        transform: translateX(-180px) scale(0.8) translateZ(-200px);
    }

    .card.left-1 {
        transform: translateX(-90px) scale(0.9) translateZ(-50px);
    }

    .card.right-1 {
        transform: translateX(90px) scale(0.9) translateZ(-50px);
    }

    .card.right-2 {
        transform: translateX(180px) scale(0.8) translateZ(-200px);
    }

    .nav-arrow {
        width: 30px;
        height: 30px;
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .hero-title-container {
        padding-top: 40px; /* Adaugă spațiu în partea de sus */
        position: relative;
        min-height: 300px; /* Asigură spațiu suficient */
    }

    .hero-title {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1;
    }

    .hero-overlay {
        position: relative;
        margin-top: 80px; /* Mută textul mai jos sub titlu */
        z-index: 2;
        left: 0px;
    }

    .hero-overlay1 {
        margin-top: 40px;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .carousel-container {
        height: 300px; /* Redus de la 340px */
        margin-top: 30px; /* Redus de la 40px */
    }

    .carousel-track {
        margin-top: 80px; /* Redus de la 100px */
    }

    .card {
        width: 140px; /* Redus de la 160px */
        height: 200px; /* Redus de la 220px */
    }

    .card.left-2 {
        transform: translateX(-150px) scale(0.8) translateZ(-200px); /* Ajustat */
    }

    .card.left-1 {
        transform: translateX(-75px) scale(0.9) translateZ(-50px); /* Ajustat */
    }

    .card.right-1 {
        transform: translateX(75px) scale(0.9) translateZ(-50px); /* Ajustat */
    }

    .card.right-2 {
        transform: translateX(150px) scale(0.8) translateZ(-200px); /* Ajustat */
    }

    .dots {
        margin-top: 40px; /* Redus de la 60px */
    }
}

@media (max-width: 480px) {
    .carousel-container {
        height: 250px; /* Redus de la 340px */
        margin-top: 20px; /* Redus de la 40px */
    }

    .carousel-track {
        margin-top: 60px; /* Redus de la 100px */
    }

    .card {
        width: 120px; /* Redus de la 160px */
        height: 170px; /* Redus de la 220px */
    }

    .card.left-2 {
        transform: translateX(-130px) scale(0.8) translateZ(-200px); /* Ajustat */
    }

    .card.left-1 {
        transform: translateX(-65px) scale(0.9) translateZ(-50px); /* Ajustat */
    }

    .card.right-1 {
        transform: translateX(65px) scale(0.9) translateZ(-50px); /* Ajustat */
    }

    .card.right-2 {
        transform: translateX(130px) scale(0.8) translateZ(-200px); /* Ajustat */
    }

    .dots {
        margin-top: 30px; /* Redus de la 60px */
    }
}
@media (max-width: 768px) {
    .nav-arrow {
        width: 25px; /* Micșorat */
        height: 25px; /* Micșorat */
        font-size: 1rem; /* Micșorat */
    }

    .dot {
        width: 10px; /* Micșorat */
        height: 10px; /* Micșorat */
    }
}

@media (max-width: 768px) {
    .nav-arrow {
        display: none; /* Ascunde ambele săgeți pe mobil */
    }
    
    /* Opțional: permite navigarea prin swipe */
    .carousel-track {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    
    .card {
        scroll-snap-align: start;
    }
}

@media (max-width: 768px) {
    .author-section {
        
        text-align: center;
    }

    .author-text {
        order: -1;
    }
    .section {
    padding: 1rem 5%;
    margin-top: 8px;
}
.section1 {
    padding: 4rem 5%;
    margin-top: 8px;
}
}
@media (max-width: 768px) {
    .author-image {
        flex: 0 0 400px;
        height: 400px;
    }
    .author-image img {
    width: 200px;
    height: auto;
    object-fit: cover;
}
}

@media (max-width: 768px) {
    .author-image {
        flex: 0 0 267px;
        height: 400px;
    }
    .order-button {
    position: absolute;
        top: 560px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgb(91, 24, 35);
        color: #fff;
        padding: 12px 28px;
        border: none;
        border-radius: 40px;
        font-size: 1rem;
        font-family: 'Outfit', sans-serif;
        text-transform: uppercase;
        letter-spacing: 1px;
        text-decoration: none;
        z-index: 5;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        width: 55%;
}

.order-button:hover {
    background-color: #3d0e15;
    transform: translateX(-50%) scale(1.05);
}

}