@font-face{
    font-family: 'Oswald';
    src: url('/static/fonts/Oswald-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-family: 'Raleway';
    src: url('/static/fonts/Raleway-VariableFont_wght.ttf');
}

@font-face{
    font-family: 'Lato';
    src: url('/static/fonts/Lato-Regular.ttf')
}

@font-face {
    font-family: 'Poppins';
    src: url('/static/fonts/Poppins-Medium.ttf');
}

@font-face{
    font-family:'Nunito';
    src: url('/static/fonts/Nunito-VariableFont_wght.ttf');
    font-weight:bold;
}

#learn-more{
    margin-bottom: 0;
    background-color: rgb(30,30,30);
    color: white;
    text-align: left;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
    padding-top:50px;
    overflow-x: hidden;
}

.start-button{
    line-height:100px;
    text-align:center;
    margin: auto;
    width: 300px;
    font-size:30px;
    background-color: rgb(60,60,60);
    padding: 0px;
    margin-bottom:50px;
    border-radius:50px;
    transition: 0.2s ease-in-out;
    z-index:4;
    font-family:'Nunito', sans-serif;
}

.start-button:hover{
    background-color:rgb(45, 45, 45);
    transition: 0.2s ease-in-out;
}

.learn-grid{
    margin-left:50px;
    display: grid;
    column-gap: 0px;
    grid-template-columns: 1fr 1fr;
    justify-content: left;
    margin-bottom: 20px;
}

.learn-left-item{
    border: none;
    width: 75%;
    height: 100%;
    display:flex;
    flex-direction: column;
}

.learn-container{
    border: none;
    width: 400px;
    text-align:left;
}

.special-container{
    border: none;
    line-height:40px; 
    width:82%; 
    height:100%;
}

.learn-right-item{
    border: none;
    width: 100%;
    height: 100%;
    display: block;
    line-height:45px;
    font-size:30px;
    z-index:4;
}

.learn-right-item .services-button{
    font-size:30px;
    transform: translateX(-7px);
}

#copyright{
    width:100%
}

.outline-green{
    color:transparent;
    -webkit-text-stroke: 2px greenyellow;
    mix-blend-mode:lighten;
    font-size:90px;
    text-align:center;
    margin-bottom:50px;
    margin-top:100px;
    line-height:90px;
    font-family: 'Oswald', sans-serif;
    font-weight: bolder;
}

@media (max-width: 1150px) and (min-width:601px) { 

    .learn-grid{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; 
        text-align:center;
        margin-left:0;
    }

    .learn-container{
        align-self:center;
    }

    .learn-container.special-container {
        width:300px;  
        text-align: center; 
    }

    #copyright {
        width:80%;
    }
    
    .learn-left-item{
        margin-bottom:20px;
    }
    
    .learn-right-item .services-button{
        transform: translateX(1.5px);
    }
}

@media (max-width: 600px) { 

    .learn-grid{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; 
        text-align:center;
        margin-left:0;
    }

    .learn-container{
        align-self:center;
        width:280px;
    }

    .learn-container.special-container {
        width:300px;  
        text-align: center; 
    }

    #copyright {
        width:80%;
    }
    
    .learn-left-item{
        margin-bottom:20px;
    }
    
    .learn-right-item .services-button{
        transform: translateX(1.5px);
    }
    
    .outline-green{
        font-size:55px;
        line-height:55px;
        margin-bottom:30px;
    }
    
    .start-button{
        font-size:30px;
        width:270px;
        line-height:80px;
    }
}

.circle{
    border-radius:50px;
    background-color:rgb(240,240,240)
}

.circle:hover{
    background-color:greenyellow;
}