/*#region COLORES */
:root{
    /* --bg-nav: transparent; */
    --bg-nav-respon: #95A0D0;

}
/*#endregion COLORES */


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

/*#region NAV */

.nav__links{
    /* display: grid;
    grid-auto-flow: row;
    gap: 3em; */

    position: fixed;
    top: 110px;
    bottom: 0;
    background-color: var(--bg-nav-respon);
    width: 100vw;

    left: 0;
    /* display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center; */
    clip-path: circle(0 at center);
    transition: clip-path 1s ease-in-out;

    & ul{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        & li{
            & a{
                color: #fff;
            }
        }
    }
}

.nav__links ul li a:hover,
.nav__links ul li a.active{
    color: #000;
}

.nav__label{
    display: block;
    cursor: pointer;
}

.nav__input:checked + .nav__links{
    clip-path: circle(100% at center);
}

/*#endregion NAV */


/*#region ABOUT */

#about{
    min-height: 100vh;
    
    padding: 100px 10px;
    /* margin: 100px 0; */
    position: relative;
    .about__capa{
    }
        .aboutus__title{
            font-size: 2.5em;
    
            & h2{
                /* color: #fff; */
            }
        }
        .aboutus{
            padding: 0 5%;
            & p{
                /* font-size: 14px; */
                /* color: #fff; */
            }
        }
    
        
}

#mvv{
    padding: 120px 5%;
    .about__img{
        display: none;
    }

    .aboutus__cont{
        width: 100%;
        flex-direction: column;
        padding: 0 15%;

        .about__card{
            display: flex;

            .about__card-img{
                & img{
                    filter: invert(1);
                }
            }

            .about__card-title{
                & h3{
                }
            }

            .about__card-descrip{
                & p{
                }
            }
        }
    }
}


/*#endregion ABOUT */
    
/*#region PROCESSES */

#processes{
    .processes__cont{
        display: flex;
        justify-content: center;
        align-items: start;
        flex-wrap: wrap;
        gap: 20px;
        width: 100%;

        .processes__card{
            width: calc(100% / 3);

            padding: 10px;
            .processes__icon{
                padding: 10px 0;

                & i{
                    width: 70px;
                    height: 70px;
                    text-align: center;
                    font-size: 2em;
                    border: 1px solid #fff;
                }
            }

            .processes__description{
                display: flex;
                flex-direction: column;
                gap: 10px;
                & h3{
                    text-align: center;

                }

                & p{
                    text-align: justify;
                }
            }
        }
    }
}




/*#endregion PROCESSES */


/*#region PRODUCTS */

#product{
    padding: 100px 5%;

    .product__title{
        font-size: 2.5em;
        text-align: center;

        & h2{
            /* color: #fff; */
        }
    }

    .product__descrip{
        text-align: center;
    }

    .product__select{
        width: 100%;
        /* background-color: #373E73; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 50px;
        
        .catalogue{
            width: 40%;

            & a{
                text-decoration: none;

                .catalogue__cont{

                    & img{
                        width: 100%;
                        height: 100%;
                        display: block;
                    }
                }

                .catalogue__descrip{
                    text-align: center;
                    text-transform: capitalize;
                    font-size: 1em;
                    color: #000;
                }
            }
        }
    }

}

#products__catalogue{
    /* padding: 100px 5%; */

    .product__show{
        width: 100%;
        /* min-height: 100vh; */
        height: 100%;
        /* background-color: #555; */
        display: flex;
        padding: 40px 5%;
        /* background-color: #555; */
        gap: 20px;
        .product{
            width: 50%;
            height: 700px;
            /* height: calc(100% - ); */
            overflow: hidden;
            & img{
                width: 100%;
                height: 100%;
                /* object-fit: cover; */
                cursor: zoom-in;
            }
        }
    
        .product__descrip{
            width: 50%;
    
            .descrip{
                /* height: calc(100% - 200px); */
                display: none;
            }
    
            .subImgs{
                width: 100%;
                height: 200px;
                display: flex;
    
                & img{
                    width: calc(100% / 3);
                    height: 100%;
                    display: block;
                    /* border: none;
                    outline: none; */
    
                    &:hover{
                        cursor: pointer;
                    }
                }
            }
        }
    }



    .product__slider{
        position: relative;
    
    
        .product__slider-buttons{
            & h3{
                font-size: 25px;
            }
    
            & p{
                & span{
                    font-size: 30px;
                }
            }
            
        }
    
        .product__slider-cont{
            &::-webkit-scrollbar{
                display: none;
            }
    
            .product__card{
                min-width: 49%;
                margin: 0 10px 0 0;
    
                & picture{
                    & img{
                        width: 100%;
                    }
                }
    
                .product__card-details{
                    font-size: 16px;
    
                    & small{
                        color: #555;
                    }
                }
            }
        }
    }
}




