/*=========================================
        RESERVACIONES PÚBLICO
=========================================*/

body{

    background:#f7f7f7;

}


/*=========================================
        HERO
=========================================*/

.hero-reservacion{

    position:relative;

    padding:120px 0;

    background:linear-gradient(
        rgba(0,0,0,.72),
        rgba(0,0,0,.72)
    ),
    url("../img/carousel-1.jpg");

    background-size:cover;

    background-position:center;

    overflow:hidden;

}

.hero-reservacion .container{

    position:relative;

    z-index:2;

}

.hero-reservacion h1{

    color:#fff;

    font-size:64px;

    font-weight:800;

    margin-bottom:20px;

}

.hero-reservacion p{

    color:rgba(255,255,255,.92);

    font-size:22px;

    max-width:760px;

    margin:auto;

    line-height:1.8;

}


/*=========================================
        FORMULARIO
=========================================*/

#form-reservacion{

    margin-top:-70px;

    position:relative;

    z-index:10;

}

.card-reservacion{

    background:#fff;

    border-radius:22px;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    padding:45px;

}


/*=========================================
        TITULOS
=========================================*/

.titulo-seccion{

    font-size:42px;

    font-weight:800;

    color:#222;

}

.subtitulo-seccion{

    color:#666;

    font-size:18px;

}


/*=========================================
        INPUTS
=========================================*/

.card-reservacion .form-control,
.card-reservacion .form-select{

    height:56px;

    border-radius:14px;

    border:1px solid #ddd;

}

.card-reservacion textarea{

    min-height:130px;

    border-radius:14px;

}


/*=========================================
        DISPONIBILIDAD
=========================================*/

#disponibilidad{

    border-radius:14px;

    font-size:16px;

}


/*=========================================
        BOTÓN
=========================================*/

.btn-reservar{

    border-radius:50px;

    padding:15px 45px;

    font-weight:700;

}


/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:991px){

.hero-reservacion{

padding:90px 0;

}

.hero-reservacion h1{

font-size:46px;

}

.hero-reservacion p{

font-size:19px;

}

#form-reservacion{

margin-top:-40px;

}

.card-reservacion{

padding:30px;

}

}

@media(max-width:767px){

.hero-reservacion{

padding:70px 0;

}

.hero-reservacion h1{

font-size:34px;

}

.hero-reservacion p{

font-size:16px;

}

#form-reservacion{

margin-top:0;

}

.card-reservacion{

padding:22px;

}

}