/* global classes */

*,
:after,
:before {
  box-sizing: border-box;
}

:root {
  /* Basic Colors */
  --cl-black: #000000;
  --cl-white: #ffffff;

  /* Red */
  --cl-red: #f93e3e;

  /* Yellow */
  --cl-yellow: #ffc224;

  /* Green */
  --cl-green: #bbec53;
  --cl-green-extra-light: #F2FFD7;
  --cl-green-light: #d7f9ad;
  --cl-green-dark: #89bb1e;
  --cl-green-dark-2: #0D4A04;

  /* Grey */
  --cl-grey-1: #f8f8f9;
  --cl-grey-2: #f4f4f4;
  --cl-dark-grey: #454545;

  /* Purple Background */
  --cl-purple-light: #E8E8FF;
  --cl-purple: #DBDDFB;

  /* Blue Background */
  --cl-blue-light: #E8F1FF;
  --cl-blue: #D7E4F9;

  /* Pink Backgrounds */
  --cl-pink-light: #FFE8FA;
  --cl-pink: #FFCDCD;


  /* Alpha Colors */
  --ca-black-80: rgba(0, 0, 0, 0.8);
  --ca-black-70: rgba(0, 0, 0, 0.7);
  --ca-black-60: rgba(0, 0, 0, 0.6);
  --ca-black-50: rgba(0, 0, 0, 0.5);
  --ca-black-10: rgba(0, 0, 0, 0.1);
  --ca-white-80: rgba(255, 255, 255, 0.8);
  --ca-white-70: rgba(255, 255, 255, 0.7);
  --ca-white-30: rgba(255, 255, 255, 0.3);
  --ca-white-10: rgba(255, 255, 255, 0.1);
  --ca-dark-grey-60: rgba(69, 69, 69, 0.6);

  /* Backgrounds */
  --bg-layout: var(--cl-grey-2);
  --bg-white: var(--cl-white);
  --bg-white-10: var(--ca-white-10);
  --bg-white-30: var(--ca-white-30);
  --bg-dark: var(--cl-black);
  --bg-green: var(--cl-green);
  --bg-green-light: var(--cl-green-light);
  --bg-green-extra-light: var(--cl-green-extra-light);
  --bg-grey-1: var(--cl-grey-1);
  --bg-grey-2: var(--cl-grey-2);

  /* Borders */
  --border-white: var(--cl-white);
  --border-white-30: var(--ca-white-30);

  /* Typography */
  --text-default: var(--cl-black);
  --text-light: var(--ca-black-80);
  --text-xlight: var(--ca-white-70);
  --text-contrast: var(--cl-white);
  --text-accent: var(--cl-green);
  --text-accent-dark: var(--cl-green-dark);
  --text-accent-dark-2: var(--cl-green-dark-2);

  /* Font Families */
  --ff-euclid: "EuclidCircularA", Arial, sans-serif;
  --ff-text: var(--ff-euclid);

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Font Style */
  --fs-italic: italic;

  /* Heading Sizes */
  --title-h1-fz: 64px;
  --title-h1-lh: 72px;

  --title-h2-fz: 40px;
  --title-h2-lh: 50px;

  --title-h3-fz: 32px;
  --title-h3-lh: 36px;

  --title-h4-fz: 24px;
  --title-h4-lh: 32px;

  --title-h5-fz: 18px;
  --title-h5-lh: 24px;

  --title-h6-fz: 16px;
  --title-h6-lh: 24px;

  /* Subtitle */
  --subtitle-q0-fz: 24px;
  --subtitle-q0-lh: 32px;

  /* Paragraph Sizes */
  --text-p0-fz: 20px;
  --text-p0-lh: 32px;

  --text-p1-fz: 16px;
  --text-p1-lh: 24px;

  --text-p2-fz: 14px;
  --text-p2-lh: 20px;
}

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

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:after,
blockquote:before,
q:after,
q:before {
  content: "";
  content: none;
}

mark {
  background-color: transparent;
}

@font-face {
  font-display: swap;
  font-family: EuclidCircularA;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/EuclidCircularA/EuclidCircularA-Regular.woff2)
    format("woff2");
}

@font-face {
  font-display: swap;
  font-family: EuclidCircularA;
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/EuclidCircularA/EuclidCircularA-Medium.woff2)
    format("woff2");
}

@font-face {
  font-display: swap;
  font-family: EuclidCircularA;
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/EuclidCircularA/EuclidCircularA-Semibold.woff2)
    format("woff2");
}

@font-face {
  font-display: swap;
  font-family: EuclidCircularA;
  font-style: italic;
  font-weight: 400;
  src: url(../fonts/EuclidCircularA/EuclidCircularA-RegularItalic.woff2)
    format("woff2");
}

body,
html {
  height: 100%;
  width: 100%;
}

html {
  background-color: #f4f4f4;
  color: #000;
  font-family: EuclidCircularA, Arial, sans-serif;
  font-size: 16px;
  font-variant-numeric: lining-nums;
  font-weight: 400;
  line-height: 24px;
  scroll-behavior: smooth;
}

body {
  line-height: 1;
  overflow-x: hidden;
}

::selection {
  background: var(--cl-red);
  color: var(--cl-white);
}

img { max-width: 100%; }
.body-lock { overflow: hidden; }
b {
  font-family: EuclidCircularA-Semibold, Arial, sans-serif;
  font-weight: 600;
}
i { font-style: italic; }
.margin_inline_auto { margin-inline: auto; }
.shadow_light { box-shadow: 0px 4px 6px rgba(0,0,0,0.16); }

.flex { display: flex; }
.flex_column { flex-direction: column; }
.flex_wrap { flex-wrap: wrap; }
.flex_row { flex-direction: row; }
.align_center { align-items: center; }
.align_start { align-items: flex-start; }

/* Main justify-content utilities */
.justify_start    { justify-content: flex-start; }
.justify_end      { justify-content: flex-end; }
.justify_center   { justify-content: center; }
.justify_between  { justify-content: space-between; }
.justify_around   { justify-content: space-around; }
.justify_evenly   { justify-content: space-evenly; }

.w_full { width: 100%; }
.overflow_auto { overflow: auto; }


.relative { position: relative; }
.text_center { text-align: center; }
.text_left { text-align: left; }
.text_right { text-align: right; }
.text_center_mob_right { text-align: center; }

.grid { display: grid; }
.grid_columns_1 { grid-template-columns: 1fr; }
.grid_columns_2 { grid-template-columns: repeat(2, 1fr); }
.grid_columns_2_mob_1 { grid-template-columns: repeat(2, 1fr); } /* will be 1 column on mobile */
.grid_columns_2_tab_1_mob_1 { grid-template-columns: repeat(2, 1fr); } /* will be 1 column on tablet and 1 column on mobile */
.grid_columns_2_tab_2_mob_1 { grid-template-columns: repeat(2, 1fr); } /* will be 2 columns on tablet and 1 column on mobile */
.grid_columns_3_tab_2_mob_1 { grid-template-columns: repeat(3, 1fr); } /* will be 2 columns on tablet and 1 column on mobile */

