html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
   scroll-behavior: smooth;
}

:root {
   /* Colors */
   --color-main: rgb(46, 49, 121);
   --color-main-opac-08: rgba(46, 49, 121, 0.08);
   --color-secondary: rgb(57, 163, 220);
   --color-white: rgb(255, 255, 255);
   --color-light-white: rgb(248, 249, 250);
   --color-white-opac-98: rgba(255, 255, 255, 0.98);
   --color-white-opac-7: rgba(255, 255, 255, 0.7);
   --color-black: rgb(0, 0, 0);
   --color-black-opac-8: rgba(0, 0, 0, 0.8);
   --color-black-opac-6: rgba(0, 0, 0, 0.6);
   --color-black-opac-4: rgba(0, 0, 0, 0.4);
   --color-black-opac-08: rgba(0, 0, 0, 0.08);
   --color-black-opac-05: rgba(0, 0, 0, 0.05);
   --color-black-opac-03: rgba(0, 0, 0, 0.03);
   --color-orange: rgb(255, 107, 53);
   --color-orange-opac-05: rgba(255, 107, 53, 0.05);
   --color-grey: rgb(139, 157, 195);
   --color-light-grey: rgb(240, 242, 245); 
   --color-light-grey-2: rgb(204, 215, 234);
   --color-light-grey-opac-62: rgba(240, 242, 245, 0.62);
   --color-dark-blue: rgb(10, 14, 39);
   --color-primary-gradient: linear-gradient(90deg, var(--color-main) 0%, var(--color-secondary) 100%);
   --color-hover-orange: rgba(255, 107, 53, 0.6);

   /* Fonts */
   --size-xxs: 8px;
   --size-xs: 10px;
   --size-s: 12px;
   --size-sm: 14px;
   --size-m: 16px;
   --size-ml: 18px;
   --size-l: 20px;
   --size-l-plus: 22px;
   --size-xl: 24px;
   --size-xl-plus: 28px;
   --size-xxl: 32px;
}

body {
   display: grid;
   background: var(--color-light-white);
   min-height: 100vh;
   font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
   grid-template-rows: 70px 1fr auto;
   grid-template-areas:
      "header"
      "main"
      "footer";
}

header {
   grid-area: header;
   height: 70px;
   background: var(--color-white-opac-98);
   backdrop-filter: blur(8px);
   text-transform: none;
   position: sticky;
   top: 0;
   z-index: 10;
   box-shadow: 0 1px 3px var(--color-black-opac-05);
   border-bottom: 1px solid var(--color-main-opac);
}

main {
   grid-area: main;
}

footer {
   grid-area: footer;
   text-align: center;
}

.container {
   width: 90% !important;
   margin: 0 auto;
}

@media (max-width: 768px) {
   .container {
      width: 95% !important;
   }
}