:root{
    --color-black: #000000;
    --color-celeste: #1B9CB6;
    --color-morado: #611B7A;
    --color-amarillo: #F3CD22;
    --color-rojo: #FF3131;
    --color-blanco: #FFFFFF;
}
@font-face {
    font-family: 'gothambold';
    src: url('../../Views/fonts/gothambold-webfont.woff2') format('woff2'),
    url('../../Views/fonts/gothambold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gothambook';
    src: url('../../Views/fonts/gothambook-webfont.woff2') format('woff2'),
    url('../../Views/fonts/gothambook-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gothamlight';
    src: url('../../Views/fonts/gothamlight-webfont.woff2') format('woff2'),
    url('../../Views/fonts/gothamlight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'gothammedium';
    src: url('../../Views/fonts/gothammedium-webfont.woff2') format('woff2'),
    url('../../Views/fonts/gothammedium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'checkpoint_charlieregular';
    src: url('../../Views/fonts/charlie-webfont.woff2') format('woff2'),
    url('../../Views/fonts/charlie-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
html, body{
    font-family: 'gothambook';
}
.euro-row{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}
.font-charli{
    font-family: 'checkpoint_charlieregular';
}
h2, .h2 {
    font-size: calc(1.725rem + 0.9vw);
}
.euro-row img{
    max-width: 130px;
}
.s-hero{
    display: flex;
    width: 100%;
    height: 100vh;
    flex-direction: column;
    align-items: center;
}
.euro-row ul{
    display: flex;
    list-style: none;
    padding: 0;
    gap: 20px;
    width: 100%;
    justify-content: space-evenly;
    font-family: 'gothammedium';
    color: var(--color-black);
    margin-top: 8px;
    margin-bottom: 8px;
}
.euro-row ul li{
    font-size: 18px;
}
.contenido-hero h1{
    width: 100% !important;
    text-align: center !important;

}
.logo-nabar{
    width: 100%;
    max-width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
.circle-logo{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.fixed .circle-logo {
    position: absolute;
    bottom: -40px;
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 130px;
    min-height: 130px;
    padding: 20px 20px 0 20px;
    border-radius: 360px;
}
.navegador{
    display: flex;
    padding: 20px;
    align-items: center;
    position: relative;
    width: 100%;
}
.header-absolute{
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1024;
}
.header-absolute.fixed {
    position: fixed;
    top: 0;
}
.fixed .euro-row img{
    max-width: 65px;
}
.fixed .navegador{
    animation: slider-down .5s ease;
    background: var(--color-blanco);
    padding: 10px 20px;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}
.fixed .euro-row ul li {
    font-size: 16px;
}
@keyframes slider-down {
    from{
        transform: translateY(-137px);
    }
    to{
        transform: translateY(0px);
    }
}
.bg-hero{
    display: flex;
    position: relative;
    flex-direction: row;
    width: 100%;
    height: 100%;
    min-height: 600px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
.contenido-hero{
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;
    z-index: 1;
    padding: 40px 20px;
    background: rgb(0 0 0 / 40%);
}
.img-hero{
    width: 100%;
    aspect-ratio: 16 / 8;
    opacity: 80%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}
.img-vaso{
    max-width: 370px;
}
.z-index-1{
    z-index: 1;
}
.contenido-hero h1{
    font-family: 'gothammedium';
    color: var(--color-blanco);
    max-width: 992px;
}
.btn-custom-hero{
    width: 100%;
    max-width: 200px;
}
.btn-celeste {
    background: var(--color-celeste) !important;
    color: var(--color-blanco) !important;
    box-shadow: 0 8px 9px -4px rgba(56, 107, 192, 0.3), 0 4px 18px 0 rgba(56, 107, 192, 0.2) !important;
}
.w-max-670{
    max-width: 670px;
    width: 100%;
}
.section-general{
    padding: 140px 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 300px;
}
.color-amarillo{
    background: var(--color-amarillo);
}
.color-celeste{
    background: var(--color-celeste);
}
.color-morado{
    background: var(--color-morado);
}
.color-rojo{
    background: var(--color-rojo);
}
.pd-8-icon{
    padding: 8px;
}
.euro-row ul a{
    font-family: 'gothammedium';
    color: var(--color-black);
    transition: .3s;
}.euro-row ul a:hover{
    color: var(--color-celeste);
}
.content-right{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.img-design-1{
    position: absolute;
    top: auto;
    left: 0;
    width: 100%;
    max-width: 300px;
}
.img-historia{
    position: relative;
    width: 100%;
    max-width: 300px;
}
.colection-img-4{
    display: flex;
    flex-direction: row;
}
.group-img{
    overflow: hidden;
    width: 25%;
    position: relative;
}
.group-img img{
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1/1;
}
.img-over{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(27 156 182 / 50%);
    transition: .3s;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.group-img:hover .img-over{
    opacity: 1;
}
.img-over img{
    width: 100%;
    max-width: 50px;
    opacity: 40;
}
.mtop-lg{
    margin-top: 5rem;
}
.row-doble{
    display: flex;
    flex-direction: row;
    width: 100%;
    position: relative;
}
.bg-color-doble{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 50%;
    justify-content: center;
}
.bg-color-doble.morado{
    background: var(--color-morado);
    overflow: hidden;
    position: relative;
}
.bg-color-doble.amarillo{
    background: var(--color-amarillo);
    align-items: end;
    overflow: hidden;
    position: relative;
}
.mision, .vision{
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0px;
    gap: 20px;
    max-width: 665px;
    padding: 24px 20px;
}
.mision p, .vision p{
    max-width: 450px;
}
.bg-color-doble h2{
    font-family: 'checkpoint_charlieregular';
    color: var(--color-blanco);
}
.bg-color-doble p{
    color: var(--color-blanco);
    margin: 0;
}
.vision{
    padding-left: 8rem;
}
.img-design-2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 5%;
}
.id-3{
    opacity: 2%;
}
.galeria h2{
    font-family: 'checkpoint_charlieregular';
    color: var(--color-blanco);
}
.galeria img{
    aspect-ratio: 1/1;
    object-fit: cover;
}
.img-ar-bf{
    aspect-ratio: 1/1;
    object-fit: cover;
}
.img-mw-360{
    width: 100%;
    max-width: 360px;
}
.img-mw-380{
    width: 100%;
    max-width: 380px;
}
.box-shadow{
 box-shadow: 0 2px 15px -3px rgba(0,0,0 , 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)
}
.mb-8rem{
    margin-bottom: 8rem;
}
.br-1-solid-white{
    border: 1px solid #FFFFFF;
    border-radius: 8px;
    transition: .3s;
}
.br-1-solid-white:hover{
    margin-top: -10px;
    margin-bottom: 10px;
}
.bg-image.hover-overlay.rounded-5.box-shadow{
   transition: .3s;
}
.bg-image.hover-overlay.rounded-5.box-shadow:hover{
    margin-top: -10px;
    margin-bottom: 10px;
}
.img-servicios.img-mw-380 {
    width: 100%;
    max-width: 100%;
}
.img-servicios.img-ar-bf {
    aspect-ratio: 8 / 7;
    object-fit: cover;
}
.galeria a{
    position: relative;
    height: 100%;
    display: flex;
    transition: .3s;
}
.galeria a .img-over{
    background: rgb(255 49 49 / 50%);
}
.galeria a:hover .img-over{
    opacity: 100%;
}
.card-contacto{
    padding: 30px;
    border: 1px solid #fff;
    border-radius: 10px;
}
.form-outline .form-control~.form-notch div {
    border-color: #ffffff;
}
.form-control:focus {
    color: #ffffff;
    border-color: #ffffff;
    outline: 0;
    box-shadow: var(--mdb-box-shadow-inset), 0 0 0 .25rem rgba(59, 113, 202, .25);
}
.form-control {
    color: #ffffff;
}
.form-outline .form-control~.form-label {
    color: #d8d8d8;
}
.form-outline .form-control:focus~.form-notch .form-notch-leading {
    border-color: #ffffff;
    box-shadow: -1px 0 0 0 #ffffff, 0 1px 0 0 #ffffff, 0 -1px 0 0 #ffffff;
}
.form-outline .form-control:focus~.form-notch .form-notch-middle {
    border-color: #ffffff;
    box-shadow: 0 1px 0 0 #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0);
}
.form-outline .form-control:focus~.form-notch .form-notch-trailing {
    border-color: #ffffff;
    box-shadow: 1px 0 0 0 #ffffff, 0 -1px 0 0 #ffffff, 0 1px 0 0 #ffffff;
}
.form-outline .form-control:focus~.form-label {
    color: rgb(255 255 255 / 80%);
}
:not(.btn-check)+.btn-light:hover, .btn-light:first-child:hover, .btn-light:focus-visible, .btn-light:hover {
    box-shadow: none;
}
.alerta{
    background: rgb(255 255 255 / 16%);
    padding: 8px 16px;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    margin-top: 20px;
}
.ul-contacto{
    padding: 0;
    list-style: none;
}
.ul-contacto li{
    margin-bottom: 10px;
}
.ul-contacto a{
    color: #FFFFFF;
}
.content-design::after{
    content: '';
    border: 1px solid #fff;
    height: 1px;
    width: 8%;
    display: flex;
    margin-left: 0;
    margin-top: 4px;
}
.footer-euro{
    padding: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(255 255 255 / 30%);
}
.footer-euro a{
    color: rgba(255, 255, 255, 0.9);
}
.footer-euro a:hover{
    text-decoration: underline;
}
.navegador .container{
    background: rgb(255 255 255 / 84%);
    border-radius: 82px;
}
.barra-libre{
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: auto;
}
.rgba-fondo{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(10 59 69 / 70%);
    min-height: 800px;
    padding: 20px;
}
.img-ble{
    width: 100%;
    max-width: 460px;
}
.contacto-barra-libre{
    display: flex;
    gap: 40px;
}
.ratio-1-1{
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
.color-text-celeste{
    color: var(--color-celeste);
}
.nuevo-card .card{
    background: rgb(255 255 255 / 70%);
}
.nuevo-card .bg-image{
    aspect-ratio: 1 / 1;
    height: auto;
    width: 100%;
}
.btn-flotante{
    position: fixed;
    right: 16px;
    bottom: 16px;
    border-radius: 360px;
    background: #25D366;
    box-shadow: 0px 0px 4px 0 rgba(0, 0, 0, 0.2);
    z-index: 1024;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn-flotante a{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    border-radius: 360px;
}
.btn-flotante i{
    font-size: 1.75rem;
    color: white;
}
.tooltip-inner {
    color: #000;
    background-color: rgba(255, 255, 255, 0.9);
}
.menu-carta{
    border: 2px solid #fff;
    max-width: 230px !important;
    margin-left: auto;
    margin-right: auto;
    display: block;
    transition: .3s !important;
}
.menu-carta:hover{
    border: 2px solid #fff;
    background: var(--color-blanco) !important;
    color: var(--color-celeste) !important;
}
@media (max-width: 1400px) {
    .mision, .vision{
        max-width: 580px;
    }
}
@media (max-width: 1200px) {
    .s-hero{
        height: 100vh;
    }
    .bg-hero {
        min-height: 700px;
        align-items: flex-end;
    }
    .row-doble{
        flex-direction: column;
    }
    .bg-color-doble{
        width: 100%;
    }
    .bg-color-doble.amarillo, .bg-color-doble.morado {
        align-items: center;
    }
    .vision {
        padding-left: 20px;
    }
    .mision p, .vision p {
        max-width: 992px;
    }
    .mision, .vision{
        max-width: 720px;
    }
    .bg-color-doble{
        min-height: 500px;
    }
}
@media (min-width: 993px) {
    .header-mobile{
        display: none;
    }
}
@media (max-width: 992px) {
    #main-header{
        display: none;
    }
    .contenido-hero h1 {
        max-width: 318px;
        font-size: 28px;
    }
    .img-historia {
        max-width: 160px;
    }
    .section-general {
        padding: 100px 20px;
    }
    .mb-8rem{
        margin-bottom: 5rem;
    }
    .header-mobile{
        display: flex;
        width: 100%;
        flex-direction: column;
        background: #ffffff;
        padding: 20px 16px;
        position: fixed;
        top: 0;
        z-index: 1024;
    }
    .header-mobile img{
        width: 100%;
        max-width: 50px;
    }
    .hm-collapse{
        display: none;
    }
    .hm-navbar{
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }
    .hm-row{
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        min-height: 38px;
    }
    .hm-col{
        display: flex;
        width: 100%;
    }
    .jc-end{
        justify-content: end;
    }
    .hm-collapse ul{
        margin-bottom: 0;
        list-style: none;
        padding: 0;
    }
    .hm-collapse ul a{
        width: 100%;
        padding: 8px 20px;
        text-align: center;
        display: block;
        font-family: 'gothammedium';
        color: var(--color-black);
    }
    .hm-collapse.show{
        display: block;
    }
}

@media (max-width: 768px) {



    .s-hero{
        height: 100vh;
    }
    .contenido-hero {
        padding: 120px 20px 40px;
    }
    .contenido-hero h1 {
        max-width: initial;
        font-size: 28px;
        text-align: center;
    }
    .w-max-670{
        justify-content: center;
        display: flex;
    }
    .img-vaso {
        max-width: 270px;
        margin-top: 60px;
    }
    .bg-hero {
        min-height: 780px;
        align-items: flex-end;
    }
}
@media (max-width: 576px) {
    .contenido-hero h1 {
        font-size: 24px;
    }
    .bg-hero {
        align-items: center;
    }
    .btn-custom-hero {
        max-width: 200px;
        padding: 10px 20px;
    }
    .mtop-lg {
        margin-top: 3rem;
    }
    .group-img {
        width: 50%;
    }
    .colection-img-4 {
        flex-wrap: wrap;
    }
    .contacto-barra-libre {
        display: flex;
        gap: 0px;
        flex-direction: column;
        margin-top: 4rem;
    }
    .rgba-fondo .container{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .rgba-fondo {
        min-height: 560px;
    }
}
.btn-flotante{
    right: 10px;
    bottom: 10px;
}
@media (max-width: 575px) {
    .galeria .col-sm-6{
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}