@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wdth,wght@0,75..100,100..900;1,75..100,100..900&display=swap');
/**********************************/
/* LIQUID RESPONSIVE rem UNIT SIZE
    It smoothly and progressively resize the root's font size (it reflects to rem unit),
    starting from min-fontsize at minimum viewport width, until and max-fontsize at maximum viewport width */
    :root {
        --min-width: 992; /* ◄ define the minimum viewport in pixels (without "px" unit) */ --min-fontsize:12; /* ◄ define the corresponding minimum font-size in pixels (without "px" unit) */
        --max-width:1440; /* ◄ define the maximum viewport in pixels (without "px" unit) */ --max-fontsize:16; /* ◄ define the corresponding maximum font-size in pixels (without "px" unit) */
        --liq-fontsize: calc(var(--min-fontsize) * 1px + (var(--max-fontsize) - var(--min-fontsize)) * ((100vw - var(--min-width) * 1px) / (var(--max-width) - var(--min-width))));
    }
    html {font-size: calc(var(--min-fontsize) * 1px);}
    /* ▼ You should fill manually the @media min/max widths bellow (because property doesn't accept css variables) */
    @media all and (min-width: 992px) /* ◄ paste manually the variable's "--min-width" defined value (trailed with "px" unit)*/ {html {font-size: var(--liq-fontsize)}}
    @media all and (min-width:1400px) /* ◄ paste manually the variable's "--max-width" defined value (trailed with "px" unit)*/ {html {font-size: calc(var(--max-fontsize) * 1px);}}
/**********************************/
:root{
    --color1:#059c9e;
    --color2:#054a69;
}
*,*::before,*::after {margin:0;padding:0;box-sizing:border-box;}
html {scroll-behavior: smooth;}
a,a:hover {text-decoration:inherit;color:inherit}
body {font-family:Roboto, sans-serif;line-height:1.5;color:var(--color1)}
.container {position:relative;display:block;max-width:1200px;margin-inline:auto;padding:1rem}

.flex{display:flex}
.flex.between{justify-content:space-between}
.flex.around{justify-content:space-around}
.flex.middle{align-items:center}
.flex.center{justify-content:center}
.flex.gap-1 {gap:0.25rem}
.flex.gap-2 {gap:0.50rem}
.flex.gap-3 {gap:0.75rem}
.flex.gap-4 {gap:1.00rem}
.flex.gap-5 {gap:1.25rem}
.flex.gap-6 {gap:1.50rem}
.flex.gap-7 {gap:1.75rem}
.flex.gap-8 {gap:2.00rem}
.flex.gap-9 {gap:2.25rem}
.flex.gap-10{gap:2.50rem}
.flex.gap-11{gap:2.75rem}
.flex.gap-12{gap:3.00rem}




