/********** Template CSS **********/
:root {
    --primary: #0f3269;
    --light: #F8F8F8;
    --dark: #252525;
    --footer:#b78d65;
}

/* Estilos generales para el botón "Volver arriba" */
.back-to-top {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 30px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: #0f3269; /* Fondo del botón */
    color: white;
    border: none;
    border-radius: 0; /* Bordes redondeados */
    font-size: 24px;
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;

}
.show {
    opacity: 1;
}

/* Estilos del ícono dentro del botón */
.back-to-top i {
    pointer-events: none; /* Evita que el cursor cambie al pasar sobre el ícono */
}
/* Posición del botón en pantallas grandes */
@media (min-width: 1200px) {
    .back-to-top {
        right: 360px; /* Posición desde el borde derecho */
    }
}

/* Posición del botón en pantallas medianas */
@media (max-width: 1199px) and (min-width: 768px) {
    .back-to-top {
        right: 55px; /* Posición desde el borde derecho */
    }
}

/* Posición del botón en pantallas pequeñas */
@media (max-width: 767px) {
    .back-to-top {
        right: 25px; /* Posición desde el borde derecho */
    }
}




/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}

.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

.btn-outline-body {
    color: var(--primary);
    border-color: #777777;
}

.btn-outline-body:hover {
    color: #FFFFFF;
    background: var(--primary);
    border-color: var(--primary);
}

    
    .contenedor{
      width: 90%;
      max-width: 1200px;
      margin: 0px auto;
      padding: 30px 0px 20px;
      display: grid;
      grid-gap: 0px;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(7, auto);
      grid-template-areas:
                          "header header header header"
                          "menu menu menu menu"
                          "slider slider slider slider"
                          "specialties specialties specialties specialties"
                          "sidebar content content content"
                          "address address licence tax"
                          "footer footer footer footer";
    }
    .contenedor .slider{
     grid-area: slider;
    }
    
    
    .contenedor .specialti{
      grid-area: specialties;
      background: white;
    }
    .contenedor .specia{
      grid-area: specialties;
      background: white;
    }
    
    
    
    .contenedor .content{
      background: white;
      grid-area: content;
      text-align: justify;
      padding: 10px 20px;
      font-size: 14px;
      line-height: 1.5;
     }
    
    
    .contenedor .footer{
      grid-area: footer;
   
    }
    
   
    
    
    @media (max-width: 768px){
      .contenedor{
         grid-template-areas:
         "header header header header"
         "slider slider slider slider"
         "specialties specialties specialties specialties"
         "content content content content"
         "sidebar sidebar sidebar sidebar"
         "address address address address"
         "licence licence licence licence"
         "tax tax tax tax"
         "footer footer footer footer";            
      }
    
    }   
    
    

    /*------------------------------------Header.css-----------------*/
    /* Estilo del encabezado */
    .contenedor .header {
        grid-area: header;
        position: relative; 
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f9f9f9;
        padding: 20px 30px;
        border-bottom: 2px solid #ccc;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Sombras para un efecto flotante */
    
    }
    
    .contenedor .header:hover {
        background: #eef2f5; /* Cambio suave al hacer hover en el encabezado */
    }
    
    /* Botón de menú (solo visible en móviles) */
    #btn-menu {
        display: none;
    }
    
    
    
    .title {
      text-align: left;
      color: #333;
      animation: slideIn 1s ease-out; /* Animación suave al aparecer */
    }
    
    @keyframes slideIn {
      0% {
          opacity: 0;
          transform: translateY(-20px);
      }
      100% {
          opacity: 1;
          transform: translateY(0);
      }
    }
    
    .site-title {
       
        font-size: 36px;
        font-weight: bold;
        color: #222;
        margin: 0;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: color 0.3s ease;
    }
    
    .site-description {
        font-family: 'Open Sans', sans-serif;
        font-size: 14px;
        font-style: italic;
        color: #666;
        margin: 5px 0;
        transition: color 0.3s ease;
    }
    
    
    /* Redes sociales */
    .icons {
        display: flex;
        gap: 15px;
        align-items: center;
    }
    
    .icons .social-button {
        background: none;
        border: none;
        cursor: pointer;
        transition: transform 0.3s ease;
    }
    
    /* Íconos con sombras suaves y tamaño más grande */
    .icons .social-button i {
        font-size: 32px;
        color: #555;
        transition: color 0.4s ease, transform 0.4s ease; /* Transición suave */
        text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Efecto de sombra en íconos */
    }
    
    /* Efecto de hover en redes sociales */
    .icons .social-button:hover i {
        color: #00D4FF; /* Color brillante al hacer hover */
        transform: scale(1.2); /* Ampliar ligeramente en hover */
    }
    
    /* Colores específicos de cada red social */
    .icons .face i {
        color: #4267B2;
    }
    
    .icons .insta i {
        color: #E4405F;
    }
    
    .icons .yout i {
        color: #FF0000;
    }
    
    /* Efecto de gradiente metálico en hover para redes sociales */
    .icons .face:hover i {
        background: linear-gradient(135deg, #4267B2 0%, #00D4FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .icons .insta:hover i {
        background: linear-gradient(135deg, #E4405F 0%, #FFC837 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .icons .yout:hover i {
        background: linear-gradient(135deg, #FF0000 0%, #FFD700 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    /* Responsividad */
    @media (max-width: 768px) {
        .contenedor .header {
            flex-direction: column;
            align-items: center;
            padding: 15px;
        }
    
        .title {
            text-align: center;
        }
    
        .site-title {
            font-size: 28px;
        }
    
        .site-description {
            font-size: 12px;
        }
    
        .icons {
            margin-top: 10px;
        }
    
        #btn-menu {
            display: block;
            font-size: 24px;
            margin-bottom: 10px;
            cursor: pointer;
        }
    }

/*** Navbar ***/
.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar .navbar-nav .nav-link {
    margin-right: 15px;
    padding: 20px 0;
    color: var(--dark);
    font-weight: 500;
    text-transform: uppercase;
    outline: none;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar.sticky-top {
    top: -100px;
    transition: .5s;
}


@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        border-top: 1px solid #EEEEEE;
    }
}

@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        transition: .5s;
        opacity: 0;
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        transition: .5s;
        opacity: 1;
    }
}




