* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 500;
  font-style: normal;

  background-color: #fff;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

ul,
ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

button {
  display: block;
  cursor: pointer;
  padding: 0;
}

.container {
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  padding: 0 16px;
}

@media (min-width: 768px) {
  .container {
    padding: 0 30px;
  }
}

@media (min-width: 1440px) {
  .container {
    padding: 0 160px;
  }
}

@media (min-width: 1650px) {
  .container {
    padding: 0 270px;
  }
}

@media (min-width: 1920px) {
  .container {
    padding: 0 310px;
  }
}

.top-fixed {
  height: 170px;
  background: #fff;
}

@media (min-width: 480px) {
  .top-fixed {
    height: 150px;
  }
}

@media (min-width: 900px) {
  .top-fixed {
    height: 85px;
  }
}

.top {
  padding: 12px 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.14);
}

.top div {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  justify-content: space-between;
}

.top p {
  width: 95%;
  color: #111;

  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.top p span {
  font-weight: 600;
}

.top button {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}

#icon-container.rotate {
  transform: rotate(180deg);
}

.header {
  padding: 22px 0;

  background: #fff;
  box-shadow: 0 0 40px 0 rgba(48, 85, 103, 0.08);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo img {
  height: 40px !important;
  width: auto;
}

.header-burger {
  border: none;
  background-color: transparent;
}

.header-nav {
  display: none;
}

.bottom {
  display: none;
}

.bottom-start {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.14);

  padding: 20px;
}

.bottom-start p {
  color: #111;

  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.bottom-start p span {
  font-weight: 600;
}

@media (min-width: 900px) {
  .top {
    display: none;
  }

  .header-container {
    gap: 32px;
  }

  .header-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .header-nav-list {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
  }

  .header-nav-item {
    position: relative;

    transition: all 0.5s ease-in-out;
  }

  .header-nav-list .header-nav-item:nth-child(1) .header-nav-dropdown {
    width: 350px;
  }

  .header-nav-list
    .header-nav-item:nth-child(1)
    .header-nav-dropdown
    .header-nav-dropdown__block:nth-child(1) {
    width: 45%;
  }

  .header-nav-list
    .header-nav-item:nth-child(1)
    .header-nav-dropdown
    .header-nav-dropdown__block:nth-child(2) {
    width: 55%;
  }

  .header-nav-list .header-nav-item:nth-child(2) .header-nav-dropdown {
    width: 580px;
  }

  .header-nav-list
    .header-nav-item:nth-child(2)
    .header-nav-dropdown
    .header-nav-dropdown__block:nth-child(1) {
    width: 65%;
  }

  .header-nav-list
    .header-nav-item:nth-child(2)
    .header-nav-dropdown
    .header-nav-dropdown__block:nth-child(2) {
    width: 35%;
  }

  .header-nav-list .header-nav-item:nth-child(3) .header-nav-dropdown {
    width: 250px;
  }

  .header-nav-list
    .header-nav-item:nth-child(3)
    .header-nav-dropdown__block:nth-child(1) {
    width: 100%;
  }

  .header-nav-item-span {
    color: #2f2f2f;

    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;

    transition: all 0.5s ease-in-out;
  }

  .header-nav-item:hover .header-nav-dropdown {
    display: flex;
  }

  .header-nav-item-span:hover {
    color: #9848b3;
    cursor: pointer;
  }

  .header-nav-dropdown::before {
    content: "";
    position: absolute;

    left: 0;
    width: 100%;

    height: 30px;
    top: -15px;
    background-color: #000;
    background: transparent;
  }

  .header-nav-dropdown {
    display: none;

    gap: 32px;

    position: absolute;
    top: 170%;
    left: 0;
    padding: 24px;

    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.14);
  }

  .header-nav-dropdown__block p {
    margin-bottom: 24px;
  }

  .header-nav-dropdown__block p a {
    color: #8d8d8d;

    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;

    transition: all 0.5s ease-in-out;
  }

  .header-nav-dropdown__block p:hover a {
    text-decoration: none;
    color: #9848b3;
  }

  .header-nav-dropdown__block ul {
    list-style-type: none;
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .header-nav-dropdown__block ul li a {
    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 8px;

    transition: all 0.5s ease-in-out;
  }

  .header-nav-dropdown__block ul li a:hover {
    text-decoration: none;
  }

  .header-nav-dropdown__block ul li a span {
    color: #111;

    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    width: 100%;
  }

  .header-nav-dropdown__block ul li:hover a span {
    color: #9848b3;
  }

  .header-nav-dropdown__block ul li a svg {
    width: 20px;
    height: 20px;

    stroke: #077d37;
    width: 20%;
  }

  .header-nav-dropdown__block ul li:hover a svg {
    stroke: #9848b3;
  }

  .header-nav-btns {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .header-nav-btns li:nth-child(1) a {
    color: #2f2f2f;

    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;

    transition: all 0.5s ease-in-out;
  }

  .header-nav-btns li:nth-child(1):hover a {
    color: #9848b3;
    text-decoration: none;
  }

  .header-nav-btns li:nth-child(2) a {
    color: #fff;
    text-align: center;

    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.36px;

    padding: 16px 26px;

    border-radius: 8px;
    border: 1px solid #9848b3;
    background: #9848b3;

    transition: all 0.5s ease-in-out;
  }

  .header-nav-btns li:nth-child(2):hover a {
    border: 1px solid #751d92;
    background: #751d92;
    cursor: pointer;
    text-decoration: none;
  }

  .header-burger {
    display: none;
  }

  .bottom {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.14);

    padding: 20px;
  }

  .bottom p {
    color: #111;

    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
  }

  .bottom p span {
    font-weight: 600;
  }
}

/* === MOBILE MENU === */

.header-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  z-index: 999;

  overflow-y: auto;
}

