/*
Template Name: Electrician
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/


/* Fuente base para párrafos, menús y textos pequeños */
body {
  font-family: 'Roboto', sans-serif;
}

/* Fuente industrial/robusta para el logo, títulos principales y botones */
h1, h2, h3, .navbar-brand, .btn {
  font-family: 'Oswald', sans-serif;
  letter-spacing: 1px; /* Le da un ligero espacio elegante entre letras */
}



/*********************about_h****************/
.about_h2il h3{
width:170px;
height:170px;
line-height:170px;
border:3px solid #c75200; 
 }
/*********************about_h_end****************/

/*********************serv_o****************/
.serv_o1i span{
width:120px;
height:120px;
line-height:120px; 
 }
/*********************serv_o_end****************/

/*********************team_h****************/

/*********************price****************/
#price {
background-image: url(../img/9.jpg);
background-position: center;
}
.price_1ril span{
width:120px;
height:120px;
line-height:120px; 
 }
.price_1r hr{
background:#1c2428; 
 }
.price_1l{
padding-top:150px; 
 }
/*********************price_end****************/


@media screen and (max-width : 767px){
.caption_il  br{
display:none; 
 }
.caption_il  {
text-align:center;
margin-bottom:15px;
padding-top:0!important; 
 }
.caption_il p {
text-align:left; 
 }
.caption_il .font_50 {
font-size:36px!important;
 }
.about_h1r{
margin-top:15px;
text-align:center; 
 }
.about_h1r p{
text-align:left; 
 }
.about_h1ri1r{
margin-top:10px; 
 }
.about_h2i {
text-align:center;  
 }
.about_h2ir {
padding-top:15px!important; 
 }
.about_h2i {
margin-top:8px;
margin-bottom:8px; 
 }
.serv_pg1{
text-align:center; 
 }
.serv_pg1m{
margin-top:15px;
margin-bottom:15px; 
 }
.serv_pg1rir{
margin-top:15px; 
 }
.serv_o1i {
margin-top:8px;
margin-bottom:8px; 
 }
.serv_o1i p{
text-align:left; 
 }
.price_1l{
padding-top:0;
margin-bottom:15px;
text-align:center; 
 }
.price_1l .font_50{
font-size:36px!important;
 }
.price_1ril{
margin-bottom:15px;
text-align:center; 
 }
.price_1rir{
text-align:center; 
 }
 }


@media (min-width:576px) and (max-width:767px) {

 }
@media (min-width:768px) and (max-width:991px) {
.caption_ir img{
min-height:400px; 
 }
.caption_il {
padding-top:0!important; 
 }
.about_h1l img{
min-height:450px;  
 }
.about_h1ri1l .font_60{
font-size:40px!important; 
 }
.about_h2il h3 {
width: 90px;
height: 90px;
line-height: 90px;
}
.about_h2ir {
padding-top:20px!important; 
 }
.about_h2ir h4{
font-size:16px;
 }
.serv_pg1m img{
min-height:500px; 
 }
.serv_pg1ril .font_50{
font-size:30px!important; 
 }
.price_1ril span {
width: 70px;
height: 70px;
line-height: 70px;
}
.caption_il br{
display:none;
 }
 }

@media (min-width:992px) and (max-width:1200px) {
.caption_ir img{
min-height:450px; 
 }
.caption_il br{
display:none;
 }
.about_h1l img{
min-height:450px;  
 }
.about_h2il h3 {
width: 130px;
height: 130px;
line-height: 130px;
}
.about_h2ir {
padding-top:30px!important; 
 }
.about_h2ir h4{
font-size:18px;
 }
.price_1ril span {
width: 70px;
height: 70px;
line-height: 70px;
}
.price_1ril span {
width: 100px;
height: 100px;
line-height: 100px;
}
 }
@media (min-width:1201px) and (max-width:1270px) {
.caption_il br{
display:none;
 }
.about_h2il h3 {
width: 150px;
height: 150px;
line-height: 150px;
}
 }
@media (min-width:1400px) and (max-width:2000px) {
.about_h2il h3 {
    width: 200px;
    height: 200px;
    line-height: 200px;
}
 }



/* ==========================================
   Estilos para el carrusel a pantalla completa
   ========================================== */
.carousel-item {
  height: 80vh; /* Ajusta la altura del carrusel */
  min-height: 450px;
}

.carousel-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.carousel-caption-custom {
  z-index: 2;
  background: rgba(0, 0, 0, 0.45); /* Capa oscura para dar contraste al texto */
}

/* Tamaño controlado para el logo en la barra de navegación */
.logo-nav {
  height: 45px; /* Controla el alto del logo (ajusta entre 30px y 40px según te guste) */
  width: auto;  /* Mantiene la proporción original para que no se deforme */
  object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
    transition: filter 0.3s ease;
}

.resplandor-blanco {
  text-shadow: 
    0 0 5px rgba(255, 255, 255, 0.9),
    0 0 10px rgba(255, 255, 255, 0.8),
    0 0 15px rgba(255, 255, 255, 0.6);
  font-weight: bold;
}

.sombra-negra {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  font-weight: bold;
}


/* Forzar alto y ancho completo sin bordes */
#center, 
#center .container-fluid {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.carousel-item {
  height: 85vh; /* Ocupa el 85% de la altura de la pantalla */
  min-height: 500px;
  width: 100%;
}

.carousel-bg-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.carousel-caption-custom {
  z-index: 2;
  background: rgba(0, 0, 0, 0.4); /* Capa oscura para que el texto resalte */
}

/* Fuerza a que las columnas hijas ocupen el 100% de la altura de la fila flex */
.row.serv_h2 > div {
    display: flex;
}

.serv_h2i {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el contenido verticalmente */
}

/* Reduce el tamaño del icono de llave/candado en móviles */
@media (max-width: 767.98px) {
    .font_60 {
        font-size: 40px !important;
    }
}

/* Estilos para el cartelito de novedad */
.badge-novedad {
    position: absolute;
    top: 10px;          /* Distancia desde arriba */
    right: 10px;        /* Distancia desde la derecha */
    background-color: #ff6600; /* El color naranja del sitio (ajústalo si usas otro código hexadecimal) */
    color: #ffffff;     /* Texto blanco */
    font-size: 12px;    /* Tamaño de letra compacto */
    font-weight: bold;
    padding: 4px 8px;   /* Espacio interno del cartelito */
    border-radius: 4px; /* Bordes suavemente redondeados */
    text-transform: uppercase; /* Texto en mayúsculas */
    z-index: 10;        /* Asegura que se vea por encima del fondo */
}

/* Opcional: Ajuste para pantallas móviles si queda muy pegado */
@media (max-width: 767.98px) {
    .badge-novedad {
        font-size: 11px;
        padding: 2px 6px;
        top: 6px;
        right: 6px;
    }
}