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

/* @media (min-width: 1200px) and (max-width: 1342px) {
    
}

@media (min-width: 992px) and (max-width: 1199px) {
    .navigation.navbar-dark .navbar-nav .nav-link {
      margin: 0 0px;
    }
   

    .testimonial_Carousel .test_box span {

    font-size: 21px;}
    ul.location_icon li {padding-right: 12px; font-size: 15px;}
    ul.link_icon li a {font-size: 16px;}
}

@media (min-width: 768px) and (max-width: 991px) {
    .navigation.navbar-dark .navbar-nav .nav-link {
      padding: 25px 10px;

margin: 0 0px;
    }
    .sign_btn {max-width: 128px;
font-size: 14px !important;}
    .text-bg h1 {
font-size: 39px;
line-height: 49px;
    }
    .about_box {max-width: inherit; margin-bottom: 30px;}
    .titlepage h2 {
      font-size: 27px;
    }
   
    .ho_socal {width: 190px;
height: 187px;}
    .testimonial_Carousel .test_box span {font-size: 15px;
margin-left: 7px;}
    ul.location_icon li {font-size: 14px;
padding-right: 10px;}
}

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



    .text-bg {padding-top: 30px; margin-bottom: 30px;}
    .text-bg h1 {font-size: 52px;

line-height: 66px;}
    
   .about_box {margin-bottom: 30px;}
   .ho_socal {width: 217px;
height: 214px;}

.d_none1 {display: none;}
.titlepage h2 {font-size: 28px;}
ul.conta_icon li a {font-size: 12px;}
    .navigation.navbar {
        float: left;
        display: inherit !important;
        padding: 0;
        width: 100%;
        padding-top: 12px;
    }
    .navigation .navbar-collapse {
        background: #000;
        padding: 20px;
       margin-top: 58px;
        position: absolute;
        width: 100%;
        margin-right: 20px;
        z-index: 999;
    }
    .navigation.navbar-dark .navbar-nav .nav-link {
       padding: 10px 10px;
        color: #fff;
    }
    .navigation.navbar-dark .navbar-toggler {
        border: inherit;
        float: left;
        padding: 0;
        margin-top: 15px;
    }
    .navigation.navbar-dark .navbar-toggler-icon {
        background: url(../images/menu_icon.png);
        background-repeat: no-repeat;
    }
    .margin_bottom1 {
        margin-bottom: 30px !important;
    }
}

@media (max-width: 575px) {
   
    .logo {
        text-align: center !important;
        padding-bottom: 6px;
       text-align: center;
    }
    .d_none {display: none;}
    .text-bg {margin-bottom: 30px; padding-top: 0;}
    .text-bg h1 {
font-size: 28px;
line-height: 38px;
    }
    .titlepage h2 {
        font-size: 27px;
    }
    .about_box {margin-bottom: 30px;}
    .service .read_more {margin: inherit;}
    .d_none1 {display: none;}
   .ho_socal {width: 228px;


height: 231px;}
    .testimonial_Carousel .carousel-indicators {bottom: -4px;}
    .navigation.navbar {
        float: right;
        display: inherit !important;
        padding: 0;
        width: 100%;
        margin-top: 20px;
    }
    .navigation .navbar-collapse {
        background: #000;
        padding: 20px;
       margin-top: 50px;
        position: absolute;
        width: 100%;
        margin-right: 20px;
        z-index: 999;
    }
    .navigation.navbar-dark .navbar-nav .nav-link {
        padding: 10px 10px;
        color: #fff;
    }
    .navigation.navbar-dark .navbar-toggler {
        float: right;
        margin-right: 2px;
        border: inherit;
    }
    .testimonial_box {
        padding: 0px 19px 40px 20px;
    }
    .navigation.navbar-dark .navbar-toggler-icon {
        background: url(../images/menu_icon.png);
        background-repeat: no-repeat;
    }
} */

/* DESKTOP: Alternar posición según data-position */
/* @media (min-width: 769px) {
    .service_box2[data-position="left"] {
        flex-direction: row;
    }
    
    .service_box2[data-position="right"] {
        flex-direction: row-reverse;
    }
    
    .contenido-imagen {
        flex: 0 0 60%; 
        min-width: 300px;
        transition: flex 0.3s ease;
    }
    
    .contenido-texto {
        flex: 1; 
        transition: flex 0.3s ease;
    }
} */

