/*--------------------------------------------------------------------- File Name: responsive.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Raleway:100,400,600,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap');
/*****---------------------------------------- 1) font-family: 'Rajdhani', sans-serif;
 2) font-family: 'Poppins', sans-serif;
 ----------------------------------------*****/


/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/

@import url(animate.min.css);
@import url(normalize.css);
@import url(icomoon.css);
@import url(font-awesome.min.css);
@import url(meanmenu.css);
@import url(owl.carousel.min.css);
@import url(swiper.min.css);
@import url(slick.css);
@import url(jquery.fancybox.min.css);
@import url(jquery-ui.css);
@import url(nice-select.css);


/*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/

* {
     box-sizing: border-box !important;
}



html,body {
      scroll-behavior: smooth;
     color: #666666;
     font-size: 14px;
     font-family: 'Poppins', sans-serif;
     line-height: 1.80857;
     font-weight: normal;
     margin: 0;
     margin-bottom: 70px;
     padding: 0;
     min-height: 100vh;
     display:flex;
     flex-direction: column;
     height: 100%;
     margin: 0;

     
   
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the wrapper takes at least the full viewport height */
}

.content {
    flex-grow: 1; /* This makes the content area expand and push the footer down */
}


a {
     color: #1f1f1f;
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
     letter-spacing: 0;
     font-weight: normal;
     position: relative;
     padding: 0 0 10px 0;
     font-weight: normal;
     line-height: normal;
     color: #111111;
     margin: 0
}

h1 {
     font-size: 24px;
}

h2 {
     font-size: 22px;
}

h3 {
     font-size: 18px;
}

h4 {
     font-size: 16px
}

h5 {
     font-size: 14px
}

h6 {
     font-size: 13px
}

*,
*::after,
*::before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
     color: #212121;
     text-decoration: none!important;
     opacity: 1
}

button:focus {
     outline: none;
}

ul,
li,
ol {
     margin: 0px;
     padding: 0px;
     list-style: none;
}

p {
     margin: 0px;
     font-weight: 500;
     font-size: 15px;
     line-height: 24px;
}

a {
     color: #222222;
     text-decoration: none;
     outline: none !important;
}

a,
.btn {
     text-decoration: none !important;
     outline: none !important;
     -webkit-transition: all .3s ease-in-out;
     -moz-transition: all .3s ease-in-out;
     -ms-transition: all .3s ease-in-out;
     -o-transition: all .3s ease-in-out;
     transition: all .3s ease-in-out;
}

img {
     max-width: 100%;
     height: auto;
}

 :focus {
     outline: 0;
}

.btn-custom {
     margin-top: 20px;
     background-color: transparent !important;
     border: 2px solid #ddd;
     padding: 12px 40px;
     font-size: 16px;
}

.lead {
     font-size: 18px;
     line-height: 30px;
     color: #767676;
     margin: 0;
     padding: 0;
}

.form-control:focus {
     border-color: #ffffff !important;
     box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .25);
}

.navbar-form input {
     border: none !important;
}

.badge {
     font-weight: 500;
}

blockquote {
     margin: 20px 0 20px;
     padding: 30px;
}

button {
     border: 0;
     margin: 0;
     padding: 0;
     cursor: pointer;
}

.full {
     float: left;
     width: 100%;
}

.layout_padding {
     padding-top: 90px;
     padding-bottom: 90px;
}

.layout_padding_2 {
     padding-top: 75px;
     padding-bottom: 75px;
}

.light_silver {
     background: #f9f9f9;
}

.theme_bg {
     background: #38c8a8;
}

.margin_top_30 {
     margin-top: 30px !important;
}

.full {
     width: 100%;
     float: left;
     margin: 0;
     padding: 0;
}


/**-- heading section --**/


/*---------------------------- preloader area ----------------------------*/

.loader_bg {
     position: fixed;
     z-index: 9999999;
     background: #ffffff;
     width: 100%;
     height: 100%;
}

.loader {
     height: 100%;
     width: 100%;
     position: absolute;
     left: 0;
     top: 0;
     display: flex;
     justify-content: center;
     align-items: center;
}

.loader img {
     width: 280px;
}


