body {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-color: rgba(236,239,241,255)
}

.tab {
    display: flex;
    justify-content: center;
    margin-top: 90px; /* Adjust the margin to create space above the tab buttons */
}

/* CSS for tab buttons */
.tab button {
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 15px 200px; /* Adjusted padding for buttons */
    transition: 0.3s;
    align-items: center;
    color: white;
    background-color: #18cd84;
    font-size: 14px; /* Adjusted font size */
}

/* Media query for smaller screen sizes */
@media (max-width: 768px) {
    .tab button {
        padding: 15px 60px; /* Decreased padding for smaller screens */
        font-size: 12px; /* Decreased font size for smaller screens */
    }
}

.tab button:hover {
    background-color: ;
}

.tab button.active {
    background-color: #219567;
}

/* CSS for tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border-top: none;
    text-align: center;
}

/* CSS for different tab colors */
.london {
    background-color: lightblue;
}

.paris {
    background-color: lightgreen;
}

/* CSS for image hover effect */
.tabcontent img {
    transition: transform 0.3s ease-in-out;
    width: 200px;
    margin-right: 10px;
}

.tabcontent img:last-child {
    margin-right: 0;
}

.tabcontent img:hover {
    transform: scale(1.1);
}

/* CSS for name below image */
.img-container {
    display: inline-block;
    text-align: center;
}

.img-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.item-container {
    flex: 0 0 calc(25% - 20px); /* 25% width for each item with 20px margin */
    margin: 10px;
    text-align: center;
}

img {
    width: 150px;
    height: 150px;
    padding: 4px;
}