/*** Header ***/
.owl-carousel-inner {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.owl-carousel-inner a,
.owl-carousel-inner button {
    pointer-events: auto; 
    z-index: 5; 
}


/* Blueprint container */
.owl-carousel-inner .col-10 {
    position: absolute;
    bottom: 10vh;
    left: 6vw;
    max-width: 600px;
    padding: 2.8rem 3rem;
    opacity: 0;
    animation: blueprintIn 1.1s ease-out forwards;
}

/* Grid técnica (sutil) */
.owl-carousel-inner .col-10::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0;
    animation: gridFade 0.8s ease-out forwards;
    animation-delay: 0.5s;
}

/* Línea guía */
.owl-carousel-inner .col-10::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 0;
    background: var(--primary, #00aaff);
    animation: guideLineGrow 1s ease-out forwards;
    animation-delay: 0.9s;
}

/* Animaciones estructurales */
@keyframes blueprintIn {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gridFade {
    to {
        opacity: 1;
    }
}

@keyframes guideLineGrow {
    to {
        height: 100%;
    }
}

/* Texto blueprint */
.owl-carousel-inner h2 {
    font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: clamp(1.45rem, 2.6vw, 2.1rem);
    line-height: 1.3;
    letter-spacing: 0.025em;
    color: #ffffff;
    position: relative;
    text-transform: uppercase;
}

/* Revelado por palabras */
.owl-carousel-inner h2 span {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
    animation: wordReveal 0.6s ease-out forwards;
}

/* Delay progresivo por palabra */
.owl-carousel-inner h2 span:nth-child(1) { animation-delay: 1.2s; }
.owl-carousel-inner h2 span:nth-child(2) { animation-delay: 1.35s; }
.owl-carousel-inner h2 span:nth-child(3) { animation-delay: 1.5s; }
.owl-carousel-inner h2 span:nth-child(4) { animation-delay: 1.65s; }

/* Animación palabra */
@keyframes wordReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.owl-carousel-inner.clickable {
    cursor: pointer;
}


/* ----------- RESPONSIVE ------------ */

/* Tablets */
@media (max-width: 1024px) {
    .owl-carousel-inner .col-10 {
        max-width: 480px;
        padding: 1.8rem 2rem;
    }
    .owl-carousel-inner h2 {
        font-size: clamp(1.2rem, 3vw, 1.8rem);
    }
}

/* Smartphones grandes */
@media (max-width: 768px) {
    .owl-carousel-inner .col-10 {
        max-width: 90%;
        padding: 1.5rem 1.8rem;
    }
    .owl-carousel-inner h2 {
        font-size: clamp(1rem, 4.5vw, 1.5rem);
        line-height: 1.3;
    }
}

/* Smartphones pequeños */
@media (max-width: 480px) {
    .owl-carousel-inner .col-10 {
        max-width: 95%;
        padding: 1.2rem 1.5rem;
    }
    .owl-carousel-inner h2 {
        font-size: clamp(0.9rem, 5vw, 1.3rem);
        line-height: 1.2;
    }
    .owl-carousel-inner .col-10::before {
        background-size: 16px 16px;
    }
}




/*** Header Carousel ***/

@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 500px;
    }

    .header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .header-carousel .owl-carousel-item p {
        font-size: 16px !important;
    }
}

