/*=========== TABLE OF CONTENTS ===========
1. CSS Variables
2. Common CSS
==========================================*/

/*-------------------------------------
  1. CSS Variables
--------------------------------------*/
:root {
    /*------Color variables------*/
    --amber_400_99: #ffc12299;
    --black_60_: #00000099;
    --black_900: #0d0d0d;
    --black_900_01: #000000;
    --black_900_28: #00000028;
    --black_900_3f: #0000003f;
    --black_900_51: #00000051;
    --black_900_7f: #0000007f;
    --blue_gray_100: #cfcfcf;
    --blue_gray_800: #31465a;
    --blue_gray_800_3f: #31465a3f;
    --blue_gray_800_e5: #31465ae5;
    --cyan_400: #2ba8d2;
    --deep_orange_100_99: #fab8b899;
    --deep_orange_200: #ffafaf;
    --futural_green: #00a8a8;
    --gray_100: #f0f4f6;
    --gray_200: #f2f0eb;
    --gray_600: #79747e;
    --light_green_400_99: #a1e17099;
    --red_400_cc: #e75252cc;
    --teal_50: #e3f0f4;
    --teal_a400: #21d0b2;
    --white_a700: #ffffff;
    --yellow_800: #e8b722;
  
    /*------Border radius variables------*/
    --radius-xs: 4px;
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 10px;
  
    /*------Spacing variables------*/
    --space-xs: 10px;
    --space-sm: 12px;
    --space-md: 14px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 62px;
  }
  
  /*-------------------------------------
    2. Common CSS
  --------------------------------------*/
  .header__top {
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
  }
  
  @media only screen and (max-width: 1050px) {
    .header__top {
      flex-direction: column;
    }
  }
  
  .header__logo {
    height: 54px;
    margin-bottom: 8px;
    width: 214px;
    object-fit: contain;
  }
  
  @media only screen and (max-width: 550px) {
    .header__logo {
      width: 160px;
      height: auto;
    }
  }
  
  .header__menu {
    gap: var(--space-3xl);
    align-self: flex-end;
    display: flex;
    align-items: flex-start;
  }
  
  @media only screen and (max-width: 1050px) {
    .header__menu {
      align-self: auto;
    }
  }
  
  @media only screen and (max-width: 550px) {
    .header__menu {
      flex-direction: column;
      gap: var(--space-lg);
    }
  }
  
  .header__menu-item {
    gap: var(--space-md);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .header__menu-divider {
    height: 4px;
    background-color: var(--cyan_400);
    width: 100px;
  }
  
  @media only screen and (max-width: 550px) {
    .header__menu-divider {
      width: 80px;
    }
  }
  
  .header__menu-link {
    color: var(--blue_gray_800) !important;
  }