@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
  font-family: 'Yorkville';
  src: url("../src/fonts/Yorkville.woff"),
    url("../src/fonts/Yorkville.ttf");
  font-weight: 400;
  font-style: normal;
}

@keyframes linear-carousel {
  0% {
    background-position: 0px center;
  }
  100% {
    background-position: -1920px center;
  }
}
@keyframes ig-carousel {
  0% {
    background-position: 0px center;
  }
  100% {
    background-position: 200% center;
  }
}
@keyframes scroll-cta {
  0% {
    transform: translateY(0) rotate(45deg);
  }
  50% {
    transform: translateY(0.5em) rotate(45deg);
  }
  100% {
    transform: translateY(0) rotate(45deg);
  }
}

:root {
  /* Colors */
  --ag-bg: #fbfafa;
  --ag-blue: #12204c;
  --ag-smoke: #edeff1;
  --ag-gray: #8289a0;
  --ag-lightblue: #23c8fa;
  --oar-white: #fff;
  --oar-smoke: #f7f8f9;
  --oar-lightgray: #f2f2f2;
  --oar-midgray: #929090;
  --oar-darkgray: #433f40;
  --oar-translucent: color-mix(in lab, var(--ag-bg), transparent 75%);
  --oar-red: #e23404;
  --oar-blue: #1c7b97;
  --oar-green: #0e9843;
  --oar-gold: #f8bb18;
  /* Properties */
  --courtain-off: 0px 0px 0px max(100vh, 100vw) transparent;
  --courtain-on: 0px 0px 0px max(100vh, 100vw) #0005;
  --default-backdrop: blur(10px);
  --default-bezier: cubic-bezier(0.4, 0, 0.2, 1);
  --default-gap: 1.25em;
  --default-radius: 1em;
  --default-shadow: color-mix(in lab, var(--ag-blue), transparent 90%);
  --doc-min-padding: 1.75rem;
  --doc-margin: calc(calc(100% - var(--doc-width)) / 2);
  --doc-width: calc(min(1440px, 100%) - var(--double-padding));
  --double-padding: calc(var(--doc-min-padding) * 2);
  --drop-shadow: drop-shadow(0px 0.2em 0.5em var(--default-shadow));
  --header-height: 110px;
  --small-radius: 0.5em;
}

*::selection {
  background-color: var(--oar-blue);
  color: var(--oar-white);
}
body {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  background-color: var(--ag-bg);
  background-blend-mode: multiply;
  background-repeat: no-repeat;
  color: var(--ag-blue);
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
body::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../src/footer_background.webp");
  background-size: 100% auto;
  background-position: bottom;
  background-repeat: no-repeat;
  z-index: -1;
}

button, input, select, textarea {
  font-family: inherit;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 0.9em;
  color: inherit;
}
button, .button {
  position: relative;
  justify-self: left;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  border: 0px;
  border-radius: 10em;
  background-color: transparent;
  padding: 0.8em 2em;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s var(--default-bezier), filter 0.2s;
}
.bordered:where(button, .button) {
  border: solid 1px currentColor;
}
:where(button, .button):has(.material-symbols-outlined:first-child) {
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  padding-left: 0.3em;
}
:where(button, .button):has(.material-symbols-outlined:last-child) {
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  padding-right: 0.3em;
}
  :where(button, .button) > .material-symbols-outlined {
    padding: 0.35em;
    border-radius: 3em;
    background-color: color-mix(currentColor, transparent 90%);
    font-size: 1.5em !important;
  }
figure {
  margin: 0px;
}
footer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 0.8rem;
  background-color: var(--oar-translucent);
  backdrop-filter: var(--default-backdrop);
}
  footer > div {
    width: 100%;
    padding: 0 var(--doc-margin);  
  }