@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        aspect-ratio: 3 / 4; /* MÁS ALTA, MENOS ANCHA */
        min-height: auto;
    }

    .header-carousel .owl-carousel-item picture,
    .header-carousel .owl-carousel-item img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}


.header-carousel .owl-dots {
    position: absolute;
    width: 70px;
    height: 100%;
    top: 0;
    right: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 10;
}

.header-carousel .owl-dots .owl-dot {
    position: relative;
    width: 48px;
    height: 48px;
    margin: 8px 0;
    background: #222;
    border-radius: 12px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.header-carousel .owl-dots .owl-dot:hover {
    transform: scale(1.15);
    box-shadow: 0 0 18px var(--primary, #00ffe7);
}

.header-carousel .owl-dots .owl-dot.active {
    width: 65px;
    height: 65px;
    box-shadow: 0 0 28px var(--primary, #00ffe7);
    border-radius: 16px;
    animation: pulseGlow 2.5s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px var(--primary, #00ffe7);
    }
    50% {
        box-shadow: 0 0 35px var(--primary, #00ffe7);
    }
}

.header-carousel .owl-dots .owl-dot img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding: 3px;
    border-radius: 12px;
    transition: opacity 0.4s ease;
    opacity: 0.3;
}

.header-carousel .owl-dots .owl-dot.active img {
    opacity: 1;
}

/* Contenedor de texto con fondo desenfocado y animación */
.owl-carousel-inner .text-content {
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(6px);
    padding: 2rem 2.8rem;
    border-radius: 14px;
    max-width: 650px;
    color: #e0f7fa;
    box-shadow: 0 4px 24px rgba(0, 255, 230, 0.35);
    animation: slideUpFadeIn 1.2s ease forwards;
    opacity: 0;
    transform: translateY(40px);
    text-transform: uppercase;
}

@keyframes slideUpFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Sombra de texto dinámica */
.owl-carousel-inner h2,
.owl-carousel-inner p {
    text-shadow:
        0 3px 8px rgba(0, 0, 0, 0.95),
        0 0 18px rgba(34, 37, 37, 0.8);
    animation: textGlow 4s ease-in-out infinite;
}

@keyframes textGlow {
    0%, 100% {
        text-shadow:
            0 3px 8px rgba(0, 0, 0, 0.95),
            0 0 18px rgba(6, 7, 7, 0.8);
    }
    50% {
        text-shadow:
            0 3px 12px rgba(0, 0, 0, 1),
            0 0 26px rgb(18, 19, 19);
    }
}


.owl-carousel-item img {
    transition: transform 8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center center;
    transform: scale(1) rotate(0deg);
    border-radius: 14px;
   filter: drop-shadow(0 4px 8px rgba(17, 15, 15, 0.4)) brightness(0.75);
}

.owl-carousel-item.active img {
    transform: scale(1.1) rotate(1.3deg);
}





/*** About & Feature ***/

.about-img  {
    position: relative;
    height: 100%;
    min-height: 400px;
}

.about-img img {
    position: absolute;
    width: 70%;
    height: auto;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.about-img .img-1 {
    top: 0;
    left: 0;
    z-index: 2;
}

.about-img .img-2 {
    bottom: 0;
    right: 0;
    z-index: 1;
    transform: rotate(-2deg);
}

/* Optional hover effect for some life */
.about-img img:hover {
    transform: scale(1.02);
}

.about-img,
.feature-img {
    position: relative;
    height: 100%;
    min-height: 400px;
}

.about-img img,
.feature-img img {
    position: absolute;
    width: 60%;
    height: 80%;
    object-fit: cover;
}

.about-img img:last-child,
.feature-img img:last-child {
    margin: 20% 0 0 40%;
}

.about-img::before,
.feature-img::before {
    position: absolute;
    content: "";
    width: 60%;
    height: 80%;
    top: 10%;
    left: 20%;
    border: 5px solid var(--primary);
    z-index: -1;
}


/*** Service ***/
.service-item .bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.service-item .service-text {
    background: var(--light);
    transition: .5s;
}

.service-item:hover .service-text {
    background: rgba(0, 0, 0, .3);
}

.service-item * {
    transition: .5;
}

.service-item:hover * {
    color: #FFFFFF;
}

.service-item .btn {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    background: #e9e9e9;
    color: #000 !important;
    white-space: nowrap;
    overflow: hidden;
    transition: .5s;
}

.service-item:hover .btn {
    width: 140px;
}


/*** Project ***/
.project .nav .nav-link {
    background: var(--light);
    transition: .5s;
}

.project .nav .nav-link.active {
    background: var(--primary);
}

.project .nav .nav-link.active h3 {
    color: #FFFFFF !important;
}



/*** Appointment ***/
.bootstrap-datetimepicker-widget.bottom {
    top: auto !important;
}

.bootstrap-datetimepicker-widget .table * {
    border-bottom-width: 0px;
}

.bootstrap-datetimepicker-widget .table th {
    font-weight: 500;
}

.bootstrap-datetimepicker-widget.dropdown-menu {
    padding: 10px;
    border-radius: 2px;
}

.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover {
    background: var(--primary);
}

.bootstrap-datetimepicker-widget table td.today::before {
    border-bottom-color: var(--primary);
}



/*** Footer ***/
.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #777777;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn-outline-body{
color: var(--footer);
border-color: #777777;
}



.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--footer);
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--footer);
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .form-control {
    border-color: #777777;
}

.footer .copyright {
    padding: 25px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .copyright a:hover {
    color: var(--primary);
}

/* Estilo del aside */
.sidebar .card {
  background-color: #0f3269;
  color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sidebar .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

/* Encabezado */
.sidebar .card-header {
  background-color: #001a3a;
  font-size: 1.5rem;
  font-weight: bold;
  padding: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Lista */
.sidebar .list-group {
  padding: 0;
  margin: 0;
  list-style: none;
}

/* Elementos de la lista */
.sidebar .list-group-item {
  background-color: transparent;
  border: none;
  padding: 1.5rem 1rem;
  transition: background-color 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar .list-group-item:last-child {
  border-bottom: none;
}

.sidebar .list-group-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

/* Títulos dentro de cada item */
.sidebar .list-group-item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #ffffff;
}

/* Párrafos */
.sidebar .list-group-item p {
  font-size: 0.95rem;
  color: #d3d3d3;
  margin: 0;
}

/* Imágenes */
.sidebar .list-group-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  transition: transform 0.3s ease;
}

.sidebar .list-group-item img:hover {
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar .card {
    margin-bottom: 2rem;
  }

  .sidebar .card-header {
    font-size: 1.2rem;
  }

  .sidebar .list-group-item h3 {
    font-size: 1.1rem;
  }

  .sidebar .list-group-item p {
    font-size: 0.9rem;
  }
}
    



/* Contenedor general */
.text-content {
  color: #2c3e50;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.7;
  font-size: 1rem;
  background-color: #fdfdfd;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

/* Párrafos */
.text-content p {
  margin-bottom: 1.2rem;
}

/* Título de sección */
.text-content h5 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #005792;
}

/* Lista */
.text-content .list-group-item {
  background-color: transparent;
  border: none;
  padding-left: 0;
  font-size: 1rem;
  position: relative;
  padding-left: 2rem;
}

/* Emojis o íconos de cada item */
.text-content .list-group-item::before {
  content: "🔹";
  position: absolute;
  left: 0;
  top: 0.4rem;
  font-size: 1rem;
}

/* Reemplaza el emoji si ya usas uno (opcional) */
.text-content .list-group-item.emoji::before {
  content: "";
}

/* Texto destacado */
.text-kmbj {
  color: #0d3b66;
}

/* Texto en negrita final */
.text-content .fw-bold {
  border-top: 1px solid #ccc;
  padding-top: 1rem;
  margin-top: 2rem;
  font-size: 0.95rem;
  color: #333;
}

/* Responsive spacing para pantallas más pequeñas */
@media (max-width: 576px) {
  .text-content {
    padding: 1.5rem 1rem;
  }

  .text-content h5 {
    font-size: 1.1rem;
  }

  .text-content .list-group-item {
    font-size: 0.95rem;
  }
}


/* Contenedor principal */
.wrapper {
  position: relative;
  width: 100%;
  max-width: 750px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: linear-gradient(80deg, #0066cc, #003366);
  border-radius: 20px;
  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.3);
  margin: auto;
  padding: 5px;

}




/* Contenedor de imágenes */
.wrapper .images {
  position: relative;
  width: 100%;
  height: 100%;
}

.wrapper .images .img-1,
.wrapper .images .img-2 {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 0.5s ease;
}

.wrapper .images .img-1 {
  background-image: image-set(
    url("../img/drawing-2.webp") type("image/webp"),
    url("../img/drawing-2.jpg") type("image/jpeg")
  );
}

.wrapper .images .img-2 {
  background-image: image-set(
    url("../img/drawing-1.webp") type("image/webp"),
    url("../img/drawing-1.jpg") type("image/jpeg")
  );
  width: 50%;
}


/* Estilo para las etiquetas "Antes" y "Después" */
.wrapper .label {
  position: absolute;
  font-size: 28px;
  font-weight: bold;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px 20px;
  border-radius: 10px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wrapper .before-label {
  top: 20px;
  left: 20px;
}

.wrapper .after-label {
  top: 20px;
  right: 20px;
}

/* Estilo del deslizador */
.wrapper .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.wrapper .slider-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: ew-resize;
  appearance: none;
  z-index: 10;
  opacity: 0;
}

/* Pulgar del deslizador */
.wrapper .slider-input::-webkit-slider-thumb {
  height: 50px;
  width: 50px;
  background-color: #ffffff;
  border-radius: 50%;
  border: 6px solid #0066cc;
  transition: transform 0.3s;
}

.wrapper .slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.3);
  background-color: #003366;
}

/* Línea divisoria */
.slider .drag-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 8px;
  height: 100%;
  background-color: #ffffff;
  z-index: 5;
  box-shadow: 3px 0 10px rgba(0, 0, 0, 0.5);
  transition: left 0.3s ease-out;
}

