body{
    background-color: #1D334A;
}

header{
    color: #FFF5EE;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 55px;
    font-family: "Gruppo",sans-serif;

}


.section-one{
    background-color: #fffff0;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-one h2{
    color: #1D334A;
    font-size: 36px;
}

.section-two{
    background-color: #1D334A;
    height: auto;
    padding: 20px;
}

.section-two .image-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    width: 80%;
    gap: 20px;
    text-align: center;
    margin: 0 auto;
}

.section-two .image-container img {
    width: 65%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0,3s ease;
}

.section-two .image-container img:hover {
    transform: scale(1.05);
}

.section-two .image-container .text-box {
    width: 100%;
    margin-top: 10px;
    font-size: 14px;
    color: #FFF;
}

.section-three {
    background-color: #fffff0;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
}

.section-three .image-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    width: 100%;
    text-align: center;
}

.section-three .image-container img {
    width: 130%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3 ease;
}

.section-three .image-container img:hover {
transform: scale(1.05);
}

.section-three h2 {
    color: #1D334A;
    font-size: 36px;
    text-align: center;
    margin-bottom: 20px;
}

.section-four{
    background-color: #1D334A;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-four .content {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    margin-bottom: 20px;
}

.section-four h2 {
    color: #F0EAD6;
    font-size: 36px;
    margin-bottom: 20px;

}

.section-four p {
    color: #FFF5EE;
    font-size: 18px;
    margin-bottom: 20px;
}

.section-four .image-container{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: auto;
    width: 100%;
    text-align: center;
    transform: translateX(8%);
}

.section-four .image-container img{
    width: 60%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    transform: translateX(8%);
}

.section-four .image-container img:hover {
    transform: scale(1.05);
}

.section-five{
    background-color: #fffff0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.section-five h2 {
    margin-bottom: 20px;
    font-size: 36px;
    color: #1D334A;
}

.section-six{
    background-color: #1D334A;
    height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container-navigation{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

button{
    border: 1px solid;
    border-radius: 5px;
    font-size: large;
    padding: 10px;
    margin: 2px;
    transition-duration: .5s;
    background-color: #faf9f6;
    color: #FFF5EE;
}

button:hover{
    background-color: #FFF8DC;
    color: #FFF5EE;
}

button:active{
    background-color: #171733;
    box-shadow:0 5px #F0EAD6;
    transform: translateY(4px);
}

img{
    height: auto;
    width: 30%;
    display: flex;
    align-items: center;
}

.content {
    display: flex;
    align-items: center;
}

.content img { 
    margin-right: 20px; 
    width: 400px;
    height: auto;
}

.text {
    max-width: 500px;
}

.shadow-image {
    transition: box-shadow 0.3s ease;
    display: block;
    border-radius: 8px;
}

.shadow-image:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}

.media-container{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.word-container {
    display: flex;
    justify-content: center;  /* This centers the images horizontally */
    align-items: center;      /* This centers the images vertically */
    margin: 200px auto 20px auto;
    width: 80%;
    text-align: center;
    flex-wrap: wrap;
}

.word{
    width: 23%;
    height: auto;
    margin-bottom: 10px;
}

.image-row {
    display: flex;
    flex-wrap: wrap; /* Allow images to wrap */
    justify-content: center; /* Center the images */
    gap: 20px; /* Add some space between images */
    width: 80%;
    text-align: center;
}

.image-row img {
    width: calc(25% - 10px); /* Make each image take up 25% of the container's width minus some space */
    height: auto;
    border-radius: 5px; /* Optional: To round the corners of the images */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Optional: Add shadow to images */

}

.image-container{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    width: 80%;
    gap: 20px;
    text-align: center;
   
}

.image-container img{
    width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.image-container p{
    margin-top: 10px;
    font-size: 14px;
    color: #333;
}

#Typo{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    margin-top: 20px;
}

#Typo h2 {
    font-size: 40px;
    color: #1D334A;
    margin-bottom: 20px;
}


.section-two img {
    width: 22%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.section-two img:hover {
    transform: scale(1.05);

}

.section-two h2 {
    color: #F0EAD6;
    font-size: 36px;
    text-align: center;
    margin-bottom: 20px;
}

.poster{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    overflow: visible;

}

.poster img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.poster img:hover {
    transform: scale(2);
}

.poster p {
    margin-top: 10px;
    font-size: 14px;
    color: #FFF5EE;
    text-align: center;
}

.section-three .image-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
    width: 80%;
    margin: 0 auto;
    text-align: center;
}