.gap_24 { gap: 24px; }
.gap_24_mob_16 { gap: 24px; }
.gap_16 { gap: 16px; }
.gap_16_mob_8 { gap: 16px;}
.gap_16_mob_12 { gap: 16px;}
.gap_12 { gap: 12px;}
.gap_8 { gap: 8px;}
.gap_6 { gap: 6px; }
.gap_4 { gap: 4px; }

.p_14 { padding: 14px; }
.p_8_12 { padding: 8px 12px; }
.p_24_mob_16 { padding: 24px 16px; }
.p_32_mob_24 { padding: 32px; }

.mb_16 { margin-bottom: 16px; }
.mb_24 { margin-bottom: 24px; }
.m_block_42_mob_16 { margin-block: 42px; }

.br_8 { border-radius: 8px; }
.br_12 { border-radius: 12px; }
.br_16 { border-radius: 16px; }
.br_16_mob_0 { border-radius: 16px; }

.bg_white { background-color: var(--bg-white); }
.bg_grey_1 { background-color: var(--bg-grey-1); }
.bg_grey_2 { background-color: var(--bg-grey-2); }
.bg_dark { background-color: var(--bg-dark); }
.bg_transparent { background: transparent; }
.bg_dark_opacity_50 { background-color: rgba(0, 0, 0, 0.5); }

.border_pink { border: 1px solid var(--cl-pink); }
.border_green { border: 1px solid var(--cl-green); }
.border_black_light { border: 1px solid var(--text-light); }
.border_black_light_imp { border: 1px solid var(--text-light) !important; }
.border_transparent { border: 1px solid transparent; }

@media only screen and (min-width: 641px) and (max-width: 1140px) {
  .justify_start_tab { justify-content: flex-start !important; }
  .grid_columns_2_tab_1_mob_1 { grid-template-columns: repeat(1, 1fr); }
  .grid_columns_3_tab_2_mob_1 { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 640px) {
  .justify_start_mob { justify-content: flex-start !important; }
  .grid_columns_2_mob_1 { grid-template-columns: repeat(1, 1fr); }
  .grid_columns_2_tab_1_mob_1 { grid-template-columns: repeat(1, 1fr); }
  .grid_columns_2_tab_2_mob_1 { grid-template-columns: repeat(1, 1fr); }
  .grid_columns_3_tab_2_mob_1 { grid-template-columns: repeat(1, 1fr); }
  .text_center_mob_right { text-align: right; }
  .m_block_42_mob_16 { margin-block: 16px; }
}
@media (max-width: 899px) {
  .gap_24_mob_16 { gap: 16px; }
  .gap_16_mob_12 { gap: 12px;}
  .gap_16_mob_8 { gap: 8px; }

  .p_24_mob_16 { padding: 16px; }
  .p_32_mob_24 { padding: 24px; }
  .br_16_mob_0 { border-radius: 0px; }
}

.no_underline { text-decoration: none; }
.underline_on_hover:hover { text-decoration: underline; }

.line_break_desktop { display: block; }
.line_break_desktop_tablets_lg { display: block; }

@media only screen and (max-width: 1140px) {
  .line_break_desktop { display: inline; }
}
@media only screen and (max-width: 899px) {
  .line_break_desktop_tablets { display: block; }
  .line_break_desktop_tablets_lg { display: inline; }
}
@media only screen and (min-width: 1141px) {
  .hide_on_desktop { display: none !important; }
}
@media only screen and (min-width: 601px) and (max-width: 1140px) {
  .hide_on_tablet { display: none !important; }
}
@media only screen and (max-width: 600px) {
  .hide_on_mobile { display: none !important; }
  .justify_center_mob_imp { justify-content: center !important; }
}


/* Base Button Styles */
.button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  -webkit-appearance: none;
  text-align: center;
  text-decoration: none;
  font-weight: var(--fw-medium);
  font-family: var(--ff-text);
  border: 0;
  outline: 0;
  touch-action: manipulation;
  transition: background-color 0.2s;
  cursor: pointer;
}

.button:active,
.button:focus { outline: 0; }
/* Button Color Variants */
.button_primary {
  color: var(--text-light);
  background: var(--bg-grey-1);
  border: 1px solid var(--bg-grey-1);
}

.button_light {
  color: var(--text-contrast);
  background: var(--ca-white-10);
  border: 1px solid var(--ca-white-10);
}
.button_light:hover { background: var(--ca-white-30);}
.button_transparent {
  color: var(--text-contrast);
  background: transparent;
  border: 1px solid var(--border-white-30);
}
.button_black {
  color: var(--text-contrast);
  background: var(--cl-black);
  border: 1px solid var(--cl-black);
}

/* Button Sizes */
.button_sm {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: var(--text-p2-fz); /* Small text size */
}

.button_lg {
  padding: 14px 18px;
  border-radius: 16px;
  font-size: var(--text-p0-fz); /* Large text size */
}

/* Full-width Button */
.button_block { width: 100%; }
/* You might want to add these additional states */
.button_primary:hover { background: var(--cl-grey-2); /* Slightly darker grey */ }

.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.icon { vertical-align: middle; }

.emoji,
.icon { aspect-ratio: 1/1; display: inline-block; }
.emoji { flex-shrink: 0; vertical-align: baseline; }
.emoji_inline { position: relative; top: 0.1em; }
.emoji_inline .emoji_block { width: auto; }

.list > li {
  margin-left: 20px;
  position: relative;
}
.list > li:before {
  background-color: #000;
  border-radius: 50%;
  content: "";
  height: 4px;
  left: -20px;
  position: absolute;
  top: 0.6em;
  width: 4px;
}
.list_red > li:before {
  background-color: var(--cl-red);
  height: 8px;
  top: 0.4em;
  width: 8px;
}

/* Base Frame */
.frame {
  padding: 24px;
  background-color: var(--bg-white);
  border-radius: 20px;
}

/* Frame Sizes */
.frame_xs { padding: 12px; }
.frame_sm { padding: 16px; }
.frame_lg { padding: 24px 32px; }
.frame_xl { padding: 42px 32px; }
.frame_xxl { padding: 42px; }

/* Frame Color Variants */
.frame_dark {
  color: var(--text-contrast);
  background-color: var(--bg-dark);
}
.frame_green { background-color: var(--bg-green-light); }
.frame_green_extra_light { background-color: var(--bg-green-extra-light); }
.frame_white_10 {
  background-color: var(--bg-white-10);
  border: 1px solid var(--border-white-30);
}
.frame_transparent {
  background-color: transparent;
  border: 1px solid var(--border-white-30);
}
.frame_grey_1 { background-color: var(--bg-grey-1); }
.frame_grey_2 { background-color: var(--bg-grey-2); }
.frame_purple_light { background-color: var(--cl-purple-light); }
.frame_blue { background-color: var(--cl-blue); }
.frame_blue_light { background-color: var(--cl-blue-light); }
.frame_pink_light { background-color: var(--cl-pink-light); }
.frame_pink { background-color: var(--cl-pink); }

