/* City Section */
#about-city {
    background-color: #FF7720;
    padding: 60px;
    margin: 0;
    text-align: center;
    color: white;
}

.city-title {
    font-size: 2.5em;
    margin-bottom: 40px;
}

.city-content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5vh;
    padding: 0 20px;
}

.city-left, .city-right {
    display: flex;
    flex-direction: column;
    gap: 5vh;
}

.city-left {
    flex: 1;
}

.city-right {
    flex: 1;
}

.image-overlay {
    position: relative;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: flex-start; 
    text-align: center;
    background-size: cover;
    background-position: center;
    padding: 100px;
    padding-top: 40px; /* Additional top padding for spacing */
}

.image-overlay h3 {
    font-size: 3em;
    margin: 0;
}

.image-overlay p {
    font-size: 1em;
    margin: 10px 0 0;
}

/* Custom background images for each section */
.beach {
    height: 80vh;
    width: auto;
    background-image: url("Not Original/beach-tall.jpg");
}

.gastro {
    height: 37.5vh;
    width: auto;
    background-image: url('Not Original/gambas.jpg');
}

.sites {
    height: 37.5vh;
    width: auto;
    background-image: url('Not Original/Castle-of-Denia.jpg');
}

@media (max-width: 1460px) {

    #about-city {
        padding: 60px 30px; /* Adjust padding for medium devices */
    }

    .city-content {
        gap: 5vh; /* Add even spacing between stacked columns */
    }

    .city-right {
        gap: 5vh;
    }

    .image-overlay {
        padding: 20px; /* Reduce padding for image overlay */
    }

    .image-overlay p {
        font-size: 0.9em;
    }

}

@media (max-width: 1024px) {

    #about-city {
        padding: 60px 20px; /* Adjust padding for smaller devices */
    }

    .city-content {
        gap: 5vh; /* Add spacing between columns */
    }

    .city-right {
        gap: 5vh;
    }

    .image-overlay {
        padding: 25px 60px;
    }

    .image-overlay h3 {
        font-size: 2em; /* Adjust heading size */
    }

    .image-overlay p {
        font-size: 0.9em; /* Adjust paragraph size */
    }
}

/* Mobile Adjustments */
@media (max-width: 768px) {

    #about-city {
        padding: 40px 10px; /* Less padding for mobile devices */
    }

    .city-content {
        flex-direction: column; /* Stack columns vertically */
        align-items: center; /* Center items horizontally */
        gap: 20px; /* Add spacing between stacked items */
    }

    .image-overlay h3 {
        font-size: 1.4em; /* Smaller heading size for mobile */
    }

    .image-overlay p {
        font-size: 1em; /* Smaller paragraph size for mobile */
    }

    .beach {
        height: 37.5vh;
    }
}

/* Fine-tuning for smaller devices */
@media (max-width: 600px) {
   
    #about-city {
        padding: 40px; /* Minimal padding for very small devices */
    }

    .city-content {
        padding: 0px;
        gap: 20px; /* Even spacing between stacked columns */
    }

    .city-right {
        gap: 20px;
    }

    .image-overlay {
        padding: 10px; /* Less padding for image overlay */
    }

    .image-overlay h3 {
        font-size: 1.2em; /* Smaller heading size */
    }

    .image-overlay p {
        font-size: 0.9em; /* Smaller paragraph size */
    }

    .beach {
        height: 37.5vh
    }
}