* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: 15px; line-height: 1.4; min-height: 100%; scroll-behavior: smooth;}
body {background: #00405b; color: white; font-family: 'Inter', sans-serif; display: flex; flex-direction: column; min-height: 100svh; line-height: 1.4;}
.container {width: 100%; max-width: 80rem; margin: 0 auto; padding-inline: 2rem;}
a {color: white; text-decoration: none;}
img {display: block; max-width: 100%;}
h1, h2, h3, h4, h5 {font-weight: 200; letter-spacing: -0.015em;}
h1, .h1 {text-transform: uppercase; font-weight: 200; font-size: 3.25rem; line-height: 1.1; margin-bottom: 2.5rem;}
.button {background: #e4ab00; color: #fff; padding: 0.9rem 2rem 1rem; border-radius: 0.5rem; font-weight: 400; transition: all 0.15s ease-in-out; border: 2px solid transparent; font-weight: 400; display: inline-block; line-height: 1.4; text-decoration: none;}
.button:hover {background: transparent; border: 2px solid #e4ab00; color: #ffc20c;}
.button.blue {background: #8fcadd; border-color: #8fcadd;}
.button.blue:hover {background: transparent; color: #77bed6; border-color: #9cd1e2;}
p:empty,p:-moz-only-whitespace {display: none;}
p, .bg1 ul, .bg1 ol {margin-bottom: 2em;}
p:last-child, .bg1 ul:last-child, .bg1 ol:last-child {margin-bottom: 0;}


/* HEADER */

header {position: sticky; top: 0; z-index: 9; background: #00405b; box-shadow: 0rem 0rem 0.5rem 0rem rgba(0,0,0,0.4);}
header > div:nth-child(1) {background: #002c3f; padding-block: 0.65rem 0.5rem;}
header > div:nth-child(2) {display: flex; align-items: center; font-size: 1.25rem;}
header > div:nth-child(2) > div:nth-child(1) a {display: block; padding-block: 1.55rem;}
header > div:nth-child(2) > div:nth-child(1) a img {height: 4.65rem;}
header > div:nth-child(2) > div:nth-child(2) {flex-grow: 1; display: flex; justify-content: flex-end;}
header > div:nth-child(2) > div:nth-child(2) input {display: none; border: 0; color: transparent; width: 3.5rem; height: 3.5rem; background: url(/img/menu.svg) center center / 3rem 3rem no-repeat;}
.menuopen header > div:nth-child(2) > div:nth-child(2) input {background-image: url(/img/close.svg); transform: rotate(180deg); transition: all 0.3s ease-in-out;}
header ul {display: flex; justify-content: flex-end; gap: 1.35em;}
header ul li {list-style: none;}
header ul li a {padding-block: 1rem; position: relative;}
header ul li a::after {
    content: "";
    height: 1px;
    width: 0;
    transition: width 0.15s ease-in-out;
    background: rgba(255, 255, 255, 0.75);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0.5em;
}
header > div:nth-child(1) ul li a::after {bottom: 0.8rem;}
header ul li.active a::after,
header ul li a:hover::after {width: 100%;}




/* MAIN */

main {background: white; color: #888; flex-grow: 1;}
main > div.bg1 > section:nth-child(1) > .container:nth-child(1) > h2:nth-child(1), 
main > div.bg1 > section:nth-child(1) > .container:nth-child(1) > h2:nth-child(1) + h3 + p,
main > div.bg1 > section:nth-child(1) > .container:nth-child(1) > h2:nth-child(1) + p {
    max-width: 52rem; margin-inline: auto; text-align: center;
}
main > div.bg1 > section:first-child:last-child hr {margin-top: -4rem; opacity:0; pointer-events: none;}
body.clients main > div.bg1 > section:first-child > .container,

body:not(.haspatched) main > div.bg1 > section:first-child > .container {max-width: 60rem; font-size: 1.25rem;}

body:not(.haspatched) main > div.bg1 > section:first-child > .container > p:first-child {font-size: 140%; line-height: 1.75;}
body:not(.haspatched) main > div.bg1 > section:first-child > .container > p:first-child ~ h2,
body:not(.haspatched) main > div.bg1 > section:first-child > .container > p:first-child ~ h3 {text-transform: none; font-weight: bold; font-size: 140%; margin-block: 6rem 1.25rem; line-height: 1.3;}
body:not(.haspatched) main > div.bg1 > section:first-child > .container > p:first-child ~ hr:last-child {display: block; opacity: 0;}
body:not(.haspatched) main > div.bg1 > section:first-child > .container > p:first-child ~ :last-child {padding-bottom: 5rem;}

main > div.bg1 > section:nth-child(1) >  .container:nth-child(1) > h2:nth-child(1) {color: #77bed6; font-size: 3.25rem; margin-bottom: 2.5rem; text-align: center;}
main > div.bg1 > section:nth-child(1) >  .container:nth-child(1):has( > h2:first-child+h3) > h2:nth-child(1) {font-size: 2rem; color: rgba(0, 64, 91, 0.95); max-width: 52rem; margin-inline: auto;}
main > div.bg1 > section:nth-child(1) >  .container:nth-child(1) > h2:nth-child(1) + h3 {font-size: 3.25rem; text-align: center; color: #77bed6; margin-bottom: 2.5rem; max-width: 60rem; margin-inline: auto;}
main > div > section a {color: #888; text-decoration: underline;}



/* HEADERIMAGE */

@keyframes appearfrombottom {
    0% {transform: translateY(1rem); opacity: 0;}
    100% {transform: translateY(0rem); opacity: 1;}
}
.headerimage {min-height: 40rem; position: relative; background: url() center 10% / cover no-repeat; display: flex; flex-direction: column; justify-content: center; padding-block: 0; line-height: 1.4;}
.headerimage::after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(0,0,0,0.85) calc(50% - 40vw),rgba(0,0,0,0) calc(50% + 40vw));}
.headerimage > img {width: 100%; height: 100%; position: absolute; object-fit: cover; opacity: 0;}
.headerimage .container {position: relative; z-index: 2; color: white; padding-block: 5rem; font-size: 1.25rem; font-weight: 300;}
.staggereditem {animation: appearfrombottom 1.25s both;}
.staggereditem {animation-delay: calc(var(--n) * 350ms + 0.25s);}
.headerimage .container strong {font-weight: 700;}
.headerimage .container > .pretitle {color: #92b897; text-transform: uppercase; font-weight: 300; font-size: 1.45rem; line-height: 1.1; margin-bottom: 1.6rem;}
.headerimage .container > h1,.headerimage .container > h1 + ul {max-width: 40rem;}
.headerimage .container > h1 + p {max-width: 40rem; margin-bottom: 4rem; font-size: 1.5rem;}
.headerimage .container > ul {max-width: 100%; margin-bottom: 2.5rem;}
.headerimage .container ul li {list-style: none; padding-left: 3rem; padding-bottom: 1.75rem;}
.headerimage .container ul li::before {content: ""; display: block; background: url(/img/thickmark.svg) center center / contain no-repeat; width: 1.5rem; height: 3rem; position: absolute; margin: -0.9rem 0 0 -3rem;}



/* SECTIONS */

section {padding-block: 5rem 6rem; font-weight: 300; font-size: 1.25rem; line-height: 2;}
.bg1 {background-image: radial-gradient(circle 100vw at 120vw -15%, white 35vw, #f2f7f3 35vw, #f2f7f3 50vw, white 50vw); padding-bottom: 1rem;}
.bg1 ul {margin-left: 1.25rem;}
.bg1 ol {margin-left: 2rem;}
section h2, section h3 {text-transform: uppercase; font-weight: 200; font-size: 2rem; line-height: 1.1; margin-bottom: 2.5rem;}
section h2 + h3 {margin-top: -2.1rem;}
section h2 + h3 {font-size: 3.25rem;}



section.patched ul li {list-style: none; padding-left: 3rem; padding-bottom: 1.75rem; color: rgba(0, 64, 91, 0.95);}
section.patched ul li::before {content: ""; display: block; background: url(/img/thickmark.svg) center center / contain no-repeat; width: 1.5rem; height: 3rem; position: absolute; margin: -0.5rem 0 0 -3rem;}
section.patched ul li strong {font-weight: 700;}
section.patched .container {display: flex; align-items: center;}
section.patched:nth-child(odd) .container {flex-direction: row-reverse;}
section.patched .container > div {flex: 1;}
section.patched .container > div:nth-child(2) > * {padding-inline: 3rem 0;}
section.patched:nth-child(odd) .container > div:nth-child(2) > * {padding-inline: 0 3rem; text-align: right;}
section.patched .container > div:nth-child(1) img {border-radius: 0.75rem;}
section + section {padding-top: 0;}
section.patched .container > div:nth-child(2) h2 {color: #77bed6;}
section.patched:nth-child(odd) .container > div:nth-child(2) h2 {color: #f7bb07;}
section.patched .container > div:nth-child(2) h3 {color: #92b897;}
section.patched .container > div:nth-child(2) > p a:first-child:last-child {
    padding: 0.9rem 2rem 1rem; border-radius: 0.5rem; font-weight: 400; transition: all 0.15s ease-in-out; border: 2px solid transparent; font-weight: 400; display: inline-block; line-height: 1.4;
    color: #fff;
    background: #8fcadd;
    border-color: #8fcadd;
    text-decoration: none;
}
section.patched .container > div:nth-child(2) > p {margin-bottom: 2em;}
section.patched .container > div:nth-child(2) > p a:first-child:last-child:hover {
    background: transparent; border: 2px solid #9cd1e2; color: #77bed6;
} 

@media only screen and (max-width: 1000px) {
    section.patched .container {flex-direction: column!important;}
    section.patched .container > div:nth-child(2) {padding-top: 2rem;}
    section.patched .container > div:nth-child(2) > * {padding-inline: 0!important; text-align: left!important;}
}


/* STEPS */

section.patched + section.steps {margin-top: -5rem;}
section.steps {position: relative; padding-block: 7rem;}
section.steps::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: linear-gradient(to right, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.5) 90%);
}
section.steps .container {text-align: center; position: relative; z-index: 2; color: white;}
section.steps .container > div {text-align: left;}
section.steps .container h3 + div {column-width: 30rem; column-gap: 5rem; padding-block: 1rem;}
section.steps .container > div > div {break-inside: avoid-column; padding-bottom: 2rem; font-weight: 400;}
section.steps .container > div > div h4 {font-weight: bold; text-transform: uppercase; font-size: 1.3rem; letter-spacing: 0.05em;}
section.steps h2 {color: #92b897;}



/* VIDEO */

@keyframes zoominout {
    from {transform: scale(1);}
    to {transform: scale(1.15);}
}
div.video {max-width: 65rem; margin-inline: auto; aspect-ratio: 16/9; width: 100%; background: #eee; position: relative; transition: all 0.25s ease-in-out; overflow: hidden;}
div.video * {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
div.video a::after {
    content: ""; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0,0,0,0.45) url(/img/play.svg) center center / 6.5rem auto no-repeat; 
    z-index: 3;
    transition: all 0.25s ease-in-out;
}
div.video a:hover::after {
    background-size: 7.5rem auto; 
}
div.video img {
    object-fit: cover;
    transition: all 0.25s ease-in-out;
}
div.video a:hover img {transform: scale(1.05);}
div.video a span {font-weight: 400; color: white; position: absolute; left: 2rem; top: 1rem; pointer-events: none; z-index: 4;}



/* SERVICES */

div.services, div.problems {text-align: center;}
div.services h2, div.problems h2 {color: rgba(0, 64, 91, 0.95); margin-top: 4.5rem;}
div.services h3, div.problems h3 {color: #92b897; margin-bottom: 4.5rem;}

ul.cards {display: flex; justify-content: flex-start; gap: 2.25rem; flex-wrap: wrap;}
ul.cards li {list-style: none; flex: 1; max-width: calc((100% - 4.55rem) / 3); width: calc((100% - 4.55rem) / 3); min-width: calc((100% - 4.55rem) / 3);}
ul.cards li > * {height: 100%; display: flex; flex-direction: column; transition: all 0.2s ease-in-out; overflow: hidden; text-decoration: none;}
ul.cards li a .img {border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; overflow: hidden; position: relative;}
ul.cards li a .img::after {content: ""; transition: all 0.2s ease-in-out; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.15); width: 100%; height: 100%;}
ul.cards li a:hover .img::after {background: rgba(0,0,0,0.075);}
ul.cards li a .img img {transition: all 0.2s ease-in-out;}
ul.cards li a:hover .img img {transform: scale(1.05);}
ul.cards li div.text {
    border: 1px solid rgba(0, 64, 91, 0.5); 
    flex-grow: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between;
    border-radius: 0.75rem;
    font-size: 1rem;
    padding: 2.25rem 1.3rem 2.5rem;
    transition: all 0.2s ease-in-out;
    font-weight: 400;
    text-align: center;
}
ul.cards li div.img + div.text {border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;}
ul.cards li div.text p {margin-bottom: 2.5rem;}
ul.cards li div.text h4, ul.cards li div.text h5 {
    text-transform: uppercase; 
    font-size: 1.2rem;
    line-height: 1.1; 
    font-weight: 300;
}
ul.cards li div.text h5 {color: #92b897; font-size: 2.75rem; font-weight: 200; margin-block: 0.65rem 1.5rem;}
ul.cards li div.text span {font-weight: 400; color: #77bed6; font-size: 1.15rem;}
ul.cards li div.text span::after {
    content: "";
    height: 0.2rem;
    background: rgba(146, 184, 151, 0.75);
    width: 3.25rem;
    display: block;
    margin-inline: auto;
    margin-top: 0.35rem;
}
ul.cards li a:hover > div.text {background: #00405b; color: white;}
ul.cards + a.button {margin-top: 3.5rem;}

.problems ul.cards li div.text img {width: 3.25rem; margin: -0.25rem auto 1.25rem; opacity: 0.5;}
.problems ul.cards li div.text h4 {font-size: 2rem; font-weight: 200; margin-bottom: 1rem;}
.problems ul.cards li div.text p {margin-bottom: 0;}
.problems ul.cards li > div.text {background: #eef5f8; border: 0;}
.problems ul.cards + a.button {margin-block: 1rem 1.5rem;}
div.problems h3 {margin-bottom: 3rem;}

@media only screen and (max-width: 1000px) {
    ul.cards {
        overflow: auto;
        display: flex;
        flex-wrap: nowrap;
        scroll-snap-type: x mandatory;
        scroll-snap-points-y: repeat(100%);
        scroll-behavior: smooth;
        -ms-overflow-style: none;
        scrollbar-width: none;
        justify-content: flex-start;
        margin-inline: -2rem;
        gap: 0;
        user-select: none;
        cursor: pointer;
    }
    ul.cards.active, ul.cards.active * {cursor: grabbing!important;}
    ul.cards::-webkit-scrollbar {display: none; /* Hide scrollbar for Chrome, Safari and Opera */} 
    ul.cards li {
        position: relative; 
        list-style: none; 
        scroll-snap-align: start; 
        padding-left: 2rem;
        max-width: 27rem;
        width: 27rem;
        min-width: 27rem;
    }
    ul.cards li:last-child {
        padding-right: 2rem;
        max-width: 29rem;
        width: 29rem;
        min-width: 29rem;
    }
}




/* HR */

hr:first-child {opacity: 0; margin-top: -4rem;}
hr {background: #eee; height: 2px; border: 0; margin-top: 3rem; max-width: 65rem; margin-inline: auto;}
hr + hr {display: none;}
hr + *:not(hr) {margin-top: 3rem;}




/* CLIENTS */

section.clients {background: #d3e4d5; padding-bottom: 10rem;}
section.clients h2 {color: rgba(0, 64, 91, 0.95); text-align: center; margin-block: 2rem 5rem;}
section.clients ul {display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); grid-gap: 4rem 5rem;}
section.clients ul li {list-style: none; position: relative; aspect-ratio: 2.25/1; border: 0.3rem solid white; border-radius: 1rem;}
section.clients ul li .img {mix-blend-mode: darken; margin: 2rem 4rem; width: calc(100% - 8rem); height: calc(100% - 4rem);}
section.clients ul li a {display: block; height: 100%; width: 100%; position: absolute; top: 0; transition: all 0.2s ease-in-out;}
section.clients ul li a:hover {background: white;}
@media only screen and (max-width: 1000px) {
    section.clients ul {grid-template-columns: 1fr 1fr; grid-gap: 6vw 7vw;}
    section.clients ul li {border-width: 0.6vw;}
    section.clients ul li .img {margin: 3vw 6vw; width: calc(100% - 12vw); height: calc(100% - 6vw);}
}



/* REVIEWS */

section.reviews {
    background-image: radial-gradient(circle 100vw at 100vw 145vw, #f8f8f8 100vw, #eef2ee 100vw, #eef2ee 140vw, #f8f8f8 140vw); 
    text-align: center;
    padding-block: 7rem;
}
section.reviews h3 {margin-top: 9rem;}
section.reviews .container:nth-child(1) {max-width: 56rem;}

section.reviews .h1 {color: #92b897;}
section.reviews .carousel {margin-top: 2.5rem;}
section.reviews .carousel ul {box-shadow: 0rem 0rem 0.75rem 0rem rgba(0,0,0,0.2); border-radius: 0.75rem; overflow: hidden;}
section.reviews .carousel ul li {background: white; display: flex; gap: 3rem; padding: 3rem;}
section.reviews .carousel ul li > div:nth-child(1) {color: #92b897;}
section.reviews .carousel ul li > div:nth-child(1) {min-width: 16rem; line-height: 1.4;}
section.reviews .carousel ul li > div:nth-child(1) img {width: 100%; border-radius: 100%; margin-bottom: 1.75rem;}
section.reviews .carousel ul li > div:nth-child(2) {text-align: left; font-weight: 400; color: #77bed6; padding-bottom: 0.5rem; line-height: 1.9; padding-right: 0.5rem; display: flex; align-items: center;}
section.reviews ul.contact {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
    text-transform: uppercase;
    font-size: 1.75rem;
    font-weight: 200;
    color: #00405b;
    justify-content: center;
}
section.reviews .container:nth-child(2) h3 {color: rgba(0, 64, 91, 0.95); font-size: 3.25rem; margin-bottom: 3rem;}
section.reviews ul.contact li {list-style: none; text-align: left; flex: 1; white-space: nowrap;}
section.reviews ul.contact li img {
    vertical-align: middle; 
    display: inline-block; 
    width: 6rem;
    left: 0;
    position: absolute;
    transition: all 0.35s ease-in-out;
    pointer-events: none;
}
section.reviews ul.contact li a {color: #00405b; display: block; border-radius: 3rem; background: #dfe7df; transition: background 0.35s ease-in-out, padding 0.35s ease-in-out, font-weight 0s linear; height: 6rem; line-height: 6rem; padding-left: 7.5rem; position: relative;}
section.reviews ul.contact li a:hover {padding-left: 2.75rem; background: #a8caac; color: white; font-weight: 400;}
section.reviews ul.contact li a:hover img {left: auto; left: calc(100% - 6rem); transform: rotate(360deg);}
section.reviews ul.contact + p {max-width: 43rem; margin-inline: auto; line-height: 2.25;}
section.reviews ul.contact + p strong {font-weight: 700; color: rgba(0, 64, 91, 0.95);}
@media only screen and (max-width: 1000px) {
    section.reviews ul.contact {flex-direction: column; align-items: center;}
    section.reviews ul.contact li {width: 25rem; max-width: 100%;}
    section.reviews .carousel ul li {flex-direction: column; align-items: center;}
    section.reviews .carousel ul li > div:nth-child(1) {min-width: 15rem; width: 15rem; margin-top: 1.5rem;}
}




/* FORM */

form > div {display: flex; flex-direction: column; margin-bottom: 0.75rem;}
form > div label {font-size: 1rem; font-weight: 400; margin-block: 0.25rem 0.5rem; line-height: 1.5;}
textarea,
input {
    font-size: 1.25rem; 
    font-family: 'Inter', sans-serif; 
    border: 1px solid rgba(0,0,0,0.2); 
    background: transparent;
    padding: 0.5rem 0.5rem;
    font-weight: 300;
    resize: vertical;
    outline: none;
    transition: all 0.15s ease-in-out;
    color: #333;
}
textarea {height: 7rem}
form input[type="submit"],
form input[type="submit"]:hover {
    border: 2px solid #e4ab00; 
    background: #e4ab00; 
    color: white!important;
    border-radius: 0.5rem;
    margin-top: 0.75rem;
    cursor: pointer;
    padding: 0.5rem 3.5rem;
}
footer input:hover, footer textarea:hover,
footer input:focus, footer textarea:focus,
footer form input[type="submit"]:focus {background: rgba(255,255,255,0.075);}
footer input, footer textarea {border: 1px solid rgba(255,255,255,0.4); color: white;}
footer form input[type="submit"] {
    border: 1px solid rgba(255,255,255,0.8)!important; 
    background: transparent;
    border-radius: 0!important;
}

/* WHATSAPP */

.whatsapp {line-height: 1.4!important; display: flex; justify-content: flex-end; text-align: center;}
.whatsapp > div {background: #f3f3f3; text-align: center; width: 100%; max-width: 18rem; color: rgba(22, 27, 39, 0.6); padding-bottom: 6.5rem; position: relative;}
.whatsapp > div h3 {background: #1d6d5c; color: white!important; padding: 0.75rem 1rem 0.75rem; margin-bottom: 0.75rem!important; color: rgba(230, 243, 255, 0.8); margin-bottom: 2rem; text-align: center;}
.whatsapp > div h3 span {font-weight: 500; display: block; font-size: 0.9rem;}
.whatsapp > div p {padding: 0.5rem 1rem; font-size: 1rem; margin-bottom: 0; font-weight: 400;}
.whatsapp > div img {width: 10rem; margin: 0 1rem; display: inline-block;}
.whatsapp > div .button {
    position: absolute;
    background: #f3b600;
    border: 0; 
    font-weight: bold; 
    color: white; 
    border-bottom: 0.4rem solid #c29100;
    padding: 0.75rem 1.5rem;
    transition: all 0.075s ease-in-out;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    white-space: nowrap;
}
.whatsapp > div .button:hover {border-bottom-width: 0.2rem;}



/* CTA */

section.cta {background: #00405b; color: white; padding-block: 8rem; overflow: hidden; position: relative;}
section.cta h2, section.cta h3 {max-width: 50rem;}
section.cta h2 {color: #77bed6;}
section.cta .img {position: absolute; width: 100%; pointer-events: none; opacity: 0.2; left: 0; top: 0; height: 100%;}
section.cta .img::after {
    content: "";
    position: absolute;
    left: 0; top: 0; 
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #00405b 30%, transparent 70%);
}
section.cta .button {border-color: #e4ab00; background: none; color: #ffc20c;}
section.cta .button:hover {background: #e4ab00; border-color: #e4ab00; color: white;}
section.cta .container {z-index: 2; position: relative;}


.show9 > *:nth-child(1n+10) {display: none;}


/* FOOTER */

footer .container:nth-child(1) {display: flex; justify-content: center; padding-block: 4rem;}
footer .container:nth-child(1) img {filter: grayscale(1) contrast(2)}
footer .container:nth-child(2) {display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 1.25rem; font-weight: 300;line-height: 2; gap: 3rem; line-height: 2.25;}
footer .container:nth-child(2) > * {width: 100%; max-width: 25rem; margin-inline: auto;}
footer .container:nth-child(3) {text-align: center; font-size: 0.9rem; padding-block: 4rem 2.25rem; font-weight: 300;}
footer h3 {font-weight: bold; letter-spacing: normal;}
footer .button[type="submit"]:hover {background: rgba(255,255,255,0.075);}


@media only screen and (max-width: 1500px) {
    html {font-size: 1vw;}
}

@media only screen and (max-width: 1000px) {
    html {font-size: 16px;}
    .headerimage::after {background: linear-gradient(to right, rgba(0,0,0,0.85) calc(50% - 40vw),rgba(0,0,0,0.45) calc(50% + 40vw));}
    header > div:nth-child(2) ul {
        display: none; 
        position: absolute; 
        background: #00405b; 
        left: 0; 
        margin-top: 5rem;
        width: 100%;
        padding-block: 1rem 2rem;
    }
    header > div:nth-child(2) ul li {padding: 0.5rem 2rem;}
    .menuopen header > div:nth-child(2) ul {display: block;}
    header > div:nth-child(2) > div:nth-child(2) input {display: block; cursor: pointer;}
    footer .container:nth-child(1) {padding-block: 4.5rem 3.5rem;}
    footer .container:nth-child(2) {display: flex; flex-direction: column; gap: 6rem; text-align: center;}
    footer .container:nth-child(2) > div:nth-child(2) {display: none;}
    .whatsapp {justify-content: center;}
}


@media only screen and (max-width: 555px) {
    html {font-size: 2.85vw;}
}

blockquote {font-size: 200%; margin-bottom: 3.5rem; padding-top: 0.75rem; line-height: 1.3;}