html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
}

/* [TODO]: Remove unused vars at the end */
:root {
    --font-family-main-1: 'Inter';
    --font-family-main-2: 'Lexend';
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-7: 32px;
    --spacing-8: 40px;
    --spacing-9: 48px;
    --spacing-10: 64px;
    --spacing-11: 80px;
    --spacing-12: 96px;
    --font-size-1: 14px;
    --font-size-2: 16px;
    --font-size-3: 18px;
    --font-size-4: 20px;
    --font-size-5: 24px;
    --font-size-6: 30px;
    --font-size-7: 36px;
    --font-size-8: 48px;
    --line-height-1: 20px;
    --line-height-2: 22px;
    --line-height-3: 24px;
    --line-height-4: 30px;
    --line-height-5: 32px;
    --line-height-6: 38px;
    --line-height-7: 48px;
    --line-height-8: 60px;
    --dev-blue-50: #F6F8FD;
    --dev-blue-100: #EAECF0;
    --dev-blue-200: #D6D8E0;
    --dev-blue-300: #C1C5D1;
    --dev-blue-400: #989EB2;
    --dev-blue-500: #6F7793;
    --dev-blue-600: #5A6483;
    --dev-blue-700: #465074;
    --dev-blue-800: #313D64;
    --dev-blue-900: #273150;
    --baby-eyes-50: #F7FBFF;
    --baby-eyes-100: #F0F8FF;
    --baby-eyes-200: #E0EFFF;
    --baby-eyes-300: #B8D8FF;
    --baby-eyes-400: #8FBEFF;
    --baby-eyes-500: #66A1FF;
    --baby-eyes-600: #4C7DD9;
    --baby-eyes-700: #365DB3;
    --baby-eyes-800: #23418C;
    --baby-eyes-900: #182C66;
    --cat-yellow-50: #FFFFE6;
    --cat-yellow-100: #FFFCA8;
    --cat-yellow-200: #FFF780;
    --cat-yellow-300: #FFEE57;
    --cat-yellow-400: #FFE32E;
    --cat-yellow-500: #FED304;
    --cat-yellow-600: #D9AD00;
    --cat-yellow-700: #B38900;
    --cat-yellow-800: #8C6700;
    --cat-yellow-900: #664700;
    --orange-peel-50: #FFFAED;
    --orange-peel-100: #FFECC4;
    --orange-peel-200: #FFDC9C;
    --orange-peel-300: #FFC973;
    --orange-peel-400: #FFB44A;
    --orange-peel-500: #FF9A22;
    --orange-peel-600: #D97811;
    --orange-peel-700: #B35905;
    --orange-peel-800: #8C3F00;
    --orange-peel-900: #662B00;
    --not-magenta-50: #FFF0F1;
    --not-magenta-100: #FFDBE1;
    --not-magenta-200: #FFB3C1;
    --not-magenta-300: #FF8AA3;
    --not-magenta-400: #FC6087;
    --not-magenta-500: #EF356B;
    --not-magenta-600: #C92257;
    --not-magenta-700: #A31446;
    --not-magenta-800: #7D0935;
    --not-magenta-900: #570527;
    --utility-red-50: #FFF2F0;
    --utility-red-100: #FFDCD6;
    --utility-red-200: #FFB6AD;
    --utility-red-300: #FF8D85;
    --utility-red-400: #F25C57;
    --utility-red-500: #E62E2E;
    --utility-red-600: #BF1D22;
    --utility-red-700: #990F18;
    --utility-red-800: #730611;
    --utility-red-900: #4D030D;
    --tick-green-50: #EDFCF2;
    --tick-green-100: #E1F0E6;
    --tick-green-200: #C1E3CD;
    --tick-green-300: #94D6AD;
    --tick-green-400: #6BC992;
    --tick-green-500: #46BC7B;
    --tick-green-600: #309662;
    --tick-green-700: #1E7049;
    --tick-green-800: #104A30;
    --tick-green-900: #072418;
    --mouse-gray-50: #F7F8F8;
    --mouse-gray-100: #E7E9E9;
    --mouse-gray-200: #D8DBDB;
    --mouse-gray-300: #C0C5C5;
    --mouse-gray-400: #B0B6B6;
    --mouse-gray-500: #8D9292;
    --mouse-gray-600: #585B5B;
    --mouse-gray-700: #353737;
    --mouse-gray-800: #232424;
    --mouse-gray-900: #121212;
    --accent-turqoise-50: #DFFFF8;
    --accent-turqoise-100: #9FFFE4;
    --accent-turqoise-200: #47E7C1;
    --accent-turqoise-300: #36D7B1;
    --accent-turqoise-400: #48B89E;
    --accent-turqoise-500: #2B957C;
    --accent-turqoise-600: #117961;
    --accent-purple: #F2EBFF;
    --accent-salamon-50: #FF8286;
    --accent-salamon-100: #FD5B60;
    --accent-magenta-50: #DA094A;
    --accent-magenta-100: #BD0740;
    --dark-mode-purple-50: #494984;
    --dark-mode-purple-100: #363665;
    --dark-mode-purple-200: #26264A;
    --dark-mode-purple-300: #1A1A37;
    --dark-mode-purple-400: #161632;
    --dark-mode-purple-500: #13132B;
    --dark-mode-purple-600: #090922;
}

