.header {
    position: absolute;
}

.homepage-content .dropdown-menu {
    width: 100%; /* Restrict the dropdown menu to the homepage width */
}

/* General container for homepage and news-section */
.homepage {
    display: flex; /* Use Flexbox to align elements side by side */
    flex-direction: row; /* Arrange .homepage and .news-section horizontally */
    gap: 0; /* Remove gaps between sections */
    max-width: 100%; /* Occupy full width of the page */
    margin: 0 auto; /* Center the container on the page */
    height: 100vh; /* Full height of the viewport */
    box-sizing: border-box; /* Include padding and borders in width calculation */
}

/* Homepage styles */
.homepage-content {
    position: relative; /* Ensure .vector-left and .vector-right are positioned relative to .homepage */
    flex: 1; /* Occupy 50% of the left part of the page */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    gap: 0; /* Remove gaps between header and content */
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%; /* Occupy full available width */
    height: 100%; /* Full height of the viewport */
    box-sizing: border-box;
    margin-top: 142px;
}

/* Vector-left */
.vector-left-container {
    position: absolute; /* Position relative to the .homepage */
    top: 40px; /* Place it below the header (same height as the header) */
    left: 0; /* Add some padding from the left */
    width: 130px; /* Adjust the size of the vector */
    height: auto; /* Maintain aspect ratio */
    z-index: -3; /* Ensure it is behind other content */
}

/* Vector-right */
.vector-right-container {
    position: absolute; /* Position relative to the .homepage */
    bottom: 20px; /* Align to the bottom with some padding */
    right: -90px; /* Align to the right with some padding */
    width: 500px; /* Adjust the size of the vector */
    height: auto; /* Maintain aspect ratio */
    z-index: 0; /* Ensure it is behind other content */
}

/* Titolo sotto l'header */
.title {
    color: #eeeeee; /* Colore del testo */
    text-align: left;
    font-family: var(--font-black); /* Font del titolo */
    font-size: 48px; /* Dimensione del font */
    font-weight: 900;
    margin: 20px 0 10px 20px; /* Spaziatura sopra, sotto e a sinistra */
    display: block; /* Assicura che sia un blocco separato */
    margin-left: 30%; /* Aggiungi margine a sinistra */
}

.home-p {
    font-family: var(--font-regular); /* Apply the desired font */
    font-size: 18px; /* Adjust font size */
    line-height: 1.6; /* Improve readability */
    color: #ffffff; /* Make the text white */
    background: none; /* Remove any background color */
    padding: 15px; /* Add padding inside the paragraph */
    padding-left: 30%;
    padding-right: 30%;
    border-radius: 10px; /* Optional: Rounded corners */
    box-shadow: none; /* Remove shadow effect */
    margin-top: 0; /* Ensure no extra margin above */
}

/* News-section styles */
.news-section {
    flex: 1; /* Occupy 50% of the right part of the page */
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove gaps between header and content */
    width: 100%; /* Allow the section to take full width */
    height: 100%; /* Full height of the viewport */
    position: relative;
    box-sizing: border-box; /* Include padding and borders in width calculation */
    background: #742127; /* Background color for the news section */
}

/* Header della news-section */
.news-header {
    height: 142px; /* Altezza uguale all'inizio del dropdown menu */
    width: 100%; /* Mantieni la larghezza completa */
    background: rgba(40, 40, 40, 0.5); /* Colore di sfondo */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.25); /* Ombra più leggera */
    box-sizing: border-box; /* Include padding nel calcolo della larghezza */
}

.news-header-title {
    color: white;
    font-family: var(--font-black); /* Font del titolo */
    font-size: 48px; /* Dimensione del font */
    font-weight: 900;
    margin: 0; /* Rimuovi margini */
    padding: 0; /* Rimuovi padding */
    display: block; /* Assicura che sia un blocco separato */
    text-align: center; /* Centra il testo */
}

/* Contenuto della news-section */
.news-content {
    height: 70%; /* Occupa il restante 70% della sezione destra */
    width: 100%; /* Mantieni la larghezza completa */
    background: #742127; /* Colore di sfondo */
    overflow-y: auto; /* Abilita lo scroll verticale se necessario */
    padding: 0; /* Rimuovi padding */
    box-sizing: border-box; /* Include padding e bordi nel calcolo della larghezza */
}

/* News-list styles */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between articles */
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%; /* Adjust to fit the container */
    padding: 10px; /* Add padding for better spacing */
    box-sizing: border-box; /* Include padding and borders in width calculation */
}

.article {
    border-radius: 23px;
    border-style: solid;
    border-color: #575757;
    border-width: 2px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.25); /* Add shadow effect */
    overflow: hidden;
    background-color: var(--sfondo-scuro); /* Background color */
    transition: transform 0.3s ease;
}

.article:hover {
    transform: translateY(-2px);
}

.article-bg {
    flex-shrink: 0;
    height: 170px; /* Fixed height for the article background */
    position: relative;
}

.article-image {
    flex-shrink: 0;
    width: 170px; /* Fixed width for the article image */
    height: 170px; /* Fixed height for the article image */
    position: absolute;
    left: 0px;
    top: 0px;
    object-fit: cover;
}

.article-intro {
    text-align: left;
    font-family: var(--font-regular); /* Font style */
    font-size: 23px; /* Font size */
    font-weight: 400;
    position: absolute;
    left: 202px; /* Adjusted position */
    top: 32px; /* Adjusted position */
    width: 404px; /* Fixed width */
    height: 109px; /* Fixed height */
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.article-intro span {
    color: #ffffff; /* Text color */
    font-family: var(--font-medium);
    font-size: 23px; /* Font size */
    font-weight: 500;
}

.article-intro a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.article-intro a:hover {
    color: var(--rosso-terna);
}

@media (max-width: 992px) {
    .homepage {
        flex-direction: column; /* Stack homepage and news-section vertically */
    }

    .homepage-content,
    .news-section {
        max-width: 100%; /* Allow sections to occupy full width */
        width: 100%;
    }
    
    .news-content {
        padding: 10px; /* Adjust padding for smaller screens */
    }

    .news-list {
        padding: 10px; /* Adjust padding for smaller screens */
    }
    
    .title {
        font-size: 36px; /* Smaller font size for mobile */
    }
    
    .header {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .news-content {
        padding: 8px; /* Reduce padding for very small screens */
    }
    
    .news-list {
        padding: 8px; /* Reduce padding for very small screens */
    }

    .article-intro span {
        font-size: 18px; /* Smaller font size for article intro */
    }
    
    .article-bg {
        height: 120px; /* Adjust height for smaller screens */
    }
    
    .title {
        font-size: 28px; /* Even smaller font size for very small screens */
    }
    
    .vector-right-container {
        width: 300px; /* Adjust size for smaller screens */
        bottom: 0;
        right: -60px;
    }
    
    .vector-left-container {
        width: 80px; /* Adjust size for smaller screens */
        top: 80px;
    }
}

/* adjust header to the page */
@media (min-width: 992px) {
    .header {
        width: 50%; 
    }
}