/* MÓVIL: SIEMPRE imagen arriba, texto abajo */
/* @media (max-width: 768px) {
    .service_box2 {
        flex-direction: column !important;
        padding: 15px;
    } */
    
    /* ORDEN FORZADO: imagen primero */
    /* .contenido-imagen {
        order: 1;
        flex: 1 1 100% !important;
        width: 100%;
        min-width: 100%;
        margin-right: 0; 
        margin-bottom: 20px; 
    }
    
    .contenido-texto {
        order: 2;
        flex: 1 1 100% !important;
        width: 100%;
        padding-top: 0; 
        padding-left: 0;
    } */
    
    /* Ajustar tamaño del título en móvil */
    /* .contenido-imagen h3 {
        font-size: 28px;
    } */


/* TABLET: Ajustes intermedios */
/* @media (max-width: 992px) and (min-width: 769px) {
    .contenido-imagen {
        flex: 0 0 45%;
    }
    
    .contenido-texto {
        flex: 0 0 50%;
    }
    
    .contenido-imagen {
        margin-right: 30px;
        margin-left: 30px;
    }
} */

/* footer de la ia */
 /* @media (max-width: 768px) {
      .footer {
        text-align: center;
      }
      .footer-logo img {
        margin-top: 1.5rem;
      }
    } */

    /* ====================================
   DISEÑO RESPONSIVE - SERVICE BOXES
   ==================================== */

/* ESCRITORIO: Alternar posición según data-position */
@media (min-width: 769px) {
    .service_box2 {
        display: flex;
        align-items: flex-start;
        gap: 30px;
        margin-bottom: 40px;
    }
    
    .service_box2[data-position="left"] {
        flex-direction: row;
    }
    
    .service_box2[data-position="right"] {
        flex-direction: row-reverse;
    }
    
    .contenido-imagen {
        flex: 0 0 60%;
        min-width: 300px;
    }
    
    .contenido-texto {
        flex: 1;
    }
}

