h1{
    text-align: left;
    width: 100%;
}

.service h2{
    padding-top: 20px;
    text-align: center;
}

.service p{
    padding: 0px 50px;
}

.service-1{       
    color: black;
    padding-bottom: 100px;
}

.service-1-text{
    width: 100%;
}

.service-1-text h2{
    color: var(--main_blue);
}

.service-1-text p{
    padding-top: 0px;
    text-align: center;
}

.service-1 .btn-blue{
    margin-top: 5rem;
}

/* Individual Product */
.product{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--light_gray);
    background-size: cover;
    justify-content: center;
    background-repeat: no-repeat;
    transition: transform .4s ease-in;
}

/* Product img */
.product div{
    width: 85px;
    height: 85px;
}

.product p{
    text-align: center;
    color: black;
    transition: border-bottom 0.2s;
}

/* Products images */
.product-1-img{
    background: url("../img/contpaqi-suite/contabilidad.png") no-repeat center;
}
.product-2-img{
    background: url("../img/contpaqi-suite/fac_electronica.png") no-repeat center;
}
.product-3-img{
    background: url("../img/contpaqi-suite/bancos.png") no-repeat center;
}
.product-4-img{
    background: url("../img/contpaqi-suite/comercial.png") no-repeat center;
}
.product-5-img{
    background: url("../img/contpaqi-suite/nominas.png") no-repeat center;
}
.product-6-img{
    background: url("../img/contpaqi-suite/punto_de_venta.png") no-repeat center;
}
.product-7-img{
    background: url("../img/contpaqi-suite/xml.png") no-repeat center;
}

.product:hover{
    transform: scale(1.1);
}

.product-2:hover p, .product-4:hover p, .product-6:hover p{
    border-bottom: 2px solid rgb(65, 191, 179);  
}
.product-1:hover p, .product-3:hover p, .product-5:hover p,.product-7:hover p{
    border-bottom: 2px solid rgb(41, 189, 239);
}

.csuite + button{    
    margin-top: 60px;
}

/* a:not(a.btn-blue){
    color: var(--main_blue);
} */

.csuite-button:hover{
    border: 2px solid black;
    background-color: var(--main_blue);
}

/* ================================================================================================================== */
/* start of Service 2 section*/

.service-2-text h2{
    margin-top: 100px;
    color: var(--main_blue);
}

#services{
    width: 100%;
    height: 10px;
    margin-top: 50px;
    margin-bottom: 100px;

}

/* imp */
.dark-triangule{
    background-image: url("../img/trinagules.svg");
    background-repeat: no-repeat;
    background-position: top left;
    height: 38vw;
    background-size: cover;
}


.implementation-container{
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: repeat(auto, 1fr);
    gap: 1rem;    
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 100px;
}

.imp-item{
    background-color: rgb(245, 246, 250);
    cursor: pointer;
    transition: background-color 0.2s;
}

.imp-item:hover{
    background-color: white;
}

.imp-item h2, .imp-item p{
    width: 100%;
    font-size: var(--fz-general);
}


.imp-item p{
    padding: 0;
    padding: 0px 20px;
}

.item1 h2, .item3 h2{
    text-align: left;
    padding-left: 20px;
}

.item2 h2, .item4 h2{
    text-align: right;
    padding-right: 20px;
}

.imp-item p{
    text-align: justify;
}

.item1{
    grid-column: 1/9;
}

.item2{
    grid-column: 9/13;
}

.item3{
    grid-column: 1/7;
}

.item4{
    grid-column: 7/13;
}


/* ============================================================== */
/* Service 3 */

.service-3{    
    display: flex;
    background: var(--main_blue);
    align-items: stretch;
    justify-content: space-around;
    color: white;
    padding-bottom: 200px;
    padding-top: 30px;
}

.service-3-text{
    width: 600px;
    text-align: justify;
}

.service-3-text h2{
    padding: 0px;
    margin: 0px;
    text-align: center;
    height: fit-content;
}

.service-3-text p{
    text-align: justify;
}

