/*
Theme Name: Portafolio
Theme URL: htt://urlportafolio
Description: portafolio 2024
Author: Rosynes Sarmiento
Author URI:
Version:0.0.1
License:GNU General Public License
Tags:portafolio, ux, ui, 2024, desing, delovoper, wordpress.
*/

@import url('https://fonts.googleapis.com/css2?family=Istok+Web:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Istok+Web:ital,wght@0,400;0,700;1,400;1,700&display=swap');


/*, *:after,*:before{
    box-sizing: interit;
    margin: 0;
    padding: 0;
}*/
a {
    text-decoration: none;
}


/* aqui comienza proyectos-home-de-todo-XD*/
.contenedor{
    display: block;
    margin: 1rem auto;
    padding: 1rem;
    width: 100%;
}
.container{
    margin: 6rem auto;
    width: 100%;
}
.container_especial{
    margin: 6rem auto;
    padding: 5rem;
    width: 100%;
    background-color:rgb(218, 145, 138);
    color: white;    
}

.card-title-especial{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings:
    "slnt" 0;
    font-size: 35px;
}
.card-text-especia{
    color: white;
}
.titulos_principales{
    margin: 5rem auto;
}
.header {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings: "slnt" 0;
    font-size: 16px;
}

.nav {
    list-style: none;
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

.nav-item {
    margin-right: 20px;
}

.nav-link {
    color: black;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.nav-link:hover {
    color: #d89999; 
}

.ms-auto {
    margin-left: auto;
}
/* 
aqui comienza la escritura */
.typewriter h1, .typewriter h2 {
    display: inline-block;
    overflow: hidden; /* Ensures the content is not revealed until the animation */
    border-right: .15em solid orange; /* The typwriter cursor */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 auto; /* Gives that scrolling effect as the typing happens */
    letter-spacing: .15em; /* Adjust as needed */
    animation: 
    typing 5s steps(30, end),
    blink-caret .75s step-end infinite;
}


@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
}
h1{
  font-family: "Istok Web", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 128px;
  color:rgb(218, 145, 138);
}

h2{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-variation-settings:
    "slnt" 0;
    font-size: 96px; 
    color: black;
}
.card-title{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
    font-variation-settings:
    "slnt" 0;
    font-size: 35px;
    color: rgb(218, 145, 138);
}
.card-text{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
    "slnt" 0;
    font-size: 14px;
    color: rgb(0, 0, 0);
    

}
/*.w-30{ width: 30%; }
.w-70{ width: 70%; } */

.btn{
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
    "slnt" 0;
    font-size: 16px;
    background-color: rgb(56, 55, 56);
    color: white;
}
/* cominezo de slider-1 */
.slider-frame{
    width: 700px;
    height: auto;
    margin: 50px auto 0;
    overflow: hidden;   
}

.slider-frame ul{
    display: flex;
    padding: 0;
    width: 400%;
    
    animation: slide 16s infinite alternate ease-in-out;
}
.slider-frame li{
    list-style: none;
    width: 100%;
}
.slider-frame img{
    width: 100%;
}
 
@keyframes slide{
    0%{margin-left: 0%;}
    20%{margin-left: 0%;}

    25%{margin-left: -100%;}
    45%{margin-left: -100%;}

    50% {margin-left: -200%;}
	70% {margin-left: -200%;}

    75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}

/* aqui comienza el footer*/
.footer{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
  "slnt" 0;
  font-size: 10px;
  color: black;
}

/* aqui comienza sobre mi*/

.container_sm{
    background-color: rgb(218, 145, 138) ;
}

.card-text_s {
    padding-top: 4rem;
    
}
.title_sm{
    font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings:
  "slnt" 0;
  font-size: 75px;
  color:white;

}

.text_sm{
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
  "slnt" 0;
  font-size: 15px;
  color: white;
}

.ft_me{
    width: 50rem;
}
/* .card-text{
    margin-top: 68px;
} */

/* aqui comienza contacto*/

.section-contacto {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
  "slnt" 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container-contacto {
    max-width: 500px;
    width: 100%;
    text-align: center;
}

h1 {
 font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings:
  "slnt" 0;
    font-size: 65px;
    color: #d89999;
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

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

.input-group.col-sm-6 {
    width: 48%;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
}

.input-group input,
.input-group textarea {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 0;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type="text"],
input[type="email"],
textarea {
    font-size: 1em;
}

textarea {
    height: 100px;
}

button {
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    text-transform: uppercase;
    width: 100%;
}

button:hover {
    background-color: #d89999;
    color: #ffffff;
}

@media (max-width: 480px) {
    .input-row {
        flex-direction: column;
    }

    .input-group.col-sm-6 {
        width: 100%;
        margin-bottom: 15px;
    }
}
/* aqui comienza D_C_U*/

.section-diseno {
    text-align: center;
    padding: 50px 20px;
}

.section-diseno h2 {
   ont-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
  font-variation-settings:
  "slnt" 0;
    font-size:55px;
    color: #d89999;
    margin-bottom: 15px;
}

.container-imagenes {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.imagen {
    flex: 1 1 30%;
    max-width: 30%;
}

.imagen img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.imagen:hover {
    box-shadow: 0 4px 15px rgba(237, 113, 113, 0.651);
    border-radius: 8px;
}

@media (max-width: 768px) {
    .imagen {
        max-width: 45%;
    }
}

@media (max-width: 480px) {
    .imagen {
        max-width: 100%;
    }
}

/* aqui comienza estructura_1*/

.section-proyectos {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.container-proyecto {
    text-align: center;
}

.container-proyecto h2 {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    font-variation-settings:
    "slnt" 0;
    font-size: 55px;
    color: #d89999;
    margin-bottom: 20px;
}

.container-proyecto p {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
    "slnt" 0;
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    text-align: justify;
}

.content_p {
    width: 60%;
    margin: 0 auto;
    padding: 20px;
}
.container-proyecto img {
    width: 100%;
    max-width: 600px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.proyecto-thumbs {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.proyecto-thumbs img {
    width: 48%;
    max-width: 280px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.otros-proyectos {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.proyecto.card {
    border-radius: 8px;
    border-color: #ebebeb;
    overflow: hidden;
    transition: box-shadow 0.3s ease-in-out;
    max-width: 300px;
}

.proyecto.card:hover {
    box-shadow: 0 4px 15px rgba(237, 113, 113, 0.651);
}

.proyecto.card img {
    width: 100%;
    border-bottom: 1px solid #ddd;
}

.card-content {
    padding: 20px;
    text-align: center;
    background-color: #d89999;

}

.card-content p {
    margin: 0;
    font-size: 1.2em;
    color: #ffffff;
}

.card-content a {
    text-decoration: none;
    color: #ffffff;
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

@media (max-width: 768px) {
    .container-proyecto img, .proyecto-thumbs img, .proyecto.card {
        max-width: 100%;
    }

    .proyecto-thumbs {
        flex-direction: column;
    }

    .proyecto-thumbs img {
        width: 100%;
    }

    .otros-proyectos {
        flex-direction: column;
    }

    .proyecto.card {
        margin-bottom: 20px;
    }
}