/* MÓVIL: IMAGEN SIEMPRE PRIMERO */
@media (max-width: 768px) {
    /* Forzar estructura de columna */
    .service_box2,
    .service_box2[data-position="left"],
    .service_box2[data-position="right"] {
        display: flex !important;
        flex-direction: column !important;
        padding: 15px;
        margin-bottom: 30px;
    }
    
    /* FORZAR ORDEN: Imagen primero (order: 1), texto después (order: 2) */
    .contenido-imagen {
        order: 1 !important;
        flex: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
    }
    
    .contenido-texto {
        order: 2 !important;
        flex: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Ajustar imagen dentro del contenedor */
    .contenido-imagen img {
        width: 100%;
        height: auto;
        display: block;
    }
    
    /* Ajustar título en móvil */
    .contenido-imagen h3 {
        font-size: 24px;
        margin-bottom: 15px;
    }
    
    /* Ajustar botón "Ver más" */
    .contenido-texto .btn {
        margin-top: 15px;
    }
}

/* TABLET: Ajustes intermedios */
@media (min-width: 769px) and (max-width: 992px) {
    .service_box2 {
        gap: 20px;
    }
    
    .contenido-imagen {
        flex: 0 0 45%;
        min-width: 250px;
    }
    
    .contenido-texto {
        flex: 0 0 50%;
    }
}

/* TABLET PEQUEÑO (opcional: si quieres que también sea columna) */
@media (min-width: 576px) and (max-width: 768px) {
    .service_box2,
    .service_box2[data-position="left"],
    .service_box2[data-position="right"] {
        flex-direction: column !important;
    }
    
    .contenido-imagen {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    .contenido-texto {
        order: 2 !important;
        width: 100% !important;
    }
}

/* ====================================
   FOOTER RESPONSIVE
   ==================================== */
@media (max-width: 768px) {
    .footer {
        text-align: center;
    }
    
    .footer-logo img {
        margin-top: 1.5rem;
    }
}


/* ====================================
   ESCRITORIO: Sistema de expansión
   ==================================== */

@media (min-width: 769px) {
    /* Posición izquierda (imagen-texto) */
    .service_box2[data-position="left"] {
        flex-direction: row;
    }
    
    /* Posición derecha (texto-imagen) */
    .service_box2[data-position="right"] {
        flex-direction: row-reverse;
    }
    
    /* Proporciones iniciales */
    .contenido-imagen {
        flex: 0 0 60%;
        min-width: 300px;
        transition: flex 0.3s ease;
    }
    
    .contenido-texto {
        flex: 1;
        transition: flex 0.3s ease;
    }
    
    /* Estado expandido - posición izquierda */
    .service_box2.expanded-left .contenido-imagen {
        flex: 0 0 40%;
    }
    
    .service_box2.expanded-left .contenido-texto {
        flex: 0 0 60%;
    }
    
    /* Estado expandido - posición derecha */
    .service_box2.expanded-right .contenido-imagen {
        flex: 0 0 40%;
    }
    
    .service_box2.expanded-right .contenido-texto {
        flex: 0 0 60%;
    }
    
    /* Estilos de imagen */
    .contenido-imagen img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
    }
    
    .contenido-imagen h3 {
        font-size: 32px;
        margin-bottom: 15px;
        color: #333;
    }
}

/* ====================================
   MÓVIL: IMAGEN SIEMPRE PRIMERO
   ==================================== */

@media (max-width: 768px) {
    /* Forzar diseño en columna */
    .service_box2,
    .service_box2[data-position="left"],
    .service_box2[data-position="right"],
    .service_box2.expanded-left,
    .service_box2.expanded-right {
        display: flex !important;
        flex-direction: column !important;
        padding: 15px;
        gap: 0;
    }
    
    /* ORDEN FORZADO: Imagen primero */
    .contenido-imagen {
        order: 1 !important;
        flex: none !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
    }
    
    /* Texto después */
    .contenido-texto {
        order: 2 !important;
        flex: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* Ajustes de imagen en móvil */
    .contenido-imagen img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
        margin-bottom: 10px;
    }
    
    /* Ajustes de título en móvil */
    .contenido-imagen h3 {
        font-size: 24px;
        margin-bottom: 15px;
        text-align: center;
    }
    
    /* Ajustes de texto en móvil */
    .contenido-texto p {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 12px;
    }
    
    /* Botón "Ver más/menos" */
    .contenido-texto .btn {
        margin-top: 15px;
        width: 100%;
        padding: 10px;
    }
    
    /* Eliminar efecto de expansión en móvil */
    .service_box2.expanded-left .contenido-imagen,
    .service_box2.expanded-right .contenido-imagen,
    .service_box2.expanded-left .contenido-texto,
    .service_box2.expanded-right .contenido-texto {
        flex: none !important;
        width: 100% !important;
    }
}

/* ====================================
   TABLET: Ajustes intermedios
   ==================================== */

@media (min-width: 769px) and (max-width: 992px) {
    .service_box2 {
        gap: 20px;
        padding: 20px;
    }
    
    /* Proporciones para tablet */
    .contenido-imagen {
        flex: 0 0 45%;
        min-width: 250px;
    }
    
    .contenido-texto {
        flex: 0 0 50%;
    }
    
    /* Estado expandido en tablet */
    .service_box2.expanded-left .contenido-imagen,
    .service_box2.expanded-right .contenido-imagen {
        flex: 0 0 35%;
    }
    
    .service_box2.expanded-left .contenido-texto,
    .service_box2.expanded-right .contenido-texto {
        flex: 0 0 65%;
    }
    
    .contenido-imagen h3 {
        font-size: 28px;
    }
}

/* ====================================
   TABLET PEQUEÑO (576px - 768px)
   ==================================== */

@media (min-width: 576px) and (max-width: 768px) {
    .service_box2,
    .service_box2[data-position="left"],
    .service_box2[data-position="right"] {
        flex-direction: column !important;
        padding: 15px;
    }
    
    .contenido-imagen {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    .contenido-texto {
        order: 2 !important;
        width: 100% !important;
    }
    
    .contenido-imagen h3 {
        font-size: 26px;
        text-align: center;
    }
}

/* ====================================
   ESTILOS ADICIONALES
   ==================================== */

/* Texto extra (contenido desplegable) */
#textoExtra1, #textoExtra2, #textoExtra3, 
#textoExtra4, #textoExtra5, #textoExtra6 {
    display: none;
    margin-top: 10px;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Botones "Ver más/menos" */
.btn-primary.btn-sm {
    margin-top: 15px;
    padding: 8px 20px;
    font-size: 14px;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.btn-primary.btn-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ====================================
   FOOTER RESPONSIVE
   ==================================== */

@media (max-width: 768px) {
    .footer {
        text-align: center;
    }
    
    .footer-logo img {
        margin-top: 1.5rem;
    }
    
    .footer ul {
        padding-left: 0;
    }
    
    .footer ul li {
        list-style: none;
    }
}

/* ====================================
   NAVEGACIÓN RESPONSIVE
   ==================================== */

@media (min-width: 992px) and (max-width: 1199px) {
    .navigation.navbar-dark .navbar-nav .nav-link {
        margin: 0 0px;
    }

    .testimonial_Carousel .test_box span {
        font-size: 21px;
    }
    
    ul.location_icon li {
        padding-right: 12px;
        font-size: 15px;
    }
    
    ul.link_icon li a {
        font-size: 16px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .navigation.navbar-dark .navbar-nav .nav-link {
        padding: 25px 10px;
        margin: 0 0px;
    }
    
    .sign_btn {
        max-width: 128px;
        font-size: 14px !important;
    }
    
    .text-bg h1 {
        font-size: 39px;
        line-height: 49px;
    }
    
    .about_box {
        max-width: inherit;
        margin-bottom: 30px;
    }
    
    .titlepage h2 {
        font-size: 27px;
    }
   
    .ho_socal {
        width: 190px;
        height: 187px;
    }
    
    .testimonial_Carousel .test_box span {
        font-size: 15px;
        margin-left: 7px;
    }
    
    ul.location_icon li {
        font-size: 14px;
        padding-right: 10px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .text-bg {
        padding-top: 30px;
        margin-bottom: 30px;
    }
    
    .text-bg h1 {
        font-size: 52px;
        line-height: 66px;
    }
    
    .about_box {
        margin-bottom: 30px;
    }
    
    .ho_socal {
        width: 217px;
        height: 214px;
    }

    .d_none1 {
        display: none;
    }
    
    .titlepage h2 {
        font-size: 28px;
    }
    
    ul.conta_icon li a {
        font-size: 12px;
    }
    
    .navigation.navbar {
        float: left;
        display: inherit !important;
        padding: 0;
        width: 100%;
        padding-top: 12px;
    }
    
    .navigation .navbar-collapse {
        background: #000;
        padding: 20px;
        margin-top: 58px;
        position: absolute;
        width: 100%;
        margin-right: 20px;
        z-index: 999;
    }
    
    .navigation.navbar-dark .navbar-nav .nav-link {
        padding: 10px 10px;
        color: #fff;
    }
    
    .navigation.navbar-dark .navbar-toggler {
        border: inherit;
        float: left;
        padding: 0;
        margin-top: 15px;
    }
    
    .navigation.navbar-dark .navbar-toggler-icon {
        background: url(../images/menu_icon.png);
        background-repeat: no-repeat;
    }
    
    .margin_bottom1 {
        margin-bottom: 30px !important;
    }
}

@media (max-width: 575px) {
    .logo {
        text-align: center !important;
        padding-bottom: 6px;
    }
    
    .d_none {
        display: none;
    }
    
    .text-bg {
        margin-bottom: 30px;
        padding-top: 0;
    }
    
    .text-bg h1 {
        font-size: 28px;
        line-height: 38px;
    }
    
    .titlepage h2 {
        font-size: 27px;
    }
    
    .about_box {
        margin-bottom: 30px;
    }
    
    .service .read_more {
        margin: inherit;
    }
    
    .d_none1 {
        display: none;
    }
   
    .ho_socal {
        width: 228px;
        height: 231px;
    }
    
    .testimonial_Carousel .carousel-indicators {
        bottom: -4px;
    }
    
    .navigation.navbar {
        float: right;
        display: inherit !important;
        padding: 0;
        width: 100%;
        margin-top: 20px;
    }
    
    .navigation .navbar-collapse {
        background: #000;
        padding: 20px;
        margin-top: 50px;
        position: absolute;
        width: 100%;
        margin-right: 20px;
        z-index: 999;
    }
    
    .navigation.navbar-dark .navbar-nav .nav-link {
        padding: 10px 10px;
        color: #fff;
    }
    
    .navigation.navbar-dark .navbar-toggler {
        float: right;
        margin-right: 2px;
        border: inherit;
    }
    
    .testimonial_box {
        padding: 0px 19px 40px 20px;
    }
    
    .navigation.navbar-dark .navbar-toggler-icon {
        background: url(../images/menu_icon.png);
        background-repeat: no-repeat;
    }
}