*, *::after, *::before{
    box-sizing: border-box;
}
body{
    overflow-x: hidden;
    background: #00908A;
    font-family: 'Lato', sans-serif;
}
img{
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: contain;

}
.wrapper{
    height: 100vh;
    width: 100%;
 
    position: absolute;
    top: 0;
    right: 0;
}
.container{
    max-width: 1110px;
    padding: 0px 10px;
    margin: 0px auto;
}
 /* ANIMATION */
 #smile{
    animation: smileAnim 2s infinite linear;
    transform-origin: center;
    transform-box: fill-box;
 }
 #body{
    animation: bodyAnim 3s infinite linear;
    transform-origin: center;
    transform-box: fill-box;
 }
 #smile{
    animation: smileAnim 3s infinite linear;
    transform-origin: center;
    transform-box: fill-box;
 }
 #r-eae, #l-eye{
    animation: smileAnim 3s infinite linear;
    transform-origin: center;
    transform-box: fill-box;
 }
 @keyframes smileAnim{
        from{
            transform: rotateX(0deg);
        }to{
            transform: rotateX(20deg);
        }
    }
    @keyframes bodyAnim{
        0%{
            transform: rotateX(0deg);
        }50%{
            transform: rotateX(20deg);
        }100%{
            transform: rotateX(0deg);
        }
    }
    .top{
       
        animation: Anim 1s linear;
        transform-origin: center;
        transform-box: fill-box;
        max-width: 100px;
    }
    .top__block{
        display: flex;
        align-items: center;
        max-width: 600px;
        /* justify-content: space-between; */
    }
    .top__block h1{
        max-width: 463px;
        font-style: normal;
        font-weight: bold;
        font-size: 36px;
        line-height: 54px;
        text-transform: uppercase;
        padding: 0px 10px;
        margin-left: 20px;
        color: #FFFFFF;
    }
    @keyframes Anim{
        0%{
            transform: rotate(25deg);
        }
        100%{
            transform: rotate(0deg);
        }
    }
 .item-top{
    opacity: 0;
    transition: all 0.2s ease 0s;
    transform: rotateY(10deg);
 }
 .item-top._active{ 
    transform: rotateY(0deg);
    opacity: 1;
    transition: all 0.6s ease 0s;
 }
 
 .item{
    opacity: 0;
    transition: all 0.3s ease 0s;
    transform: translate(-8%, 0%);
 }
 .item._active{
   transform: translate(0%, 0%);
   opacity: 1;
 }
 .item._active:nth-child(1){
   transition: all 0.8s ease 0s;
 }
 .item._active:nth-child(2){
   transition: all 0.8s ease .1s;
 }
 .item._active:nth-child(3){
   transition: all 0.8s ease .2s;
 }
 .item._active:nth-child(4){
    transition: all 0.8s ease .3s;
  }
  .item._active:nth-child(5){
    transition: all 0.8s ease .4s;
  }

/* ANIMATION END */
.top{
    margin: 142px 0px 155px;
}
.content{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(238px, auto));
    grid-column-gap:30px ;
    text-align: center;
}
.content__item{
    margin-bottom: 50px;
}
.content__item h3{
    font-weight: bold;
    font-size: 24px;
    line-height: 152%;
    color: #FFFFFF;
    padding: 0px;
    margin: 0px;
}
.content__item p{
    font-weight: normal;
    font-size: 24px;
    line-height: 152%;
  
    color: #FFFFFF;
    padding: 0px;
    margin: 0px;
}
.bottom h2{
    font-weight: bold;
    font-size: 40px;
    line-height: 48px;
    color: #FFFFFF;
}
.bottom{
   
    margin-top: 8%;
    display: flex;
    justify-content: end;
   
}
@media screen and (max-device-height: 568px) and (orientation: landscape){
    .top__block h1{
        max-width: 250px;
        font-size: 20px;
        line-height: 1.4;
    }
    .top{
        margin: 30px 0px 45px;
        max-width: 260px;
    }
    .bottom{
        margin-top:0px;
    }
    .content__item{
        margin-bottom: 30px;
    }
    .content__item h3 {
        font-size: 18.5px;
    }
    .bottom h2 {
        font-size: 25px;
        line-height: 25px;

    }
}

@media  (max-width: 650px){
    
    .top{
        margin: 70px 0px 60px;
    }

    .bottom{
        margin-top: 0px;
        
    }
    .content__item p{
        font-size: 19px;
        line-height: 1.3;
    }
    .bottom h2{
        font-size: 25px;
        line-height: 1.4;
        
    }
    .bottom h2{
        font-size: 30px;
        line-height: 35px;
    }
    .top__block h1{
        max-width: 463px;
        font-size: 19px;
    }
}