/* Border Radius Variants */
.frame_br_40 { border-radius: 40px; }
.frame_br_30 { border-radius: 30px; }
.frame_br_24 { border-radius: 24px; }
.frame_br_20 { border-radius: 20px; }
.frame_br_16 { border-radius: 16px; }
.frame_quarter_round { border-bottom-left-radius: 0; }

/* Text Colors */
.frame_text_white { color: var(--text-contrast); }
.frame_text_dark { color: var(--text-default); }
.frame_text_green { color: var(--text-accent); }

/* Border Modifier */
.frame_no_border { border: none; }

/* Responsive Styles */
@media (max-width: 639px) {
  .frame { padding: 12px 16px; }
  .frame_lg,
  .frame_xl { padding: 16px; }
  .frame_xxl { padding: 24px 16px; }
}

/* typography styles */

.title { font-weight: var(--fw-medium); }
.title_h1 { line-height: var(--title-h1-lh); font-size: var(--title-h1-fz); }
.title_h2 { line-height: var(--title-h2-lh); font-size: var(--title-h2-fz); }
.title_h3 { line-height: var(--title-h3-lh); font-size: var(--title-h3-fz);}
.title_h4 { line-height: var(--title-h4-lh); font-size: var(--title-h4-fz); }
.title_h5 { line-height: var(--title-h5-lh); font-size: var(--title-h5-fz); }

.title_semibold { font-weight: var(--fw-semibold); }
.title_medium { font-weight: var(--fw-medium); }
.title_regular { font-weight: var(--fw-regular); }
.title_italic { font-style: var(--fs-italic); }
.title_light { color: var(--text-light); }
.title_xlight { color: var(--text-xlight); }
.title_contrast { color: var(--text-contrast); }
.title_accent_dark { color: var(--text-accent-dark); }
.title_accent_dark_2 { color: var(--text-accent-dark-2); }
.title_accent { color: var(--text-accent); }

.subtitle {
  line-height: var(--subtitle-q0-lh);
  font-size: var(--subtitle-q0-fz);
  font-family: var(--ff-text); /* Inherits the base font family */
}
.subtitle_semibold { font-weight: var(--fw-semibold); }
.subtitle_medium { font-weight: var(--fw-medium); }
.subtitle_regular { font-weight: var(--fw-regular); }
.subtitle_italic { font-style: var(--fs-italic); }
.subtitle_light { color: var(--text-light); }
.subtitle_xlight { color: var(--text-xlight); }
.subtitle_contrast { color: var(--text-contrast); }
.subtitle_accent { color: var(--text-accent); }

/* text classes */

/* Paragraph Text Styles */
.text_p0 {
  font-size: var(--text-p0-fz);
  line-height: var(--text-p0-lh);
  font-family: var(--ff-text);
}

.text_p1 {
  font-size: var(--text-p1-fz);
  line-height: var(--text-p1-lh);
  font-family: var(--ff-text);
}

.text_p2 {
  font-size: var(--text-p2-fz);
  line-height: var(--text-p2-lh);
  font-family: var(--ff-text);
}

/* Text Modifiers */
.text_semibold { font-weight: var(--fw-semibold); }
.text_medium { font-weight: var(--fw-medium); }
.text_regular { font-weight: var(--fw-regular); }
.text_italic { font-style: var(--fs-italic); }

/* Text Colors */
.text_light { color: var(--text-light); }
.text_xlight { color: var(--text-xlight); }
.text_contrast { color: var(--text-contrast); }
.text_accent { color: var(--text-accent); }
.text_accent_dark { color: var(--text-accent-dark); }
.text_dark_grey_60 { color: var(--ca-dark-grey-60); }

/* for responsiveness most of the content becomes 1 level smaller. So H1 size will become that of H2, H2 size will become that of H3, etc. */
@media (max-width: 1139px) {
  .title_h1 { line-height: var(--title-h2-lh); font-size: var(--title-h2-fz); }
  .title_h2 { line-height: var(--title-h3-lh); font-size: var(--title-h3-fz); }
  .title_h3 { line-height: var(--title-h4-lh); font-size: var(--title-h4-fz); }

  .title_h4 { line-height: var(--title-h5-lh); font-size: var(--title-h5-fz); }
  .text_p0 { font-size: var(--text-p1-fz); line-height: var(--text-p1-lh); }
  .text_p1 { font-size: var(--text-p2-fz); line-height: var(--text-p2-lh); }
  .subtitle { font-size: var(--text-p1-fz); line-height: var(--text-p1-lh); }
}
/* end of text classes */

/* ================================================ */
/* section */
/* ================================================ */

.section {
  padding-top: 42px;
  display: flex;
}
@media only screen and (min-width: 641px) and (max-width: 1140px) {
  .section { padding-top: 24px; }
}
@media only screen and (max-width: 640px) {
  .section { padding-top: 24px; }
}
.section_body { padding: 42px; border-radius: 32px; }
.section_title { margin-bottom: 24px; }

/* Dark background section */
.section_dark .section_body {
  color: var(--text-contrast);
  background-color: var(--bg-dark);
}
.section_white .section_body { background-color: var(--bg-white); } /* White background section */
.section_green .section_body { background-color: var(--bg-green-light); } /* Green background section */
.section_blue .section_body { background-color: var(--cl-blue); } /* Blue background section */
.section_white_10 .section_body { background-color: var(--bg-white-10); } /* White 10% opacity background section */
.section_grey_1 .section_body { background-color: var(--bg-grey-1); } /* Grey 1 background section */
.section_grey_2 .section_body { background-color: var(--bg-grey-2); } /* Grey 2 background section */

/* Wide section */
.section_wide .section_title { padding-inline: 42px; }

/* Tablet-sm and Mobile (900px and below) */
@media (max-width: 899px) {
  .section_body { padding: 24px 16px 16px; }
  .section_title { margin-bottom: 16px; }
  .section_wide .section_title { padding-inline: 16px; }
}
/* ================================================ */
/* end of section */
/* ================================================ */

/* ================================================ */
/* main content */
/* ================================================ */
.main {
  margin: 0 auto;
  width: 100%;
  max-width: 1320px;
  padding: 0 20px;
  position: relative;
  /* white-space: break-spaces; */
}
.main_clean {
  padding: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
}
@media only screen and (max-width: 640px) {
  .main { padding: 0 16px; }
}
/* ================================================ */
/* end of main content */
/* ================================================ */

/* section specific classes below */

