.welcome-container{
            max-width: 1100px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        .hero {
            background: var(--header);
            color: var(--inbox);
            padding: 3rem 2rem;
            border-radius: 10px;
            text-align: center;
            margin-bottom: 2rem;
        }
        .hero h1 {
            margin: 0 0 1rem 0;
            font-size: 1.5rem;
            text-transform: uppercase;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--outbox);
        }
        .hero p {
            font-size: 1.2rem;
        }
        .section {
            margin-bottom: 2.5rem;
        }
        .section h2 {
            color:var(--main);
            margin-bottom: 1rem;
        }

.gallery{
    display: flex;
    align-self: center;
    justify-content: center;
    margin-top: 40px;
    background-color: var(--outbox);
}
.gallery div{
    display: flex;
    margin:20px ;
    gap: 20px;
}
.gallery img{
    height: 50vh;
    width: 20vw;
    border: 5px solid var(--inbox);
    border-radius: 20px 0px 20px 0px;
}
@media (max-width:568px) {
    .gallery div{
    display: flex;
    flex-direction: column;
}
.gallery img{
    height: 50vh;
    width: 80vw;
}
}