* {
padding: 0px;
margin: 0px;
text-decoration: none;
box-sizing: border-box;
border: none;
/* outline: 1px solid red; */
font-family: "Comic Sans MS";
                
}

body {
font-weight: 400;
font-style: normal;
font-size: 16px;
color: rgb(5, 5, 5);
background-color: rgb(228, 197, 148);

}

.wrapper {
width: 100%;
/* max-width: 1200px; */
padding: 0 40px; /* padding αριστερά-δεξιά */
}

header {
width: 100%;
height: 120px;
display: flex;
justify-content: space-between;
align-items: center;
}

            .phone {
                text-decoration: none;
                color: black;
            }


            /*nav {*/
            /*    display: flex;*/
            /*    gap: 15px;*/
            /*    margin-left: auto;*/
            /*}*/

            /*nav a {*/
            /*    color: black;*/
            /*    font-weight: bold;*/
            /*    display: inline-block;*/
            /*    padding: 5px 10px;*/
            /*    font-size: 16xp;*/
            /*    transition: all 0.5s;*/
            /*}*/

            /*nav a:hover {*/
            /*    color: rgb(118, 70, 26);*/
            /*    text-decoration: underline;*/
            /*    text-underline-offset: 4px;*/
            /*}*/

            main {
                width: 100%;
            }

.mazomos-top {
                background-image: url(./topimg.jpg);
                background-size: cover;
                background-position: center;
                width: 100%; 
                height: 400px;
                color: rgb(244, 243, 242);
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                padding: 20px;
            }

            .mazomos-top h1 {
                font-size: clamp(32px, 8vw, 92px);
                text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
                margin-bottom: 10px;
            }

            .mazomos-top p {
                font-size: clamp(16px, 4vw, 32px);
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
            }

            .piata{
                margin-bottom: 48px;
            }

            .piata h1 {
                font-size: 48px;
                margin-bottom: 30px;
                line-height: 120%;
                text-align: center;
            }

            .piata div {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
            }

            .piata div figure{
                width: 23.5%;
                display: flex;
                flex-wrap: wrap;
            }

            .piata div figure img {
                width: 100%;
            }

            .piata div figure figcaption{
                text-align: center;
            }

            .piata div figure figcaption h2{
                font: 18px;
                font-weight: normal;
            }

            .piata p{
                text-align: center;
                margin-top: 30px;
            }
.history{
margin-bottom: 48px;
            }

            .history h1 {
                font-size: 48px;
                margin-bottom: 30px;
                line-height: 120%;
                text-align: center;
            }

            .history div {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
            }

            .history div img{
                width: 45%;
            }

            .history div p{
                width: 45%;
            }


            /* .history div{
                display: flex;
                flex-wrap: nowrap;
                flex-direction: row;
                justify-content: space-around;
                margin-bottom: 50px;
            }

            .history div figure{
                width: 45%;
            }
            
            .history  img{
                width: 100%;
            }

            .history  p {
                width: 100%;
            } */
            
            footer .time{
                padding: 30px;
            }
            
            .time .map .fb .insta {
                width: 30%;
            }

            .end {
                display: flex;
                justify-content: space-evenly;
                padding: 30px;
            }

            footer div .social h2{
                padding-bottom: 80px;
            }

            footer div .map h2{
                padding: 30px;
            }

            footer div .map a{
                text-decoration: none;
                color: black;
            }

            footer div .map iframe{
                width: 300px;
                height: 300px;
            }

            footer .end div{
                text-align: center;
            }

            footer div .social{
                width: 30%;
                display: flex;
                justify-content: space-evenly;
                flex-direction: column;
                padding: 30px;
            }

            footer div .social img{
                width: 80px;
            }

            footer div .f-i{
                display: flex;
                justify-content: space-evenly;
flex-direction: row;
}
            
@media (max-width: 768px) {
.wrapper {
padding: 0 20px; /* λιγότερο padding σε tablets */
}

header {
height: auto;
padding: 20px 0;
flex-direction: column;
gap: 15px;
}

nav {
flex-wrap: wrap;
justify-content: center;
}

.piata div figure {
width: 49%;
 margin-bottom: 1.5rem;
}

.history div {
    flex-direction: column;
}
    
.history div img {
width: 100%;
}
    
.history div p {
width: 100%;
}

footer .end{
flex-direction: column;
justify-content: space-around;
}

footer div .social {
width: 100%;
}

}

@media (max-width: 480px) {
.wrapper {
padding: 0 10px; /* ακόμα λιγότερο σε mobiles */
}

nav a {
font-size: 0.9rem;
padding: 5px 8px;
}

.mazomos-top {
height: 20%;
}

.piata div figure {
width: 100%;
margin-bottom: 1.5rem;
}

footer div .social{
 width: 100%;
}
}