@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Francois+One&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Francois+One&family=M+PLUS+1p:wght@500&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');
     :root {
        --background-color: rgb(31, 31, 33);
        --color-principal: rgb(237, 135, 60);
        --color-texto: rgb(255, 255, 255);
        --color-hover: rgba(0, 115, 197, 0.692);
        --color-titulo: rgb(234, 217, 200);
    }
    
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }
    /* body {} */
    /* background-color: var(--background-color); */
    /* contenido principal */
    
    .contenedor1 {
        padding: 60px 0;
        width: 90%;
        max-width: 1000px;
        margin: auto;
        overflow: hidden;
    }
    
    .titulo {
        /* color: #642a73; */
        color: #000000;
        font-size: 6vh;
        text-align: center;
        margin-bottom: 60px;
        /* text-transform: uppercase; */
        /* font-family: 'Francois One', sans-serif; */
        /* font-family: 'M PLUS 1p', sans-serif; */
    }
    
    main .sobre-nosotros {
        padding: 30px 0 0 0;
    }
    
    .contenedor-sobre-nosotros {
        display: flex;
        justify-content: space-evenly;
    }
    

    
    .sobre-nosotros img {
        width: 350px;
    }
    
    .sobre-nosotros .contenido-textos {
        width: 48%;
        margin-top: 25px;
    }
    
    .contenido-textos h3 {
        margin-bottom: 15px;
    }
    
    .contenido-textos h3 span {
        /* background: #4d0686; */
        background: #E86E0B;
        color: #fff;
        border-radius: 50%;
        display: inline-block;
        text-align: center;
        width: 30px;
        height: 30px;
        font-size: 20px;
        padding: 2px;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
        margin-right: 5px;
    }
    
    .contenido-textos p {
        padding: 0px 0px 30px 15px;
        font-weight: 300;
        text-align: justify;
    }
    /* Galeria */
    
    .portafolio {
        background: #f2f2f2;
    }
    
    .galeria-port {
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
    }
    
    .imagen-port {
        width: 24%;
        margin-bottom: 10px;
        overflow: hidden;
        position: relative;
        cursor: pointer;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5);
    }
    
    .imagen-port>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    .hover-galeria {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        transform: scale(0);
        /* background: hsla(273, 91%, 27%, 0.7); */
        background: #E86E0B;
        transition: transform .5s;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    .hover-galeria img {
        width: 50px;
    }
    
    .hover-galeria p {
        color: #fff;
    }
    
    .imagen-port:hover .hover-galeria {
        transform: scale(1);
    }
    /* Clients */
    
    .cards {
        display: flex;
        justify-content: space-evenly;
    }
    
    .cards .card_cliente {
        /* background: #4d0686; */
        background: #E86E0B;
        display: flex;
        width: 46%;
        height: 200px;
        align-items: center;
        justify-content: space-evenly;
        border-radius: 5px;
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.6);
    }
    
    .cards .card_cliente img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border: 3px solid #fff;
        border-radius: 50%;
        display: block;
    }
    
    .cards .card_cliente>.contenido-texto-card {
        width: 60%;
        color: #fff;
    }
    
    .cards .card_cliente>.contenido-texto-card p {
        font-weight: 300;
        padding-top: 5px;
    }
    /*  Our team */
    
    .about-services {
        background: #ffffff;
        padding-bottom: 30px;
    }
    
    .servicio-cont {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* background-color: #00ACEE; */
    }
    
    .servicio-ind {
        width: 28%;
        text-align: center;
    }
    
    .servicio-ind img {
        width: 100%;
        height: 250px;
    }
    
    .servicio-ind h3 {
        margin: 10px 0;
        font-size: 20px;
        font-family: 'Ubuntu', sans-serif;
    }
    
    .servicio-ind p {
        font-weight: 300;
        text-align: justify;
    }
    /* Icono WSP */
    
    .btn-wsp {
        position: fixed;
        width: 55px;
        height: 55px;
        line-height: 50px;
        bottom: 30px;
        right: 30px;
        background: #0df053;
        color: #fff;
        border-radius: 50px;
        text-align: center;
        font-size: 30px;
        box-shadow: 0px 1px 10px rgb(0, 0, 0, 0, 3);
        z-index: 100;
    }
    
    .icon-wsp {
        width: 55px;
        height: 55px;
        line-height: 50px;
        bottom: 30px;
        right: 30px;
        background: #0df053;
        color: #fff;
        border-radius: 50px;
        text-align: center;
        font-size: 30px;
        box-shadow: 0px 1px 10px rgb(0, 0, 0, 0, 3);
        z-index: 100;
    }
    /*Encabezado*/
    .icon-services{
        color: #E86E0B;
      
    }
    #menu-backdrop {
        position: absolute;
        /* background-color: rgba(0, 128, 248, 0.5); */
         border-bottom: 1px solid #000;
        /* backdrop-filter: blur(8px); */
        /* border-radius: 8px; */
        left: var(--left);
        top: var(--top);
        width: var(--width);
        height: var(--height);
        transition: all 300ms ease-in-out;
        opacity: 0;
        z-index: 1;
    }
    
    header {
        position: fixed;
        top: 0;
        z-index: 100;
        width: 100%;
        /* height: 80px; */
        color: var(--color-texto);
        background-color: #ffff;
    }
    
    header .contenedor {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 1280px;
        height: 100%;
        margin: 0 auto;
        padding: 0 30px;
        /* background-color: #ffff; */
    }
    /*LOGO*/
    
    header .logo {
        display: flex;
        align-items: center;
    }
    
    header .logo ion-icon {
        font-size: 35px;
        color: var(--color-principal);
        margin-right: 5px;
    }
    
    header .logo span {
        font-size: 25px;
        font-weight: 600;
        color: var(--color-titulo);
    }
    /*Menú opciones*/
    
    header .menu-opciones {
        background-color: #F8F9FA;
        height: auto;
    }
    /* header .menu-opciones ul {
    display: flex;
    flex-direction: row;
} */
    
    header .menu-opciones li {
        list-style: none;
        color: black;
        padding: 15px;
        /* z-index: 2; */
        /* margin: 15px; */
    }
    
    header .menu-opciones a {
        color: black;
        text-decoration: none;
        transition: color 0.2s ease;
        z-index: 2;
    }
    
    /* header .menu-opciones a:hover {
        color: var(--color-principal);
    } */
    
    header .menu-opciones li:hover {
        /* background-color: var(--color-hover); */
        /* color: white; */
        border-radius: 5px;
    }
    
    .selected {
        /* background-color: var(--color-hover); */
        color: rgb(255, 98, 0) !important;
        border-radius: 5px;
    }
    
    header .menu-opciones li:hover a {
        color: #ffff;
    }
    /*Controles usuario*/
    
    header .controles-usuario {
        display: flex;
        gap: 20px;
        align-items: center;
        order: 1;
        justify-content: center;
    }
    
    header .controles-usuario ion-icon {
        font-size: 25px;
        cursor: pointer;
        color: var(--color-principal);
    }
    
    header .controles-usuario ion-icon:hover {
        color: var(--color-hover);
    }
    
    header #btn-sign-up {
        border: none;
        cursor: pointer;
        width: 110px;
        height: 40px;
        border-radius: 10px;
        /* background-color: var(--color-principal); */
        background-color: #E86E0B;
        color: var(--color-texto);
        font-size: 15px;
    }
    
    header #btn-sign-up:hover {
        background-color: var(--color-hover);
    }
    
    header #btn-menu {
        display: none;
    }
    
    header #home {
        /* color: var(--color-principal); */
        color: black;
    }
    /*Main*/
    
    main {
        margin-top: 80px;
    }
    
    main .seccion-1 {
        max-width: 1280px;
        margin: 0 auto;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    main .seccion-1 .texto {
        color: white;
        font-size: 5.1vw;
        font-weight: 600;
        line-height: 4.2vw;
        width: 30vw;
    }
    
    main .seccion-1 .texto .precio-antiguo {
        font-size: 3.5vw;
        color: #7D7E93;
        position: relative;
        margin: 20px;
        font-weight: 300;
    }
    
    main .seccion-1 .texto .precio-antiguo::before {
        content: "";
        position: absolute;
        left: -18%;
        top: 50%;
        width: 140%;
        height: 3px;
        background-color: #7D7E93;
        transform: translateY(-50%);
    }
    
    main .seccion-1 .texto .precio-nuevo {
        font-size: 3.5vw;
        color: var(--color);
        font-weight: 300;
    }
    
    main .seccion-1 img {
        width: 40vw;
    }
    /* .footer_menu a {
    color: #2B2D42;
    font-size: 15px;
    display: block;
    text-decoration: none;
    line-height: 24px;
    margin-bottom: 12px;
}

.footer_menu a:last-child {
    margin-bottom: 0;
}

h4.footer_title {
    color: #2B2D42;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 20px;
    margin-top: 9px;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
} */
    /* SLIDER */
    
    .img-slider {
        position: relative;
        overflow: hidden;
        /* width: 800px; */
        /* width: 100%; */
        /* margin: 0 auto; */
        height: 500px;
        /* margin: 10px; */
        /* background-color: red; */
    }
    
    .img-slider .slide {
        z-index: 1;
        position: relative;
        float: left;
        width: 100%;
        margin-right: -100%;
        clip-path: circle(0% at 0 50%);
    }
    
    .img-slider {
        position: relative;
        /* width: 800px; */
        /* width: 100%; */
        /* margin: 0 auto; */
        height: 750px;
        /* margin: 10px; */
        /* background-color: red; */
    }
    
    .img-slider .slide.active {
        clip-path: circle(150% at 0 50%);
        transition: 2s;
        transition-property: clip-path;
    }
    
    .img-slider .slide img {
        z-index: 1;
        /* margin-right: -100%; */
        width: 100%;
        max-width: 100%;
        height: auto;
        /* height: 400px; */
        /* border-radius: 5px; */
    }
    
    .img-slider .slide .info {
        position: absolute;
        top: 0;
        padding: 15px 30px;
    }
    
    .img-slider .slide .info h2 {
        color: #ffffff;
        font-size: 45px;
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: 2px;
        text-shadow: 3px 0px 0px rgb(109, 109, 109);
    }
    
    .img-slider .slide .info p {
        color: #ffff;
        background: rgba(0, 0, 0, 0.1);
        font-size: 16px;
        width: 60%;
        padding: 10px;
        border-radius: 4px;
    }
    
    .img-slider .navigation {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
        display: flex;
        justify-content: center;
        padding: 0;
        margin-right: 15%;
        margin-bottom: 1rem;
        /* margin-left: 15%; */
        /* display: block; */
        /* align-items: center; */
        /* justify-content: center; */
        /* margin-top: 400px; */
        /* height: 900px; */
        /* height: 100vh; */
        /* background-color: burlywood; */
        float: left;
        /* margin-right: -100%; */
        /* bottom: 500px; */
        left: 50%;
        transform: translate(-50%);
        /* flex-direction: column; */
        /* flex-grow: 1; */
        opacity: 1;
    }
    
    .img-slider .navigation .btn {
        background: rgba(255, 255, 255, 0.5);
        width: 10px;
        height: 20px;
        margin: 10px;
        border-radius: 50%;
        cursor: pointer;
        border: none;
        transform: scale(0.7);
    }
    
    .img-slider .navigation .btn.active {
        background: #E86E0B;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    }
    /* FOOTER */
    
    footer {
        background: #e6e6e6;
        padding: 56px 0;
    }
    
    footer.colored {
        background: #fd3d571a;
    }
    
    .footer_logo img {
        width: 120px;
    }
    
    .footer_menu a {
        color: #2B2D42;
        font-size: 15px;
        display: block;
        text-decoration: none;
        line-height: 24px;
        margin-bottom: 12px;
    }
    
    .footer_menu a:last-child {
        margin-bottom: 0;
    }
    
    h4.footer_title {
        color: #2B2D42;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 20px;
        margin-top: 9px;
        text-transform: uppercase;
        font-family: 'Roboto', sans-serif;
    }
    
    .download_img img {
        width: 150px;
    }
    
    .download_img a {
        margin-right: 20px;
    }
    
    .footer_social h5 {
        color: #FFFFFF;
        font-size: 16px;
        margin-top: 20px;
        margin-bottom: 20px;
        font-weight: 500;
    }
    
    .footer_icon a {
        width: 32px;
        height: 32px;
        font-size: 15px;
        display: block;
        border-radius: 50%;
        margin-right: 12px;
        text-align: center;
        line-height: 32px;
        color: #ffffff;
    }
    
    a.facebook {
        background: #1773EA;
    }
    
    a.youtube {
        background: #ee0000;
    }
    
    a.whatsapp {
        background: #00ff55;
    }
    
    .footer_menu a:hover {
        color: #fd3d57;
    }
    
    .footer_contact p {
        margin: 0;
        font-size: 15px;
        line-height: 1.5;
        color: #2B2D42;
        position: relative;
        padding-left: 32px;
        margin-bottom: 13px;
    }
    
    .footer_contact p span.txt {
        font-weight: 500;
    }
    /* .footer_contact .icn {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 17px;
} */
    
    .footer_icon {
        margin-top: 6px;
    }
    
    form.footernews_form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    
    .footernews_form button {
        padding: 6px 10px;
        border-radius: 0 5px 5px 0;
        min-width: 105px;
    }
    
    .footernews_form input {
        padding: 5px 15px;
        font-size: 13px;
        width: 230px;
        border: 1px solid #c7c7c7;
        border-right: 0;
        border-radius: 5px 0 0 5px;
        background-color: transparent;
        color: #2B2D42;
    }
    
    .footernews_form input:focus {
        border-color: #909090;
    }
    
    .footernews_form input::-webkit-input-placeholder {
        color: #a5a5a5;
    }
    
    .footernews_form input::-moz-placeholder {
        color: #a5a5a5;
    }
    
    .footernews_form input:-ms-input-placeholder {
        color: #a5a5a5;
    }
    
    .footernews_form input::-ms-input-placeholder {
        color: #a5a5a5;
    }
    
    .footernews_form input::placeholder {
        color: #a5a5a5;
    }
    
    .footer_newslet h4 {
        font-size: 18px;
        color: #2B2D42;
        margin-top: 24px;
        margin-bottom: 15px;
        text-transform: uppercase;
    }
    
    footer.white {
        background: #ffffff;
        border: 1px solid #E9E4E4;
    }
    /*  */
    
    .footer_contact a {
        color: black;
        text-decoration: none;
    }
    
    .footer_logo img {
        width: 120px;
    }
    
    .footet_text p {
        font-size: 20px;
        line-height: 1.5;
        color: #2B2D42;
        margin-bottom: 0;
        margin-top: 16px;
        font-family: 'Roboto', sans-serif;
    }
    
    .copyright_wrap {
        background: #2B2D42;
        padding: 12px 0;
    }
    
    .copyright_text {
        font-size: 16px;
        color: #F9F9F9;
        margin-bottom: 0;
    }
    
    .modal-text span {
        font-size: 22px;
    }
    
    .modal-text {
        text-align: justify;
    }
    
    .modal-image {
        text-align: center;
    }
    /* Responsive slider*/
    
    @keyframes parpadeo {
        0% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    
    .texto-informativo {
        animation: parpadeo 3s infinite;
    }
    
    @media (max-width: 1900px) {
        .img-slider {
            height: 450px !important;
        }
    }
    
    @media (max-width: 1024px) {
        .img-slider .slide img {
            height: 500px;
        }
    }
    
    @media (max-width: 820px) {
        /* .img-slider {
        width: 600px;
        height: 375px;
    } */
        .img-slider {
            height: 320px !important;
        }
        .img-slider .slide img {
            height: 300px;
        }
        .img-slider .slide .info {
            padding: 10px 25px;
        }
        .img-slider .slide .info h2 {
            font-size: 35px;
        }
        .img-slider .slide .info p {
            width: 70%;
            font-size: 15px;
        }
        .img-slider .navigation {
            bottom: 15px !important;
            /* background: #2B2D42; */
        }
        .img-slider .navigation .btn {
            /* width: 10px; */
            /* height: 10px; */
            /* margin: 8px; */
            transform: scale(0.5);
        }
    }
    
    @media (max-width: 620px) {
        /* .img-slider {
        width: 400px;
        height: 250px;
    } */
        .img-slider {
            height: 220px;
        }
        .img-slider .slide .info {
            padding: 10px 25px;
        }
        .img-slider .slide .info h2 {
            font-size: 30px;
        }
        .img-slider .slide .info p {
            width: 80%;
            font-size: 13px;
        }
        .img-slider .navigation {
            bottom: 15px;
        }
        .titulo {
            font-size: 5vh;
        }
        .titulo_about {
            font-size: 3vh;
        }
        /* .img-slider .navigation .btn {
        width: 8px;
        height: 8px;
        margin: 8px;
    } */
    }
    
    @media (max-width: 420px) {
        .img-slider {
            width: 100%;
            height: 200px;
        }
        .img-slider .slide .info {
            padding: 5px 10px;
        }
        .img-slider .slide .info h2 {
            font-size: 25px;
        }
        .img-slider .slide .info p {
            width: 90%;
            font-size: 11px;
        }
        .img-slider .navigation {
            bottom: 10px;
        }
        /* .img-slider .navigation .btn {
            width: 8px;
            height: 8px;
            margin: 8px;
        } */
    }
    /*Responsive*/
    
    @media (max-width: 865px) {
        header #btn-menu {
            display: block;
        }
        /* header .menu-opciones {
        height: 0;
        overflow: hidden;
        border-bottom: 2px solid var(--color-principal);
        transition: height 0.5s ease;
    }
    header .menu-opciones.mostrar {
        height: 280px;
    }
    header .menu-opciones.min {
        height: calc(100vh - 80px);
        overflow-y: auto;
    }
    header .menu-opciones ul {
        flex-direction: column;
        align-items: center;
    } */
    }
    
    @media (max-width:325px) {
        header .logo ion-icon {
            display: none;
        }
        header .logo span {
            font-size: 20px;
        }
    }
    /*Estilos responsivos main*/
    
    @media (max-width: 1000px) {
        main .seccion-1 {
            width: 100%;
        }
        main .seccion-1 img {
            width: 50vw;
        }
        main .seccion-1 {
            width: 100%;
            justify-content: start;
            padding-top: 25px;
            flex-direction: column;
        }
        main .seccion-1 .texto {
            text-align: center;
            width: 80%;
            order: 1;
            margin-top: 20px;
        }
        main .seccion-1 img {
            width: 60vw;
        }
    }
    
    @media (max-width: 615px) {
        main .seccion-1 img {
            width: 100vw;
        }
    }
    /* Responsive Principal */
    
    @media screen and (max-width:900px) {
        header {
            background-position: center;
        }
        .contenedor-sobre-nosotros {
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .sobre-nosotros .contenido-textos {
            width: 90%;
        }
        .imagen-about-us {
            width: 90%;
        }
        /* Galeria */
        .imagen-port {
            width: 44%;
        }
        /* Clientes */
        .cards {
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .cards .card_cliente {
            width: 90%;
        }
        .cards .card_cliente:first-child {
            margin-bottom: 30px;
        }
        /* servicios */
        .servicio-cont {
            justify-content: center;
            flex-direction: column;
        }
        .servicio-ind {
            width: 100%;
            text-align: center;
        }
        .servicio-ind:nth-child(1),
        .servicio-ind:nth-child(2) {
            margin-bottom: 60px;
        }
        .servicio-ind img {
            width: 90%;
        }
    }
    
    @media screen and (max-width:500px) {
        nav {
            text-align: center;
            padding: 30px 0 0 0;
        }
        nav>a {
            margin-right: 5px;
        }
        .textos-header h1 {
            font-size: 35px;
        }
        .textos-header h2 {
            font-size: 20px;
        }
        /* ABOUT US */
        .imagen-about-us {
            margin-bottom: 60px;
            width: 99%;
        }
        .sobre-nosotros .contenido-textos {
            width: 95%;
        }
        /* Galeria */
        .imagen-port {
            width: 95%;
        }
        /* Clients */
        .cards .card_cliente {
            height: 450px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .cards .card_cliente img {
            width: 90px;
            height: 90px;
        }
        /* Footer */
        .contenedor-footer {
            flex-direction: column;
            border: none;
        }
        .content-foo {
            margin-bottom: 20px;
            text-align: center;
        }
        .content-foo h4 {
            border: none;
        }
        .content-foo p {
            color: #ccc;
            border-bottom: 1px solid #f2f2f2;
            padding-bottom: 20px;
        }
        .titulo-final {
            font-size: 20px;
        }
    }