.wrapper .slider-input:focus {
  outline: none;
}
.slider-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  animation: blink 1.5s infinite, move 1.5s infinite;
  font-size: 100px;
  color:#000000;
  pointer-events: none;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes move {
  0% { transform: translate(-50%, -50%) translateX(-10px); }
  50% { transform: translate(-50%, -50%) translateX(10px); }
  100% { transform: translate(-50%, -50%) translateX(-10px); }
}

.slider-indicator.hide {
  display: none;
}





/*video*/


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



.section {
    background-color: #ffffff;
    padding: 8rem 0;
    position: relative;
    display: block;
}

.section-title {
    margin-bottom: 45px;
}

.text-widget h3,
.section-title h3 {
    margin: 0 0 25px;
    padding: 0;
    line-height: 1;
    font-size: 30px;
    font-weight: 700;
}

.section-title p {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    font-size: 16px;
    font-family: 'Droid Serif', sans-serif;
    font-style: italic;
}

.section.gb {
    background-color: #f6f6f6;
}

.section.db {
    background-color: #000000;
}

.overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 1;
    background: url(../img/pattern.png) repeat center center rgba(0, 0, 0, 0.7);
}

.video-section {
    position: relative;
}


.slider-bottom i {
    display: block;
    font-size: 14px;
    padding: 10px;
}

