@media screen and (max-width: 1100px) {
    .menu {
        margin: 0 0.62em;
    }
    .hero-banner {
        background-image: url(../images/bg_topo_1198x670.jpg);
        background-repeat: no-repeat;
        background-position: bottom;
        height: 37em;
    }
    .hero-header .icon {
        font-size: 5em;
    }
    .hero-header h1 {
        font-size: 1.34em;
    }
    .hero-header p {
        font-size: 0.96em;
    }
    .hero-header {
        top: 68%;
        right: -46.5%;
        transform: translate(-50%, -50%);
    }
    .main-content {
        margin: 3.12em 2.25em 0;
    }
    .main-content h1 {
        color: #652E78;
        font-size: 1.2em;
    }
    .main-content-section:not(:first-child) h1 {
        font-weight: normal;
        letter-spacing: 0.31em;
    }
    .row .col-3 {
        width: 50%;
        padding: 2em;
    }
    .row .col-6 {
        width: 100%;
        padding: 0.62em;
    }
    .main-content-section .btn-default {
        float: right;
    }
}

@media screen and (max-width: 950px) {
    .hero-banner {
        background-image: none;
        background-color: #521A66;
        height: 19em;
    }
    .hero-header {
        top: 50%;
    }
}

@media screen and (max-width: 660px) {
    .menu {
        margin: 0;
    }
    .hero-banner {
        background-color: transparent;
        height: fit-content;
    }
    .logo {
        float: none;
        width: max-content;
        margin: auto;
    }
    .menu ul {
        text-align: center;
        padding: 0;
        margin: 0;
    }
    .menu li {
        color: #fff;
        background-color: #521A66;
        display: block;
        padding: 1em 0.9em 1em 0.9em;
    }
    .menu a {
        display: block;
        color: #fff;
        transition: none;
    }
    .menu li a:hover {
        transform: none;
        border-bottom: none;
    }
    .hero-header {
        position: static;
        text-align: center;
        color: #fff;
        transform: none;
        margin: 0.9em;
    }
    .hero-header .icon {
        font-size: 0;
    }
    .hero-header h1 {
        color: #521A66;
    }
    .hero-header p {
        color: #B97BB7;
    }
    .row .col-3 {
        width: 100%;
        padding: 2em;
    }
    .row .col-6 {
        width: 100%;
        padding: 0.62em;
    }
    .main-content-section .btn-default {
        float: none;
    }
}