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

body{
    background-color: #EEF6F4;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1rem; /* 16px */
    line-height: 1.5;    
}

h1{
    letter-spacing: 0.3px;
    font-size: 2.5em;
    font-weight: 700;
}

.hero p{
    font-weight: 700;
    /* font-size: 1.2rem; */
    /* text-shadow: 2px 2px 4px rgba(0,0,0,0.7); */
    background-color: rgba(0,0,0,0.5);
    
    padding: 10px;
    border-radius: 10px;
}

.logo { 
    width:40vw;
    color:white;
    padding: 10px;
}
.logo span{font-weight: 600;font-size: 1.5rem;}

.hero p span{
    text-shadow: 0 0 10px rgba(255,255,255,0.8);
    animation: brillo 2s infinite alternate;
}

@keyframes brillo {
  from { text-shadow: 0 0 5px rgba(255,255,255,0.5); }
  to { text-shadow: 0 0 20px rgba(255,255,255,1); }
}

header{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    background-color: #123F42;
    height: auto;
}

nav{display: flex;width: 100%;justify-content: flex-start;}
/* nav .toggle{position: absolute;cursor:pointer;margin:0rem 1rem;} */
/* nav>ul{display: flex;   flex-direction: row;} */

.menu {display:none;}
.menu li {list-style: none;padding:20px; }
.menu li a {text-decoration: none;color: white;}

.menu.responsive{display:flex; flex-direction: column;}

.widget{    
    align-self: center;
    display: flex;
    flex-direction: row;
    gap: 5px;
    padding-top: 13654                                                                                      px;
    /* padding-right: 30px; */
    
    /* width: 50%; */
    /* justify-content: flex-end; */
}
.widget-icon{
}
.widget-icon>img{
    width: 1.5rem;    
}
.widget-content>a{
    color: #FBB16C;
    text-decoration: none;
    font-weight: 700;
    /* letter-spacing: 0.08em; */
    font-size: 1.2rem;
}


nav .toggle{
    display: flex;flex-direction: column;position:absolute;
        width: 2rem;height: 2rem;border: 0;margin: 0rem 1rem;
        background-color: transparent;gap: .50rem;right: 0;top:.5rem;
        align-items: center;
}
.toggle span{
    background-color: white; border-radius: 20px;
    height: 5px;width: 100%;
}


.hero{
    color:white;
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.1)), url('img/hero.jpeg');
    background-size: cover;
    background-position: center;
    height: 40vh;
    
}
.hero-container{
    display: flex;
    flex-direction: column;
    justify-content:space-around;
    padding: 10px;
    text-align: center;
    height: 100%;
}

.frmContact{
     display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap:1rem;
    border-radius: 10px;
    background-color: #123F42;
    color: #fff;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: -30px;
    box-shadow: 0 5px 15px black;

}
.frmContact>input[type="text"],textarea{
    background-color: #205759;
    color: white;
    outline: none;
    border: none;
    height: 2.5rem;
    border-radius: 10px;
    padding: 5px;
}

.frmContact>button{
    outline: none;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    color: white;
    /* color: #EEF6F4; */
    /* color: #205759; */
    background-color: #FBB16C;
    font-weight: 600;
    font-size: 1.125rem;
    cursor:pointer;
}

section.cards{
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:20px;
    margin-bottom: 3rem;
}

.cards>.card{
    width:70%;
    border-radius:10px;
    background-color: white;
    padding: 20px;
    /* box-shadow: 0 5px 15px black; */
    margin-top: 10px;
    margin-bottom: 10px;
}
.cards>.card>h3{
    padding-bottom: .6em; 
}
.card-content{
    display: flex;
    flex-direction: column;
    gap:1.5rem;
    align-items: flex-start;
    /* margin-top: 10px;
    margin-bottom: 10px; */
}
.card-content>img{
    height: 80px;
}
.card-content>p{
    font-size: 1rem;
}
section.benefits{
    /* background-color: #123F42; */
    background-color: #205759;
    color: white;
    display: flex;
    flex-direction: column;
    padding-top: 3rem;
}
.benefits>.card{
    margin-top: 20px;
    /* margin-bottom: 40px; */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 10px 30px 40px 30px;
    text-align:left;
}

.benefits>.card>img{
    width:100%;
} 

.process{
    background-color: #123F42;
    color: white;
    padding: 50px 50px 80px 50px;
    width: 100%;
}
span.step-title{
    background-color: #FBB16C;
    color: #123F42;
    font-weight: 700;
    padding: .125rem .250rem;
    font-size: 0.8rem;
    white-space:nowrap;
    align-self: flex-start
}

.process>.process-step{
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}
.process>h2{text-align: center;
    font-size: 1.5em;
    padding: 1rem 0;
}
.step-box{
    display: flex;
    flex-direction: row;
    /* padding: 20px; */
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 50px;
}

.process-step>.step-box{
    display: flex;
    flex-direction: column;
}

.process-step>.step-box:not(:last-child)::after{
    /* position:absolute; */
    content: "";
    background-image: url('img/flecha.svg');
    background-repeat: no-repeat;
    background-position: center right ;
    /* background-size: auto 70%; */
    /* left: 0;
    right: 0;
    
    top: auto; */
    transform: rotate(90deg);
    width: 70px;
    height: 80px;
    margin-left: -20px;
}

.step-text{
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

/* input,textarea{
    width: 90%;
    padding: 8px;
    margin-bottom: 10px;
} */

/* @media (min-width:768px 560px){ */

.testimonies{
    padding: 4%;
}
.testimonies-container {
  width: 100%;
  height: 300px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #333;
  border: 2px dashed #ccc;
  /* margin-top:20px;
  margin-bottom:20px; */
}

footer{
    background-color: #123F42;
    color: white;
    
}

footer>.container{
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

footer>.copyright{
    border-top: 1px solid #FFFFFF3D;
    padding: 10px;
}

footer .footer-logo span{
    font-weight: 600;
    font-size: 1.5rem;
}

footer .f-text{
    display: flex;
    flex-direction: column;
    gap:1rem;
}


@media (min-width:560px){
    body{
        font-size: 1.125rem; /* 18px */
    }
    nav .toggle{display: none}
    .menu{display:flex; flex-direction: row;}
    .menu.responsive{display:flex; flex-direction: row;}

    .hero{
        display: flex;
        flex-direction: row-reverse;
        height: 50vh;
    }
    /* .hero{position: relative;} */
    .hero-container{
        width:50%; 
    } 
    .frmContact{
        position:absolute;
        left: 50px;
        top:100px;
        width: 50%;
        max-width: 400px;
    }
    .frmContact>textarea{
        height: 70px;
    }
    section.cards{
        flex-direction: row;
        padding: 5%;
        align-items: stretch;
    }
    .cards>.card{
        width:50%;
    }
    section.benefits{
        flex-direction: row;
        gap: 2rem; 
        /* row-gap: 20px; */
        /* justify-content: space-evenly; */
        padding-bottom: 4rem;
        padding-left: 50px;
        padding-right: 50px;
    }.benefits>.card{
        padding: 40px;
        border:1px solid #EEF6F4;
        /* border-radius: 10px; */
    }
    .process{
        padding: 70px 70px 100px 70px;
    }
    .process>.process-step{
        flex-direction: row;
    }
    .process-step>.step-box{
        display: flex;
        flex-direction: row;
    }
    .process-step>.step-box:not(:last-child)::after{
        /* position:relative;
        top:0; */
        transform: rotate(0deg);
        width: 200px;
    }
}