.home-text-wrapper {
    display: table;
    width: 100%;
    height: 100%;
    max-width: 900px;
    position: relative;
    text-align: center;
    z-index: 11;
}

.home-content {
    position: relative;
}

.home-message {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}

.home-message p {
    font-size: 54px;
    color: #ffffff;
    padding: 0;
    margin: 0;
    font-weight: 700;
    text-align: center;
}

.home-message small {
    font-size: 16px;
    font-family: 'Droid Serif', sans-serif;
    font-style: italic;
    display: block;
    padding: 20px 0 35px;
    margin: 0;
}




.contenedor .sidebar{
  grid-area: sidebar;
  text-align: center;
  padding: 5px auto;
  background: white;
  list-style: none;
  font-weight: 100;
 }



/************************project start*******************/
/* Fondo oscuro suave y márgenes */
.container-xxl.project {
    background-color: #f0f0f0; /* Fondo claro para todo el contenedor */
    padding: 90px 20px;
    font-family: 'Inter', sans-serif;
    color: #333; /* Texto oscuro */
}

/* Título Principal */
.text-center h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
}

.text-center h1::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: #007bff;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

/* Estilos para las pestañas (nav-pills) */
.nav-pills {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-right: 3px solid #ddd; /* Agregar un borde lateral a las pestañas */
    padding-right: 20px;
}