section {
    padding: var(--spacing-12) 0;
    overflow: hidden;
    position: relative;
}

.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.background-layer.bg-dark-1 {
    background-color: var(--dark-mode-purple-300);
}

.background-layer.bg-dark-2 {
    background-color: #13132B;
}

.background-layer.bg-dark-3 {
    background-color: #161632;
}

.background-layer.bg-dark-4 {
    background-color: #26264A;
}

.background-layer.dark-curved-lines {
    background: url('../assets/images/curved-lines-dark-blue.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
}

.background-layer.navbar-blob {
    background-image: url('../assets/images/navbar_logo_blob.svg');
    background-position: -50px 0px;
    background-repeat: no-repeat;
    background-size: 300px;
}

.bottom-background {
    top: auto;
    bottom: 0;
}

.bottom-background.see-bottom {
    background: url('../assets/images/home/contact-see-bottom.svg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100%;
}

.section-content-container {
    position: relative;
    height: 100%;
}

.wave-separator-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-bottom: -1px;
}

.wave-separator-container img {
    width: 100%;
}

.main-button {
    padding: var(--spacing-3, 8px) var(--spacing-6, 20px);
    border-radius: 40px;
    font-family: var(--font-family-main-1);
    font-size: var(--font-size-3);
    font-weight: 600;
    text-align: center;
    border: none;
}

.main-button i {
    margin-right: var(--spacing-3);
}

.main-button.magenta-bg {
    color: white;
    background-color: var(--accent-magenta-50);
}

.main-button.magenta-bg:hover {
    background-color: var(--accent-magenta-100);
}

.main-button.magenta-bg:focus {
    background-color: var(--accent-magenta-50);
}

.title-container {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: var(--spacing-2);
    margin-right: var(--spacing-2);
}

.title-main {
    color: white;
    font-family: var(--font-family-main-2);
    font-size: 42px;
    line-height: 50px;
    letter-spacing: -0.84px;
    margin-bottom: var(--spacing-5);
    font-weight: bold;
}

.title-sub {
    color: var(--dev-blue-200);
    font-size: var(--font-size-4);
    line-height: var(--line-height-4); 
}

.title-container .description a {
    color: var(--cat-yellow-600);
    font-weight: 600;
    text-decoration: none;
}

.title-container .description a:hover {
    color: var(--cat-yellow-500);
}

.title-highlight {
    color: var(--accent-salamon-100);
}

.left-sided-title-container .description {
    color: var(--dev-blue-200);
    font-family: var(--font-family-main-1);
    font-size: var(--font-size-2);
    line-height: var(--line-height-3);
    margin-bottom: var(--spacing-8);
    text-align: left;
}

/* Labels */
.rounded-label {
    border-radius: 40px;
    align-items: center;
    display: flex;
}

.label-type-1 {
    padding: 2px 10px;
    border-radius: 20px;
    border: 1.5px solid var(--accent-salamon-50);
    color: white;
}

.title-label {
    display: flex;
    background: var(--baby-eyes-100);
    padding: var(--spacing-1) var(--spacing-4);
    margin-bottom: var(--spacing-6);
    justify-content: center;
    color: var(--dev-blue-900);
    text-align: center;
    font-family: var(--font-family-main-1);
    font-size: var(--font-size-4);
    font-weight: 600;
    line-height: var(--line-height-3);
}

.pile-type-1 {
    border-radius: 40px;
    display: flex;
    padding: var(--spacing-2, 4px) var(--spacing-5, 16px);
    align-items: center;
    color: #FFF;
    text-align: center;
    font-family: var(--font-family-main-1);
    font-size: 20px;
    font-style: var(--font-size-4);
    font-weight: 600;
    line-height: 30px;
}

.pile-type-2 {
    background: var(--dev-blue-600);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: 40px;
    color: white;
    text-align: center;
    font-family: var(--font-family-main-1);
    font-size: var(--font-size-1);
    font-weight: 500;
}

.pile.orange-bg {
    background-color: #FE7624;
}

.pile.purple-bg {
    background-color: #473CBF;
}

.pile.magenta-bg {
    background-color: #FA256B;
}

.pile.blue-1-bg {
    background-color: var(--dev-blue-600);
}

/* Navbar */
header {
    color: white;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
  }

  .logo {
    font-size: 1.5em;
  }

  nav {
    display: flex;
  }

  nav a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    font-family: var(--font-family-main-1);
    font-size: var(--font-size-3);
    font-weight: 600;
    line-height: var(--line-height-2);
  }

  nav a:hover {
    color: var(--accent-salamon-100);
  }

  nav a:focus {
    color: var(--accent-salamon-100);
  }

  .hamburger-menu-button {
    display: none;
    color: white;
    background: none;
    border: none;
    padding: 10px 15px;
    font-size: 1.5em;
    cursor: pointer;
    font-weight: bold;
  }

  .hamburger-only {
    display: none;
  }

  @media (max-width: 768px) {
    nav {
      display: none;
      flex-direction: column;
      width: 100%;
      position: absolute;
      top: 60px;
      left: 0;
      background-color: white;
      text-align: center;
      margin-top: 12px;
    }

    nav a {
      display: block;
      border-bottom: 1px solid var(--dark-mode-purple-200);
      background-color: var(--dark-mode-purple-300);
      padding: var(--spacing-6) var(--spacing-4);
      font-size: 18px;
      font-weight: bold;
    }

    .hamburger-menu-button {
      display: block;
    }

    .hamburger-only {
        display: block;
    }
  }

  @media (min-width: 769px) and (max-width: 1024px) {
    .normal-button {
      display: block;
    }

    .hamburger-menu-button {
      display: none;
    }
  }

  /* Styles when scrolled down */
  body.scrolled header {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    background-color: var(--dark-mode-purple-200);
  }