.banner {position:relative; width:100%;height:calc(100lvh - 8rem);background:no-repeat center 8rem / cover fixed;}
.banner:first-of-type {background-position-y:0;}
.banner::after {content:'';position:absolute;width:100%;height:20rem;bottom:0;background-image:linear-gradient(0, #0004, #0000);}
/* BANNER PARALAX */
@media (min-width:1025px) {
    .banner:not(:first-of-type) {animation:paralax-rest linear;animation-timeline:scroll();animation-range:cover;animation-range:entry exit;animation-duration:1s;view-timeline-name: --banner-paralax;animation-timeline: --banner-paralax;}
    .banner:first-of-type {animation:paralax-1st linear;animation-timeline:scroll();animation-range:cover;animation-range:entry exit;animation-duration:1s;view-timeline-name: --banner-paralax;animation-timeline: --banner-paralax;}
    @keyframes paralax-rest {from {background-position-y:15rem} to {background-position-y:0rem}}
    @keyframes paralax-1st {from {background-position-y:7.5rem} to {background-position-y:-7.5rem}}
}


.horizontal-list{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-around;list-style-type:none}
.horizontal-list li:not(.button) {text-align:center;flex-basis:22.5%}
.horizontal-list li svg {width:100%;height:3rem;fill:var(--color1)}
.horizontal-list li .caption {line-height:1;font-weight:300;font-variation-settings:"wdth" 75;}
ul.bullets {list-style:none;padding-left:2rem}
ul.bullets li {content:'✓';text-indent:-2rem;margin-bottom:0.5rem;}
ul.bullets li::before {content:'✓';margin-right:1rem}

.button {flex:1 0 calc(50% - 1rem);background:linear-gradient(180deg, #FFFF, #FFF0),#EEE;padding:1rem;border-radius:1rem;border:1px solid #0002;text-align:center;}
.button:hover {translate:0 0.15rem;box-shadow:0rem 0.5rem 0.8rem -0.8rem #000;background:linear-gradient(180deg, #FFFF, #FFFF),#EEE;transition:translate 0.25s, box-shadow 0.25s, background-color 0.25s;}
.button.scroll-back div {position:absolute;left:50%;translate:-50%;top:-1rem;font-size:1.5rem;color:#FFF;-webkit-text-stroke:1px #CCC;}
section.container        .scroll-back.button {position:relative;display:none;margin-top:-4rem;margin-right:auto;margin-left:20%;translate:-50%;background-color:transparent;border-block:0;cursor:pointer;}
section.container:target .scroll-back.button {display:block}

svg.head-icon {display:block;height:6rem;width:40%; margin-top:-6rem;margin-bottom:-2rem; fill:var(--color1)}
svg.icon {display:inline grid;place-content:center;height:1.25rem;fill:var(--color1); vertical-align:middle;aspect-ratio:1/1}



header {position:sticky;top:0;padding:0;z-index:1; background-color:white;border-bottom:1px solid #DDD}
header .logo {height:6rem}

header .contact > * {text-align:center;}
header .contact a {color:inherit;text-decoration:none;font-size:1.25rem;font-variation-settings: "wdth" 75;font-weight: 300;}
header .contact a:hover {color:#99F;text-decoration:underline;text-underline-offset:4px;transition:color 0.25s;}
header .contact a:hover svg {rotate:10deg;scale:1.5;translate:-3px;fill:#99F;transition:rotate 0.25s, scale 0.25s, translate 0.25s, fill 0.25s;}

header .socials a {padding:0.5rem;border:1px solid;background-color:white}
header .socials a:hover {filter:invert(1) grayscale(1) brightness(2);transition:0.5s filter, 0.25s scale;scale:1.25;}


main .container {padding-block:8rem;scroll-margin-top:8rem}
main :is(h3,p,ul) {width:50%; margin-block:1.5rem;margin-left:auto;}
main p {text-wrap:pretty;}
main :is(p,li) {color:var(--color2);text-align:justify;hyphens:auto;-webkit-hyphens:auto;}
main :is(p,li):last-of-type {margin-bottom:0}
main h3 {font-size:1.75rem;font-weight:300;line-height:1.25;margin-bottom:1rem;}
main :is(h1,h2) {position:absolute;width:40%; margin-top:2rem;line-height:1.25;text-align:center;text-wrap:balance;}
main h1 {font-size:2rem;font-weight:800;}
main h2 {font-size:1.5rem;font-weight:800;}
main blockquote {position:absolute;width:40%;padding:3rem; background:#BBB;border:1px solid;border-radius:1rem;box-shadow:0 16px 6px -8px #0002;translate:0 -0.75rem;rotate:-3deg;scale:0.75; text-align:center;text-wrap:balance;line-height:1.25;color:#FFF;font-size:1.75rem;font-style:italic;}

footer {position:relative;z-index:2;height:100lvh;display:grid;place-content:center; background:url(images/footer-bg.webp?v=2) no-repeat center center /cover;}
footer .line {width:fit-content;margin:0.5rem auto}
footer a {display:block;line-height:1.25;color:inherit;text-decoration:none;font-size:1.15rem;text-align:center}
footer img.logo {height:8rem;}

@media (max-width:1024px) {
/* MOBILE HEADER */
    body{padding-top:8rem}
    header {position:fixed;top:0;left:0;width:100%;padding-inline:0;margin-inline:0}    
    header > div.container {flex-direction:column}    
    header > div.container > .contact {display:flex;gap:0.5rem; position:absolute;top:4rem;right:1rem}    
    header > div.container > .contact .gap-4 {gap:0.5rem}    
    header > div.container.flex.middle {align-items:unset;padding-bottom:0.5rem}    
    header > div.container > .contact .descr {display:none}    
    header > div.container > :is(.contact,.socials)  a {display:grid;place-content:center;padding:0.5rem;border:1px solid}    
    header > div.container > .socials {position:absolute;top:1rem;right:1rem}
/* MOBILE BANNER */
    .banner {height:40vh;background: no-repeat center center /cover scroll;}
    .banner:first-of-type {height:50vh;;}
    .banner.short {height:15rem}
/* MOBILE BODY */
    main .container {padding-block:2rem;}
    main :is(h3,p,ul) {width:unset; margin-block:1.5rem;margin-left:unset;}
    main :is(p,li) {font-size:1.33rem;}
    main .horizontal-list li {font-size:1.15rem}
    svg.head-icon {height:unset; margin:0;padding:0;}
    main :is(h1,h2) {position:static;width:unset;margin:0; padding-block:1rem;border-block:1px solid; text-align:unset;}
    main h1 {font-size:2.5rem;font-variation-settings: "wdth" 75;}
    main h2 {font-size:2rem;font-variation-settings:"wdth" 75;hyphens:auto;-webkit-hyphens:auto;}
    main blockquote {position:static;width:100%;max-width:400px;margin:2rem auto;}
    main section.container .scroll-back.button {margin:2rem auto;translate:0 0;}

}