h2 {
  font-family: 'Yorkville', sans-serif;
  font-size: 3em;
  margin: 1.2rem 0;
  font-weight: 400;
  line-height: 1em;
}
h3 {
  font-family: 'Yorkville', sans-serif;
  font-size: 1.75em;
  margin: 1rem 0;
  font-weight: 400;
  line-height: 1em;
}
h3 + h4 {
  margin-top: 0.2rem;
}
h4 {
  font-family: 'Yorkville', sans-serif;
  font-size: 1.3em;
  margin: 1rem 0;
  font-weight: 400;
  line-height: 1em;
  color: var(--ag-gray);
}
h5 {
  font-size: 1em;
  font-weight: 700;
}
header, main, footer {
  position: relative;
  width: 100vw;
}
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea {
  width: 100%;
  outline: 0px;
  border-radius: var(--small-radius);
  border: solid 1px var(--oar-white);
  background-color: var(--oar-white);
  padding: 0.75rem 1rem;
  box-sizing: border-box;
  color: var(--ag-gray);
  resize: none;
  filter: var(--drop-shadow);
  transition: border-color 0.2s ease;
}
.bordered:is(input[type="text"],
input[type="email"],
input[type="password"],
textarea) {
  background-color: transparent;
  color: var(--oar-white);
}
:where(input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea):not(.bordered):focus {
  border-color: var(--ag-blue);
}

main {
  min-height: 80vh;
}
main,
main > div {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  /* overflow-x: hidden; */
}
  main > div {
    padding: 0 var(--doc-min-padding);
  }
  main > *:first-child {
    padding-top: var(--header-height);
  }
  main > section,
  main > div > section,
  .main-section {
    display: flex;
    flex-direction: column;
    gap: var(--double-padding);
    width: 100%;
    padding: 5.2rem var(--doc-margin);
  }

  .alternate-cards .gradient-card:nth-child(even) {
    grid-template-columns: 1fr 40%;
    grid-template-areas:
      "cover content";
  }
  .alternate-cards .gradient-card:nth-child(even) .card-cover {
    justify-content: flex-start;
  }
  .alternate-cards .gradient-card:nth-child(even) .cover-icon {
    background-image: radial-gradient(circle farthest-side at top left, var(--ag-blue) 50%, transparent);
  }
.at::before {
  content: "@";
  display: inline-block;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
}
.background-node {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  z-index: -1;
}
.big-carousel {
  height: min(600px, 75vh);
}
  .big-carousel > items {
    --cols: 1;
    --gap: 0px;
    overflow-x: scroll;
    overflow-y: visible;
    padding-bottom: 3.5em;
    scroll-snap-type: none;
  }
  .big-carousel item {
    --x-aberration: calc(3rem + calc(var(--doc-margin) * 2));
    --scale: 0.85;
    --blur: 0.2rem;
    padding: 0 var(--doc-margin);
    color: white;
    scroll-snap-align: center;
    opacity: 0.7;
    filter: blur(var(--blur));
    transform: translateX(var(--x-aberration)) scale(var(--scale));
    transition: transform 0.25s ease, opacity 0.25s ease, filter 0.25s ease;
  }
    .big-carousel item .card {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: flex-start;
      width: 100%;
      height: 100%;
      padding: var(--default-gap);
      background-image: url('../src/placeholder.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
  .big-carousel item.in-view {
    opacity: 1;
    filter: none;
    transform: scale(1);
    z-index: 2;
  }
  .big-carousel item.in-view ~ item {
    opacity: 0.7;
    filter: blur(var(--blur));
    transform: translateX(calc(var(--x-aberration) * -1)) scale(var(--scale));
  }
.big-picture {
  min-height: 70vh;
  padding: var(--doc-min-padding) !important;
}
  .big-picture > section {
    align-items: flex-end;
    padding: var(--doc-margin);
  }
.blue {
  color: var(--ag-blue);
}
.blue-bg {
  background-color: var(--ag-blue);
  color: white;
}
.blue-gradient {
  padding: var(--double-padding) var(--doc-margin);
  color: white;
}
.blue-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, color-mix(in lab, var(--ag-blue), transparent 15%) 30%, transparent 90%);
}
.bottom-margin {
  margin-bottom: var(--double-padding);
}
.card {
  position: relative;
  border-radius: var(--default-radius);
  overflow: hidden;
}
.card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--doc-min-padding);
}
.card-cover {
  grid-area: cover;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
}
  .card-cover img {
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  .card-cover > .cover-icon {
    --ratio: 8rem;
    position: absolute;
    display: flex;
    justify-content: inherit;
    align-items: inherit;
    height: var(--ratio);
    width: var(--ratio);
    padding: var(--doc-min-padding);
    font-size: 2rem;
    color: var(--oar-white);
    background-image: radial-gradient(circle farthest-side at top left, var(--ag-blue) 50%, transparent);
    opacity: 0.7;
    z-index: 2;
    font-variation-settings:
      'FILL' 0,
      'wght' 200,
      'GRAD' 0,
      'opsz' 24
  }
.dd-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0.75em 0.9em;
}
  .dd-header::after {
    content: "arrow_drop_down";
    font-family: 'Material Symbols Outlined';
    font-size: 1.2em;
    transition: transform 0.3s ease;
    transform: none;
    transform-origin: center;
  }
  .dd-header[active]::after {
    transform: rotate(180deg);
  }