.header-modal.active {
  transform: translateY(0);
}

.header-modal__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 16px;

  background: #fff;
  box-shadow: 0 0 40px 0 rgba(48, 85, 103, 0.08);
}

.header-modal__logo img {
  height: 40px !important;
  width: auto;
}

.header-modal__close {
  background: none;
  border: none;
  cursor: pointer;
}

.header-modal__nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 90%;
  gap: 50px;
  padding: 8px 16px 24px;
}

.header-modal__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header-modal__nav-item {
  padding: 16px 0;
}

.header-modal__nav-list .header-modal__nav-item:not(:last-child) {
  border-bottom: 1px solid #e2e2e2;
}

.header-modal__nav-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;

  cursor: pointer;
}

.header-modal__nav-toggle span,
.header-modal__nav-item a {
  color: #2f2f2f;

  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}

.header-modal__nav-toggle svg {
  width: 24px;
  height: 24px;
  stroke: #111111;
  transition: transform 0.3s ease;
}

.header-modal__nav-item.open .header-modal__nav-toggle svg {
  stroke: #9848b3;
  transform: rotate(180deg);
}

.header-modal-dropdown {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.35s ease;
  padding-left: 20px;

  display: flex;
  flex-direction: column;
  gap: 16px;
}

.header-modal__nav-item.open .header-modal-dropdown {
  max-height: 600px;
  opacity: 1;
}

.header-modal__nav-item.open .header-modal__nav-toggle span {
  color: #9848b3;
}

.header-modal-dropdown__block {
  margin-top: 10px;
}

.header-modal-dropdown__block p {
  margin-bottom: 8px;
}

.header-modal-dropdown__block p a {
  color: #8d8d8d;

  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;

  transition: all 0.5s ease-in-out;
}

.header-modal-dropdown__block p:hover a {
  text-decoration: none;
  color: #9848b3;
}

.header-modal-dropdown__block ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.header-modal-dropdown__block li a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-modal-dropdown__block li a span {
  color: #111;

  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;

  transition: all 0.5s ease-in-out;
}

.header-modal-dropdown__block li a span:active {
  color: #9848b3;
}

.header-modal-dropdown__block li a svg {
  width: 16px;
  height: 16px;
}

.header-modal__nav-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.header-modal__nav-btns li:nth-child(1) {
  color: #2f2f2f;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;

  transition: all 0.5s ease-in-out;
}

.header-modal__nav-btns li:nth-child(1):active {
  color: #9848b3;
}

.header-modal__nav-btns li:nth-child(2) {
  padding: 16px 26px;

  color: #fff;
  text-align: center;
  width: 100%;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.36px;

  border-radius: 8px;
  border: 1px solid #9848b3;
  background: #9848b3;

  transition: all 0.5s ease-in-out;
}

.header-modal__nav-btns li:nth-child(2):active {
  border: 1px solid #751d92;
  background: #751d92;
  cursor: pointer;
}

.hero {
  background: url("../img/hero-bg/hero-bg-mob.png") -551.971px -61.486px /
      324.958% 48.808% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 100%);

  background-position: center;
  background-size: cover;

  padding: 280px 0 24px;
}

.hero-forex {
  background: url("../img/hero-bg/forex-hero-bg-mob.png") -551.971px -61.486px /
      324.958% 48.808% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 100%);

  background-position: center;
  background-size: cover;

  padding: 390px 0 24px;
}

.hero-akcie {
  background: url("../img/hero-bg/akcie-hero-bg-mob.png") -551.971px -61.486px /
      324.958% 48.808% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 100%);

  background-position: center;
  background-size: cover;

  padding: 440px 0 24px;
}

.hero-proc {
  background: url("../img/hero-bg/hero-bg-mob.png") -497.19px -0.164px /
      291.528% 45.915% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 55.93%);

  background-position: center;
  background-size: cover;

  padding: 400px 0 24px;
}

.hero-client {
  background: url("../img/hero-bg/client-hero-bg-mob.png") -435.96px 0px / 252.159%
      50.607% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 55.93%);

  background-position: center;
  background-size: cover;

  padding: 320px 0 24px;
}

.hero-type {
  background: url("../img/hero-bg/types-hero-bg-mob.png") -441.067px -1.946px /
      258.602% 37.783% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 55.93%);

  background-position: center;
  background-size: cover;

  padding: 320px 0 24px;
}

