.footer{
    margin-top: 20px;
}

/* Showcase styling*/
.showcase{
    height: 400px;
    margin-top: 1px;
    background-color: var(--primary-color);
    color: #FFF;
    position: relative;
}

.showcase h1{
    font-size: 50px;
}

.showcase p{
    margin: 20px 0;
    font-size: 18px;
}

.showcase a{
    font-size: 18px;
}

.showcase .grid{
    overflow: visible;
    grid-template-columns: 55% 42%;
    gap: 30px;
}

.showcase-img{
    margin-top: 15px;

    overflow: visible;
    height: 410px;
    width: 410px;

    padding: 20px;
    z-index: 100;
    justify-self: flex-end;
}

/* About */
.about{
    margin-top: 35px;
    color: var(--primary-color);
}

.about .grid img{
    width: 80px;
}

.about h3{
    font-size: 19px;
}

.about .grid h4{
    font-size: 19px;
}

.about hr{
    max-width: 1100px;
    margin-top: 30px;
    margin-bottom: 30px;
    
    border-width: 0.5px;

    margin-left: auto;
    margin-right: auto;
}

/* Worst case scenario */
.scenario{
    margin-top: 30px;
}

.scenario .grid{
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.scenario .grid > *:first-child{
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

.scenario .grid img{
    border-radius: 10px;
}

.scenario .grid .card h3{
    font-size: 18px;
    text-align: center;
}

/* Teaching */
.teaching{
    margin-top: 75px;
}

.teaching .container{
    padding: 10px;
    max-width: 900px;
}

.teaching .container p{
    font-size: 18px;
}

.teaching .container h2{
    border-bottom: 2px #FFF solid;
}

/* Benefits*/
.benefits{
    margin-top: 45px;
    margin-bottom: 60px;
}

.benefits .flex{
    flex-wrap: wrap;
}

.benefits h3{
    font-size: 50px;
    font-weight: 100;
}

.benefits .card{
    text-align: center;
    margin: 18px 10px 40px;
    margin-bottom: 10px;
    transition: transform 0.2s ease-in;
}

.benefits .card h4{
    font-size: 18px;
    color: var(--primary-color);
}

.benefits .card:hover{
    transform: translateY(+15px);
}

/* Responsiveness */

/* Laptops */
@media(max-width: 1024px){
    .container{
        max-width: 1000px;
    }
}

/* Tablets and under */
@media(max-width: 850px){
    .navbar .logo{
        margin-left: 10px;
    }

    .footer{
        padding: 0px;
        margin-top: 70px;
    }

    .footer .grid{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        
        text-align: center;
        font-size: larger;
    }

    .footer .grid h1{
        margin-top: 30px;
        font-size: 35px;
    }

    .footer a{
        font-size: 20px;
    }

    .footer li{
        margin: 10px 0;
    }

    .grid, 
    .showcase .grid, 
    .about .grid, 
    .scenario .grid, 
    .teaching .grid, 
    .benefits .grid{
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .showcase{
        height: auto;
    }

    .showcase-text{
        font-size: small;
        text-align: center;
        margin-top: 20px;
        margin-left: 10px;
        margin-right: 10px;
    }

    .showcase-img{
        width: 98%;
        height: 96%;
        justify-self: center;
        margin: auto;
    }

    .scenario .grid > *:first-child{
        grid-column: 1;
        grid-row: 1;
    }

    .scenario img{
        width: 95%;
        margin: 0px 10px;
    }

    .teaching{
        margin-top: 50px;
    }

    .benefits{
        margin-top: 35px;
    }

    .benefits .card{
        margin-bottom: 5px;
    }
}

/* Mobile */
@media(max-width: 550px){
    .navbar{
        height: 110px;
    }

    .navbar .flex{
        flex-direction: column;
    }

    .navbar .logo{
        margin-top: 15px;
        margin-left: auto;
        margin-right: auto;
        width: 360px;
    }

    .navbar ul{
        padding: 10px;
    }

    .footer .grid h1{
        margin-top: 25px;
        font-size: 25px;
    }
    
    .footer .grid{
        font-size: small;
    }
}

/* Small Mobile */
@media(max-width: 370px){
    .navbar .logo{
        margin-top: 15px;
        margin-left: auto;
        margin-right: auto;
        width: 310px;
    }

    .footer{
        padding: 0px;
    }

    .footer .container h1{
        margin-top: 30px;
        font-size: 22px;
    }
}