@media screen and (max-width: 800px) {
    .img-section img {
        height: 540px;
    }
}

@media screen and (max-width: 763px) {
    .logo {
        flex: 20%;
    }

    .menu a {
        margin-right: 2%;
    }

    .content-r {
        margin-top: 100px;
    }

    .content {
        margin-bottom: 140px;
    }

}

@media screen and (max-width: 725px) {

    .logo {
        flex: 10%;
        margin-right: 50px;
    }

    .menu {

        flex: 50%;
        justify-content: space-around;
    }
}

@media screen and (max-width: 665px) {
    .container div {
        max-width: 100%;
        flex: 100%;
    }

    .logo {
        display: flex;
        justify-content: center;
        margin-left: auto;
        width: 100%;
        border-bottom: 1px solid black;
        margin-right: 0px;
    }

    .menu {
        margin-top: 10px;
        display: flex;
        justify-content: space-around;
        border-bottom: 1px solid black;
        padding-bottom: 10px;
    }

    .img-section {
        display: none;
    }

    .content {
        margin-bottom: 0px;
        flex-direction: column;
    }

    .content-r {
        margin-top: 100px;
        max-width: 100%;
        margin-left: 5%;
        margin-right: 5%;
    }

    .cards {
        flex-direction: column;
    }

    .explanation {
        align-items: center;
    }

    .explanation div {
        margin-bottom: 20px;
    }

    #card1 {
        margin-right: 0px;
    }

    #card3 {
        margin-left: 0px;
    }

    .img-section2 {
        display: flex;
        width: 100%;
        height: 410px;
        flex-direction: column;
        margin-top: 50px;
        padding-bottom: 0%;
    }
}