.hero-paka {
  background: url("../img/hero-bg/paka-hero-bg-mob.png") -500.151px 0px / 255.903%
      37.097% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 55.93%);

  background-position: center;
  background-size: cover;

  padding: 370px 0 24px;
}

.hero-broker {
  background: url("../img/hero-bg/broker-hero-bg-mob.png") -395.676px -73.91px /
      250.066% 53.493% no-repeat,
    #1d4d3c;

  background-position: center;
  background-size: cover;

  padding: 450px 0 24px;
}

.hero-poplatky {
  background: url("../img/hero-bg/poplatky-hero-bg-mob.png") -605.145px -1.048px /
      266.06% 29.948% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 55.93%);

  background-position: center;
  background-size: cover;

  padding: 450px 0 24px;
}

.hero-vklady {
  background: url("../img/hero-bg/vklady-hero-bg-mob.png") -692.848px 0px / 289.144%
      33.858% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 55.93%);

  background-position: center;
  background-size: cover;

  padding: 450px 0 24px;
}

.hero-hodiny {
  background: url("../img/hero-bg/hodiny-hero-bg-mob.png") -637.747px -21.223px /
    352.784% 38.919% no-repeat;

  background-position: center;
  background-size: cover;

  padding: 400px 0 24px;
}

.hero-spready {
  background: url("../img/hero-bg/spready-hero-bg-mob.png") -498.878px -46.202px /
      287.453% 46.44% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 55.93%);

  background-position: center;
  background-size: cover;

  padding: 320px 0 24px;
}

.hero-bezpecn {
  background: url("../img/hero-bg/bezpecn-hero-bg-mob.png") -464.626px -0.85px /
      263.35% 31.235% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 55.93%);

  background-position: center;
  background-size: cover;

  padding: 350px 0 24px;
}

.hero-obchodovani {
  background: url("../img/hero-bg/obchodovani-hero-bg-mob.png") -937.883px -113.953px /
      434.427% 65.262% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 55.93%);

  background-position: center;
  background-size: cover;

  padding: 320px 0 24px;
}

.hero-licence {
  background: url("../img/hero-bg/licence-hero-bg-mob.png") -847.181px -41.765px /
      353.141% 43.792% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 55.93%);

  background-position: center;
  background-size: cover;

  padding: 350px 0 24px;
}

.hero-podminky {
  background: url("../img/hero-bg/podminky-hero-bg-mob.png") -489px -29.814px /
      225.596% 51.04% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 55.93%);

  background-position: center;
  background-size: cover;

  padding: 400px 0 24px;
}