/* ================================================ */
/* header section */
/* ================================================ */
.header {
  align-items: center;
  display: flex;
  height: 40px;
  inset: 80px 0 auto;
  justify-content: center;
  position: absolute;
  z-index: 100;
}
.header_content {
  align-items: center;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  background-color: transparent;
  border-radius: 20px;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr auto 1fr;
  height: auto;
  padding: 0 40px;
  transition: padding 0.5s ease-in-out,
    width 0.5s cubic-bezier(0.85, 0.01, 0.1, 1), height 0.5s ease-in-out,
    background-color 0.5s ease-in-out, -webkit-backdrop-filter 0.5s ease-in-out;
  transition: padding 0.5s ease-in-out,
    width 0.5s cubic-bezier(0.85, 0.01, 0.1, 1), height 0.5s ease-in-out,
    background-color 0.5s ease-in-out, backdrop-filter 0.5s ease-in-out;
  transition: padding 0.5s ease-in-out,
    width 0.5s cubic-bezier(0.85, 0.01, 0.1, 1), height 0.5s ease-in-out,
    background-color 0.5s ease-in-out, backdrop-filter 0.5s ease-in-out,
    -webkit-backdrop-filter 0.5s ease-in-out;
  width: 1280px;
}
.header_scrolled {
  height: 68px;
  inset: 12px 40px auto;
}
.header_scrolled .header_content {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: rgba(69, 69, 69, 0.6);
  grid-template-columns: 40px auto auto;
  height: auto;
  padding: 12px 16px;
  position: fixed;
  width: 988px;
}
/* for terms and conditions page, privacy policy page, and cookie policy page */
.footer_pages_header_content {
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-color: rgba(69, 69, 69, 0.6);
  padding: 12px 16px;
  width: 1240px;
}
.header_logo {
  align-items: center;
  display: flex;
  gap: 16px;
}
.logo_main {
  aspect-ratio: 77/20;
  height: 40px;
}
.logo_main,
.logo_label {
  align-items: center;
  display: contents;
  flex-shrink: 0;
}
.logo_label_img {
  aspect-ratio: 77 / 20;
  display: block;
  height: 40px;
}
.header .logo_label .logo_label_img {
  opacity: 1;
  transform: translateX(0);
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}
.header_scrolled .logo_label .logo_label_img {
  opacity: 0;
  transform: translateX(-35%);
}
.header_nav_list {
  align-items: center;
  display: flex;
  gap: 0px;
}
.header_scrolled .header_nav_list { justify-content: space-between; }
.header_nav_item {
  position: relative;
  display: flex;
}
.header_nav_link {
  border: 1px solid transparent;
  border-radius: 20px;
  color: var(--bg-white);
  display: block;
  font-weight: 500;
  opacity: 0.7;
  padding: 6px 12px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.header_nav_link:hover { opacity: 1; }
.header_nav_link.active { color: #fff; }
.header_nav_item_bg {
  position: absolute;
  display: none;
  font-weight: 600;
  border: 1px solid #ffffff;
  border-radius: 20px;
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out;
  pointer-events: none;
  z-index: 0;
  inset: 0;
}
.header_actions {
  display: flex;
  gap: 16px;
  justify-self: end;
}

@media only screen and (min-width: 641px) and (max-width: 1140px) {
  .header .logo_main {
    height: 30px;
    width: 30px;
  }
  .header_content {
    grid-template-columns: 40px 1fr;
    padding: 0;
    transition: width 0.3s cubic-bezier(0.85, 0.01, 0.1, 1),
      background-color 0.5s ease-in-out,
      -webkit-backdrop-filter 0.5s ease-in-out;
    transition: width 0.3s cubic-bezier(0.85, 0.01, 0.1, 1),
      background-color 0.5s ease-in-out, backdrop-filter 0.5s ease-in-out;
    transition: width 0.3s cubic-bezier(0.85, 0.01, 0.1, 1),
      background-color 0.5s ease-in-out, backdrop-filter 0.5s ease-in-out,
      -webkit-backdrop-filter 0.5s ease-in-out;
  }
}
@media only screen and (max-width: 1140px) {
  .header_content {
    display: flex;
    justify-content: space-between;
  }
  .footer_pages_header_content { padding: 10px; }
}

@media only screen and (min-width: 901px) and (max-width: 1140px) {
  .header {
    inset: 0px 38px auto;
    top: 36px;
  }
  .header_scrolled .header_content {
    width: 858px;
    display: flex;
    justify-content: space-around;
    inset: auto;
  }
  .header_logo { gap: 8px; }
  .logo_main img { width: 25px; }
  .logo_label,
  .logo_label img {
    width: 50px;
  }
  .header_scrolled .logo_label,
  .header_scrolled .logo_label img {
    width: 0px;
    display: none;
  }
  .header_nav_link {
    /* padding-inline: 4px; */
    font-size: 80%;
  }
  .header_actions .button {
    padding: 6px 12px;
  }
  .header_actions .button .text {
    font-size: 80%;
  }
}

@media only screen and (min-width: 641px) and (max-width: 900px) {
  .header { inset: 36px 45px auto; }
  .header_scrolled .header_content {
    inset: auto 21px;
    padding: 12px 24px;
    width: auto;
    grid-template-columns: 40px 1fr;
  }
  .header_logo { gap: 8px; }
  .header_nav { display: none; }
  .header_actions { gap: 8px; }
}

@media only screen and (max-width: 640px) {
  .header { inset: 36px 45px auto; }
  .header_content {
    grid-template-columns: 40px 1fr;
    padding: 0;
    transition: width 0.3s cubic-bezier(0.85, 0.01, 0.1, 1),
      background-color 0.5s ease-in-out,
      -webkit-backdrop-filter 0.5s ease-in-out;
    transition: width 0.3s cubic-bezier(0.85, 0.01, 0.1, 1),
      background-color 0.5s ease-in-out, backdrop-filter 0.5s ease-in-out;
    transition: width 0.3s cubic-bezier(0.85, 0.01, 0.1, 1),
      background-color 0.5s ease-in-out, backdrop-filter 0.5s ease-in-out,
      -webkit-backdrop-filter 0.5s ease-in-out;
  }
  .footer_pages_header_content {
    padding: 10px 12px;
    margin: 0px -20px;
  }
  .header_scrolled .footer_pages_header_content { margin: 0px; }
  .header_scrolled .header_content {
    inset: auto 24px;
    padding: 12px 24px;
    width: auto;
    grid-template-columns: 40px 1fr;
  }
  .header_logo { gap: 8px; }
  .header .logo_main {
    height: 30px;
    width: 30px;
  }
  .header .logo_label .logo_label_img { height: auto; }
  .header_nav { display: none; }
  .header_actions { gap: 8px; }
}

@media only screen and (max-width: 340px) {
  .header { inset: 60px 41px auto; }
  .header_content { align-items: start; }
  .header_scrolled .header_content { inset: 29px 17px auto; }
  .header_actions { flex-direction: column; }
}

@media only screen and (min-width: 341px) and (max-width: 400px) {
  .header .logo_label {
    display: none;
  }
}
/* ================================================ */
/* end of header section */
/* ================================================ */

/* ================================================ */
/* intro / hero section */
/* ================================================ */
.hero .section_body {
  position: relative;
  display: grid;
  grid-template-columns: 6fr 6fr;
  padding-top: 124px;
  overflow: hidden;
  background-color: var(--bg-dark);
}
/* Hero Background Effects */
.hero .section_body::after {
  content: "";
  position: absolute;
  bottom: -12%;
  left: 50%;
  width: 80%;
  height: 30%;
  background-color: #bbec53;
  background-image: radial-gradient(
    circle,
    rgba(187, 236, 83, 0.5) 0%,
    rgba(187, 236, 83, 0) 100%
  );
  border-radius: 50%;
  transform: translateX(-50%);
  filter: blur(80px);
}
.hero .section_body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--ca-black-60);
  backdrop-filter: blur(1px);
  z-index: 1;
}
/* Hero Content */
.hero_message {
  position: relative;
  z-index: 2;
}
.hero_description { padding-top: 16px; }
/* Hero Video */
.hero_video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px;
  z-index: 0;
}
/* Hero Widget */
.hero_widget_buttons {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.hero_widget_button {
  padding: 6px;
  max-width: 300px;
  flex-grow: 1;
}
.hero_widget_text {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6px;
  text-align: center;
}
.hero_description_list {
  gap: 12px;
  margin-top: 24px;
  margin-bottom: 32px;
}
.hero_description_item { padding: 8px 16px; }
.hero_description_item p {
  font-size: var(--text-p1-fz);
  line-height: var(--text-p1-lh);
  font-family: var(--ff-text);
}
.hero_description_item p img { margin-right: 8px; }
.hero_description_item p span { display: inline; }

/* Tablet (640px - 1139px) */
@media (min-width: 640px) and (max-width: 1139px) {
  .hero .section_body {
    grid-template-columns: 8fr 4fr;
    padding: 140px 24px 60px;
  }
}
/* Mobile (up to 639px) */
@media (max-width: 639px) {
  .hero .section_body {
    grid-template-columns: 12fr;
    padding: 100px 24px 16px;
  }
  .hero_widget_button { max-width: none; }
  .hero_widget_buttons { gap: 16px; }
  .hero_description_list { margin-bottom: 24px; }
}
/* ================================================ */
/* end of intro / hero section */
/* ================================================ */

/* ================================================ */
/* Partners / Hiring Managers section */
/* ================================================ */
/* Main Container */
.hiring_managers_from .section_body {
  position: relative;
  overflow-x: hidden;
  border: 3px solid var(--border-white);
  border-radius: 32px;
  width: 100%;
}
/* Mobile Edge Fades */
.hiring_managers_from .section_body::before,
.hiring_managers_from .section_body::after {
  display: none;
}
/* Company List */
.hiring_managers_from_list {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  justify-content: space-between;
}
/* Company Item */
.hiring_managers_from_item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px 52px;
  background-color: var(--bg-white);
  border-radius: 20px;
}

/* Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ----- Responsive Styles ----- */

/* Tablet (640px - 1139px) */
@media (min-width: 640px) and (max-width: 1139px) {
  .hiring_managers_from_item { padding: 16px 40px; }
}
/* Tablet-sm & Mobile (up to 899px) */
@media (max-width: 899px) {
  .hiring_managers_from_wrapper { margin-inline: -32px; }
  .hiring_managers_from_list {
    width: max-content;
    animation: scroll 30s linear infinite;
  }
}

/* Mobile Only (up to 639px) */
@media (max-width: 639px) {
  .hiring_managers_from .section_body {
    border: none;
    margin-inline: -16px;
    width: 100vw;
  }
  .hiring_managers_from .title { margin-inline: 16px; }
  .hiring_managers_from_list {
    flex-wrap: nowrap;
    margin-top: 16px;
  }
  .hiring_managers_from_item { padding: 16px 24px; }
  .hiring_managers_from_item img { height: 28px; }

  /* Mobile Edge Fades */
  .hiring_managers_from .section_body::before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0px;
    width: 16px;
    height: 100%;
    mask-image: linear-gradient(
      to right,
      var(--cl-grey-1) 30%,
      transparent 90%
    );
    background-color: var(--cl-grey-2);
    z-index: 2;
  }
  .hiring_managers_from .section_body::after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    right: 0px;
    width: 16px;
    height: 100%;
    mask-image: linear-gradient(to left, var(--cl-grey-1) 30%, transparent 90%);
    background-color: var(--cl-grey-2);
    z-index: 2;
  }
}
/* ================================================ */
/* end of Partners / Hiring Managers section */
/* ================================================ */

/* ================================================ */
/* Problem section / Goal to find */
/* ================================================ */
/* Base Styles */
.goal_to_find {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
}

.goal_to_find .section_body::after {
  content: "";
  position: absolute;
  top: 90%;
  left: 50%;
  width: 500px;
  height: 1024px;
  background-color: rgba(249, 62, 62, 0.4); /* $cl-red with 40% opacity */
  background-image: radial-gradient(
    circle,
    rgba(249, 62, 62, 0.2) 0%,
    rgba(187, 236, 83, 0) 80%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(35deg);
  filter: blur(100px);
  z-index: 0;
}

.goal_to_find_we_hear { padding-block: 16px; }
.goal_to_find .frame {
  position: relative;
  z-index: 10;
}
.goal_to_find_we_hear_title { position: relative; }

/* Title Section */
.goal_to_find_we_hear_title_fact {
  display: flex;
  align-items: center;
  max-width: 266px;
  max-height: fit-content;
  gap: 12px;
  position: absolute !important;
  right: 0;
  top: -22px;
}
/* Content Sections */
.goal_to_find_we_hear_content {
  display: grid;
  gap: 16px;
  justify-items: end;
}
.goal_to_find_we_hear_content li { margin-top: 24px; }

.goal_to_find_how_teams_solve { gap: 32px; } /* Lists - in multiple sections */
.goal_to_find_how_solve_list_item_list li + li { margin-top: 16px; }
/* Offload Calls Items */
.goal_to_find_offload_calls_item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 0px 0px 0px;
}
.goal_to_find_offload_calls_item h4,
.goal_to_find_offload_calls_item p {
  padding-inline: 24px;
}
.goal_to_find_offload_calls_item_img {
  align-self: center;
  width: 100%;
  max-width: 362px;
}
.goal_to_find_offload_calls_additional {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}

/* Spacing */
.goal_to_find_we_hear,
.goal_to_find_how_teams_solve,
.goal_to_find_offload_calls { margin-top: 32px; }

/* ----- Responsive Styles ----- */

/* Desktop (1140px+) and Tablet (640px-1139px) */
@media (min-width: 640px) {
  .goal_to_find_we_hear_title {
    display: flex;
    justify-content: space-between;
  }
  .goal_to_find_we_hear_content { grid-template-columns: 5fr 4fr; }
}