.service-3-image{
    background: url("../img/pos2.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 50%;
    height: 55vh;
    border-radius: 5px;
}

.last-wave{
    background-image: url("../img/wave.svg");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    height: 10vw;
    margin-top: -10px;
}

.service-4{
    margin: 100px 20px 0 20px;
    display: flex;
    justify-content: center;
    justify-content: space-evenly;
    height: 500px;
    margin-bottom: 300px;
}

.service-4-img{
    background-image: url("../img/computers.jpg");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    width: 50%;
    height: auto;
    border-radius: 5px;
}   

.service-4-text{
    display: flex;
    flex-direction: column;
    width: 600px;
    height: fit-content;
}

.service-4-text h2{
    padding: 0px;
    margin: 0px;
    color: var(--main_blue);
}

.service-4-text p{
    text-align: justify;
}

.service-4-text .btn-blue{
    margin-top: 4rem;
    align-self: center;
}


.divider{
    background-image: url("../img/light-wave.svg");
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    height: 28vw;
}

.csuite{
    display: flex;
    width: 95%;
    margin-top: 50px;
}

.csuite .selector{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    font-size: 4rem;
    min-width: 100px;
    width: 15%;
    min-height: 55vh;
}

.csuite .selector i{
    transition: color 0.7s;
    color: rgb(168, 168, 168);
}

.csuite .selector .option.contables:hover i{
    color: var(--light_blue);
}

.csuite .selector .option.comerciales:hover i{
    color: var(--light_green);
}

.csuite .selector .option.nube:hover i,
.csuite .selector .option.productividad:hover i{
    color: var(--cpurple);
}

.option{
    display: flex;
    text-align: left;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    min-width: 100%;
    max-width: 100%;
    cursor: pointer;
}

.option:hover{background-color: var(--light_gray);}
.option.active{background-color: var(--light_gray);}
.csuite .selector .option.contables.active i{color: var(--light_blue);}
.csuite .selector .option.comerciales.active i{color: var(--light_green);}
.csuite .selector .option.nube.active i,
.csuite .selector .option.productividad.active i{color: var(--cpurple);}

.csuite .selector .option i{
    padding-top: 20px;
}

.csuite .selector .option p{
    margin-top: 2px;
}

.csuite .products{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(280px,1fr));
    grid-template-rows: auto;
    column-gap: 15px;
    row-gap: 20px;
    width: 85%;
    margin-left: 50px;
    align-content: flex-start;
    justify-items: center;
}

.csuite .products a{
    height: fit-content;
}

.csuite .products .img-cp{
    background-size: cover;
    width: 280px;
    height: 200px;
    border-radius: 20px;
}

.img-cp.contables{border: 3px solid var(--light_blue);}
.img-cp.comerciales{border: 3px solid var(--light_green);}
.img-cp.nube_productividad{border: 3px solid var(--cpurple);}

/* Contables */
.img-cp.contabilidad{background: url("../img/contpaqi-suite/contabilidad.webp") no-repeat center;}
.img-cp.nominas{background: url("../img/contpaqi-suite/nominas.webp") no-repeat center;}
.img-cp.bancos{background: url("../img/contpaqi-suite/bancos.webp") no-repeat center;}
.img-cp.xml{background: url("../img/contpaqi-suite/xml.webp") no-repeat center;}

/* Comerciales */
.img-cp.factura_e{background: url("../img/contpaqi-suite/fac_electronica.webp") no-repeat center;}
.img-cp.comercial{background: url("../img/contpaqi-suite/comercial.webp") no-repeat center;}
.img-cp.produccion{background: url("../img/contpaqi-suite/produccion.webp") no-repeat center;}
.img-cp.punto_de_venta{background: url("../img/contpaqi-suite/punto_de_venta.webp") no-repeat center;}
.img-cp.gastos{background: url("../img/contpaqi-suite/gastos.webp") no-repeat center;}

/* Producitividad */
.img-cp.evalua{background: url("../img/contpaqi-suite/evalua.svg") no-repeat center;}
.img-cp.kursa{background: url("../img/contpaqi-suite/kursa.webp") no-repeat center;}

/* Nube */
.img-cp.escritorio_virtual{background: url("../img/contpaqi-suite/escritorio_virtual.webp") no-repeat center;}
.img-cp.respaldos{background: url("../img/contpaqi-suite/respaldos.webp") no-repeat center;}

.img-cp img{
    max-width: 100%;
    max-height: 100%;
    min-height: 100%;
    min-width: 100%;
}

#p-after-divider, .divider h2{
    color: white;
}

#p-after-divider{
    padding: 0 20px;
}

.divider h2{
    padding: 20px 20px 0px 20px;
}