/*-- navigation--*/
   /* main-header start */
   [data-target="#mainMenu"] {
     position: relative;
     z-index: 999;
    
    
     
     
   }
   
   #mainMenu li > a {
     font-size: 12px;
     letter-spacing: 1px;
     color: #ffffff;
     font-weight: 400;
     position: relative;
     z-index: 1;
     text-decoration: none;
     
   }

   .main-header {
   
    background-color: rgba(192, 139, 40, 0.7);
    backdrop-filter: blur(10px);
    
    
}
   
   .main-header.fixed-nav #mainMenu li > a {
     color: #ffffff;
     text-decoration: none;
   }
   
   #mainMenu li:not(:last-of-type) {
     margin-right: 30px;
   }
   
   #mainMenu li > a::before {
     position: absolute;
     content: "";
     width: calc(100% - 1px);
     height: 1px;
     background: #ffffff;
     bottom: -6px;
     left: 0;
   
     -webkit-transform: scale(0, 1);
     -ms-transform: scale(0, 1);
     transform: scale(0, 1);
     -webkit-transform-origin: right center;
     -ms-transform-origin: right center;
     transform-origin: right center;
     z-index: -1;
   
     -webkit-transition: transform 0.5s ease;
     transition: transform 0.5s ease;
   }
   
   #mainMenu li > a:hover::before,
   #mainMenu li > a.active::before {
     -webkit-transform: scale(1, 1);
     -ms-transform: scale(1, 1);
     transform: scale(1, 1);
     -webkit-transform-origin: left center;
     -ms-transform-origin: left center;
     transform-origin: left center;
   }
   
   .main-header.fixed-nav #mainMenu li > a::before {
     background: #000;
   }
   
   .main-header {
     position: fixed;
     top: 0px;
     left: 0;
     z-index: 99;
     width: 100%;
     -webkit-transition: all 0.4s ease;
     transition: all 0.4s ease;
   }
   
   .main-header.fixed-nav {
     top: 0;
     background: #fff;
     -webkit-box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.09);
     box-shadow: 0 8px 12px -8px rgba(0, 0, 0, 0.09);
     -webkit-transition: all 0.4s ease;
     transition: all 0.4s ease;
   }
   
   .main-header.fixed-nav .navbar-brand > img:last-of-type {
     display: block;
   }
   
   .main-header.fixed-nav .navbar-brand > img:first-of-type {
     display: none;
   }
   .navbar-brand {
     color: #fff;
   }
   .main-header .navbar-brand img {
     max-width: 40px;
     animation: fadeInLeft 0.4s both 0.4s;
   }
   /* main-header end */
   @media (max-width: 991px) {
     /*header starts*/
     .collapse.in {
       display: block !important;
       padding: 0;
       clear: both;
     }
   
     .navbar-toggler {
       margin: 0;
       padding: 0;
       width: 40px;
       height: 40px;
       position: absolute;
       top: 25px;
       right: 0;
       border: none;
       border-radius: 0;
       outline: none !important;
     }
   
     .main-header .navbar {
       float: none;
       width: 100%;
       padding-left: 0;
       padding-right: 0;
       text-align: center;
     }
   
     .main-header .navbar-nav {
       margin-top: 70px;
     }
   
     .main-header .navbar-nav li .nav-link {
       text-align: center;
       padding: 20px 15px;
       border-radius: 0px;
     }
   
     /**/
     .main-header .navbar-toggler .icon-bar {
       background-color: #fff;
       margin: 0 auto 6px;
       border-radius: 0;
       width: 30px;
       height: 3px;
       position: absolute;
       right: 0;
       -webkit-transition: all 0.2s ease;
       transition: all 0.2s ease;
     }
   
     .main-header .navbar .navbar-toggler .icon-bar:first-child {
       margin-top: 3px;
     }
   
     .main-header .navbar-toggler .icon-bar-1 {
       width: 10px;
       top: 0px;
     }
   
     .main-header .navbar-toggler .icon-bar-2 {
       width: 16px;
       top: 12px;
     }
   
     .main-header .navbar-toggler .icon-bar-3 {
       width: 20px;
       top: 21px;
     }
   
     .main-header .current .icon-bar {
       margin-bottom: 5px;
       border-radius: 0;
       display: block;
     }
   
     .main-header .current .icon-bar-1 {
       width: 18px;
     }
   
     .main-header .current .icon-bar-2 {
       width: 30px;
     }
   
     .main-header .current .icon-bar-3 {
       width: 10px;
     }
   
     .main-header .navbar-toggler:hover .icon-bar {
       background-color: #fff;
     }
   
     .main-header .navbar-toggler:focus .icon-bar {
       background-color: #fff;
     }
   
     /*header ends*/
   }
   

/*-- header area --*/


/*--------------------------------------------------------------------- top banner area ---------------------------------------------------------------------*/


/*--------------------------------------------------------------------- layout new css ---------------------------------------------------------------------*/

/** banner section **/

:root {
  /* Colores */
  --primary-color: #c6974c; /* o #c6964d */
  --secondary-color: #000000;
  --text-color-light: #fafcfd;
  --text-color-dark: #f5e0e0;
  --button-hover-color: #000;
  --arrow-color: white;
  --arrow-hover-color: #f39c12;

  /* Fuentes */
  --font-bruno-ace: "Bruno Ace SC", sans-serif;

  /* Transiciones */
  --transition-short: 0.2s ease;
  --transition-medium: 0.4s ease-in-out;
}