/* Tablet (640px-1139px) */
@media (min-width: 640px) and (max-width: 1139px) {
  .goal_to_find_we_hear_content img { height: auto; }
  .goal_to_find_we_hear_title {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .goal_to_find_we_hear_title_fact {
    position: relative !important;
    top: 0;
  }
}

/* Desktop (1140px+) and Tablet Large (900px-1139px) */
@media (min-width: 900px) {
  .trust_and_transparency_content { grid-template-columns: repeat(3, 4fr); }
}

/* Tablet Small (640px-899px) and Mobile (up to 639px) */
@media (max-width: 899px) {
  .goal_to_find_we_hear_content li { padding: 16px; }
  .goal_to_find_how_solve_list_item_list li + li { margin-top: 12px; }
  .goal_to_find_offload_calls_item { gap: 8px; }
}

/* Mobile Only (up to 639px) */
@media (max-width: 639px) {
  .goal_to_find_we_hear_title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .goal_to_find_we_hear_title_fact {
    position: relative !important;
    top: 0;
    max-width: 100%;
    width: 100%;
  }
  .goal_to_find_we_hear_content { text-align: center; }
  .goal_to_find_we_hear_content img { display: none; }
  .goal_to_find_we_hear_content li { margin-top: 16px; }

  .goal_to_find_we_hear,
  .goal_to_find_how_teams_solve,
  .goal_to_find_offload_calls { margin-top: 16px; }
  .goal_to_find_offload_calls_item_img { width: 100%; }
  .goal_to_find_offload_calls_additional { margin-top: 16px; }
}
/* ================================================ */
/* end of Problem section / Goal to find */
/* ================================================ */

/* ================================================ */
/* Solution / How is mokka different section */
/* ================================================ */
.solution_section {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
}
.solution_section .section_body::after {
  content: "";
  position: absolute;
  top: 70%;
  left: 50%;
  width: 500px;  /* Matches the width from screenshot (1,023.87px) */
  height: 1024px;   /* Matches the height from screenshot (499.94px) */
  background-color: rgba(42, 123, 40, 0.4); /* #2A7B28 with 40% opacity */
  background-image: radial-gradient(
    circle,
    rgba(42, 123, 40, 0.4) 0%,
    rgba(42, 123, 40, 0) 80%
  );
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(35deg); /* Rotation from screenshot */
  filter: blur(264px); /* Blur value from screenshot */
  z-index: 0;
}
.solution_section article {
  position: relative;
  z-index: 10;
  gap: 32px;
}
.solution_section article h2 { margin-bottom: 24px; }
.solution_section article .h3_wrapper { gap: 16px; }
.how_is_mokka_different_item { gap: 16px; }

.hiring_with_mokka_content .frame,
.how_is_mokka_different_item { padding: 24px 32px; }
.how_is_mokka_different_item .inner_wrapper { gap: 8px; }

/* Rows */
.how_is_mokka_different_row { grid-template-columns: auto 1fr; }
/* Row Icons */
.how_is_mokka_different_row_icon {
  margin-right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 12px;
}
.how_is_mokka_different_row_check .how_is_mokka_different_row_icon {
  background-color: var(--bg-green);
}
.how_is_mokka_different_row_thumbs_down .how_is_mokka_different_row_icon {
  background-color: var(--bg-white);
  border: 1px solid var(--cl-grey-2);
}

/* ================================================ */
/* end of Solution / How is mokka different section */
/* ================================================ */

/* ================================================ */
/* Blue Sections / Hiring with mokka / Trust and transparency. */
/* ================================================ */
.section_blue_fabc_img_abs {
  position: relative;
  right: 0;
  width: 26px;
  height: 26px;
}

@media (min-width: 900px) {
  .hiring_with_mokka_content_wrapper { grid-template-columns: 2fr 1fr; }
  .hiring_with_mokka_content { grid-template-columns: 1fr 1fr; }
  .section_blue_fabc_img_abs {
    right: -16px;
    width: 42px;
    height: 42px;
  }
}
/* ================================================ */
/* end of Blue Sections / Hiring with mokka / Trust and transparency. */
/* ================================================ */

/* ================================================ */
/* slider styles */
/* ================================================ */
.swiper {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* max-width: 1112px; Prevent horizontal scroll */
  max-width: min(1112px, calc(100vw - 100px));
  padding-bottom: 36px;
}
.swiper-wrapper { width: auto; display: flex; }
.swiper-slide {
  width: 100%;
  flex-shrink: 0; /* Prevent slides from shrinking */
  height: auto;
  position: relative;
}
.swiper-pagination {
  top: auto;
  bottom: 0px;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  line-height: 12px;
  width: auto !important;
  min-width: 200px;
}
.swiper-pagination-bullet {
  opacity: 1;
  background: var(--ca-black-10);
  width: 8px !important;
  height: 8px !important;
}
.swiper-pagination-bullet-active {
  background: var(--cl-black);
  width: 12px !important;
  height: 12px !important;
}
/* override swiper styles */
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0px !important; }

.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { transform: scale(1) !important; }
/* Slider Navigation Buttons */
.slider_nav_button {
  position: absolute;
  top: 0;
  bottom: 36px;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 60px;
  text-align: center;
  text-decoration: none;
  background: var(--bg-white);
  border: 0;
  outline: 0;
  transition: box-shadow 0.2s;
  cursor: pointer;
  z-index: 10;
  -webkit-appearance: none;
}
.slider_nav_button:hover {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06), 0 10px 16px rgba(0, 0, 0, 0.06);
}
.slider_nav_button:hover .slider_nav_button_icon { transform: scale(1.1); }
.slider_nav_button:active { box-shadow: none; }

.slider_prev_button,
.slider_prev_button_candidates,
.slider_prev_button_testimonials,
.slider_prev_button_product {
  left: 0;
  border-radius: 0 30px 30px 0;
}
.slider_next_button,
.slider_next_button_candidates,
.slider_next_button_testimonials,
.slider_next_button_product {
  right: 0;
  border-radius: 30px 0 0 30px;
}
.slider_nav_button_icon { transition: transform 0.2s; }

@media (min-width: 900px) and (max-width: 1320px) {
  .swiper { max-width: calc(100vw - 208px); }
}
@media (max-width: 899px) {
  .swiper { padding: 0 20px 36px; }
  .swiper { max-width: calc(100vw); }
  .slider_nav_button { display: none; }
}
/* ================================================ */
/* end of slider styles */
/* ================================================ */

/* ================================================ */
/* Product section */
/* ================================================ */
.product_slide_header { padding: 32px; }
.product_slide_mob_content_wrapper { padding-inline: 24px; }
.product-slider .frame_br_24 { overflow: hidden; }

.screen_applicants_list_wrapper {
  position: relative;
  left: 32px;
}
.screen_applicants_list_wrapper .frame_grey_1 { padding: 16px 24px; }
.grid_rated_by_candidates {
  padding-top: 20px;
  grid-template-columns: 1fr 1fr;
}
.box_1 { grid-row: span 2; }
.intro_yourself {
  gap: 8px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.intro_yourself span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background-color: var(--cl-white);
  border: 1px solid var(--cl-grey-2);
  font-size: 9px;
  font-weight: 500;
  color: var(--cl-black);
}
.intro_yourself  p {
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  color: var(--cl-black);
}

