/*Base styles */
*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
    font-family:url(ABCMonumentGroteskGreekVariableVF-Trial.ttf);
    list-style: none;
}
img{
    max-width: 100%;
    width: 100%
}

.body{
    background-color:#E7DCD2;
}
.header{
    background-image:url(DSCF7764.JPG);
    background-size: cover;
    height:900px;
}
.nav{
    display:flex;
    justify-content: space-between;
    align-items: center;
    position:fixed;
    background-color: rgba(255, 255, 255, 0.3);
    width: 100%;
    top:20px;
    height: 48px;
    border-radius:32px;
}
.nav a{
    color:#333;
    text-decoration: none;
}
.nav a.active{
    background-color: #ff9b28;
    color:white;
    padding:6px 16px;
    border-radius:20px;
}
.top{
    display: flex;
    list-style: none;
    display:flex;
    gap: 4rem;
}
.log{
    border:1px solid #333;
    background-color: transparent;
    border-radius:16px;
}
.title{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-self: start;
    top:400px;
    left:60px;
    color: antiquewhite;
}
.title1{
    font-size: 32px;
    margin-bottom:12px;
}
.title2{
    font-weight: normal;
    font: size 16px;
    margin-bottom:24px;
}

.start{
    background-color: #ff9b28;
    position:absolute;
    top: 600px;
    margin-left:690px;
    width: 60px;
    border-radius:20px;
}

.activities-title{
    margin-top: 200px;
    margin-left: 110px;
    display: flex;
    flex-direction: column;
    align-self: start;
}
.fairs{
    display:flex;
    justify-content: center;
    gap: 20px;
    margin-top: 100px;
    margin-left: 30px;
    margin-right: 30px;
}
.fair1{
    flex-direction: column;
    width: 161px;
    height: 285px;
}

.fair2{
    flex-direction: column;
    width: 161px;
    height: 285px;
}

.fair3{
    flex-direction: column;
    width: 161px;
    height: 285px;
}

.fair4{
    flex-direction: column;
    width: 161px;
    height: 285px;
}

.fair5{
    flex-direction: column;
    width: 161px;
    height: 285px;
}

.fair6{
    flex-direction: column;
    width: 161px;
    height: 285px;
}

.fair7{
    flex-direction: column;
    width: 161px;
    height: 285px;
}

.goods{
    display: flex;
    flex-wrap: wrap;
}

.goods1{
    border:none;
    display:flex;
    flex-direction: row;
    gap: 20px;
    margin-left: 230px;
    margin-right: 230px;
    margin-top: 250px;
}

.goods2{
    border:none;
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-left: 230px;
    margin-right: 230px;
}

.article-goods{
    margin-left: 230px;
    margin-right: 230px;
}

.shops{
    margin-top: 200px;
    margin-right: 420px;
    margin-left: 420px;
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;

}

.shops1234{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.shops1{
    display: flex;
    flex-direction: column;
}

.shops2{
    display: flex;
    flex-direction: column;
}

.shops3{
    display: flex;
    flex-direction: column;
}

.shops4{
    display: flex;
    flex-direction: column;
}

.shops5{
    display: flex;
    flex-direction: column;
}

.parks{
    margin-top: 230px;
}

.parks-head{
    background-image:url(111.jpg);
    background-size: cover;
    height:900px;
}
.parks-title{
    position: absolute;
    top: 5700px;
    margin-left: 300px;
    color: antiquewhite;
}

.parks-head-photoes{
    position: absolute;
    top: 5800px;
    margin-left: 300px;
    margin-right: 300px;
    display: flex;
    gap: 60px;
    justify-content: center;
    align-items: center;
}

.parks-lying{
    margin-top: 150px;
    margin-left: 320px;
    margin-right: 320px;
    row-gap: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.lying-title{
    margin-top: 100px;
    color: antiquewhite;
}
.lying1{
    margin-top: 30px;
    display: flex;
    align-items: flex-end;

}
.people1{
    width: 400px;
    height: auto;
}
.ly-1{
    width: 400px;
}
.lying2{
    display: flex;
    align-items: flex-end;
}
.people2{
    width: 400px;
    height: auto;
}
.ly-2{
    width: 400px;
}
.lying3{
    display: flex;
    align-items: flex-end;
}
.lying-title2{
    color: antiquewhite;
}
.people3{
    width: 400px;
    height: auto;
}
.ly-3{
    width: 400px;
}

.parkview{
    margin-top: 100px;
}
.view1234{
    display: flex;
}
.view1{
    display: flex;
    flex-direction: column;
    align-items: start;
}
.view2{
    display: flex;
    flex-direction: column;
    align-items: start;
}
.view3{
    display: flex;
    flex-direction: column;
    align-items: start;
}
.view4{
    display: flex;
    flex-direction: column;
    align-items: start;
}

.view5678{
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.view5{
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: start;
}
.view6{
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: start;
}
.view7{
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: start;
}
.view8{
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.footer{
    background-color:#E7DCD2;
}

.footer-title{
    margin-top: 300px;
    display: flex;
    justify-content: center;
}

.information{
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.platform{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.footer-photo{
    width: 280px;
    display: flex;
    justify-content: center;
    margin-top: 150px;
    margin-left: 600px;
    margin-right: 580px;
}
#h3{
    font-size: 12px;
}
#p{
    font-size: 10px;
}