@import 'style2sillones.min.css';

/***********************************
************************************
HEADER
************************************
***********************************/
h1 {
  font-display: swap;
        }


.header { 
  background-size: cover;
  min-height: 650px;
  position: relative;
}
.whatsapp-link {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25d366;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  display: flex;
  align-items: center;
  z-index: 5;
}

.whatsapp-link img {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.navbar-default{
  background-color: black;
  
}

.banner-info {
    padding-top: 140px;
    color: rgb(245, 201, 8);
  }

 h1.bnr-title {
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 2px;
  
}

h2.bnr-sub-title {
  font-size: 45px;
  text-transform: uppercase;
  padding: 20px 0px;
  font-weight: 700;
}

.custom-link {
  color: black; /* Cambia aquí el color del enlace */
  text-decoration: underline; /* Agrega subrayado al enlace */
}

.mobile-title {
  margin-top: 15%; /* o el valor que necesites */
}

.drawing{
  margin-top: 0%;
  padding-bottom: 0%;
  
}

/***********SLICKSLIDER************/
.carrousel{
  cursor: pointer;
  margin-bottom: 100px;
  display: block;
  position: relative;
}

.carrousel .carrousel-slide{
  position: relative;
  width: 100%;
  height: 80vh;
  height: 100%;
}

.carrousel .carrousel-img{
  display: block;
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.carrousel .carrousel-img img{
  width: 100%;
}

.carrousel .carrousel-text{
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
  color: #1c1c1d;
  background-color: rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-transform: uppercase;
  text-align: center;
}

/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 20px;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: #fff;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 0.5;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: 0px;
    z-index: 999;
}
[dir='rtl'] .slick-prev
{
    right: 0px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: 0px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: 0px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/************BUTTONS**************/
.img-blocks button{
  transition: .5s ease;
}

.btn-primary{
  background-color:#0e0d0d;
  padding: 10px;
  border: none;
}

.button-container{
  padding: 20px;
}

.button-container button{
				/*BUTTON STYLING*/
				border: none;
			
				/*POSITION*/
				padding: 60px;
				margin: 5px;
				display: inline-block;
				
				/*FONT STYLING*/
				font-size: 16px;
				text-transform: uppercase;
				color: #ffffff;
				text-align: center;
				
				/*TRANSITION*/
				transition: .5s ease;
			}		
.button-container button:active{				
				position:relative;
				top:1px;
        cursor: pointer;
				}
.button-container button:hover{
				cursor: pointer;
			}			
			
.button-container .btn-group{
				display: block;


/***********************************
************************************
HEADER
************************************
***********************************/

.header { 
  background-size: cover;
  min-height: 650px;
  position: relative;
}

.navbar-default{
  background-color: black;
  
}

.banner-info {
    padding-top: 140px;
    color: rgb(245, 201, 8);
  }
  
h1.bnr-title {
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 2px;

}

h2.bnr-sub-title {
  font-size: 45px;
  text-transform: uppercase;
  padding: 20px 0px;
  font-weight: 700;
}



/* Estilos para pantalla grande */
@media screen and (min-width: 768px) {
  .sub-title.service-title h1 {
    font-size: 45px; /* Cambia el tamaño de la fuente según tu preferencia */
    transform: translateY(10px) translateX(190px); /* Bajar y mover a la derecha */
    margin-top: 20%;
  }

  .drawing{
    margin-bottom: 25%;
    padding-bottom: 0%;
    
  }
  
}

/* Consulta de medios para pantallas más grandes de 760px */
@media only screen and (min-width: 760px) {
  .drawing {
    width: 20px;
    height: 20px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 25px; /* Ajusta el margen superior según sea necesario */
    margin-bottom: 25px; /* Elimina el margen inferior para que no haya espacio innecesario */
  }
 .title-h1{
    margin-top: 0%;
  }
}

/* Consulta de medios para pantallas más pequeñas de 760px */
@media only screen and (max-width: 760px) {
  .sub-title.service-title h1 {
    font-size: 30px; /* Reducir el tamaño de fuente */
    margin-top: 20%; /* Ajuste de margen superior para evitar superposición con el navbar */
  }

  .drawing {
    margin-top: 10px;
    margin-bottom:20px;
/* Ajuste de margen superior para agregar espacio entre el dibujo y el texto */

  }


    
/* Ajuste de margen superior para agregar espacio entre el dibujo y el texto */

  }
  
  
  .container3 {
    width: 50%; /* Ajusta el ancho del contenedor en dispositivos móviles */
    height: auto;
    position: relative;
    transform: translate(-50%, -50%);
    padding-bottom: 50%;
    margin: 0 auto; /* Centra el contenedor horizontalmente */
  }
}

/* Consulta de medios para pantallas más pequeñas de 600px */
@media only screen and (max-width: 600px) {
  .sub-title.service-title h1 {
    margin-top: 60%; /* Agrega un margen superior para evitar que el título se pegue al nav */
  }
  
  .drawing {
    margin-top: 0px; /* Ajuste de margen superior para agregar espacio entre el dibujo y el texto */
    padding-bottom: 0; /* Elimina el relleno inferior para evitar espacio adicional */
    margin-bottom: 10px;

  }

  .mobile-title {
    margin-top: 15%; /* o el valor que necesites */
    margin-bottom: 0%;
  }
}

/* Consulta de medios para dispositivos con dimensiones de 348x555 */
@media only screen and (max-width: 348px) and (max-height: 555px) {

  .drawing {
    margin-bottom: 10px; /* Ajuste de margen superior para agregar espacio entre el dibujo y el texto */
    padding-bottom: 0; /* Elimina el relleno inferior para evitar espacio adicional */
    
  }


#service {
  background-color: #F3F4F8;
  z-index: 0;
}