@import url(https://fonts.bunny.net/css);

/* Set height to 100% for body and html to enable the background image to cover the whole page: */
body,
html {
    height: 100%;
    font-family: 'Amethysta' !important;
}

body {
    /* Background image */
    background-image: linear-gradient(to right, #088b439d, #929292da), url('../images/landing/maputo.jpg');
    /* Full-screen */
    height: 100%;
    /* Center the background image */
    background-position: center;
    /* Scale and zoom in the image */
    background-size: cover;
    /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
    position: relative;
    /* Add a white text color to all elements inside the .bgimg container */
    color: #088B42;
    /* Add a font */
    font-family: "Assistant", sans-serif;
    /* Set the font-size to 25 pixels */
    font-size: 25px;
    overflow: hidden;
}

/* Position text in the bottom-left corner */
.bottomleft {
    position: absolute;
    bottom: 0;
    left: 16px;
}

/* Position text in the middle */
.middle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.navbar {
    background-color: #088B42;
}

.nav-link {
    color: white !important;

}

.navbar-brand {
    color: white !important;
}

/* Style the <hr> element */
hr {
    margin: auto;
    width: 40%;
}

.middle i {
    color: #088B42 !important;
    font-size: 50px;
    padding: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    margin: 20px;
}

.middle i:hover {
    transform: scale(1.5);
}

.bgnoimg {
    height: 100%;
}

.btn-primary {
    background-color: #088B42 !important;
}
.middle p{
    color: white;
}
.middle h1{
    color: white;
}

.middle p{
    font-size: 19px;
    text-align: center;
    color: white;
}

.content{
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
    justify-content: center;
}

.pricing-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media screen and (max-width: 992px) {
    body{
        overflow-y: scroll;
    }
    .welcome{
        text-align: center;
        font-size: 26px !important;
    }

}

@media screen and (max-width: 768px) {
    body{
        overflow-y: scroll;
    }
    .welcome{
        text-align: center;
        font-size: 26px !important;
        margin-top: 50px;
    }
    table{
        overflow-x: auto;
    }
}