.dd-content {
  padding: 0 0.9em;
}
.deep-blue {
  padding-bottom: 5em;
  background-color: var(--ag-blue);
  background-image: url('../src/bridge-background.jpg');
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  color: white;
}
.digital-icon {
  --ratio: 4rem;
  color: var(--ag-lightblue);
  height: var(--ratio);
  width: var(--ratio);
}
.digital-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--default-gap);
  padding: var(--double-padding) var(--doc-min-padding);
  text-align: center;
  background-color: color-mix(in lab, var(--oar-blue), transparent 93%);
}
.focus-width {
  width: min(100%, 720px);
}
.form-aside {
  width: 60%;
}
.gray {
  color: var(--ag-gray);
}
.hz-card {
  display: grid;
  grid-template-columns: 40% 1fr;
  grid-template-areas:
    "image content";
}
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
.primary-btn:hover {
  transform: scale(1.05);
  filter: drop-shadow(0px 2px 0.5em #0005);
}
.red {
  color: var(--oar-red);
}
.red-bg {
  background-color: var(--oar-red);
  color: white;
}
.scroll-cta {
  --ratio: 0.8em;
  --border: 3px solid var(--ag-blue);
  display: block;
  width: var(--ratio);
  height: var(--ratio);
  margin-top: 1em;
  border-right: var(--border);
  border-bottom: var(--border);
  transform: rotate(45deg);
  transform-origin: center;
  animation: scroll-cta 1.5s infinite;
  border-radius: 2px;
}
.white-bg {
  background-color: white;
  color: var(--ag-blue);
  filter: var(--drop-shadow);
}
.gradient-card {
  display: grid;
  grid-template-columns: 40% 1fr;
  grid-template-rows: 1fr;
  grid-template-areas:
    "content cover";
  background-color: var(--oar-white);
}
  .gradient-card > .card-content {
    grid-area: content;
    box-shadow: 0px 0px 4em 5em var(--oar-white);
    z-index: 2;
  }
  .gradient-card > .card-cover {
    grid-area: cover;
    justify-content: flex-end;
  }
  .gradient-card .cover-icon {
    background-image: radial-gradient(circle farthest-side at top right, var(--ag-blue) 50%, transparent);
  }
.landscape-thumb {
  display: grid;
  grid-template-columns: min(250px, 35%) 1fr;
  grid-template-rows: 1fr;
  grid-template-areas:
    "cover  content";
}
.lightblue-bg {
  background-color: var(--ag-lightblue);
  color: white;
}
.ultra {
  font-size: 5.8em;
}
.upper-margin {
  margin-top: var(--double-padding);
}
.portrait-thumb {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 250px 1fr;
  grid-template-areas:
    "cover"
    "content";
}
.submerged {
  background-image: linear-gradient(to bottom, transparent 10%, var(--ag-blue) 50%);
  background-position: bottom;
}
.white {
  color: var(--oar-white);
}
.white-separator {
  background-image: linear-gradient(to bottom, var(--oar-white), transparent);
  background-size: 100% 60vh;
  background-repeat: no-repeat;
  background-position: top;
  filter: drop-shadow(0px -1.75em 1em color-mix(in lab, var(--ag-gray), transparent 95%));
}
.yorkville {
  font-family: 'Yorkville', sans-serif;
  font-weight: 400;
}

#contact-form input[name="filter"] {
  height: 0px;
  margin: 0px;
  padding: 0px;
  border: 0px;
  opacity: 0;
  pointer-events: none;
}
#copyright {
  background-color: var(--ag-blue);
  display: flex;
  justify-content: left;
  color: white;
  font-size: 0.7rem;
}
#faqq {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  gap: 0.5em;
}
#hamburger {
  --ratio: 2.75em;
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--ratio);
  width: var(--ratio);
  background-color: var(--oar-white) !important;
  color: var(--oar-darkgray) !important;
  filter: var(--drop-shadow);
  border-radius: 50%;
}
  #hamburger span {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #hamburger svg {
    height: 1.5em;
  }
  #hamburger rect {
    transform-origin: center;
    transition: transform 0.2s var(--default-bezier), y 0.3s var(--default-bezier) 0.2s;
  }
  #hamburger.times rect {
    transition: y 0.2s var(--default-bezier), transform 0.3s var(--default-bezier) 0.2s;
  }
  #hamburger.times rect:nth-child(2n+1){
    y: 11px;
    transform: rotate(45deg);
  }
  #hamburger.times rect:nth-child(2){
    transform: rotate(135deg);
  }
