body {
    min-height: 100vh;
    width: 100vw;
    background: url('../assets/bg.png') no-repeat;
    background-size: cover;
    background-attachment: fixed;
    overflow-x: hidden;
}

.container {
    width: 100%;
    overflow-x: hidden;
}

.grid {
    width: 100%;
    display: grid;
    grid-template-columns: calc(100vw - 100px) 100px;
    grid-template-rows: 100px calc(100vh - 100px);
}

header {
    display: grid;
    grid-template-columns: 150px 1fr;
    align-items: center;
    padding: 0px 0 0 100px;
    height: 100px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.content {
    position: relative;
    padding: 0px 5em;
}

.main {
    display: flex;
}

.main-content {
    margin-left: 5em;
}

footer {
    background-color: var(--black);
    margin-left: 0;
    position: absolute;
    left: -2.7em;
    bottom: -4em;
    padding: 1em;
    width: 110%;
}

footer .social-links {
    transform: rotate(0deg);
    position: relative;
    bottom: 0;
    right: 0;
    background-color: var(--black);
    height: 100%;
    justify-content: center;
} 

footer .social-links > * {
    margin-right: 20px;
}

.show-991.address {
    position: relative;
    bottom: 0;
    right: 0;
    margin-top: 2em;
}

.developed-by.show-991 {
    position: relative;
    text-align: center;
    background-color: rgba(0,0,0,0.6);
    margin-top: 3em;
    padding: 2em 0;
}

.developed-by.show-991 .builder-icon {
    margin-left: 0;
}

.whatsapp.show-991 {
    position: absolute;
    bottom: 1em;
    right: 0;
}

.show-991 {
    display: none;
}

@media only screen and (max-width: 991px) {
    body {
        background-position: -50em;
    }
    .hide-991 {
        display: none;
    }

    .show-991 {
        display: block;
    }

    .pagination.show-991 {
        display: grid;
        margin-top: 2em;
    }

    .content {
        grid-column: 1 / -1;
    }

    header, .content {
        padding: 0px 25px;
    }

    .main-content {
        margin-left: 0em;
        position: relative;
    }

    .banner-text {
        margin-top: 40px;
        max-width: calc(100% - 12px);
    }

    .primary-button {
        width: calc(100% - 12px);
    }

    .desc {
        margin-top: 10vh;
    }

    .secondary-info {
        position: relative;
        margin-top: 40vh;
        width: 100%;
    }
}

@media only screen and (max-width: 1400px) and (max-height: 768px) {
    .banner-text {
        font-size: 1.5em;
        margin-top: 30px;
    }
    
    .pagination.vertical span:first-child {
        margin-top: 50px;
    }

    .pagination.horizontal {
        display: none;
    }

    body {
        background-position: -5em -7em;
    }
}

@media only screen and (max-width: 450px) and (max-height: 850px) {
    body {
        background-position: -65em;
    }
}

@media only screen and (orientation: landscape) {
    .pagination.horizontal {
        display: none;
    }
}

@media only screen and (max-width: 414px) and (max-height: 900px) {
    body {
        background-position-x: -72em;
    }
    
    .pagination.horizontal {
        display: grid;
    }

    .secondary-info {
        width: 100%;
    }

    .desc p {
         margin: -3em 0;
    }
}

@media only screen and (max-width: 414px) and (max-height: 750px) {
    body {
        background-position-x: -55em;
    }
}

@media only screen and (max-width: 375px)    and (max-height: 830px) {
    body {
        background-position: -65em;
    }
}

@media only screen and (max-width: 375px) and (max-height: 740px) {
    body {
        background-position: -60em;
    }
}

@media only screen and (max-width: 375px) and (max-height: 667px) {
    body {
        background-position: -50em;
    }
}

@media only screen and (max-width: 320px) and (max-height: 570px) {
    body {
        background-position: -42em;
    }
}