@font-face {
    font-family: "Gill Sans Light Italic";
    src: url("/assets/fonts/Gill_Sans_Light_Italic.otf") format("opentype");
    font-weight: 200;
}

@font-face {
    font-family: "Goudy Old Style Regular";
    src: url("/assets/fonts/Goudy_Oldstyle_Std_Regular.otf") format("opentype");
}

@font-face {
    font-family: "Goudy Old Style Italic";
    src: url("/assets/fonts/Goudy_Old_Style_ITALIC.ttf") format("truetype");
}

html {
    /* 10px */
    font-size: 62.5%;
}

body {
    /* 16px */
    font-size: 1.6rem;
    color: #365769;
}

.bg-1 {
    background-color: #dbdcd9;
}

.bg-2 {
    background-color: #09485f;
}

.bg-ubicacion {
    background: #0A627E;
    background: linear-gradient(90deg, rgba(10, 98, 126, 1) 0%, rgba(10, 98, 126, 1) 62%, rgba(9, 72, 95, 1) 100%);
}


.color-1 {
    color: #365769;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: "Goudy Old Style Regular", serif;
}

h2 {
    font-size: 4rem;
}

h3 {
    font-size: 2.4rem;
}

.goudy-italic {
    font-family: "Goudy Old Style Italic", serif !important;
}

.gill-sans-italic {
    font-family: "Gill Sans Light Italic", sans-serif !important;
}

.fs-italic {
    font-size: 1.8rem;
    line-height: normal;
}

.fs-bullet {
    font-size: 1.8rem;
    line-height: 1;
}

.fs-ubi {
    font-size: 1.8rem;
}

.metraje {
    font-family: "Goudy Old Style Regular", serif;
    font-size: 3.4rem;
}

.logo-ralfo {
    max-width: 25%;
    height: auto;
}

.logo-inmobilia {
    max-width: 35%;
    height: auto;
}

/* Carousel */
#carousel *,
#carousel *::before,
#carousel *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
    list-style-type: none;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

#carousel a,
#carousel button {
    cursor: pointer;
    user-select: none;
    border: none;
    outline: none;
    background: none;
}

#carousel img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.swiper-button-prev,
.swiper-button-next {
    opacity: 0;
}

:root {
    --swiper-theme-color: #FAB828
}

/*// Elements*/
#carousel .section {
    margin: 0 auto;
    padding-block: 10rem;
}

#carousel .container {
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

#carousel .swiper {

    &-button-next::after,
    &-button-prev::after {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 800;
        padding: 1rem;
        width: 2rem;
        height: 2rem;
        opacity: 0.75;
        border-radius: 50%;
        color: var(--white-100);
        background: var(--black-300);
    }
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
    color: #fff;
    opacity: 0;
    text-decoration: solid;
    outline: 0.5;
    outline-color: currentcolor;
    outline-style: none;
    outline-width: 0px;
}

.carousel-control-next:focus,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-prev:hover {
    color: #fff;
    opacity: 0;
    text-decoration: solid;
    outline: 0.5;
    outline-color: currentcolor;
    outline-style: none;
    outline-width: 0px;
}

#carousel li,
ol.active {
    background-color: rgba(34, 34, 32, 0.3);
}

.carousel-control-next,
.carousel-control-prev {
    color: #fff;
    opacity: 0;
}

@media (min-width: 370px) {
    h2 {
        font-size: 2.4rem;
    }

    h3 {
        font-size: 2rem;
    }

    .fs-italic {
        font-size: 1.8rem;
    }
}

@media (min-width: 576px) {}


@media (min-width: 768px) {
    h2 {
        font-size: 4.5rem;
    }

    h3 {
        font-size: 3rem;
    }

    .fs-italic {
        font-size: 1.9rem;
    }
}


@media (min-width: 992px) {
    h2 {
        font-size: 6.2rem;
    }

    h3 {
        font-size: 4.5rem;
    }

    .fs-italic {
        font-size: 2.9rem;
    }
    .fs-ubi {
        font-size: 2.5rem;
    }
}

@media (min-width: 1280px) {
    h2 {
        font-size: 7.4rem;
    }

    h3 {
        font-size: 4.5rem;
    }

    .fs-italic {
        font-size: 2.9rem;
    }
    .fs-bullet {
        font-size: 2.2rem;
    }
    .fs-ubi {
        font-size: 2.5rem;
    }
}

@media (min-width: 1500px) {
    h2 {
        font-size: 8.5rem;
    }

    h3 {
        font-size: 4.5rem;
    }

    .fs-italic {
        font-size: 2.9rem;
    }

    .fs-bullet {
        font-size: 2.2rem;
    }
    .fs-ubi {
        font-size: 2.5rem;
    }
}