body
{
    margin:0;
    padding:0;
    background-color:#222222;
}

section
{
    position: relative;
    display: flex;
    justify-content:center;
    align-items:center;
    min-height:65vh;
}

section div
{
    max-width:800px;
}

section div h2
{
    margin:0;
    padding:center;
    color:#88B625;
    font-size:4em;
    font-family: 'Lexend', sans-serif;
    
}

section div p
{
    font-size:1.2em;
    opacity:0.5;
    font-family: 'Jost', sans-serif;
    text-align:center;
    color:#f1f2ec;

}


.Scrolldown
{
    position:absolute;
    bottom:20px;
    left:50%;
    width:40px;
    height:40px;
    transform:translateY(-40px) translateX(-50%)
        rotate(45deg);
    
}

.Scrolldown span
{
    position:absolute;
    top:0;
    left:0;
    display:block;
    width:100%;
    height:100%;
    border-bottom:2px solid #fff;
    border-right:2px solid #fff;
    animation:animate 1.5s linear infinite;
    opacity:0;
}

.Scrolldown span:nth-child(1)
{
    transform:translate(-15px, -15px);
    color:#fff;
    animation-delay:-0.4s;
}

.Scrolldown span:nth-child(2)
{
    transform:translate(0px, 0px);
    color:#fff;
    animation-delay:-0.2s;
    
}

.Scrolldown span:nth-child(3)
{
    transform:translate(15px, 15px);
    color:#fff;
    animation-delay:0s;
}

@keyframes animate
{
    0%
    {
        top:-5px;
        left:-5px;
        opacity:0;
    }
    25%
    {
        top:0px;
        left:0px;
        opacity:1;
    }
    50%, 100%
    {
        top:5px;
        left:5px;
        opacity:0;
    }
}

.boxattop
{
    display:flex;
    margin:auto;
    float:center;
    padding:center;
    padding-left: 20px;
}

.nav
{
    float:center;
    margin:21px;
    border: 1px solid #fff;
    font-family: 'Jost', sans-serif;
    display: inline-block;
    color: white;
    text-align: center;
    padding: 7px 100px;
    text-decoration: none;
    
}

.container
{
    position:relative;
    width:1200px;
    height:300px;
    margin:auto;
    padding-left:20px;
    background:#222222;
    min-height:50vh;

}

.container .box
{
    position:relative;
    width:calc(300px - 40px);
    height:calc(300px - 30px);
    background:#7E6BDB;
    float:left;
    margin:15px;
    box-sizing:border-box;
    overflow:hidden;
    border-radius:10px;

    
}

.container .box .icon
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#88B625;
    transition:0.5s;
    z-index: 1;
}


.container .box:hover .icon
{
    top:20px;
    left:calc(50% - 40px);
    width:80px;
    height:80px;
    border-radius:50%;
}

.container .box .icon .material-symbols-outlined
{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-size:60px;
    transition:0.5s;
    color:#222222;
}

.container .box .content
{
 position:absolute;
 top:100%;
 height:calc(100% - 100px);
 text-align:center;
 padding:20px;
 box-sizing:border-box;
 transition:0.5s;
 opacity:0;
}

.container .box:hover .content
{
    top:100px;
    opacity:1;
}

.container .box .content h3
{
    margin:0 0 10;
    padding:0;
    color:#fff;
    font-size:24px;
    font-family: 'Lexend', sans-serif;
    
}

.container .box .content p
{
    margin:0;
    padding:0;
    color:#fff;
    font-size:15px;
    font-family: 'Jost', sans-serif;
}

#ButtonTutor
{
    
    float:right;
    background:#7E6BDB;
    border-radius:50%;
    color:#fff;
    font-family: 'Lexend', sans-serif;
    border:none;
    outline:none;
    margin:auto;
}