@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --real-estate-data-blue: #00c1ff;
    --real-estate-data-blue-hover: #3d98ed;
    --bs-body-font-family: "Montserrat", -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

body {
    font-family: var(--bs-body-font-family);
}

.navbar-brand img, footer .logo___footer {
    width: 100%;
    max-width: 180px;
}

@media (min-width: 768px) {
    .navbar-brand img, footer .logo___footer {
        width: 100%;
        max-width: 240px;
    }
}

.offcanvas.hiding .nav-link, .offcanvas.show .nav-link, .offcanvas.showing .nav-link {
    color: var(--real-estate-data-blue);
}

.offcanvas.hiding .offcanvas-body button,
.offcanvas.show  .offcanvas-body button,
.offcanvas.showing .offcanvas-body button {
    width: 100%;
    margin: 1rem 0;
}

.offcanvas___logo {
    width: 140px;
}

.real___estate__data___jumbotron {
    padding: 3rem 0;
    color: #fff;
    background-color: #333333;
}

.real___estate__data___jumbotron h1, .real___estate__data___jumbotron h3 {
    text-shadow: .1rem .1rem .5rem #000;
}

@media (min-width: 992px) {
    .real___estate__data___jumbotron {
        padding: 6rem 0;
    }
}

@media (min-width: 1400px) {
    .real___estate__data___jumbotron {
        padding: 8rem 0;
    }
}

.homepage___jumbotron {
    background-image: url('img/hero___img___landing.jpg');
}

.jumbotron___img___placement {
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 100%;
}

@media (min-width: 992px) {
    .jumbotron___img___placement {
        background-size: 60%;
    }
}

@media (min-width: 1200px) {
    .jumbotron___img___placement {
        background-size: 60%;
    }
}

@media (min-width: 1400px) {
    .jumbotron___img___placement {
        background-size: 50%;
    }
}

.bd-gutter {
    --bs-gutter-x: 3rem;
}

.homepage___jumbotron a {
    flex-basis: 280px;
}

.flex-equal > * {
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    flex: 0 1 50%;
  }
}

.swiper.marquee-swiper {
    margin-top: 3rem;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        white 10%,
        white 90%,
        transparent 100%
    );
}

.swiper-wrapper.marquee-swiper {
    transition-timing-function: linear;
    align-items: center;
}

.swiper-slide.marquee-swiper {
    width: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    p.lead {
        width: 100%;
        max-width: 640px;
        margin-left:  auto;
        margin-right:  auto;
        text-align: justify !important;
    }
}

.image___placeholder {
    padding-bottom: 40%;
}

@media (min-width: 768px) {
    .image___placeholder {
        padding-bottom: inherit;
    }
}

.image___placeholder img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    max-width: inherit;
    max-height: inherit;
}

.action___top___row .action___copy {
    color: #fff;
    background: #3DBCED;
    background: linear-gradient(90deg, rgba(61, 188, 237, 1) 0%, rgba(61, 151, 237, 1) 100%);
}

.action___middle___row .action___copy {
    background: #FFFFFF;
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 0.15) 90%);
}

.action___bottom___row .action___copy  { 
    color: #ffffff;
    background: #333333;
    background: linear-gradient(90deg, rgba(51, 51, 51, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

@media (min-width: 1200px) {
    .action___copy {
        padding: 8rem!important;
    }
}

@media (min-width: 768px) {
    .action___middle___row .image___placeholder {
        order: 2;
    }
    .action___middle___row .action___copy {
        order: 1;
    }
}

footer {
    color: #ffffff;
    background: #333333;
    background: linear-gradient(90deg, rgba(51, 51, 51, 1) 0%, rgba(0, 0, 0, 1) 100%);
}

footer a {
    color: var(--real-estate-data-blue);
}

.footer___image {
    padding-bottom: 30%;
}

.link___override {
    background-color: var(--real-estate-data-blue);
    border-color: var(--real-estate-data-blue);
}

.link___override:hover {
    background-color: var(--real-estate-data-blue-hover);
    border-color: var(--real-estate-data-blue-hover);
}