#ig-carousel {
  position: relative;
  display: block;
  height: auto;
  max-width: 100%;
  margin-bottom: 3em;
  background-image: url('../src/ig_carousel.png');
  background-repeat: repeat-x;
  background-size: 200% auto;
  background-position: 0% 0%;
  overflow-x: hidden;
  animation: ig-carousel 30s linear infinite;
  mask: linear-gradient(to right, #0000, #000 10%, #000 90%, #0000);
}
  #ig-carousel img {
    position: relative;
    height: auto;
    width: 200%;
    max-width: none !important;
    opacity: 0 !important;
  }
#main-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--default-gap);
  flex-wrap: wrap;
  padding: var(--double-padding) var(--doc-margin);
  background-color: var(--oar-transparent);
}
  #main-footer a {
    transition: color 0.2s var(--default-bezier);
  }
  #main-footer a:hover {
    color: var(--ag-blue);
  }
#main-header {
  position: fixed;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  top: 0px;
  height: var(--header-height);
  width: 100%;
  padding: var(--doc-min-padding);
  background-image: linear-gradient(to bottom, var(--oar-white), var(--oar-translucent));
  backdrop-filter: var(--default-backdrop);
  filter: drop-shadow(0px 0px 1.5em var(--default-shadow));
  z-index: 100;
}
#main-logo {
  height: 100%;
}
  #main-logo > img {
    height: 100%;
    width: auto;
  }
#main-nav {
  display: flex;
  align-items: center;
  gap: var(--double-padding);
  font-size: 0.9em;
}
  #main-nav nav {
    display: flex;
    align-items: center;
    gap: var(--doc-min-padding);
  }
