html {
  scroll-behavior: smooth; }

@font-face {
  font-family: 'assistant';
  src: url("../../fonts/assistant/Assistant-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'assistant';
  src: url("../../fonts/assistant/Assistant-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal; }

@font-face {
  font-family: 'assistant';
  src: url("../../fonts/assistant/Assistant-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal; }

@font-face {
  font-family: 'assistant';
  src: url("../../fonts/assistant/Assistant-ExtraBold.ttf") format("truetype");
  font-weight: 900;
  font-style: normal; }

.contact-us-selection {
  height: 640px;
  background-color: #E6E6E659;
  position: relative;
  height: 680px;
  font-family: "assistant"; }
  .contact-us-selection .contact-us-content {
    height: 640px;
    background-color: #fff;
    max-width: 1440px;
    width: 95vw;
    border-radius: 16px;
    margin: auto;
    position: absolute;
    z-index: 3;
    top: -80px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    text-align: center; }
    .contact-us-selection .contact-us-content h2, .contact-us-selection .contact-us-content h3 {
      color: #414141; }
    .contact-us-selection .contact-us-content h2 {
      font-size: 30px;
      font-weight: 700;
      margin-top: 100px;
      font-family: "assistant"; }
    .contact-us-selection .contact-us-content h3 {
      font-size: 24px;
      font-weight: 600;
      margin-top: 16px;
      font-family: "assistant"; }
    .contact-us-selection .contact-us-content .boxes-container {
      width: fit-content;
      margin: auto;
      margin-top: 80px;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-pack: center;
          justify-content: center;
      -ms-flex-align: center;
          align-items: center;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      gap: 24px; }
      .contact-us-selection .contact-us-content .boxes-container .box {
        width: 220px;
        height: 180px;
        border-radius: 16px;
        background-color: #F9F9F9;
        cursor: pointer;
        transition: all 0.5s;
        border: 1.5px solid transparent;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-align: center;
            align-items: center;
        gap: 18px;
        -ms-flex-direction: column;
            flex-direction: column;
        text-decoration: none; }
        .contact-us-selection .contact-us-content .boxes-container .box h4 {
          font-family: "assistant";
          font-size: 20px; }
        .contact-us-selection .contact-us-content .boxes-container .box:hover {
          border: 1.5px solid #D71323;
          color: #D71323;
          animation: hover 0.5s linear forwards; }
  .contact-us-selection .cbc-group-breadcrumbs {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 4;
    margin-inline-start: 0;
    padding-block: 0; }

.main-banner {
  height: 400px;
  background-position: right;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover; }
  .main-banner h1 {
    position: absolute;
    top: 50%;
    inset-inline-start: 10%;
    color: #D71323;
    font-size: 48px;
    font-weight: 700;
    font-family: "assistant"; }

@media only screen and (max-width: 450px) {
  .main-banner {
    height: 200px; }
    .main-banner h1 {
      bottom: 24px;
      top: unset;
      font-size: 36px;
      inset-inline-start: 5%; }
  .contact-us-selection {
    height: unset; }
    .contact-us-selection .contact-us-content {
      height: unset;
      padding: 72px 10px;
      width: 100%;
      position: static;
      transform: unset; }
      .contact-us-selection .contact-us-content h2 {
        font-size: 24px;
        margin-top: unset; }
      .contact-us-selection .contact-us-content h3 {
        font-size: 18px;
        margin-top: 8px; }
      .contact-us-selection .contact-us-content .boxes-container {
        margin-top: 32px;
        gap: 16px; }
        .contact-us-selection .contact-us-content .boxes-container .box {
          width: 164px;
          height: 180px; }
    .contact-us-selection .cbc-group-breadcrumbs {
      top: 24px;
      right: 24px; } }

@keyframes hover {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(-10%); }
  100% {
    transform: translateY(0); } }