@charset "utf-8";

/*
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
*/

@font-face {
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url('../Fonts/NotoSans-Regular.ttf') format('truetype');
}

@font-face {
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url('../Fonts/NotoSans-Medium.ttf') format('truetype');
}

@font-face {
   font-family: 'Noto Sans';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('../Fonts/NotoSans-Bold.ttf') format('truetype');
}

:root {
   --color-canvas: white;
   --color-text-base: hsl(0, 0%, 10%);
   --color-accent-base: teal;
   --color-accent-deco: steelblue;
   --font-size-base: clamp(1rem, 0.6875rem + 1vw, 1.25rem);
   --spacer-y: 0.75rem;
   --spacer-x: 2vw;
   --border-radius: var(--spacer-y);
}

body {
   font-family: sans-serif;
   line-height: 1.4;
   font-size: var(--font-size-base);
   color: var(--color-text-base);
   font-family: "Noto Sans", sans-serif;
   font-optical-sizing: auto;
   font-weight: 400;
   font-style: normal;
   font-variation-settings: "wdth" 100;
   background-color: hsl(from var(--color-accent-deco) h s l / 0.4);
}

* {
   box-sizing: border-box;
}

h1,
h2,
h3 {
   font-weight: 700;
}

header,
main,
footer {
   padding: 1rem 4vw;
}

a {
   position: relative;
   text-decoration: none;
   color: var(--color-canvas);
}

a:after {
   content: '';
   position: absolute;
   width: 100%;
   transform: scaleX(0);
   height: 3px;
   bottom: -6px;
   left: 0;
   background-color: color-mix(in srgb, var(--color-accent-base) 40%, var(--color-canvas));
   transform-origin: bottom left;
   transition: transform 0.25s ease-out;
}

a:hover:after {
   transform: scaleX(1);
   transform-origin: bottom left;
}

article h4 {
   margin-bottom: 0;
}

article h4+p {
   margin-top: 0;
}

header {
   background-size: 100% 100%;
   background-position: 0px 0px;
   background-image: linear-gradient(50deg, var(--color-accent-base) 0%, var(--color-accent-deco) 100%);
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 4vw;
}

div[class*="container"] {
   position: relative;
}

header div[class*="container"] {
   flex-grow: 1;
   padding-bottom: 2lh;
   margin-bottom: -2lh;
}

header div[class*="claim"] {
   margin-top: 1lh;
   color: var(--color-canvas);
}

header div[class*="cta"] {
   color: var(--color-canvas);
}

.glass-card {
   background-color: hsl(from var(--color-accent-deco) h s 7% / 0.1);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-radius: var(--border-radius);
   box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
   border: 1px solid hsl(from var(--color-accent-deco) h 80% 60% / 0.3);
   color: var(--color-canvas);
   padding: 0 2vw;
}

main {
   padding-top: 2lh;
   background-color: var(--color-canvas);
}

section {
   margin: 2rem 0;
}

section div.content__container {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 1rem 1rem;
}

section article {
   border: 1px solid hsl(from var(--color-accent-base) h s l / 0.3);
   border-radius: var(--border-radius);
   flex-grow: 1;
   padding: 0 4rem 0 2vw;
   position: relative;
   min-height: 2.8lh;
   background-size: 100% 100%;
   background-position: 0px 0px;
   background-image: linear-gradient(170deg, hsl(from var(--color-accent-base) h s l / 0.05) 0%, transparent 35%);
}

@media screen and (min-width: 50rem) {
   section div.content__container {
      flex-direction: row;
   }

   section article {
      flex-basis: 48%;
   }
}

@media screen and (min-width: 90rem) {
   section article {
      flex-basis: 21%;
   }
}

article svg,
header div[class*="cta"] svg {
   display: block;
   position: absolute;
}

.flip-icon svg {
   -webkit-transform: scaleX(-1);
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   transform: scaleX(-1);

   filter: FlipH;
   -ms-filter: "FlipH";
}

article svg {
   fill: var(--color-accent-deco);
   opacity: 0.5;
   width: 4rem;
   bottom: 0.4rem;
   right: 0.4rem;
}

header div[class*="cta"] svg {
   fill: var(--color-canvas);
   opacity: 0.2;
   top: 0.5rem;
   right: 0.5rem;
   width: 6rem;
}

footer {
   background-size: 100% 100%;
   background-position: 0px 0px;
   background-image: linear-gradient(51deg, var(--color-accent-base) 0%, var(--color-accent-deco) 100%);
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   gap: 4vw;
   color: var(--color-canvas);
   font-size: 1rem;
}