/*#endregion PRODUCTS */


/*#region CONTACT */

#contact{
    padding: 0 5%;

    .contact__title{
        font-size: 2.5em;
    }

    /* .contact__descrip{
        text-align: center;
        color: #fff;
    } */

    .contact__cont{
        padding: 50px 10%;

        /* .contact__form-cont{
            
            & form{
                display: flex;
                flex-direction: column;
                gap: 20px;
                padding: 30px;

                .contact__form-group{
                    position: relative;
                    color: var(--cl-form-tx);

                    .form__input{
                        border-bottom: 1px solid var(--cl-form-tx);

                        &:not(:placeholder-shown){
                            color: #4d4646;
                        }
                        &:focus + .form__label,
                        &:not(:placeholder-shown) + .form__label{
                            transform: translateY(-12px) scale(.7);
                            transform-origin: left top;
                            color: #3866f2;
                        }

                        &:focus ~ .form__line,
                        &:not(:placeholder-shown) ~ .form__line{
                            transform: scale(1);
                        }
                    }

                    .form__label{
                        color: var(--cl-form-tx);
                    }

                    .form__line{
                        background-color: #3866f2;
                    }

                }
                
                .form__submit{
                    background: #3866f2;
                }
            }
        } */
    }
}

/*#endregion CONTACT */

/*#region FOOTER */

footer{

    .foot__cont{

        display: flex;
        justify-content: center;
        align-items: start;
        flex-wrap: wrap;
        .foot__cont-div {
            width: calc(100% / 3);
            /* width: 100%; */
            display: flex;
            justify-content: center;
            /* align-items: center; */
            gap: 8px;
            flex-direction: column;
        }
    }
}


/*#endregion FOOTER */

}


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

/*#region ABOUT */

#about{
    min-height: 100vh;
    
    padding: 100px 10px;
    /* margin: 100px 0; */
    position: relative;
    .about__capa{
    }
        .aboutus__title{
            font-size: 1.5em;
    
            & h2{
                /* color: #fff; */
            }
        }
        .aboutus{
            padding: 0 5%;
            & p{
                /* font-size: 14px; */
                /* color: #fff; */
            }
        }
    
        
}

#mvv{
    padding: 120px 5%;
    .about__img{
        display: none;
    }

    .aboutus__cont{
        width: 100%;
        flex-direction: column;
        padding: 0 0;

        .about__card{
            display: flex;

            .about__card-img{
                & img{
                    filter: invert(1);
                }
            }

            .about__card-title{
                & h3{
                }
            }

            .about__card-descrip{
                & p{
                }
            }
        }
    }
}


/*#endregion ABOUT */

/*#region PRODUCTS */

#product{
    padding: 100px 5%;

    .product__title{
        font-size: 1.5em;
        text-align: center;

        & h2{
            /* color: #fff; */
        }
    }

    .product__descrip{
        text-align: center;
    }

    

}

#products__catalogue{
    /* padding: 100px 5%; */

    .product__show{
        width: 100%;
        /* min-height: 100vh; */
        height: 100%;
        /* background-color: #555; */
        display: flex;
        flex-direction: column;
        padding: 40px 5%;
        /* background-color: #555; */
        gap: 20px;
        .product{
            width: 100%;
            height: 700px;
            /* height: calc(100% - ); */
            overflow: hidden;
            & img{
                width: 100%;
                height: 100%;
                /* object-fit: cover; */
                cursor: zoom-in;
            }
        }
    
        .product__descrip{
            width: 100%;
            display: flex;
            flex-direction: column-reverse;
    
            .subImgs{
                width: 100%;
                height: 200px;
                display: flex;
    
                & img{
                    width: calc(100% / 3);
                    height: 100%;
                    display: block;
                    /* border: none;
                    outline: none; */
    
                    &:hover{
                        cursor: pointer;
                    }
                }
            }
        }
    }



    .product__slider{
        position: relative;
    
    
        .product__slider-buttons{
            & h3{
                font-size: 25px;
            }
    
            & p{
                & span{
                    font-size: 30px;
                }
            }
            
        }
    
        .product__slider-cont{
            &::-webkit-scrollbar{
                display: none;
            }
    
            .product__card{
                min-width: 100%;
                margin: 0 10px 0 0;
    
                & picture{
                    & img{
                        width: 100%;
                    }
                }
    
                .product__card-details{
                    font-size: 16px;
    
                    & small{
                        color: #555;
                    }
                }
            }
        }
    }
}