.hero-investor {
  background: url("../img/hero-bg/investor-hero-bg-mob.png") -489px -29.814px /
      225.596% 51.04% no-repeat,
    linear-gradient(180deg, #008567 41.24%, #016a40 55.93%);

  background-position: center;
  background-size: cover;

  padding: 320px 0 24px;
}

.hero-pasivni {
  background: url("../img/hero-bg/pasivni-hero-bg-mob.png") -95.879px 0px / 149.169%
      44.416% no-repeat,
    #0f5e45;

  background-position: center;
  background-size: cover;

  padding: 320px 0 24px;
}

.hero-etf {
  background: url("../img/hero-bg/etf-hero-bg-mob.png") -95.879px 0px / 149.169%
      44.416% no-repeat,
    #0f5e45;

  background-position: center;
  background-size: cover;

  padding: 320px 0 24px;
}

.hero-cfd {
  background: url("../img/hero-bg/cfd-hero-bg-mob.png") -95.879px 0px / 149.169%
      44.416% no-repeat,
    #0f5e45;

  background-position: center;
  background-size: cover;

  padding: 350px 0 24px;
}

.hero-content {
  max-width: 530px;
}

.hero-forex__content,
.hero-akcie__content,
.hero-client__content,
.hero-proc__content,
.hero-type__content,
.hero-paka__content,
.hero-broker__content,
.hero-poplatky__content,
.hero-vklady__content,
.hero-hodiny__content,
.hero-spready__content,
.hero-bezpecn__content,
.hero-obchodovani__content,
.hero-licence__content,
.hero-podminky__content,
.hero-investor__content,
.hero-pasivni__content,
.hero-etf__content,
.hero-cfd__content {
  max-width: 560px;
  margin: 0 auto 0 0;
}

.hero h1,
.hero-forex h1,
.hero-akcie h1,
.hero-proc h1,
.hero-client h1,
.hero-type h1,
.hero-paka h1,
.hero-broker h1,
.hero-poplatky h1,
.hero-vklady h1,
.hero-hodiny h1,
.hero-spready h1,
.hero-bezpecn h1,
.hero-obchodovani h1,
.hero-licence h1,
.hero-podminky h1,
.hero-investor h1,
.hero-pasivni h1,
.hero-etf h1,
.hero-cfd h1 {
  color: #fff;

  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;

  margin-bottom: 8px;
}

.hero-paka h3,
.hero-broker h3,
.hero-bezpecn h3,
.hero-etf h3 {
  color: #fff;

  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.3;

  margin-bottom: 8px;
}

.hero p,
.hero-forex p,
.hero-akcie p,
.hero-proc p,
.hero-client p,
.hero-type p,
.hero-paka p,
.hero-broker p,
.hero-poplatky p,
.hero-vklady p,
.hero-hodiny p,
.hero-spready p,
.hero-bezpecn p,
.hero-obchodovani p,
.hero-licence p,
.hero-podminky p,
.hero-investor p,
.hero-pasivni p,
.hero-etf p,
.hero-cfd p {
  color: #fff;

  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.hero-poplatky p a {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.hero-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 199px;
  height: 51px;
  color: #fff;
  text-align: center;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.36px;

  border-radius: 8px;
  border: 1px solid #9848b3;
  background: #9848b3;

  margin: 40px auto 8px 0;

  transition: all 0.5s ease-in-out;
}

.hero-link:hover {
  border: 1px solid #751d92;
  background: #751d92;
  cursor: pointer;
}

.hero ul {
  display: flex;
  flex-direction: column;
  gap: 20px;

  margin-top: 24px;
}

.hero ul li {
  width: 100%;

  padding: 20px;

  border-radius: 8px;
  background: #fff;

  transition: all 0.5s ease-in-out;
}

.hero ul li a {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hero ul li a div {
  display: flex;
  align-items: center;
  gap: 20px;
}

.hero ul li a div span {
  color: #077d37;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}

.hero ul li:hover a div span {
  color: #9848b3;
}

.hero ul li a svg {
  stroke: #077d37;
}

.hero ul li:hover a svg {
  stroke: #9848b3;
}

@media (min-width: 430px) {
  .hero {
    background: url("../img/hero-bg/hero-bg-desktop.png") lightgray -0.095px 0px /
      102.033% 100% no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-forex {
    background: url("../img/hero-bg/forex-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-akcie {
    background: url("../img/hero-bg/akcie-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-proc {
    background: url("../img/hero-bg/hero-bg-desktop.png") lightgray 50% / cover
      no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-client {
    background: url("../img/hero-bg/client-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 70px 0;
  }

  .hero-type {
    background: url("../img/hero-bg/types-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-paka {
    background: url("../img/hero-bg/paka-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-broker {
    background: url("../img/hero-bg/broker-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 70px 0;
  }

  .hero-poplatky {
    background: url("../img/hero-bg/poplatky-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-vklady {
    background: url("../img/hero-bg/vklady-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 180px 0;
  }

  .hero-hodiny {
    background: url("../img/hero-bg/hodiny-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 140px 0;
  }

  .hero-spready {
    background: url("../img/hero-bg/spready-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-bezpecn {
    background: url("../img/hero-bg/bezpecn-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-obchodovani {
    background: url("../img/hero-bg/obchodovani-hero-bg-desktop.png") lightgray
      50% / cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-licence {
    background: url("../img/hero-bg/licence-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-podminky {
    background: url("../img/hero-bg/podminky-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-investor {
    background: url("../img/hero-bg/investor-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-pasivni {
    background: url("../img/hero-bg/pasivni-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-etf {
    background: url("../img/hero-bg/etf-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 50px 0;
  }

  .hero-cfd {
    background: url("../img/hero-bg/cfd-hero-bg-desktop.png") lightgray 50% /
      cover no-repeat;

    background-position: center;
    background-size: cover;

    padding: 100px 0;
  }

  .hero h1,
  .hero-forex h1,
  .hero-akcie h1,
  .hero-proc h1,
  .hero-client h1,
  .hero-type h1,
  .hero-paka h1,
  .hero-broker h1,
  .hero-poplatky h1,
  .hero-vklady h1,
  .hero-hodiny h1,
  .hero-spready h1,
  .hero-bezpecn h1,
  .hero-obchodovani h1,
  .hero-licence h1,
  .hero-podminky h1,
  .hero-investor h1,
  .hero-pasivni h1,
  .hero-etf h1,
  .hero-cfd h1 {
    font-size: 60px;
  }

  .hero-paka h3,
  .hero-broker h3,
  .hero-bezpecn h3,
  .hero-etf h3 {
    font-size: 30px;

    line-height: 1.2;
  }

  .hero p,
  .hero-forex p,
  .hero-akcie p,
  .hero-proc p,
  .hero-client p,
  .hero-type p,
  .hero-paka p,
  .hero-broker p,
  .hero-poplatky p,
  .hero-vklady p,
  .hero-hodiny p,
  .hero-spready p,
  .hero-bezpecn p,
  .hero-obchodovani p,
  .hero-licence p,
  .hero-podminky p,
  .hero-investor p,
  .hero-pasivni p,
  .hero-etf p,
  .hero-cfd p {
    font-size: 20px;
  }

  .hero-link {
    width: 248px;
    height: 69px;

    font-size: 24px;
  }

  .hero ul {
    margin-top: 50px;
  }
}

.hero ul {
  flex-direction: row;
}

.hero ul li {
  max-width: 255px;
}

.about {
  padding: 60px 0;
}

.about-content {
  padding: 24px;

  border-radius: 10px;
  background: var(
    --Green-gradient,
    linear-gradient(180deg, #00643c 0.03%, #00bf80 100%)
  );
}

.about-content__img {
  display: none;
}

.about-content__text h2 {
  color: #fff;

  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;

  margin-bottom: 16px;
}

.about-content__text p {
  color: #fff;

  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;

  margin-bottom: 24px;
}

.about-content__text a {
  color: #fff;
  text-align: center;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.36px;

  width: 147px;
  height: 51px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
  border: 1px solid #9848b3;
  background: #9848b3;

  transition: all 0.5s ease-in-out;
}

.about-content__text a:hover {
  border: 1px solid #751d92;
  background: #751d92;
}

@media (min-width: 768px) {
  .about {
    padding: 120px 0;
  }

  .about-content {
    padding: 50px;
  }

  .about-content__text h2 {
    font-size: 36px;

    line-height: 1.2;

    margin-bottom: 24px;
  }

  .about-content__text p {
    margin-bottom: 32px;
  }
}

@media (min-width: 900px) {
  .about-content__img {
    display: block;
    width: 50%;
  }

  .about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 50px 110px;
  }

  .about-content__text {
    width: 50%;
  }
}

/* .review {
	padding-top: 40px;
} */

/* .review-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
} */

.review-testimonials {
  max-width: 600px;
  width: 100%;

  margin: 0 auto;
}

.swiper {
  padding: 0 55px;
}

.swiper-wrapper {
  height: 250px;
}

.review-testimonial__item {
  grid-template-columns: 1fr;
  text-align: left;
  gap: 8px;
}

.review-testimonial__photo {
  width: 60px;
  height: 60px;
}

.review-testimonial__content {
  color: #111;

  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.review-testimonial__content strong {
  display: block;
  margin-top: 8px;
  color: #077d37;
  font-weight: 600;
}

.swiper-button-prev,
.swiper-button-next {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #077d37;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;

  transition: all 0.5s ease-in-out;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: #04622b;
}

.swiper-button-prev svg,
.swiper-button-next svg {
  width: 20px;
  height: 20px;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
  right: 0px;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
  left: 0px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: none !important;
}

.review-bottom h3 {
  color: #077d37;
  text-align: center;

  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;

  margin-bottom: 5px;
}

.review-bottom p {
  color: #111;
  text-align: center;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;

  margin-bottom: 16px;
}

.review-bottom img {
  width: 100%;
  max-width: 287px;
  height: auto;

  margin: 0 auto 16px;
}

.review-bottom div {
  padding: 16px;

  border-radius: 2px;
  border: 1px solid #00b67a;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  width: 247px;
  height: 52px;
  margin: 0 auto;
}

.review-bottom div span {
  color: #111;
  text-align: center;

  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.review-bottom div img {
  height: 20px;
  width: auto;

  margin: 0;
}

@media (min-width: 768px) {
  .swiper {
    padding: 0 65px;
  }

  .swiper-wrapper {
    height: 200px;
  }

  .review-testimonial__item {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .review-testimonial__photo {
    width: 80px;
    height: 80px;
  }

  .review-testimonial__content {
    line-height: 1.5;

    position: relative;
    padding: 20px 0;
  }

  .review-testimonial__content::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: -16px;
    width: 1px;
    height: 68.5px;
    background-color: #e2e2e2;
  }

  .review-testimonial__content::after {
    content: "";
    position: absolute;
    top: 10px;
    left: -16px;
    width: 1px;
    height: 68.5px;
    background-color: #e2e2e2;
  }

  .review-testimonial__content strong {
    margin-top: 16px;
    font-size: 18px;
  }

  .swiper-button-prev,
  .swiper-button-next {
    width: 48px;
    height: 48px;
  }

  .swiper-button-prev svg,
  .swiper-button-next svg {
    width: 24px;
    height: 24px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    top: 28%;
  }

  .swiper-button-next,
  .swiper-rtl .swiper-button-prev {
    right: 10px;
  }

  .swiper-button-prev,
  .swiper-rtl .swiper-button-next {
    left: 0px;
  }

  .swiper-button-prev::after,
  .swiper-button-next::after {
    content: none !important;
  }

  .review-bottom h3 {
    font-size: 36px;
  }
}

@media (min-width: 1100px) {
  .swiper {
    padding: 0 55px;
  }

  .swiper-wrapper {
    height: 250px;
  }
}

.spreads {
  padding-top: 60px;
}

.spreads-title {
  color: #077d37;
  text-align: center;

  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;

  margin-bottom: 24px;
}

.spreads-table {
  background: transparent;
  padding-bottom: 24px;

  margin-bottom: 24px;

  overflow: auto;
}

/* === WebKit browsers (Chrome, Edge, Safari) === */
.spreads-table::-webkit-scrollbar {
  height: 10px;
}

.spreads-table::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 8px;
}

.spreads-table::-webkit-scrollbar-thumb {
  background: #8d8d8d;
  border-radius: 8px;
}

.spreads-table::-webkit-scrollbar-thumb:hover {
  background: #751d92;
  cursor: pointer;
}

.spreads-head div {
  color: #8d8d8d;
  text-align: center;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;

  width: 260px;
  height: 84px;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.spreads-row div {
  color: #111;
  text-align: center;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;

  width: 260px;
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.spreads-row__shadow div:nth-child(2) {
  box-shadow: 0 0 40px 0 rgba(48, 85, 103, 0.08);
}

.spreads-row__gray div:nth-child(2) {
  background: #dbdbdb;
  box-shadow: 0 0 40px 0 rgba(48, 85, 103, 0.08);
}

.spreads-head,
.spreads-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.6fr 1.2fr 1.4fr;

  align-items: center;
  text-align: center;
}

.spreads-row__one div {
  height: 108px;
}

.cell-instrument {
  gap: 8px;
}

.cell-instrument__one {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 23px 20px;
}

.cell-instrument__one div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0px;

  position: relative;
  left: 20px;
}

.flag {
  width: auto;
  height: 24px;

  object-fit: cover;
}

.badge {
  color: #fff;

  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;

  background: #077d37;
  padding: 2px 4px;
  text-align: start;
}

.spreads-cta {
  text-align: center;
}
.spreads-btn {
  display: inline-block;
  padding: 16px 26px;
  border-radius: 8px;
  border: 1px solid #9848b3;

  color: #9848b3;
  text-align: center;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.36px;

  text-decoration: none;

  transition: all 0.5s ease-in-out;
}
.spreads-btn:hover {
  border: 1px solid #9848b3;
  background: #9848b3;
  color: #fff;
}

@media (min-width: 768px) {
  .spreads {
    padding-top: 120px;
  }

  .spreads-title {
    font-size: 36px;

    line-height: 1.2;
  }
}

.forex {
  padding: 60px 0;
}

.forex-content {
  padding: 24px;

  border-radius: 8px;
  background: var(
    --Green-gradient,
    linear-gradient(180deg, #00643c 0.03%, #00bf80 100%)
  );
}

.forex-content h2 {
  color: #fff;
  text-align: center;

  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;

  margin-bottom: 24px;
}

.forex-content a {
  color: #fff;
  text-align: center;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.36px;

  width: 199px;
  height: 51px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
  border: 1px solid #9848b3;
  background: #9848b3;

  margin: 0 auto 8px;

  transition: all 0.5s ease-in-out;
}

.forex-content a:hover {
  border: 1px solid #751d92;
  background: #751d92;
}

.forex-content p {
  color: #fff;
  text-align: center;

  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .forex {
    padding: 120px 0;
  }

  .forex-content {
    padding: 50px;
  }

  .forex-content h2 {
    font-size: 36px;

    line-height: 1.2;

    margin-bottom: 32px;
  }

  .forex-content p {
    font-size: 20px;
  }
}

@media (min-width: 900px) {
  .forex-content {
    padding: 50px 110px;
  }
}

.footer {
  padding: 60px 0 40px;
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 2px solid #e2e2e2;
}

.footer-top__contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-top__contact-img {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-top__contact-img img {
  width: 100px;
  height: 100px;
}

.footer-top__contact-img div h3 {
  color: #077d37;

  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
}

.footer-top__contact-img div p {
  color: #077d37;

  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.footer-top__contact-mail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-top__contact-mail div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-top__contact-mail a {
  display: flex;
  align-items: center;
  gap: 8px;

  transition: all 0.5s ease-in-out;
}

.footer-top__contact-mail a svg {
  width: 24px;
  height: 24px;
}

.footer-top__contact-mail a span {
  color: #077d37;

  font-size: 16px !important;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.footer-top__contact-mail a:hover span {
  color: #9848b3;
}

.footer-top__contact-mail div p {
  color: #595959;

  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0;
}

.footer-top ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-top ul div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-top ul div li {
  transition: all 0.5s ease-in-out;
}

.footer-top ul div li a {
  color: #077d37;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}

.footer-top ul div li:hover a {
  color: #9848b3;
  text-decoration: none;
}

.footer-center {
  padding: 32px 0;
}

.footer-center div {
  margin-bottom: 32px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}

.footer-center div img {
  height: 24px !important;
  width: auto;
}

.footer-center p {
  color: #111;

  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.footer-bottom ul {
  display: flex;
  flex-direction: column;
  gap: 8px;

  margin-bottom: 16px;
}

.footer-bottom ul li {
  transition: all 0.5s ease-in-out;
}

.footer-bottom ul li a {
  color: #077d37;

  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

.footer-bottom ul li:hover a {
  color: #9848b3;
}

.footer-bottom__link {
  color: #077d37;

  background-color: transparent;
  border: none;

  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;

  margin: 0 auto 32px;

  transition: all 0.5s ease-in-out;
}

.footer-bottom__link:hover {
  color: #9848b3;
}

.footer-bottom p {
  color: #111;
  text-align: center;

  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .footer-top {
    flex-direction: row;
  }

  .footer-top__contact {
    width: 70%;
  }

  .footer-top__contact-img {
    flex-direction: row;
    align-items: center;
  }

  .footer-top__contact-img div p {
    font-size: 20px;
  }

  .footer-top__contact-mail a span {
    font-size: 18px;
  }

  .footer-top ul {
    gap: 24px;
  }

  .footer-top ul div {
    gap: 24px;
  }

  .footer-center div {
    justify-content: center;
  }

  .footer-center div img {
    height: 30px !important;
  }

  .footer-bottom ul {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
  }

  .footer-bottom ul li {
    position: relative;
  }

  .footer-bottom ul li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 0;
    right: -8px;
    width: 1px;
    height: 100%;
    background-color: #077d37;
  }
}

@media (min-width: 900px) {
  .footer {
    padding: 60px 0 140px;
  }
}

@media (min-width: 1000px) {
  .footer-top ul {
    flex-direction: row;

    gap: 150px;

    width: 50%;
  }

  .footer-top__contact {
    width: 50%;
  }
}

.subscribe {
  padding: 40px 0;
  background-color: #f8f9fa;
}

.subscribe-content {
  display: flex;
  flex-direction: column;
  gap: 24px;

  padding: 24px;

  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.14);
}

.subscribe-content__top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.subscribe-content__top svg {
  width: 50px;
  height: 50px;
}

.subscribe-content__top div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subscribe-content__top div h3 {
  color: #077d37;

  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
}

.subscribe-content__top div p {
  color: #595959;

  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.subscribe-form form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.subscribe-form form div {
  width: 100%;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subscribe-input {
  width: 100% !important;
  height: 62px !important;
  border: none;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2.321px 12.183px 0 rgba(0, 0, 0, 0.14);

  padding: 20px;
  color: #111;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}
.subscribe-input::placeholder {
  color: #8d8d8d;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}

.subscribe-btn {
  border-radius: 8px;
  border: 1px solid #9848b3;
  background: #9848b3;

  width: 100%;
  height: 62px;
  padding: 16px 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  text-align: center;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.36px;

  cursor: pointer;
  transition: all 0.5s ease-in-out;
}

.subscribe-btn:hover {
  border: 1px solid #751d92;
  background: #751d92;
}

.subscribe-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.subscribe-consent span {
  color: #2f2f2f;

  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;

  width: 80%;
}

.subscribe-consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid #e2e2e2;
  background: #fff;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease;
}

.subscribe-consent input[type="checkbox"]:hover {
  border: 1px solid #077d37;
}

.subscribe-consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M4.07812 10.3008L0.175781 6.39844C0.0585938 6.28125 0 6.14062 0 5.97656C0 5.8125 0.0585938 5.67188 0.175781 5.55469L1.01953 4.69922C1.13672 4.58203 1.2793 4.52344 1.44727 4.52344C1.61523 4.52344 1.75781 4.58203 1.875 4.69922L4.5 7.32422L10.125 1.69922C10.2422 1.58203 10.3848 1.52344 10.5527 1.52344C10.7207 1.52344 10.8633 1.58203 10.9805 1.69922L11.8242 2.55469C11.9414 2.67188 12 2.8125 12 2.97656C12 3.14062 11.9414 3.28125 11.8242 3.39844L4.92188 10.3008C4.80469 10.418 4.66406 10.4766 4.5 10.4766C4.33594 10.4766 4.19531 10.418 4.07812 10.3008Z' fill='%23077D37'/></svg>");
}

.subscribe-consent a {
  color: #077d37;

  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;

  transition: all 0.5s ease-in-out;
}
.subscribe-consent a:hover {
  color: #9848b3;
}

@media (min-width: 768px) {
  .subscribe-content {
    padding: 50px;
  }

  .subscribe-content__top {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }

  .subscribe-content__top svg {
    width: 65px;
    height: 65px;
  }

  .subscribe-form form div {
    flex-direction: row;
    align-items: center;
    height: 62px;
  }

  .subscribe-input {
    width: 312px;
    height: 100%;
  }

  .subscribe-btn {
    width: 450px;
    height: 62px;

    color: #fff;
    text-align: center;
  }
}

@media (min-width: 900px) {
  .subscribe-content {
    padding: 50px 110px;
  }
}

@media (min-width: 1200px) {
  .subscribe-content {
    flex-direction: row;
    gap: 20px;
  }

  .subscribe-form {
    width: 50%;
  }

  .subscribe-content__top {
    width: 50%;
  }
}

/* ========== MODAL BASE ========== */
.cookie-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1000;
}

.cookie-modal.is-open {
  display: block;
}

.cookie-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

.cookie-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: calc(100% - 32px);
  padding: 24px;

  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.14);

  overflow: hidden;

  display: flex;
  flex-direction: column;
}

/* ========== HEADER ========== */
.cookie-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e2e2;
}

.cookie-header img {
  max-height: 33px;
  width: auto;
}

/* ========== TABS ========== */
.cookie-tabs {
  display: flex;
  border-radius: 8px;
  background: #f8f9fa;

  margin-top: 16px;
}

.cookie-tab {
  flex: 1;
  padding: 8px;
  border: none;
  background: transparent;

  color: #111;

  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  transition: all 0.5s ease-in-out;
}
.cookie-tab:hover {
  background: rgba(7, 125, 55, 0.3);
  cursor: pointer;
  border-radius: 8px;
}

.cookie-tab.active {
  font-weight: 600;

  border-radius: 8px;
  border-bottom: 1px solid #077d37;
  background: rgba(7, 125, 55, 0.3);
}

/* ========== CONTENT ========== */
.cookie-content {
  margin: 16px 0 24px;

  overflow-y: auto;
  max-height: 60vh;
}
.cookie-panel {
  display: none;
  animation: fadeIn 0.25s ease;
}

.cookie-panel.active {
  display: block;
}

.cookie-panel__scroll {
  height: 170px;
  overflow: auto;
  padding-right: 8px;

  margin-bottom: 16px;
}

/* === WebKit browsers (Chrome, Edge, Safari) === */
.cookie-panel__scroll::-webkit-scrollbar {
  width: 5px;
}

.cookie-panel__scroll::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 8px;
}

.cookie-panel__scroll::-webkit-scrollbar-thumb {
  background: #8d8d8d;
  border-radius: 8px;
}

.cookie-panel__scroll::-webkit-scrollbar-thumb:hover {
  background: #751d92;
  cursor: pointer;
}

.cookie-panel h3 {
  color: #111;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;

  margin-bottom: 8px;
}

.cookie-panel p {
  color: #2f2f2f;

  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.cookie-panel p a {
  color: #077d37;

  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;

  transition: all 0.5s ease-in-out;
}

.cookie-panel p a:hover {
  color: #9848b3;
}

.cookie-card {
  background: #f8f8f8;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* ========== TOGGLES ========== */
.cookie-toggles,
.cookie-toggles__tab2 {
  list-style: none;
  padding: 0;

  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cookie-toggles__tab2 {
  height: 300px;
}

.cookie-toggles li {
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px 16px;
}

.cookie-toggles__tab2 li {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px 16px;
}

.cookie-toggles__tab2 li div {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 12px 16px;
  border-radius: 8px;
  background: #f8f9fa;
}

.cookie-toggles li span {
  color: #111;

  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
}

.cookie-toggles__tab2 li span {
  color: #111;

  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.cookie-toggles__tab2 li p {
  color: #2f2f2f;

  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;
}

.switch {
  position: relative;
  width: 40px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  inset: 0;
  background: #e2e2e2;
  border-radius: 12px;
  transition: 0.2s;
}

.slider:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 1px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}

.switch input:checked + .slider {
  background: #077d37;
}

.switch input:disabled + .slider {
  background: #077d37;
  opacity: 0.6;
}

.switch input:checked + .slider:before {
  transform: translateX(20px);
}

/* ========== FOOTER ========== */
.cookie-footer {
  display: flex;
  align-items: center;
  gap: 16px;
}

.btn {
  padding: 16px 20px;
  border-radius: 8px;
  border-radius: 8px;
  border: 1px solid #9848b3;

  height: 51px;
}

.btn-outline {
  background-color: transparent;

  color: #9848b3;
  text-align: center;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.36px;

  width: 155px;

  transition: all 0.5s ease-in-out;
}

.btn-outline:hover {
  border: 1px solid #9848b3;
  background: #9848b3;
  color: #fff;
}

.btn-primary {
  color: #fff;
  text-align: center;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.36px;

  border-radius: 8px;
  border: 1px solid #9848b3;
  background: #9848b3;

  width: 138px;
}

.btn-primary:hover {
  border: 1px solid #751d92;
  background: #751d92;
}

/* ========== ANIMATIONS & RESPONSIVE ========== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .cookie-dialog {
    padding: 32px;
  }

  /* ========== TABS ========== */

  .cookie-tab {
    padding: 8px 24px;

    font-size: 16px;
  }

  /* ========== CONTENT ========== */

  .cookie-panel__scroll {
    padding-right: 0px;
    height: auto;
  }

  .cookie-panel h3 {
    font-size: 18px;
  }

  .cookie-panel p {
    font-size: 14px;
  }

  .cookie-card {
    background: #f8f8f8;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 10px;
  }

  /* ========== TOGGLES ========== */
  .cookie-toggles {
    flex-direction: row;
    align-items: center;
    width: 100%;
  }

  .cookie-toggles li {
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    width: 25%;
  }

  .cookie-toggles li span {
    font-size: 16px;
  }

  .cookie-toggles__tab2 li span {
    font-size: 18px;

    font-weight: 600;
  }

  .cookie-toggles__tab2 li p {
    font-size: 14px;
  }
}

@media (min-width: 900px) {
  .cookie-dialog {
    max-width: 860px;
  }
}

.forex-top {
  padding: 22px 0;
}

.forex-top__content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.forex-top__content img {
  width: 36px;
  height: 36px;
}

.forex-top__content-link {
  color: #8d8d8d;

  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.4;

  transition: all 0.5s ease-in-out;
}

.forex-top__content-link:hover {
  text-decoration: none;
  color: #9848b3;
}

.forex-top__content p {
  color: #9848b3;

  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

@media (min-width: 768px) {
  .forex-top__content {
    gap: 8px;
  }
}

.list-green li {
  color: #000;
  position: relative;
}

.list-green li:before {
  content: "";
  height: 30px;
  width: 30px;

  background-image: url("../img/svg/forex-logo-green.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 24px;
}