@font-face {
    font-family: 'Product Sans';
    src: url('../font/Product\ Sans\ Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'Product Sans';
    src: url('../font/Product\ Sans\ Bold.ttf') format('truetype');
    font-weight: 700;
    letter-spacing: 1em;
}

body {
    font-family: 'Product Sans';    
}

.bg-blue {
    background-color: #0364FF;
}

.bg-blue-disabled {
    background-color: #AFCBFF;
}

.bg-blanco {
    background-color: #F8FAFC;
}

.bg-yellow {
    background-color: #FECB33;
}

.bg-platzy {
    background-color: #13161C;
}

.text-darken {
    color: #1E293B;
}
.border-darken {
    border-color: #494949;
}

.text-blue {
    color: #0364FF;
}

.text-yellow {
    color: #FECB33;
}

.text-gray {
    color: #6d7785;
}

.border-yellow {
    border-color: #FECB33;
}

.border-blue {
    border-color: #0364FF;
}

.border-skyblue {
    border-color: #D0E0F2;
}

/* floating cards */
.floating { 
    animation-name: floating; 
    animation-duration: 3s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out;
}

@keyframes floating { 
    0% { transform: translate(0, 0px); } 
    50% { transform: translate(0, 8px); } 
    100% { transform: translate(0, -0px); }  
}

.floating-4 { 
    animation-name: floating; 
    animation-duration: 4s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out;
}

@keyframes floating-4 { 
    0% { transform: translate(0, 0px); } 
    50% { transform: translate(0, 8px); } 
    100% { transform: translate(0, -0px); }  
}

@supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar {
        border-radius: 10px;
        width: 10px
    }
    ::-webkit-scrollbar-thumb {
        background-color: #494949;
        background-clip: content-box;
        border: 2px solid #0000;
        border-radius: 10px
    }
    ::-webkit-scrollbar-thumb:active {
        background-color: #666
    }
    ::-webkit-scrollbar-track {
        background: var(--background-image)
    }
    ::-webkit-scrollbar-corner {
        background: var(--background-image)
    }
}

/* google maps */
iframe {
    width: 100%;
    height: 450px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}