*{margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

body{background-color: white;
    width: 100%;
    margin: auto;
}

header{position: fixed;
width: 100%;
background-color: rgb(34, 191, 55);}

.nombre{max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
}

.logo{z-index: 20;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.logo img{width: 3rem;}

.logo span{color:white;
    font-weight: 700;
    font-size: 2rem;
}

.list{color: white;
list-style: none;
display: flex;
gap: 2.5rem}

.list li a{color:white;
    text-decoration: none;
    font-size: 1.7rem;
    font-weight: 500;
}

h5{width: 100%;
    display: flex;
text-align: left;
justify-content: left;
}

.list li a:hover{color:black}

.btn{display: none;}

.btn button{width:1.8rem;
    height:2rem;
    background-color: transparent;
    border:none;
    display: flex;
    flex-direction: column;
    gap:0.5rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.btn button > div{background-color: white;
                width:100%;
            height: 1.5px;
        transform-origin: left;
    transition: all 0.5s ease;}

.btn.btn-toggle button div:first-child{transform: rotate(45deg);}
.btn.btn-toggle button div:nth-child(2){opacity: 0;}
.btn.btn-toggle button div:last-child{transform: rotate(-45deg);}

.main{margin-top: 200px;
padding-top: 400px;
height: 300px;}

@media (max-width:700px){header{height: 90px; padding-bottom: 100px; margin-bottom: 100px;}
    .menu{background-color: blue;}
    .logo{margin-bottom: 10px}
    .logo span{font-size: 24px;
        width: 250px;}
    .btn{display: block;
margin-left: 5px;}
    .nav{position:absolute; overflow: hidden; top:0; left:0; height: 900px; background-color:green;}

.list{flex-direction: column; padding-top: 150px; padding-left: 0px; width:0; transition: all 0.5s ease;}
.list.list-toggle{width:400px; margin: left 35px;}
.footer-links{width:200px; max-width: 300px; margin-right: 150px; display:flex; flex-direction: columns; flex-wrap: wrap;}
.footer-row {text-align: center; padding:auto; width: 400px; margin:0 auto; display: flex; flex-direction: column; align-items: center;}
.footer-links ul li{width:300%; max-width: 300%;}
.footer-links h5{margin: 0px 40px 0px 20px; width: 500px; max-width: 100px; padding: 0px 50px 0px 40px;text-align: center; display: flex; flex-direction: column; flex-wrap: wrap; size: 100px; font-size: 50px; ;}
.social-link{width:300px; max-width: 300px; padding: 0px 40px 0px 60px; margin: 0px 40px 0px 60px; display: flex; align-content: space-between; align-items: center; align-content: center;}
}

.social-link{width: 100%;
    margin-right: 150px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
align-content: center;}

.text{color:black;
padding:25px}

.container{max-width: 1100px;
margin:0 auto}

.footer{background-color: rgb(34, 191, 55);
padding:30px 0}

.footer-row{display:flex;
flex-wrap:wrap;
justify-content: space-between;}

.footer-links{width: 25%;
padding: 0 15px}

.footer-links h5{font-size: 23px;
color:white;
margin-bottom: 25px;
font-weight: bold;
text-align: center;
border-bottom:2px solid white;
padding-bottom: 10px;
display: inline-block;}

.footer-links ul li a{font-size: 18px;
text-decoration: none;
color: white;
text-align: center;
display: block;
margin-bottom: 15px;
transition: all .3s ease;}

.footer-links ul li a:hover{color:black;
padding-left: 6px;}

.social-link a {
min-height: 40px;
width: 40px;
background-color: transparent;
color:white;
font-size: 30px;
padding-right: 40px;}

.social-link a:hover{color:black}

.datos{color: white;
align-content: center;
font-size: 25px;
font-weight: bold;
display: flex;
flex-direction: column;
text-align: center;
padding: 0 auto;
margin:0 auto;
justify-content: space-between;}

.social-img a {display: flex;
    flex-direction: column;
min-height: 40px;
width: 100%;
background-color: transparent;
color:black;
font-size: 20px;
padding-right: 40px;
text-decoration: none;
padding-bottom: 20px;
 margin: auto;}

.social-img a:hover{color: green;}

.social-wats a {display: flex;
    flex-direction: column;
min-height: 40px;
width: 100%;
 margin: auto;
 padding: auto;
background-color: transparent;
color:black;
font-size: 30px;
padding-right: 40px;
text-decoration: none;
padding-bottom: 30px;}

.social-wats a:hover{color: green;}