@media (max-width: 1200px){

    .divider{
        background-image: none;
        background-color: #00AAFF;
        height: fit-content;
        padding-bottom: 30px;
    }

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

@media (max-width: 1100px){

    .csuite .products{
        column-gap: 30px;
        row-gap: 20px;
        grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
        margin-left: 20px;
    }

    .product p{
        text-align: center;
    }

    .service-2-text h2{
        margin-top: 0px;
    }

    .implementation-container{
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        height:55vw;
        top: 50px;
    }

    .imp-item h2{
        text-align: left;
        padding: 0px;
        padding-left: 20px;
        text-align: center;
    }

    .service-3{
        padding-top: 300px;
    }

    .service-3-text{
        width: 480px;
    }
}

@media (max-width: 900px){

    .divider h2{
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .csuite .selector{
        width: 200px;
    }

    .service-3{
        padding-top: 100px;
        margin-top: 0;
        flex-direction: column;
        align-items: center;
        padding-bottom: 50px;
    }

    .service-3 *{
        width: 100%;
    }

    .service-3-text h2{
        padding-top: 250px;
        text-align: center;
    }
    .service-3-text p{
        margin-top: 30px;
    }
    .service-3-image{
        margin-top: 50px;
        height: 400px;
    }

    .service-4{
        margin-top: 0;
        padding-top: 0px;
        flex-direction: column;
        margin-bottom: 100px;
    }

    .service-4 *{
        width: 100%;
    }

    .service-4-text p{
        margin-top: 50px;
    }

    .service-4-img{
        display: none;
    }

    .service-4 .btn-blue{
        width: fit-content;
        text-align: center;
    }

    .div-remote h1{
        width: 100%;
        text-align: center;
        animation: none;
        border: none;
    }

    #p-after-divider{
        margin-top: 0px;
        padding-top: 25px;
    }
    
    .implementation-container{
        height: 70vw;
        top: 40px;
    }

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

@media (max-width: 770px){

    .csuite{
        flex-direction: column;
        justify-content: space-evenly;
        height: fit-content;
    }

    .csuite .selector{
        flex-direction: row;
        justify-content: space-around;
        width: 100%;
        margin-bottom: 50px;
        min-height: 10vh;
    }

    .csuite .selector .option{
        min-width: 100px;
        height: fit-content;
    }

    .csuite .products{
        margin: 0;
        width: 100%;
        align-items: stretch;
    }
    
    .csuite .products div{
        min-width: 100%;
        width: 100%;
    }
    .service-3{
        padding-top: 35vh;
    }

    .implementation-container{
        height: 93vw;
    }
}

@media (max-width: 600px){
    .div-remote .btn-blue{
        margin-top: 0;
    }

    #p-after-divider{
        margin-top: 0px;
        padding-top: 25px;
    }


    .service-1-text p{
        margin-top: 20px;
        text-align: justify;
    }

    .product div{
        width: 80px;
        height: 80px;
    }

    .implementation-container{
        top: 10px;
        height:100vh;
    }

    .service-3{
        padding-top: 250px;
    }

    #services{
        margin: 0;
        padding: 0;
    }

}

@media (max-width: 550px){
    .service-3{
        padding-top: 150px;
    }

    .csuite .products{
        grid-template-columns: 0.9fr;
        justify-content: center;
        align-content: center;
        padding: 0 10px;
    }

    .csuite .selector{
        position: sticky;
        top: 60px;
        background-color: white;
    }

    .implementation-container{
        margin-top: 0;
        height: 80vh
    }
}

@media (max-width: 420px){

    .implementation-container{
        height: 150vw;
    }  

    .service-3{
        padding-top: 300px;
    }

    .service-3-text h2{
        padding-left: 20px;
        padding-right: 20px;

    }

    .service-3-image{
        height: 200px;        
    }

    .service-3-text p, .service-4-text p{
        width: 100%;
        padding: 0 20px 0 20px;
    }

    .service-4-text h2{
        margin-top: 180px;
    }

    .service-4{
        padding-bottom: 200px;
    }

    .csuite{
        width: 100%;
    }

    .csuite .selector .option p{
        font-size: var(--fz-small);
    }

    .csuite .selector .option{
        padding: 10px;
    }
}

@media (max-width: 375px){
    .implementation-container{
        height: 100vh;
    }

    .service-3{
        padding-top: 350px;
    }
}

@media (max-width: 330px){
    .implementation-container{
        height: 120vh;
    }

    .service-3{
        padding-top: 480px;
    }

    .imp-item h2{
        text-align: center;
        padding-left: 5px;
        padding-right: 5px;
    }

    .service-4{
        padding-top: 80px;
        margin-bottom: 100px;
    }

    .service-4-text .btn-blue{
        width: fit-content;
    }
}

@media(max-width: 330px){
    .service-2-text h2{
        width: 100%;
        text-align: center; 
        padding: 0;
    }

    .csuite .selector .option{
        min-width: 40px;
        max-width: fit-content;
    }

    .csuite .selector .option p{
        padding-top: 10px;
    }

    .implementation-container{
        height: 100vh;
        width: 100%;
        margin: 0;
        padding: 0 10px;
    }

    .service-3{
        padding-top: 250px;
    }
}