/* --- Estilos Generales del Carrusel --- */
.carousel-item {
  transition: transform var(--transition-medium);
}

.carousel-item img {
  width: 100%;
}

.carousel-indicators {
  bottom: 50px;
}

.carousel-indicators li {
  width: 20px;
  height: 20px;
  background: var(--text-color-light);
  border-radius: 20px;
  transition: background-color var(--transition-short), opacity var(--transition-short);
}

.carousel-indicators .active {
  background: var(--primary-color);
  background-color: var(--secondary-color);
}

/* --- Navegación del Carrusel (Flechas) --- */
.carousel-control-next-icon,
.carousel-control-prev-icon {
  display: none; /* Oculta los iconos por defecto de Bootstrap */
}

.carousel-control-prev,
.carousel-control-next {
  width: 5%;
}

.carousel-control-prev i,
.carousel-control-next i {
  font-size: 50px;
  color: var(--arrow-color);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.carousel-control-prev:hover i,
.carousel-control-next:hover i {
  color: var(--arrow-hover-color);
}

/* --- Contenido del Carrusel (Caption) --- */
.carousel-caption h1 {
  color: var(--text-color-dark);
  font-size: 65px;
  line-height: 80px;
  padding-bottom: 35px;
  font-weight: bold;
  font-family: var(--font-bruno-ace);
}

.carousel-caption span {
  color: var(--primary-color);
  font-size: 50px;
  font-family: var(--font-bruno-ace);
  line-height: 50px;
  font-weight: 500;
  padding-bottom: 20px;
}

.carousel-caption a {
  font-size: 17px;
  background-color: var(--primary-color);
  color: #fff;
  font-weight: 500;
  padding: 13px 0px;
  width: 100%;
  max-width: 190px;
  text-align: center;
  display: inline-block;
  transition: ease-in all var(--transition-short);
  margin-top: 50px;
  border-radius: 30px;
}

.carousel-caption a:hover {
  background-color: var(--button-hover-color);
  color: #fff;
  transition: ease-in all var(--transition-short);
}

/* --- Posicionamiento Relativo/Absoluto --- */
.banner_main {
  position: relative;
}

.relative {
  position: absolute;
  top: 56%;
  transform: translateY(-44%);
  padding: 0;
  }

/** about section **/

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.py-5 {
  padding-top: 3rem;
  padding-bottom: 3rem;
  text-align: center;
}

.text-center {
  text-align: center;
}

.mb-5 {
  margin-bottom: 3rem;
}

.d-block {
  display: block;
}

.w-100 {
  width: 100%;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

/* --- Estilos de la Sección de Servicios (encabezados principales) --- */
#services-showcase header h2 {
  color: #ffffff; /* Texto blanco puro */
  font-size: 2.5rem;
  font-weight: 700;
  /* Blur y transparencia eliminados aquí */
  filter: none; /* Asegura que no haya filtro de blur */
}
.text-primary {
    color: #d89e15 !important;
}
.text-dark {
    color: #ffffff !important;
}

#services-showcase header span {
  color: #ffffff; /* Texto blanco puro */
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* Blur y transparencia eliminados aquí */
  filter: none; /* Asegura que no haya filtro de blur */
}

/* --- Estilos para el Grid de Servicios (igual que antes) --- */
.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .row-cols-md-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .row-cols-lg-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Estilos de la Tarjeta de Servicio --- */
.service-card {
  background-color: #000000; /* Fondo de la tarjeta en negro */
  border: 1px solid #333333; /* Borde sutil gris oscuro */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  cursor: pointer;
  border-radius: 0.5rem;
  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}

.service-card .card-body {
  padding: 1.5rem;
}

/* --- TÍTULOS DE LAS TARJETAS: BLANCOS Y SIN BLUR/TRANSPARENCIA --- */
.service-card .card-title a {
  font-weight: 600;
  color: #ffffff; /* Texto blanco puro */
  text-decoration: none;
  transition: color 0.2s ease-in-out; /* Transición solo para el color ahora */

  /* Blur y transparencia eliminados aquí */
  filter: none; /* Asegura que no haya filtro de blur */
}

.service-card .card-title a:hover {
  /* Al pasar el mouse, el texto sigue siendo blanco, pero podríamos cambiarlo a un color de acento si lo deseas */
  color: #ffffff; /* Mantiene el color de acento azul al pasar el mouse, un buen contraste */
  /* filter: none; ya no es necesario aquí si el filtro está desactivado por defecto */
}

.service-card img {
  border-bottom: 1px solid #222222;
  display: block;
}
/** end about section **/




