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


body {/*background: url('images/pattern.png')*/margin:0; padding: 0; background-position: center center; background-attachment: fixed;}

header {height: 40px; }
.header-content {overflow: hidden;}    
.contacto-header {display: flex; margin-right: 10px; align-items: center; float: right;}
.email,.telefono {margin-right: 10px; color: black; text-decoration: none;}
.contacto-header i { display: inline-block; margin-right: 5px;}
.banderas {margin-left: 20px; display: flex;float: left;}
.banderas img {margin-right: 10px; border-radius: 5px}


@media only screen and (max-width: 640px) {
.banderas img {display: none; } 
.contacto-header {justify-content: center;align-items: center;float: none;font-size: 2vw;}} 
@media (max-width: 460px){.contacto-header{font-size: small;}}
@media (max-width: 392px) {
    .navbar-brand img {max-width:170px;}
    header{height: 45px;}
    .contacto-header {display: flex; flex-direction: column ;}}


nav {background-color:#cd010c;height: 120px; top: 0; width: 100%; box-shadow: 0.5px 0.5px 2px black;  z-index: 1000;} 
    .navbar-brand {position:relative;margin-left: 20px; margin-right: 120px;}
    .navbar-brand img {height: 100px; width: 230px;}
    .navbar-nav {justify-content: center;}
    .navbar-nav li  {position:relative; margin-right: 90px; text-shadow: 1px 1px 2px black; font-size: 1.25rem;}   
    .nav-link {color:aliceblue; margin-left: -30px; font-style: italic; }
    .nav-link:hover{color: #0081d8}
    .navbar-nav a:active, .navbar-nav a:focus{color: #0081d8}

    .navbar-toggler {margin-right: 2rem; border: 1px solid; }
    .navbar-collapse ul {background-color: #cd010c; justify-content: center; align-items: center; text-align: center; }
   
@media(max-width: 762px) {.navbar-collapse ul {padding-left: 5rem;}}

@media(max-width: 1200px){
    .navbar-brand {margin-right: 4rem;}
    .navbar-nav li {margin-right: 4rem;}}

@media (max-width: 1050px){
    .navbar-brand {margin-right: 2.5rem;}
    .navbar-nav li {margin-right: 2.5rem; font-size: 1rem;}
    .nosotros {margin-top: -60px;}
    .servicios {margin: -50px;}}
    
@media (max-width: 800px){
    .navbar-nav li {font-size: 0.85rem;}
}



.sticky {position: fixed;top: 0;width: 100%;height: 80px;}
.sticky .navbar-brand img {height: 67px;}


.showcase {width: 100%;height: 85vh; background: url('images/WhatsApp Image 2023-12-10 at 13.54.55.jpeg') no-repeat center center/cover; box-shadow: 1px 1px 2px black; display: flex; align-items: center; justify-content: center;}
.showcase .text {color:#ffffff; text-shadow: 1px 1px 2px black; text-align: center; }
.showcase .contacto-btn {transform: skew(-14deg); background-color: #cd010c; display: inline-block; padding: 7px; color: #ffffff; text-decoration: none; box-shadow:1px 1px 2px black; float:none;}
.showcase .contacto-btn:hover {background-color:#0081d8}

main {padding: 7em 0em 0em;}
    .sobre_nosotros {color:#ffffff;background-color: #cd010c;font-style: italic; text-align: center; text-shadow: 1px 1px 2px black; cursor: pointer;}
    .nosotros .title {justify-content: center; text-align: center;}
    .nosotros h2 { font-size: 25px; text-shadow: 1px 1px 2px black; font-style: italic; background-color: #cd010c; text-align: center;padding: 4px;padding-left: 6px; padding-right: 6px;display: inline-block; box-shadow: 1px 1px 2px black;}
    .nosotros .presentacion {display: flex; align-items: center; text-align: center; }
    .nosotros .text {font-size: 18px;float: right; margin-left: 20px; padding-top: 25px; }
    .camion {max-width: 100%; height: 460px; width: 560px;border-radius: 20px;box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.15); float: left;}


@media (min-width: 1400px){
    .navbar-nav li {font-size: 1.6rem;}
    .nosotros .text {font-size: 22px;}}

@media (max-width: 1200px) {
    .main {padding-top: 10px;}
    .presentacion{display: flex; flex-direction: column ;}
    .presentacion img {height: 50%;}
    .nosotros .text {margin-left: 0;}
}

    .ubicacion { margin-top: 45px; align-items: center; display: flex; flex-direction: column;}
    .ubicacion .mapa {border-radius: 5px; width: 50%;}
    iframe {border: none; height: 350px;}
    .ubicacion h3 {font-size: 20px; text-shadow:1px 1px 2px black; font-style: italic; background-color: #cd010c; text-align: center;padding: 4px;padding-left: 15px; padding-right: 15px;display: inline-block; box-shadow: 1px 1px 2px black; color: #ffffff;}

@media(max-width: 760px) {.ubicacion .mapa {height: 260px; width: 60%;}}

    .caracteristicas_title {margin-top: 70px; justify-content: center; text-align: center;}
    .caracteristicas_title p {text-align: center;font-size: 3vh; display: inline-block; background-color: #0081d8;color: white; transform: skew(-14deg); padding: 6px; font-weight: bold; float: none; box-shadow: 1px 1px 2px black; cursor: pointer;}

    .caracteristicas {display:grid ;margin-top: 30px; grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr 1fr; gap: 1rem; }
    .caracteristicas h1 {color:#0081d8; font-size: 25px; font-style: italic; text-shadow: 1px 1px 1px black;  }
    .caracteristicas .box {padding: 5px;border-radius: 20px; box-sizing:content-box;text-align: center; justify-content: center; align-items: center;background-color: #ffffff; border: 2px solid #0081d8; overflow: hidden; } 
    .caracteristicas .box:hover {transform: scale(1.01);}
    .caracteristicas .box p {font-size: 18px;font-family: "Poppins", sans-serif;}
    .caracteristicas .box img {width: 120px; }
    .caracteristicas .box1 {grid-row-start: span 1; grid-row: span 2; grid-column-start: span 1; display: flex;flex-direction: column;}
    .caracteristicas .box2 {grid-column-start: span 2; grid-column: span 2; grid-row-start:span 1;}
    .caracteristicas .box3 {grid-column-start: span 2; grid-column: span 2; grid-row-start: span 2; height: 94%;}
    .caracteristicas .box4 {grid-row-start: 1; grid-row-end: 3; grid-column-start: 4; display: flex;flex-direction: column;}
 
@media (max-width: 1100px){.caracteristicas h1 {font-size: 20px;}}
@media (max-width: 1000px){.caracteristicas{display:flex; flex-direction: column;} .caracteristicas h1{font-size: 28px;}}

.cover1 {width: 100%; height: 70vh; ;margin-top: 5rem; box-shadow: 1px 1px 2px black; filter: brightness(60%);}
main {font-family:Verdana, Tahoma,  sans-serif; padding: 7em 0em 0em;}
    .servicios {text-align: center; justify-content: center; }
    .servicios h1 {color:#ffffff;background-color: #cd010c;font-style: italic; text-align: center; text-shadow: 1px 1px 2px black; cursor: pointer;}
    .servicios p {font-size: 18px; font-family: "Poppins";}
    .box-container{display: grid; grid-template-columns: repeat(2, minmax(270px, 1fr));  transition: .2s linear; margin-top: 45px; gap: 90px; padding-right: 140px; padding-left: 140px;position: relative; }
    .box-container h2{color: white; font-weight: bolder; font-size: 30px; text-shadow: 1px 1px 1px black;}
    .box-container .box {box-sizing: border-box; ;box-shadow: 0 5px 10px rgba(0, 0, 0, .2);border-radius: 5px; background: linear-gradient(45deg, #0081d8, #0081d8);padding: 30px 20px; border: 1px solid #000000; display: flex; justify-content: center; align-items: center;text-align: center; height: 100%; cursor: pointer;}
    .box-container .box:hover {box-shadow: 0 10px 15px rgba(0, 0, 0, .3); transform: scale(1.03);}
    .box-image {width: 150px; height: 150px; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; justify-content: center; display: flex; }
    .box-image img {width: 260px; }
    .box-image img:hover {transform: scale(1.03)}
    

@media only screen and (max-width: 480px){
    .box-container {padding: 0;}

}
     
.equipos {margin-top: 10rem; display: inline-flex; font-family: "Poppins", sans-serif;  justify-content: center;align-items: center;}
.equipos img {width: 70%;height: 55vh; box-shadow: 1px 1px 2px black; filter: brightness(70%); border-radius: 20px;}
.equipos .text {margin-left: 50px; }
.equipos h2 {font-weight: bolder; font-size: 40px; font-style: italic; align-self:baseline;}
.equipos i {color: #cd010c; line-height: 50px; margin-left: 25px; cursor: pointer; font-size: 1.5rem; align-items: center;}
.equipos i span {color: #0081d8; font-size: 1.5rem;}
.equipos i span:hover{color: #cd010c;}
.equipos p {margin-top:20px;}

@media only screen and (max-width: 1000px){
    .servicios{padding-top: 20px; justify-content: center; margin-left: 0px;}
    .box-container{display: flex; flex-direction: column;flex-wrap: wrap ;margin-top: 20px; gap: 20px; justify-content: center; text-align: center; align-items: center; position: relative;}
    .box-container .box {flex: 1; box-sizing: border-box; width: 15rem ;}
    .box-container h2 {font-size: 20px;}
    .box-image {display: none;}
    .equipos {display: flex;flex-direction: column; align-items: center; justify-content: center; margin-left: 0;}
    .equipos .text {margin-top: 30px; margin-left: 0;}
    .equipos h2 {text-align: center;}
    .equipos p {text-align: center;}
    .equipos img {width: 100%;}
}

@media (max-width: 300px){.equipos i {font-size: 1rem;}.equipos i span {color: #0081d8; font-size: 1rem;}}

.contactanos {color:#ffffff;background-color: #cd010c;font-style: italic; text-align: center; text-shadow: 1px 1px 2px black; cursor: pointer; margin-top: 5rem;}

.contacto {width: 100%; overflow: hidden; margin-top: 5rem; font-family: "Poppins", sans-serif; }
.contact-info {line-height: 2;}
.contacto .flex-container {height: 100vh; min-height: 700px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }
.contacto .flex-container > div {grid-column: 1/2; grid-row: 1/2}
.left {width: 100%;max-width: 80rem; margin: 0 auto; padding: 0 0 5rem 2rem;display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; }
.contact-heading h1{font-weight: bold; color: black; font-size: 3.5rem;line-height: 0.9; white-space: nowrap; }
.contact-heading h1 span {color: #0081d8;}
.contact-heading h3 {color: rgb(80, 78, 78)}
.contact-heading h3 a {font-weight: bold; color:#0081d8; text-decoration: none;}
.contact-heading h3 a:hover {color:#cd010c; transition: 0.3s;}
.contact-form{display: grid; margin-top: 2.55rem; grid-template-columns: repeat(2,1fr);column-gap: 2rem; row-gap: 1rem; margin-top: 2rem;}
.input-wrap {position: relative; }
.form-wrapper {max-width: 32rem;}
.contact-form .input-wrap.w-100{grid-column: span 2; }
.contact-input {width: 100%; background-color: hsla(208, 50%, 50%, 10%);padding: 1.5rem 1.35rem calc(0.75rem - 2px) 1.35rem ;border: none; outline: none; font-family: inherit; border-radius: 20px; color: black; font-weight: 600; font-size: 0.95rem; transition: .3s; border: 2px solid transparent; box-shadow: 0 0 0 0px hsla(208, 92%, 92%, 0.169); }
.contact-input:hover{background-color: hsla(208, 50%, 50%, 40%) ;}
.input-wrap label {position: absolute; top: 50%; left: calc(1.35rem + 2px); transform: translateY(-50%); color: rgb(80, 78, 78); transition: 0.25s; pointer-events: none}
.input-wrap .icon {position: absolute; right: calc(1.35rem + 2px); top: 50%; transform: translateY(-50%);color: #8c9aaf;transform: .3s; pointer-events: none}
textarea.contact-input {resize: none; width: 100%; min-height: 150px;}
textarea.contact-input ~ label {top: 1.2rem; transform: none;}
textarea.contact-input ~ .icon {top: 1.2rem; transform: none;}

.input-wrap.focus .contact-input {background-color: white; border: 2px solid #0081d8; box-shadow: 0 0 0 5px hsla(208, 91%, 55%, 0.11); }
.input-wrap.focus label {color: #0081d8}
.input-wrap.focus .icon {color: #0081d8}
.input-wrap.not-empty label {font-size: 0.66rem; top: 0.75rem; transform: translateY(0);}

.contact-buttons {display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; margin-top: 1rem; width: 100%; grid-column: span 2;}
.btn {display: inline-block; padding: 1.1rem 2rem; background-color: #0081d8; color: #ffffff; border-radius: 40px; border: none; font-family: inherit; font-weight: 500; font-size: 1rem; cursor: pointer; transition: 0.3s;}
.btn:hover {background-color: #135e8f;}
.btn-upload{position: relative; background-color:hsla(208, 50%, 50%, 10%); border-radius: 40px; border: none}
.btn-upload span {color:rgb(80, 78, 78);}
.btn-upload input {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #cd010c; cursor: pointer; opacity: 0;}  
.btn-upload:hover{background-color:hsla(208, 50%, 50%, 40%) ;}

.right {position: relative;display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; pointer-events: none; } 
.image-wrapper {position: relative; grid-column: 2;}
.image-wrapper img {position: absolute; height: 130%; left: 60%; top: 50%;transform: translate(-50%, -50%);z-index: -1; }

.wave-wrap {position: absolute; width: 100%; height: 100%; top: 0;right: 100%;background-color: white;z-index: -1;}
.wave-wrap svg{ position: absolute; height: calc(100% + 10px); top: 50%; transform: translateY(-50%); left: calc(100% - 2px);}
#wave {height: 100%; fill: white;}

.dashed-wave {position: absolute; z-index: 3; height: 130%; bottom: 60%; left: -28px; transform: translateY(50%);} 
#dashed-wave{fill: none; stroke: #8c9aaf; stroke-width: 1px; stroke-dasharray: 6.5; opacity: 0.8;}

@media (max-width: 1000px) {
    .navbar {position: relative;}
    .contacto {margin-top: 20px;}
    .contact-heading h1 {font-size: 2.5rem; margin-bottom: 1rem; white-space: normal;}
    .text{font-size: 0.9rem;}
    .contact-form {display: grid; margin-top: 1.9rem; column-gap: 0.8rem; row-gap: 0.65rem; }
    .contact-input{border-radius: 17px; font-size: 0.87rem; padding: 1.5rem 1.2rem calc(0.75rem - 2px) 1.2rem;}
    .input-wrap label {font-size: 0.91rem; left: calc(1.2rem + 2px);}
    .input-wrap .icon {font-size: 1.1rem; right: calc(1.2rem + 2px); }
    textarea.contact-input ~label {top: 1.2rem; }
    textarea.contact-input ~.icon {top: 1.33rem; }
    .input-wrap.focus .contact-input{box-shadow: 0 0 0 3.5px hsla(208, 92%, 92%, 0.169);}
    .input-wrap.not-empty label {font-size: 0.61rem;}
    .contact-buttons {column-gap: 0.8rem;margin-top: 0.45rem;}
    .btn {padding: 1rem 1.5rem; font-size: 0.87rem;}
    .dashed-wave{bottom: 55%; left: -10px; }
    #dashed-wave{stroke-width: 0.7px; stroke-dasharray: 6;}}
   .wave-wrap {transform: translateX(-10px);} 
   .wave-wrap svg {height: calc(110% + 10px); transform: translate(-5%, -50%); }

@media(max-width:650px){
    .navbar {position: relative;}
    .left{padding: 30px 1.5rem 0; grid-template-columns: 1fr; justify-items: center;}
    .form-wrapper {width: 100%; padding: 1rem 0;}
    .right{display: none;}}
@media(max-width:440px) {
    .contacto {margin-top: 20px;}
    .input-wrap {grid-column: span 2;}
    .contact-buttons {grid-template-columns: 1f r; row-gap: 0.5rem; }
    .contact-heading h1 {font-size: 1.9rem; line-height: 1;}}
    .contacto .flex-container {height: 100%}
@media(max-width:356px) {
    .contact-heading a{font-size: small;}
    .contact-heading a i {display: none;}
}    

footer {padding: 0.3rem 1rem 0.5rem 1rem; display: flex;  align-items: center;} 
.copyright {margin-right: 1rem; font-style: normal; display: flex; gap: 1rem; align-items: center;}
.copyright p {margin: 0;}
.ig-wrap {display: flex;align-items: center; gap: 1rem; font-style: italic; margin-left: auto;}
.ig-wrap p {margin: 0;}
footer .bi-instagram {font-size: 1.5rem;}