/*IMPORTACION DE LA FUENTA DESDE GOOGLE FONTS*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body{
    /*Fuente al body*/
    font-family: 'Montserrat', sans-serif;
    overflow-x: hidden;/*x porque solamente en el eje horizontal*/
    background-color: hsla(83, 73%, 72%, 0.5);
    /*background-image: url(../IMG/IG.png);*/
}

#cImage{
    /*transparencia*/
    min-height: 100vh;

    background: linear-gradient(rgba(5,7,12, 0.30), rgba(5,7,12, 0.30)),
    url(23.jpg);
    background-repeat: no-repeat;
    background-position: center;
    
    background-attachment: fixed;
    background-size: cover;
}

#mElegancia{
        /*transparencia*/
        min-height: 100vh;

        background: linear-gradient(rgba(255, 255, 255, 0.466), rgba(255, 255, 255, 0.466)),
        url(23.jpg);
        background-repeat: no-repeat;
        background-position: center;
        
        background-attachment: fixed;
        background-size: cover;
}

/*Intro color*/
#intro{
    background: linear-gradient(rgba(5, 7, 12, 0.856),rgba(5, 7, 12, 0.856));
    margin-bottom: -1%;
}
/*Menu*/
/*Logo*/
/*comportamiento de bloque en línea y una alineación vertical al medio, luego por supuesto el ancho del logo*/
.navbar-logo{
    display: inline-block;
    vertical-align: middle;
    width: 75px;
    margin-right: 1%;
  }
  /*comportamiento de tipo bloque, un ancho del 100% igual al contenedor padre y una altura automática, según la dimensión/proporción de la imagen*/
  .navbar-logo img{
    display: block;
    width: 100%;
    height: auto;
    border-radius:160px;
    border:1px solid #046621;
  }

/*selector del ID*/

#menu li > a {/*el elemeno a es hijo de li, podemos ser mas especificos li > a iguel que con form que tiene a buttom, por si hay mas enlaces o botones */
    font-size: 18px;
    /*font-weight: bold;*/
    color: #3f3f3f   
}

#menu button{
    font-size: 18px;
    /*font-weight: bold;*/
}

/*limitar el tamaño de las imagenes de los slide*/

.carousel-inner{
    max-height: 39rem;/*alto maximo*/
}


/*para pantalla pequeña*/
@media(max-width: 768px){
    #intro{
        width: 90% !important;/*para que el texto ocupe 90% en pequeño y 50% en grande que esta en boots*/
        background: linear-gradient(rgba(5,7,12, 0.30), rgba(5,7,12, 0.30)); /*le iba tapara con otro color asi que mejor lo oculto*/
        display: none;/*esto si funciono*/
    }
    #intro p{
        display: none;
    }
    #intro h1{
        display: none;
    }

    .servicio-fila{
        width: 100% !important;
        text-align: center;
    }
    

    #bg-contacto{/*esto ya no existe*/
        top: -110px
    }

    .container-fluid{
        margin-top: -5%!important;
    }
}

/*selector de id*/

#local{
    background-color: #f3f3f3;
    padding-bottom: 300px;
    display: flex; /*Para que TODO EL CONTENIDO S VEA ALINEADO*/ 
    justify-content: center;
}

.wrapper{
    width: 80%;
    margin-left: 100px;
}

#bg-contacto{
    position: relative;
    top: -130
}
#section-contacto{
    background-color: #046621;
    min-height: 500px; /*alto minimo*/
    position: relative;
}

footer{
    background-color: #046621;
    min-height: 100px;
}
footer p{
    color: #f3f3f3;
    text-align: center;
}

#iconos i {
    font-size: 26px;
    padding: 0 8px;
    color: #f3f3f3;
}

#local{
    background-color: hsla(83, 73%, 72%, 0.5);
}


/* css de rodrigo */

.imagen-pequena {
    width: 200px; /* Máximo ancho de la imagen */
     height:  auto; /* Altura automática para mantener la proporción */
   }

   /* css de Zedlian */

   #imagen-fondo{
     /*transparencia*/
     min-height: 100vh;
   
     background: linear-gradient(rgba(136, 170, 117, 0.432), rgba(63, 76, 109, 0.432)),
      url(../IMG/FONDO2.jpg);
     background-repeat: no-repeat;
     background-position: center;
     
     background-attachment: fixed;
     background-size: cover;
   }

     /*Keren Espacio entre solicitudes */
     .form-group {
        margin-bottom: 20px;
      }

      #RImage{
        /*transparencia*/
        min-height: 100vh;
    
        background: linear-gradient(rgba(22, 22, 22, 0.897), rgba(22, 22, 22, 0.897)),
        url(23.jpg);
        background-repeat: no-repeat;
        background-position: center;
        
        background-attachment: fixed;
        background-size: cover;
    }

#mtext label{
    color: #f3f3f3;
    font-size: 20px;
}

#RS{
    font-size: 70px;
    font-style: italic;
    text-shadow: 15px 10px 10px #fffcfc59!important;
}

#BGSOBRENOSOTROS{
    min-height: 25vh;
    background: linear-gradient(rgba(136, 170, 117, 0.589), rgba(63, 76, 109, 0.555)),
     url(../IMG/BGSOBRE.png);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

#contSobre p{
    text-align: center;
}
 
/*Efecto Hover*/
.capa{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f3f3f3;
    transform: scale(0);/*para que se oculte*/
    transition: .3s ease;
}

/*Cuanndo se pase por la caja se muestr*/
.card:hover .capa{ /*pegamos la capa*/
    transform: scale(1);/*ahora es 1 para que se muestre*/
}