.nav-pills .nav-link {
    background-color: #fff;
    color: #212529;
    border: 1px solid #ddd;
    padding: 15px;
    font-size: 1.1rem;
    text-align: left;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.nav-pills .nav-link.active {
    background-color: #007bff;
    color: #fff;
    border: 1px solid #007bff;
    transform: scale(1.05); /* Efecto de aumento */
}

.nav-pills .nav-link:hover {
    background-color: #f1f1f1;
    border-color: #007bff;
    transform: scale(1.02); /* Efecto de aumento al hover */
}

/* Estilos para el contenido de las pestañas */
.tab-content {
    background-color: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.tab-pane {
    display: flex;
    gap: 30px;
    align-items: center;
}

/* Imágenes */
.tab-pane img {
    width: 100%;
    height: auto;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.tab-pane img:hover {
    transform: scale(1.05);
}

/* Texto dentro de las pestañas */
.tab-pane h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #0f3269;
    margin-bottom: 20px;
}

.tab-pane p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
    
}

.tab-pane ul {
    padding-left: 20px;
    margin-bottom: 20px;
}

.tab-pane li {
    font-size: 1.1rem;
    color: #333;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.tab-pane li i {
    color: #007bff;
    margin-right: 10px;
    font-size: 1.3rem;
}

/* Botón "Leer más" */
.tab-pane .btn {
    padding: 12px 30px;
    background-color: #0f3269;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.tab-pane .btn:hover {
    background-color: #0056b3;
    transform: translateY(-3px); /* Efecto de "elevar" al hacer hover */
}

/* Media queries para responsividad */
@media (max-width: 991px) {
    .container-xxl.project {
        padding: 70px 20px;
    }

    .nav-pills {
        border-right: none;
        margin-bottom: 30px;
    }

    .tab-content {
        padding: 30px;
    }

    .tab-pane {
        flex-direction: column;
    }

    .tab-pane img {
        max-width: 100%;
    }

    .tab-pane h1 {
        font-size: 1.8rem;
    }

    .tab-pane p {
        font-size: 1rem;
    }

    .tab-pane .btn {
        padding: 10px 25px;
        font-size: 1.1rem;
    }
}

@media (max-width: 767px) {
    .container-xxl.project {
        padding: 50px 15px;
    }

    .tab-pane h1 {
        font-size: 1.6rem;
    }

    .tab-pane p {
        font-size: 0.95rem;
    }

    .tab-pane .btn {
        padding: 10px 20px;
        font-size: 1rem;
    }
}



/******************************************
RESPONSIVE
******************************************/


@media (max-width: 768px) {
    .shop-extra .nav-tabs>li>a,
    .shop-extra .nav-tabs>li {
        float: none;
        display: block;
        width: 100%;
        text-align: center;
    }
    .shop-extra {
        padding: 30px 10px;
    }
    .home-message p {
        font-size: 28px;
    }
    .topbar .text-left {
        text-align: center;
    }
    .authorbox img {
        float: none;
        margin: 0 0 30px !important;
        min-width: 100px;
    }
    .media-left,
    .media>.pull-left {
        display: block;
        float: none;
        margin: 0 0 30px;
        padding-right: 10px;
    }
}

@media (max-width: 468px) {
    .blog-meta h3 {
        font-size: 20px;
    }
}

@media (min-width: 992px) {
    .yamm-fw {
        position: relative;
    }
    .hassubmenu:hover>ul,
    .yamm-fw:hover>ul {
        visibility: visible;
        opacity: 1;
        top: 100%;
    }
    .hassubmenu ul,
    .navbar-nav .yamm-fw ul {
        -webkit-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
        -moz-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
        -o-transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
        transition: visibility 0.35s ease-in-out, opacity 0.35s ease-in-out, top 0.35s ease-in-out, bottom 0.35s ease-in-out, left 0.35s ease-in-out, right 0.35s ease-in-out;
    }
    .yamm-fw .dropdown-menu {
        min-width: 240px;
        padding: 0;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
    }
    .hassubmenu>ul,
    .yamm-fw>ul {
        position: absolute;
        top: 160%;
        visibility: hidden;
        display: block;
        opacity: 0;
    }
    .yamm-fw>ul li {
        position: relative;
    }
    .yamm-fw>ul li:hover>ul {
        visibility: visible;
        opacity: 1;
        left: 100%;
    }
}

@media (max-width: 1200px) {
    .nav>li>a {
        padding: 1em 0.7em;
    }
}



 /*---------------------------------slider2.css--------------------------------*/
.sidebar {
  width: 100%;
  height: 100%;
  padding: 0px 5%;
}

.sidebar h2 {
 padding: 12px 0px;
}


.slider2{
 display: block;
 max-width: 300px;
 max-height: 180px;
 margin: auto;
 overflow: hidden;
 font-size: 12px;
 text-align: center;  
}

.slider2 ul{
         display: flex;
         padding: 0px;
         width: 400%;
         animation: cambio 2s infinite;
         animation-direction: unset;
         animation-duration: 14s;
        
     }

     .slide-1, .slide-2, .slide-3, .slide-4 {
      background-size: cover; /* Asegura que la imagen de fondo cubra el contenedor */
      background-position: center; /* Centra la imagen de fondo */
      width: 100%; /* Hace que el contenedor sea responsivo */
      max-width: 300px; /* Tamaño máximo del contenedor */
      height: 180px; /* Altura fija */
      margin: 10px; /* Espaciado entre slides */
  }
  
  /* Imágenes de fondo con WebP */
  .slide-1 {
      background-image: url(../img/building2.webp);
  }
  
  .slide-2 {
      background-image: url(../img/structural.webp);
  }
  
  .slide-3 {
      background-image: url(../img/strong.webp);
  }
  
  .slide-4 {
      background-image: url(../img/building.webp);
  }
  
  /* Fallback para navegadores que no soportan WebP */
  @supports not (background-image: url(../img/building2.webp)) {
      .slide-1 {
          background-image: url(../img/building2.jpg);
      }
  }
  
  @supports not (background-image: url(../img/structural.webp)) {
      .slide-2 {
          background-image: url(../img/structural.jpg);
      }
  }
  
  @supports not (background-image: url(../img/strong.webp)) {
      .slide-3 {
          background-image: url(../img/strong.jpg);
      }
  }
  
  @supports not (background-image: url(../img/building.webp)) {
      .slide-4 {
          background-image: url(../img/building.jpeg);
      }
  }
  
  /* Media Queries para responsividad */
  @media (max-width: 768px) {
      .slide-1, .slide-2, .slide-3, .slide-4 {
          height: 120px; /* Ajusta la altura para pantallas más pequeñas */
      }
  }
  
  


.sidebar .slider2 div{
 position: relative;
 top: 75%;
 background: rgb(0, 0, 0, 0.5);
 padding: 5px 0px;
              
}

.sidebar .slider2 div h3{
 color: white;
 font-size: 15px;
 font-family: sans-serif;
 font-weight: 100;
}


     @keyframes cambio {
         0.00% {margin-left: -0%;}
         23.00% {margin-left: -0%;}
     
         25.00% {margin-left: -100%;}
         48.00% {margin-left: -100%;}
     
         50.00% {margin-left: -200%;}
         73.00% {margin-left: -200%;}
     
         75.00% {margin-left: -300%;}
         98.00% {margin-left: -300%;}
     }

     @media (max-width: 768px) {
      .your-container-class img {
          width: 100%; 
          height: auto; 
      }
  }

*-----------------------------------------------specialtis.css----------------------------------------------------*/

.specialties {
  max-width: 1200px;
  padding: 8px 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(242, 242, 242, 1);
}

.specialties div {
  margin: 10px;
  max-width: 260px;
  text-align: center;
  font-family: inherit;
  font-size: 100%;
  font-weight: 100;
}

.specialties img,
.specialties video {
  width: 100%;
  height: auto; 
  max-width: 260px; 
  max-height: none; 
  object-fit: cover; 
}

@media (max-width: 768px) {
  .specialties h2 {
    font-size: 100%;
    padding-bottom: 20px;
  }

  .specialties div {
    flex: 1 1 100%; 
    max-width: none; 
  }
}

/*------------------------------------------specialtis2.css--------------------------------------*/

.specia {
  max-width: 1200px;
  height: auto;
  padding: 8px 0px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px solid rgb(242, 242, 242,1);
       
   }


@media (max-width: 768px){
  .specia h2{
        font-size: 100%;
        padding-bottom: 20PX;
  }


}  

/*-----------------------------------------------especialtis3.css-------------------------------------*/
.specialti {
  position: relative;
  text-align: center;
  font-family: inherit;
  font-weight: 100;
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 10px 1px;
  border-top: 1px solid rgba(242, 242, 242, 1);
  border-bottom: 1px solid rgba(242, 242, 242, 1);
}

.works {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centra los elementos dentro de works */
}

.works > div {
  flex: 1 1 300px; /* Flexbox para que ocupen espacio y se adapten */
  max-width: 400px;
  margin: 10px; /* Espaciado entre elementos */
  padding: 10px 1px;
}

.works h3, .works p {
  font-size: 90%;
}

.specialti img {
  width: 100%;
  height: auto; /* Mantiene la relación de aspecto */
  border-radius: 10px;
  padding: 1px;
}

@media (max-width: 768px) {
  .works h3, .works p {
      font-size: 80%; /* Ajusta el tamaño de fuente en pantallas pequeñas */
  }

  .specialti {
      padding: 5px 0; /* Reduce el padding en pantallas pequeñas */
  }
}