* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    margin: 0 auto;
    width: 1280px;
    background-color: #3B0270;
}


nav{
    background-color: #FFF1F1;
    height: 60.726px;
    display: flex  ;
    align-items: center;
    justify-content: center;


}
a{
    text-decoration: none;
}

ul{
    list-style: none;
    display: flex;
    flex-direction:row ;
    color: #6F00FF;
gap: 28px;
font-family: 'Montserrat';
font-size: 18px;
}
.service{
    font-style: bold;
}
.navbaritems{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.logo{
    margin-left: 30px;
}
.navbar{
    display: flex;
    flex-direction: row;
    gap: 780px;
}
.hero{
    background-image: url('header.jpg');
    width: 1280px;
    height: 650px;
background-repeat: no-repeat; display: flex;
    flex-direction: column;
}
.header1{
    color: #3B0270;
font-family: 'Montserrat';
font-size: 96px;
font-style: normal;
font-weight: 700;
padding-left: 28px ;
}
.header2{
    color: #3B0270;
font-family: 'Montserrat';
font-size: 96px;
font-style: normal;
font-weight: 700;
padding-left: 132px;
}
.header{
padding-top: 230px;
 
}
.button1{
    
    width: 140.998px;
height: 40px;
border-radius: 42px;
background: #FFF1F1;
border: none;  
color: #3B0270;

font-family: 'Montserrat';
font-size: 18px;
font-style: normal;
font-weight: 500;
align-self: center;
margin-top: 75px;
cursor: pointer;
transition: all 0.3s ease;
}
.button1:hover{
    background: #3B0270;
    color: #FFF1F1;
}
.s1{
    display: flex;
    height: 750px;
    padding: 0 20px;
}
.aboutgym{
    color: #FFF;
font-family: 'Montserrat';
font-size: 40px;
font-style: normal;
font-weight: 700;

}
.s1w{
    display: flex;
    flex-direction: column;
    padding-top:180px ;
}
.s1pp{
    padding-top: 10px;
    color: #FFF;
font-family: 'Montserrat';
font-size: 20px;
font-style: normal;
font-weight: 20;
width: 599.734px;

}
.s1img{
    position: relative;
}
.gym1{
    border-radius: 70px;
position: absolute;
top: 130px;
left: 30px;

}
.gym2{
    border-radius: 80px;  margin-top: 20px;
    position: absolute;
    left:300px;
}
.s2{
    height: 760px;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
}
.s2t{
    color: #FFF;
font-family:'Montserrat';
font-size: 40px;
font-style: normal;
font-weight: 700;

}
.s2pics{
    display: flex;
    flex-direction: row;
    padding-top: 30px;
    gap: 20px;
}
.backgrounddes{
    position: absolute;
    z-index: -1;
    padding-top: 100px;
}
.s2p2p{
    display: flex;
    flex-direction: column;
   gap: 20px;
}
.s2p1{
    border-radius: 60px;
    width: 296.41px;
height: 580px;
}
.s2p2{
    width: 296.41px;
height: 580px;  
    border-radius: 60px;
}

.img1cont{
    position: relative;
    overflow: hidden;
    border-radius: 90px;
}


.hoverblack{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 300ms ease;
}

.blackbox{
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    position: absolute;
}
#gymnast3{
    color: #FFF;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 106.989%; /* 38.516px */
    position: relative;
}

.img1cont:hover .hoverblack{
    opacity: 1 ;
}
#gymnast4{
    color: #FFF;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 106.989%; /* 38.516px */
    position: relative; 
}
#gymnast1{
    color: #FFF;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 106.989%; /* 38.516px */
    position: relative; 
}
#gymnast2{
    color: #FFF;
    font-family: Montserrat;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 106.989%; /* 38.516px */
    position: relative; 
}
footer{
    height: 342px; background-color: #E9B3FB;
    display: flex; flex-direction: column;
}
.footerlogo{
    width: 130px;
    height: 50px;
    padding-left: 20px;
}
.line{
    width: 1220px;
height: 1px;
background: #000;   
}
.footeritems{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
#footercontact{
    padding-top: 10px;
    color: #000;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.ig{
    padding-top: 25px;
    display: flex;
    gap: 10px;
}
#gymnastika{
    color: #000;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
}
#gymnastika1{
    color: #000;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
}
.facebook{
  
    display: flex;
    gap: 10px;
}
.phone{
  
    display: flex;
    gap: 10px;
}
#gymnastika2{
    color: #000;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
}
#terms{
    padding-top: 65px;
    color: #000;
font-family: Montserrat;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}