@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap');


*, html { /* Aplica a todos los elementos y al elemento html */
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  }

body{
    margin: 0;
}

.head{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 100;
    background: #ffffff
}

header{
    background-image: url(Phone\ wallpaper\ gradient\ aesthetic.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 70vh;
    padding: 30px 30px 30px;
}

.header-content{
    text-align: center;
}

.title{
  text-align: center;
  line-height: 50px;
  font-size: 30px;
  color: #ffffff;
  margin-bottom: 10px;
  text-transform: uppercase;
  padding: 30px;

} 

.content{
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 25px;
}

.title2{
    font-size: 30px; 
    font-weight: bold; 
    color: #ffffff;  
    text-align: center;
    background-color: #ff9fef;
    background-position: center;
    padding: 1px;
}


.proyectos { 
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr; 
    column-gap: 30px;
    row-gap: 20px; 
    height: 450px; 
    overflow-y: auto; 
    background-color: #ffffff;
}


.proyectos nav {
    display: flex;
    justify-content: center;
    margin-top: 100px; 
    width: 1400px;
    height: 1000px;
}

.proyectos a { 
    display: block; 
}

.proyectos nav a img { 
    width: 40%;
    border-radius: 10px; 
    margin-bottom: 1ex; 
    border: 3px solid transparent; 
}

.proyectos nav a:hover img {
    filter: blur(5px); 
    opacity: 90%;
}

button { /* Estilo para los botones */
    border-radius: 20px; /* Bordes redondeados */
    padding: 10px 20px; /* Padding de 10px arriba y abajo, 20px a los lados */
    background-color: rgba(225, 41, 231, 0.527); /* Color de fondo gris claro */
    font-size: 14px; /* Tamaño de fuente de 14px */
    font-weight: bold; /* Texto en negrita */
    color: #ffffff; /* Texto naranja */
    border: none; /* Sin borde */
    cursor: pointer; /* Cursor de mano al pasar por encima */
}

button:hover{
    background-color:#ff74df ; 
    color:#ffffff  ;
    font-weight: bold;
}

.sau{
    padding: 50px;
    background:#f747e9 ;
}

.Encargo1{
    display: flex;
}

.Encargo-1{
    width: 500px;
    padding: 40px 200px 40px 40px;
    background-color: #ff9fef
}
.Encargo-1 h2{
    font-size: 20px;
    line-height: 70px;
    color:#ffffff;
    text-transform: uppercase;
    margin-bottom: 50px;
    font-weight: bold;
}

.Encargo-1 p{
    color: #ffffff;
    font-size: 20px;
}

.Encargo-11{
background-image: url(1ra\ tarea.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 50%;
}


.Encargo2{
    display: flex;
}

.Encargo-2{
    width: 500px;
    padding: 40px 200px 40px 40px;
    background-color: #ffffff
}
.Encargo-2 h2{
    font-size: 20px;
    line-height: 70px;
    color: #f747e9;
    text-transform: uppercase;
    margin-bottom: 50px;
    font-weight: bold;
}

.Encargo-2 p{
    color: #f747e9;
    font-size: 20px;
}

.Encargo-22{
background-image: url(2da\ tarea.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 50%;
}


.Encargo3{
    display: flex;
}

.Encargo-3{
    width: 500px;
    padding: 40px 200px 40px 40px;
    background-color: #ff9fef
}
.Encargo-3 h2{
    font-size: 20px;
    line-height: 70px;
    color:#ffffff;
    text-transform: uppercase;
    margin-bottom: 50px;
    font-weight: bold;
    
}

.Encargo-3 p{
    color: #ffffff;
    font-size: 20px;
}

.Encargo-33{
background-image: url(3ra\ tarea.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 50%;
}


.Encargo4{
    display: flex;
}

.Encargo-4{
    width: 500px;
    padding: 40px 200px 40px 40px;
    background-color: #ffffff
}
.Encargo-4 h2{
    font-size: 20px;
    line-height: 70px;
    color: #f747e9;
    text-transform: uppercase;
    margin-bottom: 50px;
    font-weight: bold;
}

.Encargo-4 p{
    color: #f747e9;
    font-size: 20px;
}

.Encargo-44{
background-image: url(4ta\ tarea.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 50%;
}

.Encargo5{
    display: flex;
}

.Encargo-5{
    width: 500px;
    padding: 40px 200px 40px 40px;
    background-color: #ff9fef
}
.Encargo-5 h2{
    font-size: 20px;
    line-height: 70px;
    color:#ffffff;
    text-transform: uppercase;
    margin-bottom: 50px;
    font-weight: bold;
    
}

.Encargo-5 p{
    color: #ffffff;
    font-size: 20px;
}

.Encargo-55{
background-image: url(5ta\ tarea.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 50%;
}

.Encargo6{
    display: flex;
}

.Encargo-6{
    width: 500px;
    padding: 40px 200px 40px 40px;
    background-color: #ffffff
}
.Encargo-6 h2{
    font-size: 20px;
    line-height: 70px;
    color: #f747e9;
    text-transform: uppercase;
    margin-bottom: 50px;
    font-weight: bold;
}

.Encargo-6 p{
    color: #f747e9;
    font-size: 20px;
}

.Encargo-66{
background-image: url(6ta\ tarea.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 50%;
}


.Encargo7{
    display: flex;
}

.Encargo-7{
    width: 500px;
    padding: 40px 200px 40px 40px;
    background-color: #ff9fef
}
.Encargo-7 h2{
    font-size: 20px;
    line-height: 70px;
    color:#ffffff;
    text-transform: uppercase;
    margin-bottom: 50px;
    font-weight: bold;
    
}

.Encargo-7 p{
    color: #ffffff;
    font-size: 20px;
}

.Encargo-77{
background-image: url(7ta\ tarea.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
width: 50%;
}