/* Skolsköld Front — Modern SaaS Landing Page */

/* Google Fonts - Lato */
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic');

body {
    font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Navbar */
.navbar-brand {
    font-size: 1.4rem;
    color: #0061f2 !important;
}

/* Masthead */
header.masthead {
    position: relative;
    background-color: #343a40;
    background: url("../assets/img/backgrounds/bg-masthead.b10039e097a3.jpg") no-repeat center center;
    background-size: cover;
    padding-top: 8rem;
    padding-bottom: 8rem;
}
header.masthead:before {
    content: "";
    position: absolute;
    background-color: #1c375e;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
}
header.masthead h1, header.masthead .h1 {
    font-size: 2rem;
}
@media (min-width: 768px) {
    header.masthead {
        padding-top: 12rem;
        padding-bottom: 12rem;
    }
    header.masthead h1, header.masthead .h1 {
        font-size: 3rem;
    }
}

/* Features Icons */
.features-icons {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.features-icons .features-icons-item {
    max-width: 20rem;
}
.features-icons .features-icons-item .features-icons-icon {
    height: 7rem;
}
.features-icons .features-icons-item .features-icons-icon i {
    font-size: 4.5rem;
}

/* Cards */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1) !important;
}
.rounded-4 {
    border-radius: 1rem !important;
}

/* Call to Action */
.call-to-action {
    position: relative;
    background-color: #343a40;
    background: url("../assets/img/backgrounds/bg-masthead.b10039e097a3.jpg") no-repeat center center;
    background-size: cover;
    padding-top: 7rem;
    padding-bottom: 7rem;
}
.call-to-action:before {
    content: "";
    position: absolute;
    background-color: #1c375e;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
}

/* Footer */
footer.footer {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
footer a:hover {
    color: #0061f2 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .display-4 {
        font-size: 2rem;
    }
}