@media (max-width: 639px) {
  .product_slide_header { padding: 24px 24px 12px; }
  .product_slide_img { width: 100%; }
  .screen_applicants_list_wrapper {
    left: 0px;
    padding-inline: 24px;
    padding-bottom: 24px;
  }
  .grid_rated_by_candidates { grid-template-columns: 1fr; }
  .box_1 { grid-row: 3; /* Moves to the bottom on mobile */ }
  .box_2 { grid-row: 1; /* Moves to the top on mobile */ }
  .box_3 { grid-row: 2; /* Stays in the middle on mobile */ }
}
/* ================================================ */
/* end of Product section */
/* ================================================ */


/* ================================================ */
/* Case Studies section */
/* ================================================ */
/* Feedback Section */
.slider_section { width: 100%; }
.slider_section .section_body { padding-top: 0px !important; }
.slider_section .section_body > .inner { position: relative; }

.mokka_comparison_table {
  margin-inline: -42px;
  width: calc(100% + 84px);
  max-width: 1320px;
  padding: 24px;
}

.comparison_table {
  border-collapse: separate; /* Must be separate, not collapse */
  table-layout: fixed; /* Essential for column width control */
  border-spacing: 0 24px; /* Vertical spacing between rows */
}
.comparison_table_mobile_tabs { display: none; }
.comparison_table_mobile_tabs .active { display: flex; }

/* 2nd column (Before Mokka) */
.comparison_table th:nth-child(2),
.comparison_table td:nth-child(2) {
  width: calc((100% - 170px) * 0.5); /* Fixed percentage width */
}

/* 4th column (With Mokka) */
.comparison_table th:nth-child(4),
.comparison_table td:nth-child(4) {
  width: calc((100% - 170px) * 0.5); /* Same as 2nd column */
}
/* 1st column (Metric) - auto width based on content */
.comparison_table th:nth-child(1),
.comparison_table td:nth-child(1) {
  width: 120px; /* Adjusts based on content */
}
/* 3rd column (Arrow) - minimal fixed width */
.comparison_table th:nth-child(3),
.comparison_table td:nth-child(3) {
  width: 50px; /* Fixed small width for arrows */
}
.comparison_table tbody tr .col_1 { text-align: left; }
.comparison_table tbody tr td {
  text-align: center;
  vertical-align: middle;
  height: 90px;
}
.comparison_table tbody tr td .line_break_desktop_tablets_lg { margin-top: 5px; }
.comparison_table tbody tr .arrow_cell { padding-inline: 10px; }

/* Feedback Card */
.feedback { position: relative; height: 100%; }
.feedback_top { display: flex; justify-content: space-between; }
.feedback_label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.feedback_logo {
  width: 100%;
  max-width: 200px;
  max-height: 96px;
}
.feedback_chips_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 30px;
  margin: 16px 0 32px;
}
.feedback_chips_item {
  display: flex;
  align-items: center;
  gap: 16px;
}
.feedback_description {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}
.feedback_list { grid-row: 2/3; }

/* Desktop (1140px+) and Tablet Large (900px-1139px) */
@media (min-width: 900px) {
  .slider_section .section_body > .inner {
    margin: 0 -42px;
    padding: 0 84px;
  }
}

/* Tablet Small (640px-899px) */
@media (min-width: 640px) and (max-width: 899px) {
  .slider_section .section_body > .inner { margin: 0 -36px; }
  .mokka_comparison_table {
    margin-inline: -16px;
    width: calc(100% + 32px);
  }
}

/* Mobile Only (up to 639px) */
@media (max-width: 639px) {
  .slider_section .section_body > .inner { margin: 0 -36px; }
  #feedback-section .section_body { padding-top: 20px !important; }
  .feedback_logo {
    max-width: 160px;
    max-height: 40px;
  }
  .comparison_table { display: none; }
  .comparison_table_mobile_tabs { display: flex; }
  .mokka_comparison_table {
    margin-inline: -16px;
    width: calc(100% + 32px);
  }
}

/* Tablet (640px-1139px) and Mobile (up to 639px) */
@media (max-width: 1139px) {
  .feedback_chips_list {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 8px;
  }
}

/* Tablet Small (640px-899px) and Mobile (up to 639px) */
@media (max-width: 899px) {
  .feedback_top {
    flex-direction: column-reverse;
    gap: 24px;
  }
  .feedback_description { grid-template-columns: 1fr; gap: 0; }
  .feedback_list { grid-row: auto; margin-top: 12px; }
  .feedback_list:first-of-type { margin-bottom: 24px; }
}
/* ================================================ */
/* end of Case Studies section */
/* ================================================ */

/* ================================================ */
/* What candidates say section */
/* ================================================ */
.what-candidates-say-slider .swiper-wrapper .swiper-slide { min-height: 100%; }
.what_candidates_say_slide {
  position: relative;
  height: 100%;
}
.what_candidates_say_slide_emoji { margin-right: 16px; }

