@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
	--greenpastel: #77dd77;
	--pinkpastel: #EFA8B0;
	--violetapastel: #C79CC8;
    --purppastel: #A89CC8;
    --bluepastel: #9BB2E1;
    --darkmadero: #243324;
}


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: 'Poppins', sans-serif;
}


/*BOTONES*/
.btn{
    color: var(--greenpastel);
    width: 8rem;
    padding: 1rem;
    background: #FFF;
    border: 1px solid var(--greenpastel);
    box-shadow: 1px 1px 30px -5px #20202049;
    border-radius: 1rem;
    margin: auto;
    margin-top: 2rem;
    cursor: pointer;
    transition: all 700ms;
}
.btn:hover{
    background: var(--greenpastel);
    color: white;
    box-shadow: 1px 1px 30px -5px #20202085;    
}

.btn-card{
    background: var(--darkmadero);
    transition: all 700ms;
}
.btn-card:hover{
    color: var(--darkmadero);
}






/*--------------------------------NAVBAR---------------------------------*/
#navbar{
    padding: 1rem;
    background: white;
}
header{
    width: 100%;
    height: 5rem;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 100;
    transition: all 300ms;
}

.move-content{
    right: 11.25rem;
}

.content-navbar{
    max-width: 75rem;
    height: 100%;
    display: flex;
    justify-content: space-between;
    margin: auto;
    padding: 0rem 1.25rem;
}
/*NAVBAR LOGO*/
.content-navbar .logo{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-navbar .logo img{
    width: 9rem;
}


/*MENÚ OPCIONES*/
.content-nav{
    position: relative;
    height: 100%;
    margin: 0;
}
nav{
    height: 100%;
    transition: all 300ms;
}
nav ul{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
nav ul li{
    margin: 0rem 1.25rem;
    list-style: none;
}
nav ul a{
    color: var(--greenpastel);
    font-size: 1.2rem;
    padding: 10px 10px;
}

nav ul a:hover{
    background: var(--greenpastel);
    color: white;
    opacity: .5;
    padding: 10px 10px;
    border-radius: 90%;
}


/*NAVBAR-NAVEGATING*/
.nav-mod{
    height: 4rem;
    box-shadow: 1px 1px 10px 0px #00000010;
    background: var(--darkmadero);
}
/*BTN-NAV*/
.btn-menu{
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: all 300ms;
    display: none;
}
.btn-menu:hover{
    background: #CCCCCC;
}



/*---------------------------------BODY----------------------------------*/
body{
    background: var(--greenpastel);
    transition: all 300ms;
}


.content-body{
    position: relative;
    transition: all 300ms;
}


/*COVER*/
.cover{
    width: 100%;
    padding-bottom: 200px;
    font-family: 'Poppins', sans-serif;
    position: relative;
    overflow: hidden;
}

#cover-max-width{
    max-width: 75rem;
    margin: auto;
    background: #FFF;
}
/*WAVE*/
.bg-color{
    width: 100%;
    height: 70%;
    background: #FFF;
    position: absolute;

 
}

.wave{
    width: 6000px;
    height: 100%;
    position: absolute;
    top: 150px;
    left: 0;
    background-position: bottom;
    background-repeat: repeat-x;
}

.w1{
    background-image: url(../img/wd1.svg);
    animation: w1 7s linear infinite;
}

.w2{
    background-image: url(../img/wd1.svg);
    animation: w2 7s linear -.125s infinite, swell 7s ease -.125s infinite;
    opacity: 0.5;
}

@keyframes w1 {
    0% {
        margin-left: 0;
      }
      100% {
        margin-left: -1600px;
      }
}

@keyframes w2 {
    0% {
        margin-left: 0;
      }
      100% {
        margin-left: -1600px;
      }
}

@keyframes swell {
    0%, 100% {
        transform: translateY(-25px);
      }
      50% {
        transform: translateY(10px);
      }
}


/*COVER-CONTENT*/
.content-cover{
    max-width: 100%;
    margin: auto;
    background: #FFF;
    padding: 6rem;
    display: flex;
    justify-content: space-between;
    position: relative;
    border-radius: 0.5rem; 
}

.content-cover-info{
    max-width: 30rem;
    z-index: 2;
}

.cover h1{
    max-width: 400px;
    font-size: 60px;
    font-weight: 900;
    color: var(--darkmadero);
}
.cover h2{
    font-size: 60px;
    font-weight: 900;
    color: var(--greenpastel);
    margin-top: -30px;
}
.cover p{
    margin-top: 10px;
    color: var(--darkmadero);
}


/*VECTOR*/
.content-cover-vector{
    position: relative;
    padding-top: 22rem;
}
.content-cover-vector img{
    position: absolute;
    bottom: 50px;
    right: 0px;
    width: 400px;
    height: 300px;
    animation: move-vector 6s ease-in-out infinite;

    transition: all 300ms;
}

@keyframes move-vector {
    0%{
        transform: translateY(10px);
    }
    25%{
        transform: translateY(-10px);
    }
    50%{
        transform: translateX(-80px);
    }
    100%{
        transform: translateY(10px);
    }
}



/*BANNER*/

.content-cabecera{
    width: 100%;
    max-width: 50rem;
    text-align: center;
    margin: auto;
    position: relative;
    margin-top: -12rem;
    margin-bottom: 3rem;
}
.content-cabecera h1{
    font-weight: 300;
    color: black;
    margin-top: 1rem;
}
.content-cabecera p{
    margin-top: 1rem;
    color: var(--darkmadero);
}
.content-cabecera a{
    color: var(--darkmadero);
    font-weight: 600;
}
.content-cabecera a:hover{
    border-bottom: 0.063rem solid var(--darkmadero);
    font-weight: 800;  
}

.content-logo{
    width: 8rem;
    height: 5rem;
    border-radius: 10%;
    overflow: hidden;
    border: .188rem solid black;
    margin: auto;
}
.content-logo img{
    padding: 0.2rem;
    width: 100%;
    height: 100%;
}



/*CATALOGO*/
#catalogo{
    background: #24332420;
    max-width: 62.5rem;
    margin: auto;
}