/*#endregion PRODUCTS */

/*#region PROCESSES */

#processes{
    padding: 100px 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    /* min-height: 100vh; */
    .processes__title{
        font-size: 3em;
        text-transform: uppercase;
        font-weight: 800;
        font-size: 1.5em;
    }

    .processes__descrip{
        text-align: center;
    }

    .processes__cont {
        flex-direction: column;
    }
    
    .container {
        width: 100%;
        padding: 5% 0;
    
        .menu {
            position: relative;
            width: 280px;
            height: 280px;
            display: flex;
            justify-content: center;
            align-items: center;
    
            .toggle {
                position: relative;
                width: 60px;
                height: 60px;
                background: #fff;
                color: #333;
                border-radius: 50%;
                box-shadow: 0 3px 4px rgba(0, 0, 0, .15);
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                font-size: 2rem;
                transition: 1.25s;
                z-index: 1000;
            }
    
            &.active {
                .toggle {
                    transform: rotate(360deg);
                    box-shadow: 0 6px 8px rgba(0, 0, 0, .15),
                        0 0 0 2px #333,
                        0 0 0 8px #fff;
                }
    
                & ul {
                    & li {
                        scale: 1;
                    }
                }
            }
    
            & ul {
                display: flex;
                justify-content: center;
                align-items: center;
    
                & li {
                    position: absolute;
                    left: 0;
                    list-style: none;
                    transform: rotate(calc(360deg/7 * var(--i)));
                    transform-origin: 140px;
                    scale: 0;
                    transition: 0.5s;
                    transition-delay: calc(0.1s * var(--i));
    
                    &:hover {
                        & a {
                            font-size: 2.25rem;
                            box-shadow: 0 6px 8px rgba(0, 0, 0, .15),
                                0 0 0 2px var(--color),
                                0 0 0 9px #fff;
                        }
                    }
    
                    & a {
                        position: relative;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        transform: rotate(calc(360deg/-7 * var(--i)));
                        width: 60px;
                        height: 60px;
                        background: #fff;
                        color: var(--color);
                        border-radius: 50%;
                        font-size: 1.75rem;
                        transition: .5s;
                        cursor: pointer;
                        text-decoration: none;
                    }
                }
            }
        }
    }
    
    .content {
        width: 100%;
        /* min-height: 100%; */
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5% 0;
    
        .cont__descrip {
            padding: 10%;
            margin: auto;
            background: rgba(255, 255, 255, .3);
            -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
            border: 1.5px solid rgba(209, 213, 219, 0.3);
    
            &h3 {
                text-align: right;
            }
    
            &p {
                text-align: justify;
            }
        }
    }
    
    .menu ul li.active~.content {
        height: 100%;
        /* display: flex; */
    }


    .processes__cont{
        display: inline-flex;
        justify-content: center;
        align-items: start;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
        width: 100%;
        /* width: calc(100% / 2); */

        .processes__card{
            width: calc(100% / 3);

            padding: 10px;
            .processes__icon{
                padding: 10px 0;

                & i{
                    width: 60px;
                    height: 60px;
                    text-align: center;
                    font-size: 2em;
                    border: 1px solid #aaa;
                }
            }

            .processes__description{
                display: flex;
                flex-direction: column;
                gap: 10px;
                & h3{
                    text-align: center;
                    /* font-size: 0.8em; */
                }

                & p{
                    text-align: justify;
                    font-size: 14px;
                }
            }
        }
    }
}




/*#endregion PROCESSES */

/*#region CONTACT */

#contact{
    padding: 0 5%;

    .contact__title{
        font-size: 1.5em;
    }

    /* .contact__descrip{
        text-align: center;
        color: #fff;
    } */

    .contact__cont{
        padding: 50px 0;
    }
}

/*#endregion CONTACT */

/*#region FOOTER */

footer {
    padding: 50px 5%;
    gap: 5px;


    .foot__cont {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 5px;

        .foot__cont-div {
            width: 100%;
            display: flex;
            /* gap: 8px; */
            flex-direction: column;
        }
    }
}


/*#endregion FOOTER */




}