@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Extra+Condensed:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;700&family=Sofia+Sans+Extra+Condensed:wght@300;400;700&display=swap');

body {
    #font-family: 'Sofia Sans Extra Condensed', sans-serif;
    font-family: 'Jura', sans-serif;
    font-size: 22px;
}

.top-bg-image {

    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%), url("../img/bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;

    #padding-top: 10rem;
    #padding-bottom: calc(10rem - 4.5rem);
}

.carousel, .carousel .carousel-inner, .carousel .carousel-item, .carousel .slide-item, .carousel .slide-item-text {
    height: 100%;
}

.slide-item-text h1 {
    color: #c7b293;
    font-weight: 700;
    text-shadow: 0 0 2px #000;
}

#about-us {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%), url("../img/about-us-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

.box {

}
.box:hover .box-icon{
    background-color: #c7b293;
    color: #0b2230;
}
.box-icon {
    transition: 0.3s ease-in-out all;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    background-color: #0b2230;
    color: #c7b293;
    font-size: 40px;
}
.box-text {
    color: #0b2230;
    font-size: 20px;
}

ol.two-columns {
    text-align: left;
}
ol.two-columns li {
    padding: 0 16px;
}

.google-map{
    height: 450px;
}


footer {
    color: #c7b293;
    padding: 70px 0;
    text-shadow: 0 0 1px #ffffff;
}

@media (max-width: 576px) {
    abody { border-bottom : 10px solid blue}

    .gradient-bg {
        background:
                linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.45)),
                linear-gradient(100deg, rgba(197,178,148,1) 70%, rgba(48,70,84,1) 70.5%);
    }

    .navbar-brand img {
        height: 50px;
    }
    .body-offset {
        margin-top: 76px
    }

    .top-bg-image {
        padding: 6rem 0;
    }
    .slide-item-text h1 {
        font-size: 20px;
    }

}
@media (min-width: 576px) {
    abody { border-bottom : 10px solid green}

    .gradient-bg {
        background:
                linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.45)),
                linear-gradient(100deg, rgba(197,178,148,1) 45%, rgba(48,70,84,1) 45.3%);
    }

    .body-offset {
        margin-top: 96px
    }

    .top-bg-image {
        padding: 6rem 0;
    }
    .slide-item-text h1 {
        font-size: 30px;
    }

}
@media (min-width: 992px) {
    abody { border-bottom : 10px solid yellow}

    .gradient-bg {
        background:
                linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.45)),
                linear-gradient(100deg, rgba(197,178,148,1) 25%, rgba(48,70,84,1) 25.1%);
    }

    .top-bg-image {
        height: calc(100vh - 94px);
        min-height: 50rem;
        padding: 0;
    }
    .slide-item-text h1 {
        font-size: 40px;
    }

    ol.two-columns {
        text-align: left;
        -moz-column-count: 2;
        -moz-column-gap: 20px;
        -webkit-column-count: 2;
        -webkit-column-gap: 20px;
        column-count: 2;
        column-gap: 20px;
    }
}
@media (min-width: 1200px) {
    abody { border-bottom : 10px solid darkorchid}
    .top-bg-image {
        min-height: 40rem;
    }
    .slide-item-text h1 {
        font-size: 46px;
    }
}