/* Reviews grid */
.what_candidates_say_reviews {
  display: grid;
  align-items: stretch;
  gap: 12px;
  margin-top: 16px;
}
/* Rating stars */
.what_candidates_say_review_rating { display: flex; gap: 4px; }
.what_candidates_say_review_rating .icon { height: 24px; fill: #ffc224; }
/* Individual review card */
.what_candidates_say_review {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Review footer */
.what_candidates_say_review_footer { margin-top: auto; }

/* Mobile (up to 640px) and Tablet-sm (641-900px) */
@media (max-width: 900px) {
  .what_candidates_say_review_rating { gap: 6px; }
}

@media (min-width: 1141px) {
  .what_candidates_say_reviews {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
  }
  .what_candidates_say_review { gap: 16px; }
}
/* ================================================ */
/* end of What candidates say section */
/* ================================================ */

/* ================================================ */
/* What team leaders say section */
/* ================================================ */

/* Column Layout */
.what_talent_leader_say_column {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  gap: 14px;
  height: 100%;
}
/* Testimonial Base Styles */
.testimonial_primary,
.testimonial_secondary {
  display: flex;
  height: 100%;
}
/* Primary Testimonial Styles */
.testimonial_primary {
  position: relative;
  overflow: hidden;
}
.testimonial_primary::before {
  content: "";
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.testimonial_primary .testimonial_picture .testimonial_picture_image {
  position: absolute;
  user-select: none;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
}
.testimonial_primary .testimonial_picture img { width: 100%; height: 100%; }
.testimonial_primary .testimonial_column_inner {
  position: relative;
  align-self: flex-end;
  z-index: 2;
}
.testimonial_primary .testimonial_column_message {
  backdrop-filter: blur(12px);
}
.testimonial_primary .testimonial_column_description,
.testimonial_primary .testimonial_column_additional { margin-top: 16px; }
.testimonial_primary .testimonial_column_footer_company { margin-top: 8px; }

/* Tablet-sm (641-900px) and Mobile (up to 640px) */
@media (max-width: 900px) {
  .testimonial_primary .testimonial_column_description,
  .testimonial_primary .testimonial_column_additional { margin-top: 12px; }
  .testimonial_primary .testimonial_column_footer_company { margin-top: 6px; }
}

/* Secondary Testimonial Styles */
.testimonial_secondary {
  flex-direction: column;
  justify-content: space-between;
}
.testimonial_secondary .testimonial_description { margin-top: 12px; }
.testimonial_secondary .testimonial_message { flex-grow: 1; }
.testimonial_secondary .testimonial_additional {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}
.testimonial_secondary .testimonial_picture { flex-shrink: 0; aspect-ratio: 1 / 1; }
.testimonial_secondary .testimonial_picture .testimonial_picture_image {
  border-radius: 24px;
  object-fit: cover;
}
.testimonial_secondary .testimonial_column_footer_company { margin-top: 6px; }

/* Tablet-sm (641-900px) and Mobile (up to 640px) */
@media (max-width: 900px) {
  .testimonial_secondary .testimonial_additional { gap: 8px; }
}
/* ================================================ */
/* end of What team leaders say section */
/* ================================================ */

/* ================================================ */
/* footer section */
/* ================================================ */
/* Footer Base Styles */
.page_footer { padding-top: 42px; }
.footer_body { color: var(--text-contrast); background: var(--bg-dark); }
.footer_content {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  padding: 42px 20px;
  width: 100%;
  max-width: 1320px;
  gap: 20px;
}
.footer_logo { justify-self: start; }
.footer_link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  text-decoration: none;
  color: var(--text-contrast);
}

.footer_link:hover .footer_link_text { border-bottom-color: currentColor; }
.footer_link_text {
  transform: translateY(1px);
  border-bottom: 1px solid transparent;
}
.footer_text {
  width: 100%;
  opacity: 0.4;
  text-align: right;
}
.footer_logos {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
}

/* Tablet Small (640px - 899px) and Mobile (up to 639px) */
@media (max-width: 899px) {
  .page_footer { padding: 24px 16px 12px; }
  .footer_body { border-radius: 20px; }
  .footer_content {
    display: flex;
    flex-wrap: wrap;
    padding: 16px;
  }
}

/* Desktop (1140px+) and Tablet (640px - 1139px) */
@media (min-width: 640px) {
  .footer_links {
    display: flex;
    gap: 20px;
  }
}
@media (min-width: 640px) and (max-width: 899px) {
  .footer_links { flex-direction: column; width: 100%; }
}
@media (max-width: 639px) {
  .footer_links { width: 100%; }
  .footer_text { text-align: left; }
}
/* ================================================ */
/* end of footer section */
/* ================================================ */

/* ================================================ */
/* Calendly widget popup and Pricing popup styles */
/* ================================================ */
/* Calendly Widget Wrapper */
.pricing_popup_wrapper,
.calendly_inline_widget_wrapper_2,
.calendly_inline_widget_wrapper {
  visibility: hidden;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 100;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto; /* Enable scrolling for the entire popup */
}
/* Opened state */
/*.pricing_popup_wrapper, temporary */
.pricing_popup_wrapper_opened,
.calendly_inline_widget_wrapper_opened,
.calendly_inline_widget_wrapper_2_opened {
  visibility: visible;
  opacity: 1;
}
/* Inner container */
.calendly_inline_widget_wrapper_inner,
.calendly_inline_widget_wrapper_inner_2 { border-radius: 32px; }
.pricing-slider {
  padding: 20px;
  margin: -20px;
  width: calc(100% + 40px);
  flex: 1; /* Take available space */
  min-height: 0; /* Important for flex children */
}
/* Ensure swiper container can scroll */
.pricing-slider .swiper { height: 100%; }
.pricing-slider .swiper-wrapper { height: auto; } /* Make slides adjust to content */
.pricing-slider .swiper-pagination { display: none; } /* display on mobile only */
.pricing_popup_inner {
  padding: 36px;
  max-height: 90vh; /* Use max-height instead of height */
  width: min(1080px, 100%);
  display: block;
  overflow: auto;
}
.btn_close_pricing_popup {
  padding: 0px;
  position: relative;
  top: -16px;
  right: -16px;
}
.btn_close_pricing_popup img { width: 28px; height: 28px !important; }
.pricing_popup_inner .package_badge {
  position: absolute;
  top: -14px;
  right: -14px;
  padding: 6px 12px;
}
.pricing_popup_inner .blue_badge { background-color: #E9EEFF; }
.pricing_popup_inner .blue_badge .text { color: #0060D1; }
.pricing_popup_inner .grey_badge { background-color: var(--bg-grey-2); }
.pricing_popup_inner .grey_badge .text { color: var(--ca-dark-grey-60); }
.pricing_popup_inner .green_badge { background-color: var(--cl-green-light); }
.pricing_popup_inner .green_badge .text { color: var(--cl-green-dark-2); }

.body_lock { overflow: hidden; }
.pricing-slider .swiper-slide {
  border: 2px solid #F4F4F4;
  padding: 32px;
  box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.06);
  height: auto; /* Allow slide height to adjust to content */
}
.pricing_popup_description { margin: 24px 0px; }

@media (min-width: 900px) and (max-width: 1320px) {
  .pricing-slider { max-width: calc(100% + 40px); }
}

/* Tablet-sm (641-900px) and Mobile (up to 640px) */
@media (max-width: 900px) {
  .calendly_inline_widget_wrapper_inner { padding: 16px; }
  .pricing_popup_inner {
    padding: 12px 16px;
    max-height: 100%;
  }
  .pricing_popup_description { margin: 16px 0px; }
  .pricing-slider .swiper-pagination { display: flex; }
  /* Enable touch scrolling for swiper */
  .pricing-slider .swiper { overflow: visible; }
  .pricing-slider {
    padding: 0px 0px 30px !important;
    margin: 0px;
    width: 100%;
    height: auto !important;
  }
  .pricing_popup_wrapper .title_h2 { font-size: 24px; line-height: 32px; }
  .btn_close_pricing_popup { top: -8px; right: -8px; }
}
/* ================================================ */
/* end of Calendly popup & Pricing popup styles */
/* ================================================ */

/* ================================================ */
/* Cookie notice styles */
/* ================================================ */

/* Cookie Banner Styles */
.cookie_banner {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.cookie_banner_content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 12px 20px;
  max-width: 700px;
  background-color: #000000; /* $bg-dark */
  border-radius: 10px;
  border: 2px solid #ffffff; /* $border-white */
}
.cookie_banner_text { margin: 0; }

/* Mobile Styles */
@media (max-width: 640px) {
  .cookie_banner { bottom: 16px; left: 16px; right: 16px; }
  .cookie_banner_content { flex-direction: column; gap: 12px; }
}
/* ================================================ */
/* end of Cookie notice styles */
/* ================================================ */