@font-face {
    font-family: "Segoe UI Historic";
    src: url("../assets/fonts/segoe-ui-historic.ttf");
}

@font-face {
    font-family: "Segoe UI Semi Bold";
    src: url("../assets/fonts/segoe-ui-semi-bold.ttf");
}

@font-face {
    font-family: "Segoe UI Light";
    src: url("../assets/fonts/segoe-ui-light.ttf");
}


body {
    font-family: "Segoe UI Historic";
    background-color: #f3f5fc;
    font-size: 14px;
}

.btn {
    font-family: "Segoe UI Semi Bold";
}

.navbar {
    height: 80px;
}

.header {
    min-height: 100vh;
    padding-top: 80px;
    padding-bottom: 50px;
}

.heading-height {
    height: 95%;
}

.heading {
    font-size: 36px;
}

.building-image {
    width: 80%;
    max-width: 400px;
}

.btn-schedule-demo {
    width: 240px;
    height: 60px;
}

.d-flex-gap {
    gap: 20px
}

.text-gray {
    color: var(--bs-gray);
}

.product-feature {
    margin-top: 64px;
    /* height: 65vh; */
}

.text-building-information {
    background-color: var(--bs-yellow);
    font-family: "Segoe UI Light";
}

.building-information-content {
    margin-top: 48px;
}

.building-information-card {
    background-color: white;
    padding: 36px;
}

.building-information-image {
    background-color: var(--bs-yellow);
    min-height: 280px;
}

.title {
    font-size: 16px;
    color: var(--bs-gray);
}

.sub-title {
    font-size: 16px;
    font-family: "Segoe UI Light";
}

.content {
    font-size: 48px;
    line-height: 1;
}

.learn-more-text {
    font-size: 18px;
}

.building-information {
    margin-right: 16px;
}

.product-feature>.heading {
    margin-bottom: 48px;
}

.building-information-card {
    min-height: 30vh;
}

.notification-card {
    background-color: var(--bs-cyan);
    height: 250px;
}

.text-notifications {
    background-color: var(--bs-cyan);
    color: white;
    font-family: "Segoe UI Light";
}

.success-story {
    font-size: 18px;
    font-family: "Segoe UI Light";
}

.feature-content {
    margin-top: 24px;
}

.feature-title {
    font-size: 32px;
    margin: 0;
    line-height: 1;
}

.facilities-card {
    background-color: var(--bs-green);
    height: 250px;
}

.text-facilities {
    background-color: var(--bs-green);
    color: white;
}

.contacts-card {
    background-color: var(--bs-teal);
    height: 250px;
}

.text-contacts {
    background-color: var(--bs-teal);
    color: white;
}

.incident-card {
    background-color: var(--bs-indigo);
    height: 250px;
}

.text-incident {
    background-color: var(--bs-indigo);
    color: white;
}

.mobile-features {
    margin-top: 2em;
}

.get-started-now {
    background-color: var(--bs-primary);
    padding: 24px;
    color: white;
    margin-top: 50px;
    margin-bottom: 50px;
}

.no-gutter {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
}

.btn-full-width {
    width: 100%;
    height: 60px;
}

.footer {
    height: 200px;
    background-color: var(--bs-gray-700);
}

.footer>.content-container {
    padding-top: 24px;
}

.feature-card {
    padding: 36px;
    background-color: white;
}

.hand {
    cursor: pointer;
}

.footer-description {
    max-width: 300px;
}

/* Hide reCAPTCHA badge - attribution text is in footer per Google's requirements */
.grecaptcha-badge {
    visibility: hidden !important;
}

/* Media Query for Mobile Devices */
@media (max-width: 480px) {

    .schedule-demo-button {
        margin-top: 24px;
    }

    .content-container {
        margin-right: 2em;
        margin-left: 2em;
    }

    .col-padding-right {}

    .col-padding-left {}
}

/* Media Query for low resolution  Tablets, Ipads */
@media (min-width: 481px) and (max-width: 767px) {

    .content-container {
        margin-right: 4em;
        margin-left: 4em;
    }

    .col-padding-right {}

    .col-padding-left {}
}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px) and (max-width: 1024px) {

    .content-container {
        margin-right: 6em;
        margin-left: 6em;
    }

    .col-padding-right {
        padding-right: 2em;
    }

    .col-padding-left {
        padding-left: 2em;
    }
}

/* Media Query for Laptops and Desktops */
@media (min-width: 1025px) and (max-width: 1280px) {

    .content-container {
        margin-right: 8em;
        margin-left: 8em;
    }

    .col-padding-right {
        padding-right: 4em;
    }

    .col-padding-left {
        padding-left: 4em;
    }
}

/* Media Query for Large screens */
@media (min-width: 1281px) {

    .content-container {
        margin-right: 12em;
        margin-left: 12em;
    }

    .col-padding-right {
        padding-right: 4em;
    }

    .col-padding-left {
        padding-left: 4em;
    }
}