*{
    text-decoration: none;
    margin: 0px;
    padding: 0px;
}

html{
    scroll-behavior: smooth;
}

body{
    overflow-x: hidden;
    width: 100vw;
    margin: 0px;
    padding: 0px;
}

.container-section-two-movil{
    display: none;
}

.clientes-movil{
    display: none;
}

/*container principal*/
.container-principal{
    margin-top: 30px;
    width: 100%;
    height: 50vh;
    background-image: url('../assets/fondo-camaras.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-principal .container-text{
    width: 80%;
    height: 90%;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: flex-start;
}

.container-text .item-1,
.container-text .item-2,
.container-text .item-3{
    width: 50%;
    height:auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.container-text h1{
    font-size: 45px;
    text-align: center;   
    font-family: 'Roboto';
}

.text-normal{
    color: #2f6897;
}

.text-bold{
    font-weight: bold;
    color: #008cff;
}

/*container-section-one*/
.container-section-one{
    overflow-x: hidden;
    width: 100%;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.diseño-fabricacion{
    width: 90%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.diseño-fabricacion .text-diseño-fabricacion{
    width: 40%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    gap: 40px;
    background-color: rgba(245, 245, 245, 0.623);
    border-bottom-left-radius: 2em;
    border-top-left-radius: 2em;
    z-index: 1;
}

.text-diseño-fabricacion h1{
    color: #004a87;
    font-size: 35px;
    font-weight: bold;
    font-family: 'Roboto';
    width: 80%;
}

.text-diseño-fabricacion span{
    color: #818181;
    font-size: 15px;
    width: 80%;
}

.text-diseño-fabricacion .btn-cotizar{
    width: 80%;
    display: flex;
    justify-content: flex-start;
    align-items:center;
}

.btn-cotizar .button {
    --color: #004a87;
    width: 40%;
    height: 50px;
    padding: 0.7em 2em;
    background-color: transparent;
    border-radius: 0px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: .5s;
    font-weight: bold;
    font-size: 17px;
    border: 2px solid;
    font-family: 'Roboto';
    text-transform: uppercase;
    color: var(--color);
    z-index: 1;
    text-decoration: none;
}
   
.btn-cotizar .button::before,
.btn-cotizar .button::after {
    content: '';
    display: block;
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    background-color: var(--color);
    transition: 1s ease;
    color: white;
}

.btn-cotizar .button::before {
    top: -1em;
    left: -1em;
}

.btn-cotizar .button::after {
    left: calc(100% + 1em);
    top: calc(100% + 1em);
}

.btn-cotizar .button:hover::before,
.btn-cotizar .button:hover::after {
    height: 410px;
    width: 410px;
}

.btn-cotizar .button:hover {
    color: rgb(255, 255, 255);
}

.btn-cotizar .button:active {
    filter: brightness(.8);
}


.diseño-fabricacion .img-diseño-fabricacion{
    z-index: 2;
    margin-left: -20px;
    width: 50%;
    height: 90%;
    position: relative;
    background-image: url(../assets/IMAGEN\ CAMARA.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.container-section-one .figure-absolute{
    background-color: #1d76be;
    position: absolute;
    width: 300px;
    height: 100%;
    right: -10px;
}


/*container-section-two*/
.container-section-two{
    overflow-x: hidden;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5%;
}

.container-section-two .items-desarrollo{
    width: 95%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.items-desarrollo .item-card{
    height: 250px;
    width: 31%;
    background-color: rgb(247, 247, 247);
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

.item-card .svg-icon{
    width: 50px;
    height: 150px;
    padding-top: 10px;
}

.item-card .svg-icon .icon {
   width: 100%;
   height: 50px;
   border-radius: 2em;
   background-color: #d7ecfc;
   display: flex;
   justify-content: center;
   align-items: center;
}

.icon img{
    width: 30px;
}

.item-card .text-card{
    width: 80%;
    height: 80%;
}

.text-card h3{
    font-weight: bold;
    color: #2e4557;
    font-family: 'Roboto';
}

.text-card span{
    font-family: 'Roboto';
    font-size: 14px;
}


/*container-section-tree*/

.container-section-tree{
    width: 100%;
    height: 140vh;
    margin-top: 5%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../assets/IMAGEN\ RACKS\ CAMARA4.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}

.container-section-tree .boton-cotizar{
    width: 90%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: -35px;
}

.container-section-tree .boton-cotizar a{
    width: 280px;
    height: 55px;
    z-index: 300;
    background-color: #ffa500;
    color: white;
    border-radius: 2em;
    text-align: center;
    text-decoration: none;
    font-size: 30px;
    font-weight: bold;
    font-family: 'Roboto';
    display: flex;
    justify-content: center;
    align-items: center;
    animation-duration: 2s;
    animation-name: slidein;
    animation-iteration-count: infinite;
    animation-direction:alternate;
}


.container-section-tree .boton-cotizar a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0%;
    height: 100%;
    width: 0;
    border-radius: 2em;
    background-color: #03437d;
    z-index: -1;
    -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
    transition: all 650ms;
}

.container-section-tree .boton-cotizar a:hover {
    color: white;
    background-color: transparent;
    border: solid 1px white;
    transition: all 250ms

}

.container-section-tree .boton-cotizar a:hover::before {
    width: 100%;
}


@keyframes slidein {
    from {
        transform: translate(-20px, 0px);
    }
    
    to {
        transform: translate(0px, 0px);
    }
}



.container-section-tree::before{
    content: '';
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 140vh;
    background-color: #004a87d7;
}

.container-tipos-camaras{
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0px;
    position: relative;

}

.container-tipos-camaras .text-title{
    position: absolute;
    color: white;
    width: 20%;
    left: 0px;
    top: 0px;
    font-family: 'Roboto';
}

.container-tipos-camaras .text-title .item{
    font-weight: 100;
}

.item-paso-1,
.item-paso-2,
.item-paso-3,
.item-paso-4{
    width: 80%;
    height: 240px;
    margin: 0px;
}

.item-paso-1{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-radius: 2em;
    position: relative;
    width: 80%;
}

.item-paso-1 .item-text{
    margin-right: 100px;
}

.item-paso-1::before{
    content: '';
    position: absolute;
    width: 80%;
    height: 100%;
    border-left: none;
    border-top-right-radius: 10rem;
    border-bottom-right-radius: 10rem;
    border-top: solid 2px white;
    border-right: solid 2px white;
    border-bottom: solid 1px white;
}

.item-paso-2{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    margin-top: -1px;
    margin-left: -40px;
}


.item-paso-2 .number{
    margin-left: 100px;
}

.item-paso-2::before{
    content: '';
    position: absolute;
    width: 90%;
    height: 100%;
    border-right: none;
    border-top-left-radius: 10em;
    border-bottom-left-radius: 10em;
    border-top: solid 1px white;
    border-left: solid 2px white;
    border-bottom: solid 1px white;
}

.item-paso-3{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

.item-paso-3 .number{
    margin-right: 100px;
}

.item-paso-3::before{
    margin-top: -2px;
    content: '';
    position: absolute;
    width: 90%;
    height: 100%;
    border-left: none;
    border-top-right-radius: 10em;
    border-bottom-right-radius: 10em;
    border-top: solid 1px white;
    border-right: solid 2px white;
    border-bottom: solid 1px white;
}

.item-paso-4{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.item-paso-4 .number{
    margin-left: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item-paso-4::before{
    margin-top: -4px;
    content: '';
    position: absolute;
    width: 90%;
    height: 100%;
    border-right: none;
    border-top-left-radius: 10em;
    border-bottom-left-radius: 10em;
    border-top: solid 1px white;
    border-left: solid 2px white;
    border-bottom: solid 2px white;
}

.item-paso-1 h1,
.item-paso-2 h1,
.item-paso-3 h1,
.item-paso-4 h1{
    width: 5%;
    height: auto;
    margin-right: 20px;
    margin-left: 20px;
    color: orange;
    font-family: 'Roboto';
    font-size: 70px;
    font-weight: bold;
}

.item-paso-1 .item-text,
.item-paso-2 .item-text,
.item-paso-3 .item-text,
.item-paso-4 .item-text{
    width: 60%;
}

.item-paso-1 .item-text h3,
.item-paso-2 .item-text h3,
.item-paso-3 .item-text h3,
.item-paso-4 .item-text h3{
    color: white;
    font-family: 'Roboto';
    font-size: 30px;
    font-weight: bold;
}

.item-paso-1 .item-text span,
.item-paso-2 .item-text span,
.item-paso-3 .item-text span,
.item-paso-4 .item-text span{
    color: white;
    font-family: 'Roboto';
    font-size: 13px;
    text-align: justify;
}

/*container-section-fourt*/
.container-section-fourt{
    width: 100%;
    height: auto;
}

.container-section-fourt .text-principal{
    width: 100%;
    height: 400px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container-section-fourt .text-principal .text{
    width: 90%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.container-section-fourt .text-principal .text h1{
    width: 52%;
    font-size: 40px;
    font-family: 'Roboto';
    font-weight: bold;
    color: #004a87;
    text-align: right;
}

.container-section-fourt .text-principal .text .item{
    font-weight: 300;
    color: #006fca;
}

.container-section-fourt .text-principal .text b{
    width: 40%;
    height: 100%;
    font-size: 39px;
    text-align: justify;
}

.img-section{
    width: 100%;
    height: 405px;
    background-position: center;
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    background-image: url('../assets/IMAGEN\ PASILLO\ CAMARA3.jpg');
    z-index: 1;
    position: relative;
}

.img-section::before{
    z-index: 2;
    background-color: #ffffff93;
    position: absolute;
    width: 100%;
    content: '';
    height: 100%;
}

.porcentajes{
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #004a87;
}

.porcentajes .icons-text{
    width: 90%;
    height: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.icons-text .item-uno{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
}

.icons-text .item-uno .header {
    display: flex;
    flex-direction: row;
}

.icons-text .item-uno .header .mas{
    color: #008cff;
}

.icons-text .item-uno .header h1{
    font-size: 40px;
    color: white;
    font-family: 'Roboto';
    font-weight: bold;
}

.icons-text .item-uno .footer{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50%;
}

.icons-text .item-uno .footer span{
    font-size: 20px;
    width: 60%;
    color: white;
    font-family: 'Roboto';
    font-weight: normal;
    text-align: center;
}


.container-section-five{
    width: 100%;
    height: auto;
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tipos-proyectos{
    width: 90%;
    height: 60%;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
}

.tipos-proyectos .proyecto{
    width: 25%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tipos-proyectos .proyecto .img{
    width: 200px;
    height: 200px;
    border-radius: 10em;
    background-color: #1d76be;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tipos-proyectos .proyecto .img img{
    width: auto;
    height: 110px;
}

.body{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.body h3{
    font-family: 'Roboto';
    font-weight: bold;
    color: #6b6b6b;
    text-align: center;
}

.body span{
    font-family: 'Roboto';
    font-size: 14px;
    margin-top: 5px;
    text-align: center;
    color: #818181;
}

.container-section-five .clientes{
    width: 90%;
    height: 40%;
    margin-top: 5%;
}

.clientes .title-clientes{
    display: flex;
    justify-content: center;
    align-items: center;
}

.clientes .title-clientes h1{
    font-family: 'Roboto';
    font-weight: bold;
    font-size: 40px;
    color: #004a87;
}

.clientes .icons{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 20px;
}

.clientes .icons .icon{
    width: 400px;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.clientes .icons .icon #imms{
    width: 100%;
    height: 60%;
}

.clientes .icons .icon #sedena{
    width: 110%;
    height: auto;
}

.clientes .icons .icon #cfe{
    width: 100%;
    height: 40%;
}

.clientes .icons .icon #isemym{
    width: 100%;
    height: 40%;
}

.clientes .icons .icon #isste{
    width: 100%;
    height: 60%;
}


.container-section-five .solicita-cotizacion{
    width: 100%;
    height: 250px;
    background-color: #ececec;
    margin-top: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.solicita-cotizacion h1{
    font-family: 'Roboto';
    font-weight: bold;
    font-size: 50px;
    color: #004a87;
}

.solicita-cotizacion span{
    color: rgb(77, 77, 77);
    font-size: 20px;
    font-family: 'Roboto';
}

/*contacto*/

.contacto{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contacto form{
    width: 90%;
}
.contacto form label{
    font-family: 'Roboto';
    font-weight: bold;
}

.contacto form input{
    height: 50px;
    background-color: #f3f3f3;
    font-family: 'Roboto';
}

.contacto form .tel{
    display: flex;
    flex-direction: column;
}

.contacto form select{
    height: 50px;
    background-color: #f3f3f3;
    font-family: 'Roboto';
}

.contacto form textarea{
    background-color: #f3f3f3;
    font-family: 'Roboto';
}

.contacto form .title-datos-cliente{
    background-color: #004a87;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
}

.contacto form .title-datos-cliente h1{
   color: #ececec;
   font-size: 20px;
}

.contacto form .title-datos-camara{
    background-color: #004a87;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    padding: 0px;
}
.contacto form .title-datos-camara h1{
    color: #ececec;
    font-size: 20px;
}

.contacto form .check-aviso input{
    height:20px;
    width: 20px;
}

.contacto form .boton{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0px;
    padding: 0px;
}

.contacto form .boton button {
    --color: #004a87;
    font-family: 'Roboto';
    display: inline-block;
    width: 200px;
    height: 2.6em;
    line-height: 2.5em;
    margin: 20px;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    border: 2px solid var(--color);
    transition: color .5s;
    z-index: 1;
    font-size: 17px;
    color: var(--color);
}

.contacto form .boton button:before {
    content: "";
    position: absolute;
    z-index: -1;
    background: var(--color);
    height: 150px;
    width: 300px;
    border-radius: 50%;
}

.contacto form .boton button:hover {
    color: #fff;
}

.contacto form .boton button:before {
    top: 100%;
    left: 100%;
    transition: all .7s;
}

.contacto form .boton button:hover:before {
    top: -30px;
    left: -30px;
}

.contacto form .boton button:active:before {
    background: #004a87;
    transition: background 0s;
}

#campo-relative{
    position: relative;
}

#file{
    position: absolute;
    width: 400px;
    right: 10px;
    bottom: 2px;
    padding-top: 9px;
    padding-left: 40px;
    background-color: #dfdddd;
    z-index: 1;
}

#file::before{
    position: absolute;
    top: 0px;
    left: 0px;
    content: 'Adjuntar archivo';
    width: 50%;
    height: 100%;
    z-index: 2;
    padding-top: 12px;
    padding-left: 35px;
    background-color: #dfdddd;
}

/*INPUT DE TELEFONO */



@media screen and (max-width:2000px) {
        
    /*container principal*/
    .container-principal{
        margin-top: 30px;
        width: 100%;
        height: 50vh;
        background-image: url('../assets/fondo-camaras.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container-principal .container-text{
        width: 80%;
        height: 90%;
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: flex-start;
    }

    .container-text .item-1,
    .container-text .item-2,
    .container-text .item-3{
        width: 50%;
        height:auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .container-text h1{
        font-weight: bold;
        font-size: 50px;
        text-align: center;   
        font-family: 'Roboto';
    }

    .text-normal{
        color: #004a87;
    }

    .text-bold{
        font-weight: bold;
        color: #008cff;
    }

    /*container-section-one*/
    .container-section-one{
        overflow-x: hidden;
        width: 100%;
        height: 70vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
    }

    .diseño-fabricacion{
        width: 90%;
        height: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .diseño-fabricacion .text-diseño-fabricacion{
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items: center;
        gap: 40px;
        background-color: rgba(245, 245, 245, 0.623);
        border-bottom-left-radius: 2em;
        border-top-left-radius: 2em;
        z-index: 1;
    }

    .text-diseño-fabricacion h1{
        color: #004a87;
        font-size: 45px;
        font-weight: bold;
        font-family: 'Roboto';
        width: 80%;
    }

    .text-diseño-fabricacion span{
        color: #818181;
        font-size: 18px;
        width: 80%;
    }

    .text-diseño-fabricacion .btn-cotizar{
        width: 80%;
        display: flex;
        justify-content: flex-start;
        align-items:center;
    }

    .btn-cotizar .button {
        --color: #004a87;
        width: 40%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        border-radius: 0px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition: .5s;
        font-weight: bold;
        font-size: 17px;
        border: 2px solid;
        font-family: 'Roboto';
        text-transform: uppercase;
        color: var(--color);
        z-index: 1;
        text-decoration: none;
    }
    
    .btn-cotizar .button::before,
    .btn-cotizar .button::after {
        content: '';
        display: block;
        width: 50px;
        height: 50px;
        transform: translate(-50%, -50%);
        position: absolute;
        border-radius: 50%;
        z-index: -1;
        background-color: var(--color);
        transition: 1s ease;
        color: white;
    }

    .btn-cotizar .button::before {
        top: -1em;
        left: -1em;
    }

    .btn-cotizar .button::after {
        left: calc(100% + 1em);
        top: calc(100% + 1em);
    }

    .btn-cotizar .button:hover::before,
    .btn-cotizar .button:hover::after {
        height: 410px;
        width: 410px;
    }

    .btn-cotizar .button:hover {
        color: rgb(255, 255, 255);
    }

    .btn-cotizar .button:active {
        filter: brightness(.8);
    }


    .diseño-fabricacion .img-diseño-fabricacion{
        z-index: 2;
        margin-left: -20px;
        width: 50%;
        height: 90%;
        position: relative;
        background-image: url(../assets/IMAGEN\ CAMARA.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .container-section-one .figure-absolute{
        background-color: #1d76be;
        position: absolute;
        width: 300px;
        height: 100%;
        right: -10px;
    }


    /*container-section-two*/
    .container-section-two{
        overflow-x: hidden;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 5%;
    }

    .container-section-two .items-desarrollo{
        width: 95%;
        height: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .items-desarrollo .item-card{
        height: 250px;
        width: 31%;
        background-color: rgb(247, 247, 247);
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    .item-card .svg-icon{
        width: 50px;
        height: 150px;
        padding-top: 10px;
    }

    .item-card .svg-icon .icon {
        width: 100%;
        height: 50px;
        border-radius: 2em;
        background-color: #d7ecfc;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .icon img{
        width: 30px;
    }

    .item-card .text-card{
        width: 80%;
        height: 80%;
    }

    .text-card h3{
        font-size: 30px;
        font-weight: bold;
        color: #2e4557;
        font-family: 'Roboto';
    }

    .text-card span{
        font-family: 'Roboto';
        font-size: 18px;
    }


    /*container-section-tree*/

    .container-section-tree{
        width: 100%;
        height: 140vh;
        margin-top: 5%;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('../assets/IMAGEN\ RACKS\ CAMARA4.jpg');
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        position: relative;
    }

    .container-section-tree .boton-cotizar{
        width: 90%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: -35px;
    }

    .container-section-tree .boton-cotizar a{
        width: 280px;
        height: 55px;
        z-index: 300;
        background-color: #ffa500;
        color: white;
        border-radius: 2em;
        text-align: center;
        text-decoration: none;
        font-size: 30px;
        font-weight: bold;
        font-family: 'Roboto';
        display: flex;
        justify-content: center;
        align-items: center;
        animation-duration: 2s;
        animation-name: slidein;
        animation-iteration-count: infinite;
        animation-direction:alternate;
    }


    .container-section-tree .boton-cotizar a::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0%;
        height: 100%;
        width: 0;
        border-radius: 2em;
        background-color: #03437d;
        z-index: -1;
        -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
        box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
        transition: all 650ms;
    }

    .container-section-tree .boton-cotizar a:hover {
        color: white;
        background-color: transparent;
        border: solid 1px white;
        transition: all 250ms

    }

    .container-section-tree .boton-cotizar a:hover::before {
        width: 100%;
    }


    @keyframes slidein {
        from {
            transform: translate(-20px, 0px);
        }
        
        to {
            transform: translate(0px, 0px);
        }
    }



    .container-section-tree::before{
        content: '';
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 140vh;
        background-color: #004a87d7;
    }

    .container-tipos-camaras{
        width: 90%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0px;
        position: relative;

    }

    .container-tipos-camaras .text-title{
        position: absolute;
        color: white;
        width: 20%;
        left: 0px;
        top: 30px;
        font-family: 'Roboto';
        font-size: 45px;
    }

    .container-tipos-camaras .text-title .item{
        font-weight: 100;
    }

    .item-paso-1,
    .item-paso-2,
    .item-paso-3,
    .item-paso-4{
        width: 80%;
        height: 240px;
        margin: 0px;
    }

    .item-paso-1{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-radius: 2em;
        position: relative;
        width: 80%;
    }

    .item-paso-1 .item-text{
        margin-right: 100px;
    }

    .item-paso-1::before{
        content: '';
        position: absolute;
        width: 80%;
        height: 100%;
        border-left: none;
        border-top-right-radius: 10rem;
        border-bottom-right-radius: 10rem;
        border-top: solid 2px white;
        border-right: solid 2px white;
        border-bottom: solid 1px white;
    }

    .item-paso-2{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        margin-top: -1px;
        margin-left: -40px;
    }


    .item-paso-2 .number{
        margin-left: 100px;
    }

    .item-paso-2::before{
        content: '';
        position: absolute;
        width: 90%;
        height: 100%;
        border-right: none;
        border-top-left-radius: 10em;
        border-bottom-left-radius: 10em;
        border-top: solid 1px white;
        border-left: solid 2px white;
        border-bottom: solid 1px white;
    }

    .item-paso-3{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: relative;
    }

    .item-paso-3 .number{
        margin-right: 100px;
    }

    .item-paso-3::before{
        margin-top: -2px;
        content: '';
        position: absolute;
        width: 90%;
        height: 100%;
        border-left: none;
        border-top-right-radius: 10em;
        border-bottom-right-radius: 10em;
        border-top: solid 1px white;
        border-right: solid 2px white;
        border-bottom: solid 1px white;
    }

    .item-paso-4{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
    }

    .item-paso-4 .number{
        margin-left: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-paso-4::before{
        margin-top: -4px;
        content: '';
        position: absolute;
        width: 90%;
        height: 100%;
        border-right: none;
        border-top-left-radius: 10em;
        border-bottom-left-radius: 10em;
        border-top: solid 1px white;
        border-left: solid 2px white;
        border-bottom: solid 2px white;
    }

    .item-paso-1 h1,
    .item-paso-2 h1,
    .item-paso-3 h1,
    .item-paso-4 h1{
        width: 5%;
        height: auto;
        margin-right: 20px;
        margin-left: 20px;
        color: orange;
        font-family: 'Roboto';
        font-size: 70px;
        font-weight: bold;
    }

    .item-paso-1 .item-text,
    .item-paso-2 .item-text,
    .item-paso-3 .item-text,
    .item-paso-4 .item-text{
        width: 60%;
    }

    .item-paso-1 .item-text h3,
    .item-paso-2 .item-text h3,
    .item-paso-3 .item-text h3,
    .item-paso-4 .item-text h3{
        color: white;
        font-family: 'Roboto';
        font-size: 35px;
        font-weight: bold;
    }

    .item-paso-1 .item-text span,
    .item-paso-2 .item-text span,
    .item-paso-3 .item-text span,
    .item-paso-4 .item-text span{
        color: white;
        font-family: 'Roboto';
        font-size: 18px;
        text-align: justify;
    }

    /*container-section-fourt*/
    .container-section-fourt{
        width: 100%;
        height: auto;
    }

    .container-section-fourt .text-principal{
        width: 100%;
        height: 400px;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container-section-fourt .text-principal .text{
        width: 90%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .container-section-fourt .text-principal .text h1{
        width: 52%;
        font-size: 40px;
        font-family: 'Roboto';
        font-weight: bold;
        color: #004a87;
        text-align: right;
    }

    .container-section-fourt .text-principal .text .item{
        font-weight: 300;
        color: #006fca;
    }

    .container-section-fourt .text-principal .text b{
        width: 40%;
        height: 100%;
        font-size: 39px;
        text-align: justify;
    }

    .img-section{
        width: 100%;
        height: 405px;
        background-position: center;
        background-size: cover;
        background-position: top;
        background-attachment: fixed;
        background-image: url('../assets/IMAGEN\ PASILLO\ CAMARA3.jpg');
        z-index: 1;
        position: relative;
    }

    .img-section::before{
        z-index: 2;
        background-color: #ffffff93;
        position: absolute;
        width: 100%;
        content: '';
        height: 100%;
    }

    .porcentajes{
        width: 100%;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #004a87;
    }

    .porcentajes .icons-text{
        width: 90%;
        height: 80%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .icons-text .item-uno{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: 100%;
    }

    .icons-text .item-uno .header {
        display: flex;
        flex-direction: row;
    }

    .icons-text .item-uno .header .mas{
        color: #008cff;
    }

    .icons-text .item-uno .header h1{
        font-size: 60px;
        color: white;
        font-family: 'Roboto';
        font-weight: bold;
    }

    .icons-text .item-uno .footer{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50%;
    }

    .icons-text .item-uno .footer span{
        font-size: 25px;
        width: 60%;
        color: white;
        font-family: 'Roboto';
        font-weight: normal;
        text-align: center;
    }

    .container-section-five{
        width: 100%;
        height: auto;
        margin-top: 5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .tipos-proyectos{
        width: 90%;
        height: 60%;
        display: flex;
        justify-content: space-around;
        align-items: stretch;
    }

    .tipos-proyectos .proyecto{
        width: 25%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .tipos-proyectos .proyecto .img{
        width: 200px;
        height: 200px;
        border-radius: 10em;
        background-color: #1d76be;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tipos-proyectos .proyecto .img img{
        width: auto;
        height: 110px;
    }

    .body{
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .body h3{
        font-family: 'Roboto';
        font-size: 40px;
        font-weight: bold;
        color: #6b6b6b;
        text-align: center;
    }

    .body span{
        font-family: 'Roboto';
        font-size: 18px;
        margin-top: 5px;
        text-align: center;
        color: #818181;
    }

    .container-section-five .clientes{
        width: 90%;
        height: 40%;
        margin-top: 5%;
    }

    .clientes .title-clientes{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .clientes .title-clientes h1{
        font-family: 'Roboto';
        font-weight: bold;
        font-size: 45px;
        color: #004a87;
    }

    .clientes .icons{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 20px;
    }

    .clientes .icons .icon{
        width: 400px;
        height: 220px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .clientes .icons .icon #imms{
        width: 100%;
        height: 60%;
    }

    .clientes .icons .icon #sedena{
        width: 110%;
        height: auto;
    }

    .clientes .icons .icon #cfe{
        width: 100%;
        height: 40%;
    }

    .clientes .icons .icon #isemym{
        width: 100%;
        height: 40%;
    }

    .clientes .icons .icon #isste{
        width: 100%;
        height: 60%;
    }


    .container-section-five .solicita-cotizacion{
        width: 100%;
        height: 250px;
        background-color: #ececec;
        margin-top: 5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .solicita-cotizacion h1{
        font-family: 'Roboto';
        font-weight: bold;
        font-size: 55px;
        color: #004a87;
    }

    .solicita-cotizacion span{
        color: rgb(77, 77, 77);
        font-size: 25px;
        font-family: 'Roboto';
    }

    /*contacto*/

    .contacto{
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .contacto form{
        width: 90%;
    }

    .contacto form label{
        font-family: 'Roboto';
        font-weight: bold;
        font-size: 18px;
    }

    .contacto form input{
        height: 50px;
        background-color: #f3f3f3;
        font-family: 'Roboto';
    }

    .contacto form .tel{
        display: flex;
        flex-direction: column;
    }

    .contacto form select{
        height: 50px;
        background-color: #f3f3f3;
        font-family: 'Roboto';
    }

    .contacto form textarea{
        background-color: #f3f3f3;
        font-family: 'Roboto';
    }

    .contacto form .title-datos-cliente{
        background-color: #004a87;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px;
        padding: 0px;
    }

    .contacto form .title-datos-cliente h1{
        color: #ececec;
        font-size: 30px;
        padding: 0px;
        margin: 0px;
    }

    .contacto form .title-datos-camara{
        background-color: #004a87;
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        padding: 0px;
    }

    .contacto form .title-datos-camara h1{
        color: #ececec;
        font-size: 30px;
    }

    .contacto form .check-aviso{
        display: flex;
        align-items: center;
    }

    .contacto form .check-aviso input{
        height:20px;
        width: 20px;
    }

    .contacto form .boton{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 0px;
        padding: 0px;
    }

    .contacto form .boton button {
        --color: #004a87;
        font-family: 'Roboto';
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 50px;
        margin: 20px;
        position: relative;
        overflow: hidden;
        background-color: transparent;
        border: 2px solid var(--color);
        transition: color .5s;
        z-index: 1;
        font-size: 17px;
        color: var(--color);
    }

    .contacto form .boton button:before {
        content: "";
        position: absolute;
        z-index: -1;
        background: var(--color);
        height: 150px;
        width: 300px;
        border-radius: 50%;
    }

    .contacto form .boton button:hover {
        color: #fff;
    }

    .contacto form .boton button:before {
        top: 100%;
        left: 100%;
        transition: all .7s;
    }

    .contacto form .boton button:hover:before {
        top: -30px;
        left: -30px;
    }

    .contacto form .boton button:active:before {
        background: #004a87;
        transition: background 0s;
    }

    #campo-relative{
        position: relative;
    }

    #file{
        position: absolute;
        width: 400px;
        right: 10px;
        bottom: 2px;
        padding-top: 9px;
        padding-left: 40px;
        background-color: #dfdddd;
        z-index: 1;
    }

    #file::before{
        position: absolute;
        top: 0px;
        left: 0px;
        content: 'Adjuntar archivo';
        width: 50%;
        height: 100%;
        z-index: 2;
        padding-top: 12px;
        padding-left: 35px;
        background-color: #dfdddd;
    }

}

@media screen and (max-width:1800px) {
     
    html{
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

    .container-section-two-movil{
        display: none;
    }

    .clientes-movil{
        display: none;
    }

    /*container principal*/
    .container-principal{
        margin-top: 30px;
        width: 100%;
        height: 50vh;
        background-image: url('../assets/fondo-camaras.jpg');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container-principal .container-text{
        width: 80%;
        height: 90%;
        display: flex;
        flex-direction:column;
        justify-content: center;
        align-items: flex-start;
    }

    .container-text .item-1,
    .container-text .item-2,
    .container-text .item-3{
        width: 50%;
        height:auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .container-text h1{
        font-size: 45px;
        text-align: center;   
        font-family: 'Roboto';
    }

    .text-normal{
        color: #2f6897;
    }

    .text-bold{
        font-weight: bold;
        color: #008cff;
    }

    /*container-section-one*/
    .container-section-one{
        overflow-x: hidden;
        width: 100%;
        height: 70vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
        overflow: hidden;
    }

    .diseño-fabricacion{
        width: 90%;
        height: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .diseño-fabricacion .text-diseño-fabricacion{
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content:center;
        align-items: center;
        gap: 40px;
        background-color: rgba(245, 245, 245, 0.623);
        border-bottom-left-radius: 2em;
        border-top-left-radius: 2em;
        z-index: 1;
    }

    .text-diseño-fabricacion h1{
        color: #004a87;
        font-size: 35px;
        font-weight: bold;
        font-family: 'Roboto';
        width: 80%;
    }

    .text-diseño-fabricacion span{
        color: #818181;
        font-size: 15px;
        width: 80%;
    }

    .text-diseño-fabricacion .btn-cotizar{
        width: 80%;
        display: flex;
        justify-content: flex-start;
        align-items:center;
    }

    .btn-cotizar .button {
        --color: #004a87;
        width: 40%;
        height: 50px;
        padding: 0.7em 2em;
        background-color: transparent;
        border-radius: 0px;
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition: .5s;
        font-weight: bold;
        font-size: 17px;
        border: 2px solid;
        font-family: 'Roboto';
        text-transform: uppercase;
        color: var(--color);
        z-index: 1;
        text-decoration: none;
    }
    
    .btn-cotizar .button::before,
    .btn-cotizar .button::after {
        content: '';
        display: block;
        width: 50px;
        height: 50px;
        transform: translate(-50%, -50%);
        position: absolute;
        border-radius: 50%;
        z-index: -1;
        background-color: var(--color);
        transition: 1s ease;
        color: white;
    }

    .btn-cotizar .button::before {
        top: -1em;
        left: -1em;
    }

    .btn-cotizar .button::after {
        left: calc(100% + 1em);
        top: calc(100% + 1em);
    }

    .btn-cotizar .button:hover::before,
    .btn-cotizar .button:hover::after {
        height: 410px;
        width: 410px;
    }

    .btn-cotizar .button:hover {
        color: rgb(255, 255, 255);
    }

    .btn-cotizar .button:active {
        filter: brightness(.8);
    }


    .diseño-fabricacion .img-diseño-fabricacion{
        z-index: 2;
        margin-left: -20px;
        width: 50%;
        height: 90%;
        position: relative;
        background-image: url(../assets/IMAGEN\ CAMARA.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .container-section-one .figure-absolute{
        background-color: #1d76be;
        position: absolute;
        width: 300px;
        height: 100%;
        right: -10px;
    }


    /*container-section-two*/
    .container-section-two{
        overflow-x: hidden;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 5%;
    }

    .container-section-two .items-desarrollo{
        width: 95%;
        height: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .items-desarrollo .item-card{
        height: 250px;
        width: 31%;
        background-color: rgb(247, 247, 247);
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    .item-card .svg-icon{
        width: 50px;
        height: 150px;
        padding-top: 10px;
    }

    .item-card .svg-icon .icon {
    width: 100%;
    height: 50px;
    border-radius: 2em;
    background-color: #d7ecfc;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    .icon img{
        width: 30px;
    }

    .item-card .text-card{
        width: 80%;
        height: 80%;
    }

    .text-card h3{
        font-weight: bold;
        color: #2e4557;
        font-family: 'Roboto';
    }

    .text-card span{
        font-family: 'Roboto';
        font-size: 14px;
    }


    /*container-section-tree*/

    .container-section-tree{
        width: 100%;
        height: 140vh;
        margin-top: 5%;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('../assets/IMAGEN\ RACKS\ CAMARA4.jpg');
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        position: relative;
    }

    .container-section-tree .boton-cotizar{
        width: 90%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-top: -35px;
    }

    .container-section-tree .boton-cotizar a{
        width: 280px;
        height: 55px;
        z-index: 300;
        background-color: #ffa500;
        color: white;
        border-radius: 2em;
        text-align: center;
        text-decoration: none;
        font-size: 30px;
        font-weight: bold;
        font-family: 'Roboto';
        display: flex;
        justify-content: center;
        align-items: center;
        animation-duration: 2s;
        animation-name: slidein;
        animation-iteration-count: infinite;
        animation-direction:alternate;
    }


    .container-section-tree .boton-cotizar a::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0%;
        height: 100%;
        width: 0;
        border-radius: 2em;
        background-color: #03437d;
        z-index: -1;
        -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
        box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
        transition: all 650ms;
    }

    .container-section-tree .boton-cotizar a:hover {
        color: white;
        background-color: transparent;
        border: solid 1px white;
        transition: all 250ms

    }

    .container-section-tree .boton-cotizar a:hover::before {
        width: 100%;
    }


    @keyframes slidein {
        from {
            transform: translate(-20px, 0px);
        }
        
        to {
            transform: translate(0px, 0px);
        }
    }



    .container-section-tree::before{
        content: '';
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 140vh;
        background-color: #004a87d7;
    }

    .container-tipos-camaras{
        width: 90%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0px;
        position: relative;

    }

    .container-tipos-camaras .text-title{
        position: absolute;
        color: white;
        width: 20%;
        left: 0px;
        top: 0px;
        font-family: 'Roboto';
    }

    .container-tipos-camaras .text-title .item{
        font-weight: 100;
    }

    .item-paso-1,
    .item-paso-2,
    .item-paso-3,
    .item-paso-4{
        width: 80%;
        height: 240px;
        margin: 0px;
    }

    .item-paso-1{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        border-radius: 2em;
        position: relative;
        width: 80%;
    }

    .item-paso-1 .item-text{
        margin-right: 100px;
    }

    .item-paso-1::before{
        content: '';
        position: absolute;
        width: 80%;
        height: 100%;
        border-left: none;
        border-top-right-radius: 10rem;
        border-bottom-right-radius: 10rem;
        border-top: solid 2px white;
        border-right: solid 2px white;
        border-bottom: solid 1px white;
    }

    .item-paso-2{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        margin-top: -1px;
        margin-left: -40px;
    }


    .item-paso-2 .number{
        margin-left: 100px;
    }

    .item-paso-2::before{
        content: '';
        position: absolute;
        width: 90%;
        height: 100%;
        border-right: none;
        border-top-left-radius: 10em;
        border-bottom-left-radius: 10em;
        border-top: solid 1px white;
        border-left: solid 2px white;
        border-bottom: solid 1px white;
    }

    .item-paso-3{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: relative;
    }

    .item-paso-3 .number{
        margin-right: 100px;
    }

    .item-paso-3::before{
        margin-top: -2px;
        content: '';
        position: absolute;
        width: 90%;
        height: 100%;
        border-left: none;
        border-top-right-radius: 10em;
        border-bottom-right-radius: 10em;
        border-top: solid 1px white;
        border-right: solid 2px white;
        border-bottom: solid 1px white;
    }

    .item-paso-4{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        position: relative;
    }

    .item-paso-4 .number{
        margin-left: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-paso-4::before{
        margin-top: -4px;
        content: '';
        position: absolute;
        width: 90%;
        height: 100%;
        border-right: none;
        border-top-left-radius: 10em;
        border-bottom-left-radius: 10em;
        border-top: solid 1px white;
        border-left: solid 2px white;
        border-bottom: solid 2px white;
    }

    .item-paso-1 h1,
    .item-paso-2 h1,
    .item-paso-3 h1,
    .item-paso-4 h1{
        width: 5%;
        height: auto;
        margin-right: 20px;
        margin-left: 20px;
        color: orange;
        font-family: 'Roboto';
        font-size: 70px;
        font-weight: bold;
    }

    .item-paso-1 .item-text,
    .item-paso-2 .item-text,
    .item-paso-3 .item-text,
    .item-paso-4 .item-text{
        width: 60%;
    }

    .item-paso-1 .item-text h3,
    .item-paso-2 .item-text h3,
    .item-paso-3 .item-text h3,
    .item-paso-4 .item-text h3{
        color: white;
        font-family: 'Roboto';
        font-size: 30px;
        font-weight: bold;
    }

    .item-paso-1 .item-text span,
    .item-paso-2 .item-text span,
    .item-paso-3 .item-text span,
    .item-paso-4 .item-text span{
        color: white;
        font-family: 'Roboto';
        font-size: 13px;
        text-align: justify;
    }

    /*container-section-fourt*/
    .container-section-fourt{
        width: 100%;
        height: auto;
    }

    .container-section-fourt .text-principal{
        width: 100%;
        height: 400px;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container-section-fourt .text-principal .text{
        width: 90%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .container-section-fourt .text-principal .text h1{
        width: 52%;
        font-size: 40px;
        font-family: 'Roboto';
        font-weight: bold;
        color: #004a87;
        text-align: right;
    }

    .container-section-fourt .text-principal .text .item{
        font-weight: 300;
        color: #006fca;
    }

    .container-section-fourt .text-principal .text b{
        width: 40%;
        height: 100%;
        font-size: 39px;
        text-align: justify;
    }

    .img-section{
        width: 100%;
        height: 405px;
        background-position: center;
        background-size: cover;
        background-position: top;
        background-attachment: fixed;
        background-image: url('../assets/IMAGEN\ PASILLO\ CAMARA3.jpg');
        z-index: 1;
        position: relative;
    }

    .img-section::before{
        z-index: 2;
        background-color: #ffffff93;
        position: absolute;
        width: 100%;
        content: '';
        height: 100%;
    }

    .porcentajes{
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #004a87;
    }

    .porcentajes .icons-text{
        width: 90%;
        height: 80%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .icons-text .item-uno{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 50%;
        height: 100%;
    }

    .icons-text .item-uno .header {
        display: flex;
        flex-direction: row;
    }

    .icons-text .item-uno .header .mas{
        color: #008cff;
    }

    .icons-text .item-uno .header h1{
        font-size: 40px;
        color: white;
        font-family: 'Roboto';
        font-weight: bold;
    }

    .icons-text .item-uno .footer{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50%;
    }

    .icons-text .item-uno .footer span{
        font-size: 20px;
        width: 60%;
        color: white;
        font-family: 'Roboto';
        font-weight: normal;
        text-align: center;
    }


    .container-section-five{
        width: 100%;
        height: auto;
        margin-top: 5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .tipos-proyectos{
        width: 90%;
        height: 60%;
        display: flex;
        justify-content: space-around;
        align-items: stretch;
    }

    .tipos-proyectos .proyecto{
        width: 25%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .tipos-proyectos .proyecto .img{
        width: 200px;
        height: 200px;
        border-radius: 10em;
        background-color: #1d76be;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tipos-proyectos .proyecto .img img{
        width: auto;
        height: 110px;
    }

    .body{
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .body h3{
        font-family: 'Roboto';
        font-weight: bold;
        color: #6b6b6b;
        text-align: center;
    }

    .body span{
        font-family: 'Roboto';
        font-size: 14px;
        margin-top: 5px;
        text-align: center;
        color: #818181;
    }

    .container-section-five .clientes{
        width: 90%;
        height: 40%;
        margin-top: 5%;
    }

    .clientes .title-clientes{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .clientes .title-clientes h1{
        font-family: 'Roboto';
        font-weight: bold;
        font-size: 40px;
        color: #004a87;
    }

    .clientes .icons{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 20px;
    }

    .clientes .icons .icon{
        width: 400px;
        height: 220px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .clientes .icons .icon #imms{
        width: 100%;
        height: 60%;
    }

    .clientes .icons .icon #sedena{
        width: 110%;
        height: auto;
    }

    .clientes .icons .icon #cfe{
        width: 100%;
        height: 40%;
    }

    .clientes .icons .icon #isemym{
        width: 100%;
        height: 40%;
    }

    .clientes .icons .icon #isste{
        width: 100%;
        height: 60%;
    }


    .container-section-five .solicita-cotizacion{
        width: 100%;
        height: 250px;
        background-color: #ececec;
        margin-top: 5%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .solicita-cotizacion h1{
        font-family: 'Roboto';
        font-weight: bold;
        font-size: 50px;
        color: #004a87;
    }

    .solicita-cotizacion span{
        color: rgb(77, 77, 77);
        font-size: 20px;
        font-family: 'Roboto';
    }

    /*contacto*/

    .contacto{
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .contacto form{
        width: 90%;
    }
    .contacto form label{
        font-family: 'Roboto';
        font-weight: bold;
    }

    .contacto form input{
        height: 50px;
        background-color: #f3f3f3;
        font-family: 'Roboto';
    }

    .contacto form .tel{
        display: flex;
        flex-direction: column;
    }

    .contacto form select{
        height: 50px;
        background-color: #f3f3f3;
        font-family: 'Roboto';
    }

    .contacto form textarea{
        background-color: #f3f3f3;
        font-family: 'Roboto';
    }

    .contacto form .title-datos-cliente{
        background-color: #004a87;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0px;
        padding: 0px;
    }

    .contacto form .title-datos-cliente h1{
    color: #ececec;
    font-size: 20px;
    }

    .contacto form .title-datos-camara{
        background-color: #004a87;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30px;
        padding: 0px;
    }
    .contacto form .title-datos-camara h1{
        color: #ececec;
        font-size: 20px;
    }

    .contacto form .check-aviso input{
        height:20px;
        width: 20px;
    }

    .contacto form .boton{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 0px;
        padding: 0px;
    }

    .contacto form .boton button {
        --color: #004a87;
        font-family: 'Roboto';
        display: inline-block;
        width: 200px;
        height: 2.6em;
        line-height: 2.5em;
        margin: 20px;
        position: relative;
        overflow: hidden;
        background-color: transparent;
        border: 2px solid var(--color);
        transition: color .5s;
        z-index: 1;
        font-size: 17px;
        color: var(--color);
    }

    .contacto form .boton button:before {
        content: "";
        position: absolute;
        z-index: -1;
        background: var(--color);
        height: 150px;
        width: 300px;
        border-radius: 50%;
    }

    .contacto form .boton button:hover {
        color: #fff;
    }

    .contacto form .boton button:before {
        top: 100%;
        left: 100%;
        transition: all .7s;
    }

    .contacto form .boton button:hover:before {
        top: -30px;
        left: -30px;
    }

    .contacto form .boton button:active:before {
        background: #004a87;
        transition: background 0s;
    }

    #campo-relative{
        position: relative;
    }

    #file{
        position: absolute;
        width: 400px;
        right: 10px;
        bottom: 2px;
        padding-top: 9px;
        padding-left: 40px;
        background-color: #dfdddd;
        z-index: 1;
    }

    #file::before{
        position: absolute;
        top: 0px;
        left: 0px;
        content: 'Adjuntar archivo';
        width: 50%;
        height: 100%;
        z-index: 2;
        padding-top: 12px;
        padding-left: 35px;
        background-color: #dfdddd;
    }
}

@media screen and (max-width:1200px){ 
    .container-text h1{
        font-size: 35px;   
    }

    .container-section-one{
        height: 100vh;
    }

    .container-section-one .text-diseño-fabricacion .btn-cotizar a{
        width: 200px;
    }

    .container-section-two .items-desarrollo{
        display: flex;
        flex-wrap: wrap;
    }

    .container-section-two .items-desarrollo .item-card{
        display: flex;
        flex-wrap: wrap;
        width: 40%;
    }

    .container-section-tree{
        height: 130vh;
    }

    .container-section-tree::before{
        height: 130vh;
    }

    .container-section-tree .container-tipos-camaras{
        height: 100%;
        width: 95%;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1,
    .container-section-tree .container-tipos-camaras  .item-paso-2,
    .container-section-tree .container-tipos-camaras  .item-paso-3,
    .container-section-tree .container-tipos-camaras  .item-paso-4{
        width: 95%;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-2 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-3 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-4 h1{
        font-size: 80px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text h1,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text h1,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text h1,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text h1{
        font-size: 15px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text span{
        font-size: 10px;
    }

    .container-section-fourt .porcentajes .item-uno span{
        font-size: 20px;
        width: 100%;
    }

    .container-section-five .tipos-proyectos{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 50px;
    }

    .container-section-five .clientes .icons{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        gap: 0px;
    }

    .container-section-five .solicita-cotizacion{
        margin: 0px;
    }

    .contacto{
        height: auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .contacto form{
        margin-top: 40px;
        margin-bottom: 20px;
    }
}

@media screen and (max-width:1000px){ 
    .container-text h1{
        font-size: 25px;   
    }

    .container-section-one{
        height: 100vh;
    }

    .container-section-one .text-diseño-fabricacion .btn-cotizar a{
        width: 200px;
    }

    .container-section-two .items-desarrollo{
        display: flex;
        flex-wrap: wrap;
    }

    .container-section-two .items-desarrollo .item-card{
        display: flex;
        flex-wrap: wrap;
        width: 40%;
    }

    .container-section-tree{
        height: 130vh;
    }

    .container-section-tree::before{
        height: 130vh;
    }

    .container-section-tree .container-tipos-camaras{
        height: 100%;
        width: 95%;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1,
    .container-section-tree .container-tipos-camaras  .item-paso-2,
    .container-section-tree .container-tipos-camaras  .item-paso-3,
    .container-section-tree .container-tipos-camaras  .item-paso-4{
        width: 95%;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-2 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-3 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-4 h1{
        font-size: 80px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text h1,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text h1,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text h1,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text h1{
        font-size: 15px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text span{
        font-size: 10px;
    }

    .container-section-fourt .text-principal .text{
        width: 90%;
    }

    .container-section-fourt .text-principal .text .text-title{
        width: 90%;
    }


    .container-section-fourt .porcentajes .item-uno span{
        font-size: 20px;
        width: 100%;
    }

    .container-section-five .tipos-proyectos{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 50px;
    }

    .container-section-five .clientes .icons{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        align-items: center;
        gap: 0px;
    }
}

@media screen and (max-width:769px){ 

    .container-principal{
        margin-top: 10%;
        height: 30vh;
        background-position: top;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .container-text h1{
        font-size: 24px; 
        margin: 0px;
        padding: 0px;  
        text-align: left;
    }

    .container-section-one{
        height: 50vh;
    }

    .container-section-one .text-diseño-fabricacion{
        width: 60%;
    }

    .container-section-one .img-diseño-fabricacion{
        width: 40%;
        margin-left: -20px;
    }

    .container-section-one .text-diseño-fabricacion h1{
        font-size: 30px;
    }

    .container-section-one .text-diseño-fabricacion .btn-cotizar a{
        width: 180px;
    }

    .container-section-two .items-desarrollo{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .container-section-two .items-desarrollo .item-card{
        display: flex;
        flex-wrap: wrap;
        width: 80%;
        height: 30%;
        gap: 0px;
    }

    .container-section-tree{
        height: 130vh;
    }

    .container-section-tree::before{
        height: 130vh;
    }

    .container-section-tree .container-tipos-camaras{
        height: 100%;
        width: 100%;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1,
    .container-section-tree .container-tipos-camaras  .item-paso-2,
    .container-section-tree .container-tipos-camaras  .item-paso-3,
    .container-section-tree .container-tipos-camaras  .item-paso-4{
        width: 90%;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1::before,
    .container-section-tree .container-tipos-camaras  .item-paso-2::before,
    .container-section-tree .container-tipos-camaras  .item-paso-3::before,
    .container-section-tree .container-tipos-camaras  .item-paso-4::before{
        width: 70%;
    }


    .container-section-tree .container-tipos-camaras  .item-paso-1 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-2 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-3 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-4 h1{
        font-size: 60px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text h3{
        font-size: 20px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text span{
        font-size: 10px;
    }

    .container-section-fourt .text-principal .text{
        width: 90%;
    }

    .container-section-fourt .text-principal .text .text-title{
        width: 100%;
        font-size: 35px;
    }

    .container-section-fourt .text-principal .text .text-title b{
        width: 100%;
        font-size: 35px;
    }

    .container-section-fourt .porcentajes .item-uno span{
        font-size: 15px;
        width: 100%;
    }

    .container-section-five .tipos-proyectos{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 50px;
        
    }

    .container-section-five .tipos-proyectos .proyecto{
        width: 100%;
        display: flex;
        gap: 10px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
       
    }

    .container-section-five .tipos-proyectos .proyecto .body{
        width: 70%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
       
    }

    .container-section-five .tipos-proyectos .proyecto .body h3{
        text-align: left;
    }

    .container-section-five .tipos-proyectos .proyecto .body span{
        text-align: left;
    }
   

    .container-section-five .clientes .icons{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content:center;
        align-items: center;
        gap: 0px;
    }
}

@media screen and (max-width:683px){ 
    body{
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
    
    .container-principal{
        display: none;
    }

    .container-section-one{
        margin-top: 15%;
        height: 70vh;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .container-section-one .text-diseño-fabricacion{
        position: absolute;
        left: 0px;
        width: 50%;
        border-radius: 0em;
    }

    .container-section-one .figure-absolute{
        background-image: url('../assets/IMAGEN\ CAMARA.jpg');
        background-position: center;
        background-size: cover;
        width: 50%;
        background-color: transparent;
    }


    .container-section-one .img-diseño-fabricacion{
        display: none;
    }

    .container-section-one .text-diseño-fabricacion h1{
        font-size: 20px;
    }

    .container-section-one .text-diseño-fabricacion .btn-cotizar a{
        width: 170px;
        font-size: 15px;
    }

    .container-section-two {
        display: none;
    }

    .container-section-two-movil{
        position: relative;  
        height: 60vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(255, 255, 255);
        margin: 0px;
        padding: 0px;
        left: 0px;
        top: 0px;
    }

    .container-section-two-movil .swiper{
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        margin-left: 0px;
    }

    .swiper {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background-color: rgb(235, 235, 235);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .swiper-slide .swiper-card{
        background: #f7f7f7;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        border-bottom: solid 1px rgb(207, 207, 207);
    }

    .swiper-slide .swiper-card .svg-icon{
       width: 70px;
       height: 70px;
       border-radius: 2em;
       display: flex;
       justify-content: center;
       align-items: center;
       background-color: #d7ecfc;
    }

    .swiper-slide .swiper-card .svg-icon img{
       width: 50px;
       height: 50px;
    }

    .swiper-slide .swiper-card .text-card{
        width: 90%;
    }

    
    .container-section-tree{
        height: 180vh;
    }

    .container-section-tree .text-title{
        width: 100%;
    }

    .container-section-tree::before{
        height: 180vh;
    }

    .container-section-tree .container-tipos-camaras{
        height: 100%;
        width: 100%;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1,
    .container-section-tree .container-tipos-camaras  .item-paso-2,
    .container-section-tree .container-tipos-camaras  .item-paso-3,
    .container-section-tree .container-tipos-camaras  .item-paso-4{
        width: 90%;
        height: 30rem;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1::before,
    .container-section-tree .container-tipos-camaras  .item-paso-2::before,
    .container-section-tree .container-tipos-camaras  .item-paso-3::before,
    .container-section-tree .container-tipos-camaras  .item-paso-4::before{
        width: 70%;
        height: 100%;
    }


    .container-section-tree .container-tipos-camaras  .item-paso-1 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-2 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-3 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-4 h1{
        font-size: 60px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text h3{
        font-size: 20px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text span{
        font-size: 10px;
    }

    .container-section-fourt .text-principal .text{
        width: 90%;
    }

    .container-section-fourt .text-principal .text .text-title{
        width: 100%;
        font-size: 35px;
    }

    .container-section-fourt .text-principal .text .text-title b{
        width: 100%;
        font-size: 35px;
    }

    .container-section-fourt .porcentajes .item-uno span{
        font-size: 15px;
        width: 100%;
    }

    .container-section-fourt .text-principal .text{
        width: 90%;
    }

    .container-section-fourt .text-principal .text .text-title{
        width: 100%;
        font-size: 30px;
    }

    .container-section-fourt .text-principal .text .text-title b{
        width: 100%;
        font-size: 30px;
    }

    .container-section-fourt .porcentajes .item-uno span{
        font-size: 15px;
        width: 100%;
    }

    .container-section-five .tipos-proyectos{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 50px;
    }

    .container-section-five .tipos-proyectos .proyecto{
        width: 100%;
        display: flex;
        gap: 10px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .container-section-five .tipos-proyectos .proyecto .img{
        width: 150px;
        height: 150px;
        border-radius: 10em;
    }

    .container-section-five .tipos-proyectos .proyecto .img img{
        width: 50%;
    }

    .container-section-five .tipos-proyectos .proyecto .body{
        width: 70%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .container-section-five .tipos-proyectos .proyecto .body h3{
        text-align: left;
    }

    .container-section-five .tipos-proyectos .proyecto .body span{
        text-align: left;
    }

    .container-section-five .clientes h1{
        text-align: center;
        margin-top: 6%;
    }

    .container-section-five .clientes .icons{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content:center;
        align-items: center;
        gap: 0px;
    }
}

@media screen and (max-width:600px){ 

    body{
        width: 100%;
        margin: 0px;
        padding: 0px;
    }
    
    .container-principal{
        display: none;
    }

    .container-section-one{
        margin-top: 15%;
        height: 50vh;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .container-section-one .text-diseño-fabricacion{
        position: absolute;
        left: 0px;
        width: 50%;
        border-radius: 0em;
    }

    .container-section-one .figure-absolute{
        background-image: url('../assets/IMAGEN\ CAMARA.jpg');
        background-position: center;
        background-size: cover;
    }

    .container-section-one .img-diseño-fabricacion{
        display: none;
    }

    .container-section-one .text-diseño-fabricacion h1{
        font-size: 20px;
    }

    .container-section-one .text-diseño-fabricacion .btn-cotizar a{
        width: 170px;
        font-size: 15px;
    }

    .container-section-two {
        display: none;
    }

    .container-section-two-movil{
        position: relative;  
        height: 60vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgb(255, 255, 255);
        margin: 0px;
        padding: 0px;
        left: 0px;
        top: 0px;
    }

    .container-section-two-movil .swiper{
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
        margin-left: 0px;
    }

    .swiper {
        width: 100%;
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background-color: rgb(235, 235, 235);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .swiper-slide .swiper-card{
        background: #f7f7f7;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        border-bottom: solid 1px rgb(207, 207, 207);
    }

    .swiper-slide .swiper-card .svg-icon{
       width: 70px;
       height: 70px;
       border-radius: 2em;
       display: flex;
       justify-content: center;
       align-items: center;
       background-color: #d7ecfc;
    }

    .swiper-slide .swiper-card .svg-icon img{
       width: 50px;
       height: 50px;
    }

    .swiper-slide .swiper-card .text-card{
        width: 90%;
    }

    .container-section-tree{
        height: 135vh;
        margin: 0px;
        padding: 0px;
    }

    .container-section-tree::before{
        height: 135vh;
        margin: 0px;
        padding: 0px;
    }

    .container-section-tree .container-tipos-camaras{
        height: 100%;
        width: 100%;
        padding-top: 40px;
    }

    .container-section-tree .container-tipos-camaras .text-title{
        width: 100%;
        top: 3px;
        left: 5px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1,
    .container-section-tree .container-tipos-camaras  .item-paso-2,
    .container-section-tree .container-tipos-camaras  .item-paso-3,
    .container-section-tree .container-tipos-camaras  .item-paso-4{
        width: 90%;
        height: 35rem;
        padding: 0px;
        margin: 0px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1::before,
    .container-section-tree .container-tipos-camaras  .item-paso-2::before,
    .container-section-tree .container-tipos-camaras  .item-paso-3::before,
    .container-section-tree .container-tipos-camaras  .item-paso-4::before{
        display: none;
    }


    .container-section-tree .container-tipos-camaras  .item-paso-1 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-2 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-3 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-4 h1{
        font-size: 60px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text h3{
        font-size: 20px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text span{
        font-size: 10px;
    }

    .container-section-fourt .text-principal .text{
        width: 90%;
    }

    .container-section-fourt .text-principal .text .text-title{
        width: 100%;
        font-size: 30px;
    }

    .container-section-fourt .text-principal .text .text-title b{
        width: 100%;
        font-size: 30px;
    }

    .container-section-fourt .porcentajes .item-uno span{
        font-size: 15px;
        width: 100%;
    }

    .container-section-five .tipos-proyectos{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        gap: 50px;
    }

    .container-section-five .tipos-proyectos .proyecto{
        width: 100%;
        display: flex;
        gap: 10px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .container-section-five .tipos-proyectos .proyecto .img{
        width: 150px;
        height: 150px;
        border-radius: 10em;
    }

    .container-section-five .tipos-proyectos .proyecto .img img{
        width: 50%;
    }

    .container-section-five .tipos-proyectos .proyecto .body{
        width: 70%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .container-section-five .tipos-proyectos .proyecto .body h3{
        text-align: left;
    }

    .container-section-five .tipos-proyectos .proyecto .body span{
        text-align: left;
    }

    .container-section-five .clientes h1{
        text-align: center;
        margin-top: 6%;
    }

    .container-section-five .clientes .icons{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content:center;
        align-items: center;
        gap: 0px;
    }


    .contacto form .title-datos-cliente,
    .contacto form .title-datos-camara{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    
    .contacto form .title-datos-cliente h1,
    .contacto form .title-datos-camara  h1{
        text-align: center;
        width: 100%;
        font-size: 20px;
    }

    .contacto form #campo-relative #file{
        width: 90%;
        margin: 0px;
        padding: 0px;
        height: 30px;
        bottom: 1px;
    }

    .contacto form #campo-relative #file::before{
        width: 60%;
        padding: 0px;
        content: '';
        background-color: transparent;
    }

    .contacto form .footer-movil{
        width: 100%;
        margin: 0px;
        margin-top: 20px;
        padding: 0px;
        background-color: transparent;
    }

    .contacto form .footer-movil .boton{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }


}

@media screen and (max-width:530px){ 

    .container-principal{
        display: none;
    }

    .container-section-one{
        height: 50vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin-top: 15%;
    }

    .container-section-one .text-diseño-fabricacion{
        position: absolute;
        left: 0px;
        width: 100%;
        border-radius: 0em;
        background-color: transparent;
        gap: 0px;
        display: flex;
        justify-content:center;
        align-items: center;
    }    

    .container-section-one .text-diseño-fabricacion span{
        font-size: 15px;
        color: white;
        margin: 0px;
        padding: 0px;
    }

    .container-section-one .figure-absolute{
        width: 100%;
        left: 0px;
        top: 0px;
        background-color: #d7ecfc;
    }

    .container-section-one .figure-absolute::before{
        width: 100vw;
        height: 100%;
        content: "";
        left: 0px;
        top: 0px;
        position: absolute;
        background-color: #004a87d7;
    }

    .container-section-one .img-diseño-fabricacion{
        display: none;
    }

    .container-section-one .text-diseño-fabricacion h1{
        font-size: 25px;
        color: #ffffff;
        font-stretch:condensed;
        margin-bottom: 30px;
    }

    .container-section-one .text-diseño-fabricacion .btn-cotizar a{
        width: 170px;
        font-size: 16px;
        color: white;
        border: solid 1px white;
        margin-top: 50px;
    }

    .container-section-two .items-desarrollo{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .container-section-two .items-desarrollo .item-card{
        display: flex;
        flex-wrap: wrap;
        width: 90%;
        height: 30%;
        gap: 20px;
        margin: 0px;
        padding: 0px;
    }

    .container-section-two .items-desarrollo .item-card .svg-icon{
        display: none;
    }

    .container-section-tree{
        height: 220vh;
        width: 100%;
        margin: 0px;
        padding: 0px;
    }

    .container-section-tree::before{
        height: 220vh;
        width: 100%;
        margin: 0px;
    }

    .container-section-tree .container-tipos-camaras{
        height: 200vh;
        width: 100%;
        margin: 0px;
        padding-top: 40px;
        
    }

    .container-section-tree .container-tipos-camaras .text-title{
        width: 100%;
        top: 5px;
        left: calc(7px + 15%);
    }

    .item-paso-1{
        width: 90vw;
        flex-direction: column;
        border-radius: 0%;
        margin-top: 20%;
        border-bottom: solid 1px white;
    }

    .item-paso-1 .number{
        width: 100%;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-1 .item-text{
        margin-right: 0px;
        margin-left: 0px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-1::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-left: none;
        border-top-right-radius: 0rem;
        border-bottom-right-radius: 0rem;
        border-top: solid 2px transparent;
        border-right: solid 2px transparent;
        border-bottom: solid 1px transparent;
    }
    
    .item-paso-2{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 90%;
        border-radius: 0%;
        margin-left: 0px;
        border-bottom: solid 1px white;
    }

    .item-paso-2 .number{
        width: 100%;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-paso-2 .item-text{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-2::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-right: none;
        margin-top: 0px;
        margin-left: 0px;
        border-top-left-radius: 0em;
        border-bottom-left-radius: 0em;
        border-top: solid 1px transparent;
        border-left: solid 2px transparent;
        border-bottom: solid 1px transparent;
    }
    
    .item-paso-3{
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 90%;
        border-radius: 0%;
        border-bottom: solid 1px white;
    }
    
    .item-paso-3 .number{
        width: 100%;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-paso-3 .item-text{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-3::before{
        margin-top: 0px;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-left: none;
        border-top-right-radius: 0em;
        border-bottom-right-radius: 0em;
        border-top: solid 1px transparent;
        border-right: solid 2px transparent;
        border-bottom: solid 1px transparent;
    }
    
    .item-paso-4{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        width: 90%;
        border-radius: 0%;
        padding: 0px;
    }
    
    .item-paso-4 .number{
        margin-left: 0px;
        width: 100%;
        height: 30%;
        padding: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-paso-4 .item-text{
        width: 100%;
        height: 70%;
        padding: 0px;
        margin-bottom: 10%;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    
    .item-paso-4::before{
        margin-top: -6px;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-right: none;
        border-top: solid 1px transparent;
        border-left: solid 2px transparent;
        border-bottom: solid 2px transparent;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-2 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-3 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-4 h1{
        font-size: 60px;
        text-align: center;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text h3{
        font-size: 20px;
        text-align: center;
        margin-top: 20px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text span{
        font-size: 15px;
        text-align: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .container-section-tree .container-tipos-camaras .boton-cotizar{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container-section-fourt .img-section{
        display: none;
    }

    .container-section-fourt .text-principal{
        height: auto;
        padding: 19px;
    }

    .container-section-fourt .text-principal .text{
        width: 100%;
    }

    .container-section-fourt .text-principal .text .text-title{
        width: 100%;
        font-size: 19px;
        text-align: center;
    }

    .container-section-fourt .text-principal .text .text-title b{
        width: 100%;
        font-size: 19px;
        text-align: center;
    }

    .container-section-fourt .porcentajes{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 20vh;
    }

    .container-section-fourt .porcentajes .icons-text{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        gap: 12px;
    }

    .container-section-fourt .porcentajes .item-uno{
        width: 30%;
        height: 60%;
        display: flex;
        justify-content: stretch;
        align-items: center;
        
    }

    .container-section-fourt .porcentajes .item-uno span{
        font-size: 10px;
        width: 100%;
        text-align: center;
    }

    .container-section-fourt .porcentajes .item-uno h1{
        font-size: 25px;
    }

    .container-section-five .tipos-proyectos{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 50px;
        margin-top: 0px;
    }

    .container-section-five .tipos-proyectos .proyecto{
        width: 100%;
        display: flex;
        gap: 10px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .container-section-five .tipos-proyectos .proyecto .img{
        width: 100px;
        height: 100px;
        border-radius: 10em;
    }

    .container-section-five .tipos-proyectos .proyecto .img img{
        width: 60%;
    }

    .container-section-five .tipos-proyectos .proyecto .body{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 5%;
    }

    .container-section-five .tipos-proyectos .proyecto .body h3{
        text-align: center;
        width: 100%;
    }

    .container-section-five .tipos-proyectos .proyecto .body span{
        text-align: center;
    }

    .container-section-five .clientes h1{
        width: 100%;
        text-align: center;
        margin-top: 2%;
        font-size: 30px;
    }

    .container-section-five .clientes {
        display: none;
    }

    .container-section-five .clientes-movil {
        display: block;
        margin-top: 10%;
    }

    .container-section-five .clientes-movil .title-clientes{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container-section-five .clientes-movil .title-clientes h1{
        font-size: 25px;
        width: 100%;
        text-align: center;
        font-weight: bold;
        color: #004a87;
        margin-bottom: 20px;
    }
    
    .container-section-five .clientes-movil .swiper{
        background-color: white;
        width: 100vw;
        height: 100%;
    }

    .container-section-five .clientes-movil .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #f7f7f7;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 300px;
    }

    .container-section-five .clientes-movil .swiper-slide  img{
        width: 200px;
        height: 200px;
    }

    .container-section-five .solicita-cotizacion h1{
        font-size: 30px;
        font-family: 'Roboto';
    }

   

}

@media screen and (max-width:400px){ 
    .container-principal{
        display: none;
    }

    .container-section-one{
        height: 70vh;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin-top: 20%;
    }

    .container-section-one .text-diseño-fabricacion{
        position: absolute;
        left: 0px;
        width: 100%;
        border-radius: 0em;
        background-color: transparent;
        gap: 0px;
        display: flex;
        justify-content:center;
        align-items: center;
    }    

    .container-section-one .text-diseño-fabricacion span{
        font-size: 15px;
        color: white;
        margin: 0px;
        padding: 0px;
    }

    .container-section-one .figure-absolute{
        width: 100%;
        left: 0px;
        top: 0px;
        background-color: #d7ecfc;
    }

    .container-section-one .figure-absolute::before{
        width: 100vw;
        height: 100%;
        content: "";
        left: 0px;
        top: 0px;
        position: absolute;
        background-color: #004a87d7;
    }

    .container-section-one .img-diseño-fabricacion{
        display: none;
    }

    .container-section-one .text-diseño-fabricacion h1{
        font-size: 25px;
        color: #ffffff;
        font-stretch:condensed;
        margin-bottom: 30px;
    }

    .container-section-one .text-diseño-fabricacion .btn-cotizar a{
        width: 170px;
        font-size: 16px;
        color: white;
        border: solid 1px white;
        margin-top: 50px;
    }

    .container-section-two .items-desarrollo{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .container-section-two .items-desarrollo .item-card{
        display: flex;
        flex-wrap: wrap;
        width: 90%;
        height: 30%;
        gap: 20px;
        margin: 0px;
        padding: 0px;
    }

    .container-section-two .items-desarrollo .item-card .svg-icon{
        display: none;
    }

    .container-section-tree{
        height: 270vh;
        width: 100%;
        margin: 0px;
        padding: 0px;
       
    }

    .container-section-tree::before{
        height: 270vh;
        width: 100%;
        margin: 0px;
    }

    .container-section-tree .container-tipos-camaras{
        height: 260vh;
        width: 100%;
        margin: 0px;
        padding-top: 40px;
        
    }

    .container-section-tree .container-tipos-camaras .text-title{
        width: 100%;
        top: 5px;
        left: calc(7px + 15%);
    }

    .item-paso-1{
        width: 90vw;
        flex-direction: column;
        border-radius: 0%;
        margin-top: 20%;
        border-bottom: solid 1px white;
    }

    .item-paso-1 .number{
        width: 100%;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-1 .item-text{
        margin-right: 0px;
        margin-left: 0px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-1::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-left: none;
        border-top-right-radius: 0rem;
        border-bottom-right-radius: 0rem;
        border-top: solid 2px transparent;
        border-right: solid 2px transparent;
        border-bottom: solid 1px transparent;
    }
    
    .item-paso-2{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 90%;
        border-radius: 0%;
        margin-left: 0px;
        border-bottom: solid 1px white;
    }

    .item-paso-2 .number{
        width: 100%;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-paso-2 .item-text{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-2::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-right: none;
        margin-top: 0px;
        margin-left: 0px;
        border-top-left-radius: 0em;
        border-bottom-left-radius: 0em;
        border-top: solid 1px transparent;
        border-left: solid 2px transparent;
        border-bottom: solid 1px transparent;
    }
    
    .item-paso-3{
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 90%;
        border-radius: 0%;
        border-bottom: solid 1px white;
    }
    
    .item-paso-3 .number{
        width: 100%;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-paso-3 .item-text{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-3::before{
        margin-top: 0px;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-left: none;
        border-top-right-radius: 0em;
        border-bottom-right-radius: 0em;
        border-top: solid 1px transparent;
        border-right: solid 2px transparent;
        border-bottom: solid 1px transparent;
    }
    
    .item-paso-4{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        width: 90%;
        border-radius: 0%;
        padding: 0px;
    }
    
    .item-paso-4 .number{
        margin-left: 0px;
        width: 100%;
        height: 30%;
        padding: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-paso-4 .item-text{
        width: 100%;
        height: 70%;
        padding: 0px;
        margin-bottom: 10%;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    
    .item-paso-4::before{
        margin-top: -6px;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-right: none;
        border-top: solid 1px transparent;
        border-left: solid 2px transparent;
        border-bottom: solid 2px transparent;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-2 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-3 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-4 h1{
        font-size: 60px;
        text-align: center;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text h3{
        font-size: 20px;
        text-align: center;
        margin-top: 20px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text span{
        font-size: 15px;
        text-align: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .container-section-fourt .img-section{
        display: none;
    }

    .container-section-fourt .text-principal{
        height: auto;
        padding: 19px;
    }

    .container-section-fourt .text-principal .text{
        width: 100%;
    }

    .container-section-fourt .text-principal .text .text-title{
        width: 100%;
        font-size: 19px;
        text-align: center;
    }

    .container-section-fourt .text-principal .text .text-title b{
        width: 100%;
        font-size: 19px;
        text-align: center;
    }

    .container-section-fourt .porcentajes{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 20vh;
    }

    .container-section-fourt .porcentajes .icons-text{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        gap: 12px;
    }

    .container-section-fourt .porcentajes .item-uno{
        width: 30%;
        height: 60%;
        display: flex;
        justify-content: stretch;
        align-items: center;
        
    }

    .container-section-fourt .porcentajes .item-uno span{
        font-size: 10px;
        width: 100%;
        text-align: center;
    }

    .container-section-fourt .porcentajes .item-uno h1{
        font-size: 25px;
    }

    .container-section-five .tipos-proyectos{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 50px;
        margin-top: 0px;
    }

    .container-section-five .tipos-proyectos .proyecto{
        width: 100%;
        display: flex;
        gap: 10px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .container-section-five .tipos-proyectos .proyecto .img{
        width: 100px;
        height: 100px;
        border-radius: 10em;
    }

    .container-section-five .tipos-proyectos .proyecto .img img{
        width: 60%;
    }

    .container-section-five .tipos-proyectos .proyecto .body{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 5%;
    }

    .container-section-five .tipos-proyectos .proyecto .body h3{
        text-align: center;
        width: 100%;
    }

    .container-section-five .tipos-proyectos .proyecto .body span{
        text-align: center;
    }

    .container-section-five .clientes h1{
        width: 100%;
        text-align: center;
        margin-top: 2%;
        font-size: 30px;
    }

    .container-section-five .clientes {
        display: none;
    }

    .container-section-five .clientes-movil {
        display: block;
        margin-top: 10%;
    }

    .container-section-five .clientes-movil .title-clientes{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container-section-five .clientes-movil .title-clientes h1{
        font-size: 25px;
        width: 100%;
        text-align: center;
        font-weight: bold;
        color: #004a87;
        margin-bottom: 20px;
    }
    
    .container-section-five .clientes-movil .swiper{
        background-color: white;
        width: 100vw;
        height: 100%;
    }

    .container-section-five .clientes-movil .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #f7f7f7;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 300px;
    }

    .container-section-five .clientes-movil .swiper-slide  img{
        width: 200px;
        height: 200px;
    }

    .container-section-five .solicita-cotizacion h1{
        font-size: 30px;
        font-family: 'Roboto';
    }

}

@media screen and (max-width:395px){ 
    .container-principal{
        display: none;
    }

    .container-section-one{
        height: 70vh;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin-top: 20%;
    }

    .container-section-one .text-diseño-fabricacion{
        position: absolute;
        left: 0px;
        width: 100%;
        border-radius: 0em;
        background-color: transparent;
        gap: 0px;
        display: flex;
        justify-content:center;
        align-items: center;
    }    

    .container-section-one .text-diseño-fabricacion span{
        font-size: 15px;
        color: white;
        margin: 0px;
        padding: 0px;
    }

    .container-section-one .figure-absolute{
        width: 100%;
        left: 0px;
        top: 0px;
        background-color: #d7ecfc;
    }

    .container-section-one .figure-absolute::before{
        width: 100vw;
        height: 100%;
        content: "";
        left: 0px;
        top: 0px;
        position: absolute;
        background-color: #004a87d7;
    }

    .container-section-one .img-diseño-fabricacion{
        display: none;
    }

    .container-section-one .text-diseño-fabricacion h1{
        font-size: 25px;
        color: #ffffff;
        font-stretch:condensed;
        margin-bottom: 30px;
    }

    .container-section-one .text-diseño-fabricacion .btn-cotizar a{
        width: 170px;
        font-size: 16px;
        color: white;
        border: solid 1px white;
        margin-top: 50px;
    }

    .container-section-two .items-desarrollo{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .container-section-two .items-desarrollo .item-card{
        display: flex;
        flex-wrap: wrap;
        width: 90%;
        height: 30%;
        gap: 20px;
        margin: 0px;
        padding: 0px;
    }

    .container-section-two .items-desarrollo .item-card .svg-icon{
        display: none;
    }

    .container-section-tree{
        height: 250vh;
        width: 100%;
        margin: 0px;
        padding: 0px;
       
    }

    .container-section-tree::before{
        height: 250vh;
        width: 100%;
        margin: 0px;
    }

    .container-section-tree .container-tipos-camaras{
        height: 240vh;
        width: 100%;
        margin: 0px;
        padding-top: 40px;
        
    }

    .container-section-tree .container-tipos-camaras .text-title{
        width: 100%;
        top: 5px;
        left: calc(7px + 15%);
    }

    .item-paso-1{
        width: 90vw;
        flex-direction: column;
        border-radius: 0%;
        margin-top: 20%;
        border-bottom: solid 1px white;
    }

    .item-paso-1 .number{
        width: 100%;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-1 .item-text{
        margin-right: 0px;
        margin-left: 0px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-1::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-left: none;
        border-top-right-radius: 0rem;
        border-bottom-right-radius: 0rem;
        border-top: solid 2px transparent;
        border-right: solid 2px transparent;
        border-bottom: solid 1px transparent;
    }
    
    .item-paso-2{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 90%;
        border-radius: 0%;
        margin-left: 0px;
        border-bottom: solid 1px white;
    }

    .item-paso-2 .number{
        width: 100%;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-paso-2 .item-text{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-2::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-right: none;
        margin-top: 0px;
        margin-left: 0px;
        border-top-left-radius: 0em;
        border-bottom-left-radius: 0em;
        border-top: solid 1px transparent;
        border-left: solid 2px transparent;
        border-bottom: solid 1px transparent;
    }
    
    .item-paso-3{
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 90%;
        border-radius: 0%;
        border-bottom: solid 1px white;
    }
    
    .item-paso-3 .number{
        width: 100%;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-paso-3 .item-text{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-3::before{
        margin-top: 0px;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-left: none;
        border-top-right-radius: 0em;
        border-bottom-right-radius: 0em;
        border-top: solid 1px transparent;
        border-right: solid 2px transparent;
        border-bottom: solid 1px transparent;
    }
    
    .item-paso-4{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        width: 90%;
        border-radius: 0%;
        padding: 0px;
    }
    
    .item-paso-4 .number{
        margin-left: 0px;
        width: 100%;
        height: 30%;
        padding: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-paso-4 .item-text{
        width: 100%;
        height: 70%;
        padding: 0px;
        margin-bottom: 10%;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    
    .item-paso-4::before{
        margin-top: -6px;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-right: none;
        border-top: solid 1px transparent;
        border-left: solid 2px transparent;
        border-bottom: solid 2px transparent;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-2 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-3 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-4 h1{
        font-size: 60px;
        text-align: center;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text h3{
        font-size: 20px;
        text-align: center;
        margin-top: 20px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text span{
        font-size: 15px;
        text-align: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .container-section-fourt .img-section{
        display: none;
    }

    .container-section-fourt .text-principal{
        height: auto;
        padding: 19px;
    }

    .container-section-fourt .text-principal .text{
        width: 100%;
    }

    .container-section-fourt .text-principal .text .text-title{
        width: 100%;
        font-size: 19px;
        text-align: center;
    }

    .container-section-fourt .text-principal .text .text-title b{
        width: 100%;
        font-size: 19px;
        text-align: center;
    }

    .container-section-fourt .porcentajes{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 20vh;
    }

    .container-section-fourt .porcentajes .icons-text{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        gap: 12px;
    }

    .container-section-fourt .porcentajes .item-uno{
        width: 30%;
        height: 60%;
        display: flex;
        justify-content: stretch;
        align-items: center;
        
    }

    .container-section-fourt .porcentajes .item-uno span{
        font-size: 10px;
        width: 100%;
        text-align: center;
    }

    .container-section-fourt .porcentajes .item-uno h1{
        font-size: 25px;
    }

    .container-section-five .tipos-proyectos{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 50px;
        margin-top: 0px;
    }

    .container-section-five .tipos-proyectos .proyecto{
        width: 100%;
        display: flex;
        gap: 10px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .container-section-five .tipos-proyectos .proyecto .img{
        width: 100px;
        height: 100px;
        border-radius: 10em;
    }

    .container-section-five .tipos-proyectos .proyecto .img img{
        width: 60%;
    }

    .container-section-five .tipos-proyectos .proyecto .body{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 5%;
    }

    .container-section-five .tipos-proyectos .proyecto .body h3{
        text-align: center;
        width: 100%;
    }

    .container-section-five .tipos-proyectos .proyecto .body span{
        text-align: center;
    }

    .container-section-five .clientes h1{
        width: 100%;
        text-align: center;
        margin-top: 2%;
        font-size: 30px;
    }

    .container-section-five .clientes {
        display: none;
    }

    .container-section-five .clientes-movil {
        display: block;
        margin-top: 10%;
    }

    .container-section-five .clientes-movil .title-clientes{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container-section-five .clientes-movil .title-clientes h1{
        font-size: 25px;
        width: 100%;
        text-align: center;
        font-weight: bold;
        color: #004a87;
        margin-bottom: 20px;
    }
    
    .container-section-five .clientes-movil .swiper{
        background-color: white;
        width: 100vw;
        height: 100%;
    }

    .container-section-five .clientes-movil .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #f7f7f7;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 300px;
    }

    .container-section-five .clientes-movil .swiper-slide  img{
        width: 200px;
        height: 200px;
    }

    .container-section-five .solicita-cotizacion h1{
        font-size: 30px;
        font-family: 'Roboto';
    }

   

}

@media screen and (max-width:355px){ 
    .container-principal{
        display: none;
    }

    .container-section-one{
        height: 70vh;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        margin-top: 20%;
    }

    .container-section-one .text-diseño-fabricacion{
        position: absolute;
        left: 0px;
        width: 100%;
        border-radius: 0em;
        background-color: transparent;
        gap: 0px;
        display: flex;
        justify-content:center;
        align-items: center;
    }    

    .container-section-one .text-diseño-fabricacion span{
        font-size: 15px;
        color: white;
        margin: 0px;
        padding: 0px;
    }

    .container-section-one .figure-absolute{
        width: 100%;
        left: 0px;
        top: 0px;
        background-color: #d7ecfc;
    }

    .container-section-one .figure-absolute::before{
        width: 100vw;
        height: 100%;
        content: "";
        left: 0px;
        top: 0px;
        position: absolute;
        background-color: #004a87d7;
    }

    .container-section-one .img-diseño-fabricacion{
        display: none;
    }

    .container-section-one .text-diseño-fabricacion h1{
        font-size: 25px;
        color: #ffffff;
        font-stretch:condensed;
        margin-bottom: 30px;
    }

    .container-section-one .text-diseño-fabricacion .btn-cotizar a{
        width: 170px;
        font-size: 16px;
        color: white;
        border: solid 1px white;
        margin-top: 50px;
    }

    .container-section-two .items-desarrollo{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
    }

    .container-section-two .items-desarrollo .item-card{
        display: flex;
        flex-wrap: wrap;
        width: 90%;
        height: 30%;
        gap: 20px;
        margin: 0px;
        padding: 0px;
    }

    .container-section-two .items-desarrollo .item-card .svg-icon{
        display: none;
    }

    .container-section-tree{
        height: 340vh;
        width: 100%;
        margin: 0px;
        padding: 0px;
       
    }

    .container-section-tree::before{
        height: 340vh;
        width: 100%;
        margin: 0px;
    }

    .container-section-tree .container-tipos-camaras{
        height: 330vh;
        width: 100%;
        margin: 0px;
        padding-top: 40px;
        
    }

    .container-section-tree .container-tipos-camaras .text-title{
        width: 100%;
        top: 10px;
        left: calc(0px + 10%);
    }

    .item-paso-1{
        width: 90vw;
        flex-direction: column;
        border-radius: 0%;
        margin-top: 20%;
        border-bottom: solid 1px white;
    }

    .item-paso-1 .number{
        width: 100%;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-1 .item-text{
        margin-right: 0px;
        margin-left: 0px;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-1::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-left: none;
        border-top-right-radius: 0rem;
        border-bottom-right-radius: 0rem;
        border-top: solid 2px transparent;
        border-right: solid 2px transparent;
        border-bottom: solid 1px transparent;
    }
    
    .item-paso-2{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 90%;
        border-radius: 0%;
        margin-left: 0px;
        border-bottom: solid 1px white;
    }

    .item-paso-2 .number{
        width: 100%;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-paso-2 .item-text{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-2::before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-right: none;
        margin-top: 0px;
        margin-left: 0px;
        border-top-left-radius: 0em;
        border-bottom-left-radius: 0em;
        border-top: solid 1px transparent;
        border-left: solid 2px transparent;
        border-bottom: solid 1px transparent;
    }
    
    .item-paso-3{
        display: flex;
        flex-wrap: wrap-reverse;
        justify-content: center;
        align-items: center;
        position: relative;
        width: 90%;
        border-radius: 0%;
        border-bottom: solid 1px white;
    }
    
    .item-paso-3 .number{
        width: 100%;
        margin: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-paso-3 .item-text{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .item-paso-3::before{
        margin-top: 0px;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-left: none;
        border-top-right-radius: 0em;
        border-bottom-right-radius: 0em;
        border-top: solid 1px transparent;
        border-right: solid 2px transparent;
        border-bottom: solid 1px transparent;
    }
    
    .item-paso-4{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start;
        position: relative;
        width: 90%;
        border-radius: 0%;
        padding: 0px;
    }
    
    .item-paso-4 .number{
        margin-left: 0px;
        width: 100%;
        height: 30%;
        padding: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .item-paso-4 .item-text{
        width: 100%;
        height: 70%;
        padding: 0px;
        margin-bottom: 10%;
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
    
    .item-paso-4::before{
        margin-top: -6px;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-right: none;
        border-top: solid 1px transparent;
        border-left: solid 2px transparent;
        border-bottom: solid 2px transparent;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-2 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-3 h1,
    .container-section-tree .container-tipos-camaras  .item-paso-4 h1{
        font-size: 60px;
        text-align: center;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text h3,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text h3{
        font-size: 20px;
        text-align: center;
        margin-top: 20px;
    }

    .container-section-tree .container-tipos-camaras  .item-paso-1 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-2 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-3 .item-text span,
    .container-section-tree .container-tipos-camaras  .item-paso-4 .item-text span{
        font-size: 15px;
        text-align: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .container-section-fourt .img-section{
        display: none;
    }

    .container-section-fourt .text-principal{
        height: auto;
        padding: 19px;
    }

    .container-section-fourt .text-principal .text{
        width: 100%;
    }

    .container-section-fourt .text-principal .text .text-title{
        width: 100%;
        font-size: 19px;
        text-align: center;
    }

    .container-section-fourt .text-principal .text .text-title b{
        width: 100%;
        font-size: 19px;
        text-align: center;
    }

    .container-section-fourt .porcentajes{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 20vh;
    }

    .container-section-fourt .porcentajes .icons-text{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        gap: 12px;
    }

    .container-section-fourt .porcentajes .item-uno{
        width: 30%;
        height: 60%;
        display: flex;
        justify-content: stretch;
        align-items: center;
        
    }

    .container-section-fourt .porcentajes .item-uno span{
        font-size: 10px;
        width: 100%;
        text-align: center;
    }

    .container-section-fourt .porcentajes .item-uno h1{
        font-size: 25px;
    }

    .container-section-five .tipos-proyectos{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 50px;
        margin-top: 0px;
    }

    .container-section-five .tipos-proyectos .proyecto{
        width: 100%;
        display: flex;
        gap: 10px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .container-section-five .tipos-proyectos .proyecto .img{
        width: 100px;
        height: 100px;
        border-radius: 10em;
    }

    .container-section-five .tipos-proyectos .proyecto .img img{
        width: 60%;
    }

    .container-section-five .tipos-proyectos .proyecto .body{
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-bottom: 5%;
    }

    .container-section-five .tipos-proyectos .proyecto .body h3{
        text-align: center;
        width: 100%;
    }

    .container-section-five .tipos-proyectos .proyecto .body span{
        text-align: center;
    }

    .container-section-five .clientes h1{
        width: 100%;
        text-align: center;
        margin-top: 2%;
        font-size: 30px;
    }

    .container-section-five .clientes-movil {
        margin-top: 10%;
        margin-bottom: 10%;
        width: 100%;
        height: 300px;    
    }

    .container-section-five .clientes-movil .title-clientes{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .container-section-five .clientes-movil .title-clientes h1{
        font-size: 25px;
        width: 100%;
        text-align: center;
        font-weight: bold;
        color: #004a87;
        margin-bottom: 20px;
    }
    
    .container-section-five .clientes-movil .swiper{
        background-color: white;
        width: 100%;
        height: 100%;
    }

    .container-section-five .clientes-movil .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #f7f7f7;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 300px;
    }

    .container-section-five .clientes-movil .swiper-slide  img{
        width: 150px;
        height: 150px;
    }

    .container-section-five .solicita-cotizacion{
        display: flex;
        justify-content: center;
        align-items:center;
        height: 30vh;
        padding-top: 20px;
    }

    .container-section-five .solicita-cotizacion h1{
        font-size: 30px;
        font-family: 'Roboto';
        text-align: center;
    }

    .container-section-five .solicita-cotizacion span{
        font-size: 15px;
        text-align: center;
        font-family: 'Roboto';
    }

   

}