/* typical tablet screen resolution */
@media only screen and (max-width : 1600px) and (max-height: 800px) {
    .cd-background-wrapper .img-home-md-2 {
        width: 75%;
    }

    .cd-background-wrapper .img-home-md-3 {
        width: 75%;
    }

    .third-title {
        margin-top: 100px !important;
    }
}

.cd-background-wrapper .img-home-3 {
    width: 100%;
}

.third-title {
    margin-top: 300px;
}

.cl-img {
    display: block;
}
/* typical tablet screen resolution */
@media only screen and (max-width : 834px) {
    .cl-img {
        display: none;
    }

    .img-michelin-margin {
        margin-top: -2.4rem !important;
    }
}

.cd-background-wrapper .img-home-md-2 {
    bottom: 5rem;
    margin: auto;
    right: 0;
}

.cd-background-wrapper .img-home-md-3 {
    bottom: 5rem;
    margin: auto;
    right: 0;
}

.title-gastronomy {
    font-size: 19px;
    font-weight: bold;
    margin-top: 1.5rem;
}

.img-mariadolores-restaurant {
    height: 200vh !important;
    margin-top: 1rem;
    object-fit: scale-down;
    object-position: top;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

p strong {
    font-weight: bold;
}

.img-logos-restaurant {
    gap: 40px;
    margin-top: 2rem;
}

.c-chef {
    margin-bottom: 3rem;
}

.btn-simple-atelier {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: bold;
    color: #b68845;
    background-color: transparent;
    border: 2px solid #b68845;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

    .btn-simple-atelier:hover,
    .btn-simple-atelier:active {
        background-color: #b68845;
        color: white;
        border-color: white;
    }

.gp-2 {
    gap: 20px;
}

/* Contenedor del input */
.md-form-group {
    position: relative;
    margin-bottom: 50px; /* Mayor separación vertical entre inputs */
    width: 100%;
}

/* Etiqueta flotante */
.md-label {
    position: absolute;
    top: 18px;
    left: 15px;
    font-size: 16px;
    color: #888; /* Siempre grisáceo */
    transition: all 0.3s ease;
    pointer-events: none;
}

/* Inputs y textarea */
.md-input,
.md-textarea {
    width: 100%;
    padding: 15px 10px 8px;
    padding-left: 0px !important;
    font-size: 16px;
    border: none;
    border-bottom: 2px solid #ccc; /* Este es el borde siempre visible */
    outline: none;
    background: transparent;
    color: black;
    transition: border-bottom-color 0.3s ease; /* Cambio solo de color */
}

    .md-input:focus,
    .md-textarea:focus {
        border-bottom-color: #b68845 !important; /* Solo cambias el color, no el grosor ni el borde completo */
    }

        /* Cuando el input tiene texto o está enfocado, la etiqueta sube pero sigue gris */
        .md-input:focus ~ .md-label,
        .md-textarea:focus ~ .md-label,
        .md-input:not(:placeholder-shown) ~ .md-label,
        .md-textarea:not(:placeholder-shown) ~ .md-label {
            top: -5px;
            font-size: 12px;
            color: #888; /* Se mantiene grisáceo */
        }

    /* Cambio de color del borde al enfocar */
    .md-input:focus,
    .md-textarea:focus {
        border-bottom: 2px solid #b68845;
    }

/* Ajuste para textarea */
.md-textarea {
    resize: none;
}

.m-fix-5 {
    margin: 1.5rem 0rem;
}

.h-100vh {
    height: 100vh !important;
}

.w-90f {
    width: 90% !important;
    margin-left: 5rem;
}

.align-items-vertical {
    display: flex;
    align-items: center;
}

.c-five p {
    line-height: 1.5;
}

.cursive {
    font-style: italic !important;
}

@media (min-width: 2300px) {
    .img-maria {
        max-width: 60% !important;
        height: 100vh;
        object-fit: cover; /* Ajusta la imagen sin deformarla */
        display: block;
    }
}

#second-title{
    position:relative!important;
    z-index:99999!important;
}
.c-logo {
    z-index: 99999 !important;
}