/** clients section **/
/* Estilos para el contenedor principal del título */
.galery1 {
  text-align: center; /* Centra el texto */
  padding: 20px 0;    /* Agrega espacio arriba y abajo */
}

/* Estilos para el span que actúa como título */
.galery1 span {
  font-family: Arial, sans-serif; /* Puedes cambiar la fuente */
  font-size: 2.5rem;             /* El tamaño del título */
  font-weight: bold;             /* Lo hace más grueso */
  color: #c47f18;                   /* Un color oscuro para que resalte */
  display: block;                /* Lo convierte en un bloque para que ocupe su propia línea */
  margin-bottom: 20px;           /* Agrega espacio debajo del título */
}

/* Estilos para el contenedor del carrusel */
.container-carousel {
  width: 100%;
  overflow: hidden; /* Oculta los elementos que se salen del contenedor */
  padding: 0 10px;  /* Opcional: agrega un poco de espacio a los lados */
}

/* El contenedor que se moverá con JavaScript */
.carousel-slide {
  display: flex;
  transition: transform 0.1s linear; /* Suaviza el movimiento */
}

/* Cada una de las cajas de las imágenes */
.image-box {
  flex-shrink: 0;       /* Evita que las cajas se encojan */
  width: 250px;
  margin-right: 20px;   /* Espacio entre cada imagen */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;     /* Asegura que la imagen no se salga de los bordes redondeados */

  /* Estilos para el efecto de fondo transparente con desenfoque (blur) */
  background-color: rgba(212, 211, 211, 0.2); /* Fondo semitransparente. Ajusta el valor rgba si lo necesitas */
  backdrop-filter: blur(5px);              /* Aplica el efecto de desenfoque al fondo */
}

/* Estilos para las imágenes dentro de las cajas */
.image-box img {
  width: 100%;
  height: auto;
  display: block;
}
/** end clients section **/


/** contact section **/
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 body {
     font-family: Arial, sans-serif;
     background-color: #f4f4f4;
     color: #333;
     background-image: url('../images/background/back1.png'); /* Imagen de fondo opcional */
     background-size: cover; /* Ajusta la imagen para cubrir toda la pantalla */
 }
 
 .container-background {
     background-color: rgba(80, 78, 78, 0.8); /* Fondo blanco con 80% de opacidad */
     backdrop-filter: blur(10px); /* Aplica desenfoque al fondo */
     padding: 40px;
     border-radius: 10px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
     max-width: 800px;
     margin: 50px auto;
 }
 
 .text1 {
     text-align: center;
     margin-bottom: 30px;
     font-size: 2.5em;
     color: #c6964d;
 }
 
 .nombre-empresa {
     font-weight: bold;
     color: #000000; /* Color de la empresa */
 }
 
 .wrapper {
     display: flex;
     flex-direction: column;
 }
 
 .info-empresa {
     margin-bottom: 20px;
 }
 
 .info-empresa h3 {
     font-size: 1.5em;
     margin-bottom: 10px;
     text-align: center;
     color: #ffffff;
 }
 
 .servicios {
     list-style-type: none;
     padding: 0;
     text-align: center;
 }
 
 .servicios li {
     margin: 10px 0;
     font-size: 1.1em;
     color: #ffffff;
 }
 
 .servicios a {
     text-decoration: none;
     color: #ffffff;
 }
 
 .servicios a:hover {
     text-decoration: underline;
 }
 
 .contacto {
     background-color: rgba(248, 249, 250, 0.9); /* Fondo claro con 90% de opacidad */
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }
 
 .contacto h3 {
     margin-bottom: 20px;
     text-align: center;
 }
 
 .formulario p {
     margin-bottom: 15px;
 }
 
 .formulario label {
     display: block;
     margin-bottom: 5px;
     font-weight: bold;
 }
 
 .formulario input, .formulario textarea {
     width: 100%;
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 5px;
 }
 
 .formulario textarea {
     resize: none; /* Deshabilita el redimensionamiento del área de texto */
 }
 
 .boton-enviar {
     background-color: #c6964d;
     color: white;
     padding: 10px 15px;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     font-size: 1em;
     transition: background-color 0.3s;
 }
 
 .boton-enviar:hover {
     background-color: #000000; /* Color más oscuro al pasar el mouse */
 }
/** end contact section **/


/** footer **/
footer {
    width: 100%;
    /* Add any background colors or padding you want for your footer */
}

.copyright {
    background-color: #646161; /* Example background color for copyright */
    padding: 10px 0;
    text-align: center;
    color: #ffffff;
}

/** end footer **/


/** inner page css **/

.margin_to90 .footer {
     margin-top: 90px;
}

.ourwork {
     margin: 90px 0 60px 0;
}

.our_box {
     margin-bottom: 30px;
}

.our_box figure {
     margin: 0;
}

.our_box figure img {
     width: 100%;
}