.content-catalogo{
    max-width: 62.5rem;
    
    margin: auto;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card{
    width: 15rem;
    position: relative;
    margin: .5rem 1.25rem;
    text-align: center;
    transition: all 300ms;
    border-radius: 1.25rem;
}
.card:hover{
    box-shadow: 1px 1px 20px -10px #20202049;
}
.card:hover .card-info{
    margin-top: 0;
    border-radius: 0 0 1.25rem 1.25rem;
}
.card:hover .card-icon{
    margin-top: -3rem;
    border-radius: 1.25rem 1.25rem 0 0;
}

.card-icon{
    width: 100%;
    height: 13.75rem;
    background: #FFF;
    border-radius: 1.25rem;
    padding: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    position: relative;
    transition: all 400ms cubic-bezier(0.5,0,0,1);
}
.card-icon i{
    font-size: 9.375rem;
    transition: all 400ms cubic-bezier(0.5,0,0,1);
}

.card-info{
    width: 100%;
    height: 13.75rem;
    border-radius: 1.25rem;
    color: #FFF;
    margin-top: -13.75rem;
    transition: all 400ms cubic-bezier(0.5,0,0,1);
}
.card-info p{
    font-size: .8rem;
    margin-top: .6rem;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 5;
    -moz-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
}

/*MODIF INDIV DE CARD*/
/*1*/
.card1 i{
    color: #FFF;
}
.card1 .card-icon{
    background: var(--pinkpastel);
}
.card1:hover .card-icon{
    background: var(--pinkpastel);
}
.card1:hover i{
    color: #FFF;
}
.card1:hover .info1{
    margin-bottom: -2rem;
}

.info1{
    background: var(--pinkpastel);
}

.btn-1{
    color: var(--pinkpastel);
    border: 1px solid var(--pinkpastel);
}
.btn-1:hover{
    background: #FFFFFF80;
    color: var(--pinkpastel);
}
/*2*/
.card2 i{
    color: #FFF;
}
.card2 .card-icon{
    background: var(--purppastel);
}
.card2:hover .card-icon{
    background: var(--purppastel)
}
.card2:hover i{
    color: #FFF;
}
.card2:hover .info2{
    margin-bottom: -2rem;
}

.info2{
    background: var(--purppastel);
}

.btn-2{
    color: var(--purppastel);
    border: 1px solid var(--purppastel);
}
.btn-2:hover{
    background: #FFFFFF49;
    color: #FFF;
}
/*3*/
.card3 i{
    color: #FFF;
}
.card3 .card-icon{
    background: var(--bluepastel);
}
.card3:hover .card-icon{
    background: var(--bluepastel);
}
.card3:hover i{
    color: #FFF;
}
.card3:hover .info3{
    margin-bottom: -2rem;
}

.info3{
    background: var(--bluepastel);
}

.btn-3{
    color: var(--bluepastel);
    border: 1px solid var(--bluepastel);
}
.btn-3:hover{
    background: #FFFFFF49;
    color: #FFF;
}

.btn-card{
    background: #FFF;
}








/*MAIN*/


main{
    text-align: center;
    max-width: 62.5rem;
    background: #FFF;
    padding: 2.8rem;
    margin: auto;
    
    border-radius: 0.5rem;
}
main h1{
    font-weight: 500;
}


/*Content1*/

.content1{
    width: 100%;

}
.content1-img{
    width: 100%;
    text-align: center;
}
.content1-img img{
    width: 11rem;
    height: 11rem;
    border-radius: 50%;
    margin: auto;
}
.content1-text{
    width: 100%;
    text-align: center;
}
.content1-text hr{
    width: 10rem;
    height: .2rem;
    margin: auto;
    border-style: none;
    background: -webkit-linear-gradient(left, var(--pinkpastel), var(--purppastel), var(--bluepastel));
    *background: -moz-linear-gradient(left, var(--pinkpastel), var(--purppastel), var(--bluepastel));
    *background: -o-linear-gradient(left, var(--pinkpastel), var(--purppastel), var(--bluepastel));
    *background: linear-gradient(left, var(--pinkpastel), var(--purppastel), var(--bluepastel));
    margin-top: 1rem;
}
.content1-text p{
    margin-top: 1rem;
    color: var(--darkmadero);
    font-size: .9rem;
    letter-spacing: .05rem;
}



/*Content2*/

.content2{
    width: 100%;
    text-align: center;
}


.content2 hr{
    width: 7rem;
    height: .2rem;
    margin: auto;
    border-style: none;
    background: -webkit-linear-gradient(left, var(--pinkpastel), var(--purppastel), var(--bluepastel));
    *background: -moz-linear-gradient(left, var(--pinkpastel), var(--purppastel), var(--bluepastel));
    *background: -o-linear-gradient(left, var(--pinkpastel), var(--purppastel), var(--bluepastel));
    margin-top: 1rem;
}

.content-details{
    width: 100%;
}
.content-details h4{
    font-weight: 100;
    font-size: 1.1rem;
    margin-top: 3rem;
}
.content-details p{
    font-size: 1rem;
    margin-top: 1.4rem;
    letter-spacing: .05rem;
    color: var(--darkmadero);
}

.details-item{
    width: 100%;
    max-width: 25rem;
    margin: auto;
}

.polilactico{
    color: var(--pinkpastel);
}
.biodegradable{
    color: var(--purppastel);
}
.compostaje{
    color: var(--bluepastel);
}

.details-icon{
    width: 12.5rem;
    height: 12.5rem;
    border: 1px solid #dddddd;
    border-radius: 50%;
    display: flex;
    margin: auto;
    margin-top: 1.8rem;
}

.details-icon span{
    font-size: 5rem;
    border: 1px solid #dddddd;
    border-radius: 50%;
    padding: 3rem;
    margin: auto;
}

/*Content3*/

.content3{
    width: 100%;
    text-align: center;
}
.content3 h1{
    font-weight: 500;
    margin-top: 2rem;
}
.content3 hr{
    width: 7rem;
    height: .15rem;
    margin: auto;
    border-style: none;
    background: -webkit-linear-gradient(left, var(--pinkpastel), var(--purppastel), var(--bluepastel));
    *background: -moz-linear-gradient(left, var(--pinkpastel), var(--purppastel), var(--bluepastel));
    *background: -o-linear-gradient(left, var(--pinkpastel), var(--purppastel), var(--bluepastel));
    margin-top: 1rem;
}
.content3 p{
    margin-top: 40px;
    letter-spacing: 1px;
    color: var(--darkmadero);
}
.content-estadisticas{
    width: 100%;
    margin-top: 2.5rem;
}

.estadisticas-item{
    width: 100%;
    max-width: 22rem;
    margin: auto;
    padding: 40px;
    color: white;
}
.estadisticas-item span{
    font-size: 5rem;
}
.estadisticas-item h4{
    font-weight: 100;
    margin-top: 1.2rem;
    font-size: 1.2rem;
}
.estadisticas-item p{
    color: white;
    margin-top: 0;
}

/*ITEMS PASTELES*/
.item1{
    background: var(--pinkpastel);
    border-radius: 10px 10px 0px 0px;
}
.item2{
    background: var(--violetapastel);
}
.item3{
    background: var(--purppastel);
}
.item4{
    background: var(--bluepastel);
    border-radius: 0px 0px 10px 10px;
}

.content3-p{
    text-align: justify;
}


/*Content4*/

.content4{
    width: 100%;
    text-align: center;
}
.content4 h1{
    font-weight: 500;
    margin-top: 2rem;
}
.content4 hr{
    width: 7rem;
    height: .2rem;
    margin: auto;
    border-style: none;
    background: -webkit-linear-gradient(left, var(--pinkpastel), var(--purppastel), var(--bluepastel));
    *background: -moz-linear-gradient(left, var(--pinkpastel), var(--purppastel), var(--bluepastel));
    *background: -o-linear-gradient(left, var(--pinkpastel), var(--purppastel), var(--bluepastel));
    margin-top: 1rem;
}
.content4 p{
    margin-top: 2.5rem;
    font-size: 1.2rem;
    color: var(--darkmadero);
}

.content4-btn{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.content4-btn button{
    width: 12.5rem;
    height: 3.75rem;
    background: var(--greenpastel);
    border-style: none;
    border-radius: 10px;
    color: white;
    font-size: 1rem;
    margin: auto;
    cursor: pointer;
}
.content4-btn button:hover{
    background:white;
    color: var(--greenpastel);
    border: 2px solid var(--greenpastel);
}
.content4-leer{
    margin: auto;
}





/*-----------------------------------FOOTER------------------------------*/

footer{
    width: 100%;
    padding: 4rem 0rem;
    background-image: url(../img/background-footer.svg);
    background-size: cover; 
}

.content-footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
    margin-top: 6.25rem;
    max-width: 75rem;
}

.box-footer{
    display: flex;
    flex-direction: column;
    padding: 2.5rem;
}

.box-footer-logo img{
    max-width: 11.5rem;
}

.box-footer-texto{
    max-width: 21.875rem;
    margin-top: 1.25rem;
    font-weight: 300;
    color: #7a7a7a;
    font-size: 1.125rem;
}

.box-footer h2{
    margin-bottom: 1.875rem;
    color: var(--purppastel);
    font-weight: 700;
}
.box-footer a{
    color: #7a7a7a;
    margin-top: 0.625;
    font-weight: 600;
    padding: .3rem;
}
.box-footer a:hover{
    opacity: 0.8;
}
.box-footer i{
    font-size: 1.25rem;
}


footer hr{
    border: none;
    height: 1px;
    background-color: #7a7a7a;
}

.copyright-footer{
    display: flex;
    max-width: 75rem;
    margin: auto;
    padding: 0rem 2.5rem;
}
.copyright-footer{
    margin: auto;
    margin-top: 1.25rem;
    color: #7a7a7a;
}






/*MEDIASCREEN*/


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


@media screen and  (min-width: 800px){

    .content1{
        display: flex;
        flex-direction: row-reverse;
    }

    .content1-img{
        width: 70%;
    }
    .content1-img img{
        float: right;
        width: 18rem;
        height: 18rem;
    }

    .content-details{
        display: flex;
    }

    .content-estadisticas{
        display: flex;
    }
    .content-estadisticas span{
       font-size: 3rem;
    }

    .item1{
        border-radius: 10px 0px 0px 10px;
    }
    .item4{
        border-radius: 0px 10px 10px 0px;
    }

    .content4{
        width: 100%;
        max-width: 37.5rem;
        margin: auto;
    }

}

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

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

    .btn-menu{
        display: flex;
    }

    nav{
        height: 100%;
        background: white;
        position: fixed;
        top: 0;
        right: -12rem;
        padding: 0 40px;
    }

    .move-nav{
        right: 0rem;
    }
    
    nav ul{
        flex-direction: column;
    }

    nav ul li{
        margin: 20px 0px;
    }

    .content-cover-vector img{
        width: 320px;
        height: 220px;
    }
}


@media screen and (max-width: 560px){
    .content-cover-vector img{
        transform: scale(0);
        animation: none;
    }

    .content-body{
        text-align: center;
        justify-content: center;
    }
}