body {margin:0; padding: 0; min-height: 100vh; }

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;}
}

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

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

.contacto {width: 100%; overflow: hidden; margin-top: 2rem; font-family: "Poppins", sans-serif; }
.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: 80vw; margin: 0 auto; padding: 0 0 0rem 1rem;display: grid; grid-template-columns: repeat(2, 1fr); align-items: center; }
.contact-heading h3 {color: rgb(80, 78, 78);}
.contact-form{display: grid; margin-top: 2.55rem; grid-template-columns: repeat(2,1fr);column-gap: 2rem; row-gap: 0.7rem; margin-top: 1rem;}
.input-wrap {position: relative;}
.form-wrapper {max-width: 37rem; padding-top: 0; margin-top: -3rem; margin-bottom: -3.5rem; margin-left: 2rem;}
.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 #cd010c; box-shadow: 0 0 0 5px hsla(208, 91%, 55%, 0.11); }
.input-wrap.focus label {color: #cd010c}
.input-wrap.focus .icon {color: #cd010c}
.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: #cd010c; 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: #cd010c; }
.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: 1200px) {.nav-link{margin-left: -50px;}}

@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(min-width:1400px){.wave-wrap {transform: translateX(15%);} .dashed-wave{bottom: 55%; left: 10%; } }

@media(max-width:650px){
    .navbar {position: relative;}
    .left{padding: 30px 0 0; grid-template-columns: 1fr; justify-items: center;}
    .form-wrapper {width: 90%; padding: 1rem 0;}
    .right{display: none;}}

    @media(max-width:440px) {
    .contacto {margin-top: 20px;}
    .form-wrapper{margin-bottom: 1rem; margin-left: 0;}
    .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%}
    textarea.contact-input {resize: none; width: 100%; min-height: 90px;}}

    
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;}

@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;}
}