#main-splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--header-height));
  width: 100%;
  text-align: center;
}
#nav-overlay-container {
  position: sticky;
  display: flex;
  justify-content: center;
  bottom: 0px;
  left: 0px;
  width: 100vw;
  height: auto;
  padding: var(--doc-min-padding);
  z-index: 9;
}
#networks {
  background-image:
    url('../src/posts-background.webp'), 
    linear-gradient(to bottom, transparent 10%, var(--ag-blue) 50%);
  background-size: contain;
  background-position: bottom;
  background-blend-mode: soft-light;
}
#oar-3d {
  display: block;
  background: transparent;
  width: 100%;
  height: 400px;
}
#scroll-top {
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s var(--default-bezier), transform 0.3s var(--default-bezier);
  pointer-events: none;
}
#scroll-top.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#sidebar-menu {
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.5em;
  top: 0px;
  left: 100%;
  height: 100vh;
  width: max-content;
  max-width: 70vw;
  padding: 8.5em calc(var(--doc-min-padding) + 1.5em) 8.5em var(--doc-min-padding);
  background-color: var(--oar-smoke);
  z-index: 99;
  box-shadow: var(--courtain-off);
  transition: transform 0.5s var(--default-bezier), box-shadow 0.5s ease-out;
}
#sidebar-menu.active {
  transform: translateX(-100%);
  box-shadow: var(--courtain-on);
}
  #sidebar-menu a {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--default-gap);
    padding: 0.6em 0;
  }
    #sidebar-menu a span {
      position: relative;
    }
    #sidebar-menu a span[data-notifications]:not([data-notifications="0"])::after,
    #sidebar-menu a span[data-messages]:not([data-messages="0"])::after {
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      top: -0.25em;
      right: -0.25em;
      height: 1em;
      width: 1em;
      padding: 0.2em;
      border-radius: 50%;
      background-color: var(--oar-red);
      color: var(--oar-white);
      font: initial;
      font-family: "Montserrat", sans-serif;
      font-size: 0.38em;
      font-optical-sizing: auto;
      font-weight: 500;
      font-style: normal;
    }
    #sidebar-menu a span[data-notifications]:not([data-notifications="0"])::after {
      content: attr(data-notifications);
    }
    #sidebar-menu a span[data-messages]:not([data-messages="0"])::after {
      content: attr(data-messages);
    }
    #sidebar-menu a > p {
      margin: 0;
    }
#sitemap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 5em;
}
  #sitemap > .sub {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2.5em;
  }
#universities-carousel {
  display: block;
  width: 100%;
  height: 350px;
  background-image: url('../src/brands_carousel.png');
  background-size: 1920px auto;
  background-repeat: repeat-x;
  background-position: 0px center;
  animation: linear-carousel 20s linear infinite;
}
#wa-bubble {
  --ratio: 4.5em;
  position: absolute;
  display: inline-flex;
  right: var(--doc-min-padding);
  bottom: var(--doc-min-padding);
  height: var(--ratio);
  width: var(--ratio);
  z-index: 10;
  filter: opacity(0.35) grayscale();
  transition: filter 0.2s ease-in-out;
}
#wa-bubble:hover {
  filter: none;
}

/* Custom elements */
carousel:not(:has(thumb:nth-child(3))) thumbnails {
  display: none !important;
}
  carousel thumbnails {
    --ratio: 0.5em;
    position: absolute;
    display: grid;
    grid-template-rows: 1fr;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    gap: calc(var(--default-gap) / 2);
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--ag-gray);
  }
    carousel thumbnails button {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Material Symbols Outlined';
      font-size: 1.3em;
    }
    carousel thumbnails button[type="prev"]::after {
      content: "chevron_left";
    }
    carousel thumbnails button[type="next"]::after {
      content: "chevron_right";
    }
  carousel thumb {
    display: block;
    height: var(--ratio);
    width: var(--ratio);
    border-radius: calc(var(--ratio) / 2);
    background-color: currentColor;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.6;
    transition: width 0.3s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.3s;
    cursor: pointer;
  }
  carousel thumb[active] {
    width: calc(var(--ratio) * 2.5);
    opacity: 1;
  }
div.__og-dialog {
  background-color: white !important;
  border-radius: var(--default-radius) !important;
}
.__og-dialog-btns {
  margin-top: 1em;
}
  .__og-dialog-btns button {
    background-color: var(--ag-blue);
    color: white;
    border-radius: 2em;
  }