/* Case study card */
.case-study-link {
    text-decoration: none;
}

.case-study-card {
    border-radius: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.case-study-card .top-container {
    text-align: center;
    border-radius: 20px 20px 0px 0px;
    position: relative;
    height: 100%;
    width: 100%;
}

.case-study-card .top-container .curved-line-container img {
    max-height: 100%;
    max-width: 90%;
}

.case-study-card .top-container .image-container {
    position: relative;
}

.case-study-card .top-container .image-container img {
    max-width: 90%;
}

.case-study-card .top-container.bg-blue {
    background: #E7EDF8;    
}

.case-study-card .top-container.bg-magenta {
    background: #F16D99;    
}

.case-study-card .top-container.bg-yellow {
    background: #FFCB47;    
}

.case-study-card .content-container {
    display: flex;
    padding: var(--spacing-5);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3);
    align-self: stretch;
    border-radius: 0px 0px 20px 20px;
    border: 1px solid #494A7F;
    background: #303151;
}

.case-study-card .content-container .title {
    color: white;
    font-family: var(--font-family-main-2);
    font-size: var(--font-size-5);
    line-height: var(--line-height-5);
    font-weight: bold;
}

.case-study-card .content-container .description {
    color: var(--dev-blue-200);
    font-family: var(--font-family-main-1);
    font-size: var(--font-size-2);
    line-height: var(--line-height-3);
    margin-bottom: var(--spacing-4); 
}

.case-study-card .content-container .pile-container {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    gap: 4px var(--spacing-2, 4px);
    align-self: stretch;
    flex-wrap: wrap;
}

/* Base card */
.base-card {
    display: flex;
    padding: var(--spacing-7);
    justify-content: space-between;
    align-items: center;
    border-radius: 20px;
    background: #242446;
    backdrop-filter: blur(25px);
}

.base-card .icon-container {
    margin-right: var(--spacing-7);
}

.base-card .icon-container img {
    max-width: 100px;
    max-height: 100px;
}

.base-card .description-container .title {
    color: white;
    font-family: var(--font-family-main-2);
    font-size: var(--font-size-5);
    line-height: var(--line-height-5);
    font-weight: 500;
}

.base-card .description-container .description {
    margin: var(--spacing-2) 0;
    color: var(--dev-blue-200);
    font-size: var(--font-size-2);
    line-height: var(--line-height-3);
    margin-bottom: var(--spacing-6);
    max-width: 388px;
}

.base-card .description-container .label-container {
    display: flex;
    gap: var(--spacing-3);
    align-self: stretch;
    flex-wrap: wrap;
}

/* Base card 2*/
.base-card-2 {
    display: flex;
    padding: var(--spacing-7) var(--spacing-6);
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-8, 32px);
    align-self: stretch;
    border-radius: 20px;
    border: 1px solid #494A7F;
    background: #242446;
    backdrop-filter: blur(25px);
}

.base-card-2 .title {
    color: white;
    text-align: center;
    font-family: var(--font-family-main-2);
    font-size: var(--font-size-5);
    line-height: var(--line-height-5);
    font-weight: bold;
}

.base-card-2 .description {
    color: var(--dev-blue-200);
    font-family: var(--font-family-main-1);
    font-size: var(--font-size-2);
    line-height: var(--line-height-3);
}

/* Footer */
footer {
    display: flex;
    padding: var(--spacing-9) 0;
    justify-content: space-between;
    align-items: center;
    color: white;
    background: var(--dark-mode-purple-600)
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-section .title {
    display: flex;
    font-family: var(--font-family-main-1);
    font-size: var(--font-size-5);;
    font-weight: 600;
}


.footer-section .content-container .content-item {
    display: flex;
}

.footer-section .content-container .content-item i {
    margin-right: 8px;
}

.footer-section .content-container .content-item .label {
    font-family: var(--font-family-main-1);
    font-size: var(--font-size-3);;
}

.footer-logo {
    width: 110px;
}

.footer-media-link {
    color: white;
    text-decoration: none;
}