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

/* FONTS */
@font-face {
  font-family: 'Montserrat-ExtraLight';
  src: url('fonts/Montserrat-ExtraLight.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat-Light';
  src: url('fonts/Montserrat-Light.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat-SemiBold';
  src: url('fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Montserrat-Italic';
  src: url('fonts/Montserrat-Italic.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* ANIMATIONS */
@keyframes fadeInZoom {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {opacity: 1;
      transform: scale(1);
  }
}
@keyframes revealText {
  0% {
    clip-path: inset(0 0 100% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@-webkit-keyframes sdb06 {
  0% {
    -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb06 {
  0% {
    transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes move {
  0% {
    transform: translateY(0em);
  }
  50% {
    transform: translateY(12em);
  }
  100% {
    transform: translateY(0em);
  }
}
@keyframes appear {
  from {
    opacity: 0;
    transform: scale(1); /* можна трохи зменшити при старті */
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes card-marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100vw);
  }
}

/* Загальні стилі */
html, body {
  color: #004558;
  background: #cdcfd4;
  height: 100%;
}

/* Хедер */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #cdcfd4;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 1000;
}

header.scrolled {
  background-color: #004558;
}

/* Логотип */
.logo {
  font-family: 'Montserrat-ExtraLight', sans-serif;
  font-size: 24pt;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 1px;
  color: #004558;
  transition: transform 0.15s ease, filter 0.2s ease;
}

.logo:hover {
  font-family: 'Montserrat-ExtraLight', sans-serif;
  font-size: 24pt;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 1px;
  color: #004558;
  transform: scale(1.05);
}

.logo:active {
  font-family: 'Montserrat-ExtraLight', sans-serif;
  font-size: 24pt;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 1px;
  color: #004558;
  transform: scale(0.95);
}

.scrolled .logo {
  color: #cdcfd4;
}

/* Навігація в хедері */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 5%;
}

.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Montserrat-Light', sans-serif;
  font-size: 16pt;
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  text-decoration: none;
  color: #004558;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-links li a:hover {
  font-weight: bold;
}

.nav-links li a.active {
  font-weight: bold; /* Робить текст жирним */
}

.scrolled .nav-links li a {
  color: #cdcfd4;
}

.social-buttons {
  display: flex;
  gap: 10px;
}

@media (max-width:1400px){
  .social-buttons {
    display: none;
  }
}

.social-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  transition: transform 0.15s ease, filter 0.2s ease;
}

.social-buttons img {
  width: 100%;
  height: 100%;
  filter: invert(22%) sepia(51%) saturate(686%) hue-rotate(155deg) brightness(91%) contrast(88%); /* колір #004558 */
  transition: filter 0.2s ease;
}

.scrolled .social-buttons img {
  filter: invert(92%) sepia(1%) saturate(383%) hue-rotate(180deg) brightness(95%) contrast(89%); /* колір #cdcfd4 */
}

.social-buttons a:hover {
  transform: scale(1.35);
}

.social-buttons a:active {
  transform:  scale(0.80);
}

/* Правий окремий блок (для кнопки записатися) */
.nav-right {
  display: flex;
  align-items: center;
  gap: 25px; /* відстань між списком і кнопкою */
}

/* Кнопка "Записатися" */ 
.button {
  all: unset;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  border-radius: 100em;
  background-color: #004558;
  box-shadow:
    -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
    0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
}
.button::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: calc(100% + 0.3em);
  height: calc(100% + 0.3em);
  top: -0.15em;
  left: -0.15em;
  border-radius: inherit;
  background: linear-gradient(
    -135deg,
    #004558,
    transparent 20%,
    transparent 100%
  );
  filter: blur(0.0125em);
  opacity: 0.25;
  mix-blend-mode: multiply;
}
.button .button-outer {
  position: relative;
  z-index: 1;
  border-radius: inherit;
  transition: box-shadow 300ms ease;
  will-change: box-shadow;
  box-shadow:
    0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1),
    0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5),
    0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25);
}
.button:hover .button-outer {
  box-shadow:
    0 0 0 0 rgba(5, 5, 5, 1),
    0 0 0 0 rgba(5, 5, 5, 0.5),
    0 0 0 0 rgba(5, 5, 5, 0.25);
}
.button-inner {
  --inset: 0.035em;
  position: relative;
  z-index: 1;
  border-radius: inherit;
  padding: 1em 1.5em;
  background-image: linear-gradient(
    135deg,
    #cdcfd4,
    rgba(180, 180, 180, 1)
  );
  transition:
    box-shadow 300ms ease,
    clip-path 250ms ease,
    background-image 250ms ease,
    transform 250ms ease;
  will-change: box-shadow, clip-path, background-image, transform;
  overflow: clip;
  clip-path: inset(0 0 0 0 round 100em);
  box-shadow:
        /* 1 */
    0 0 0 0 inset rgba(5, 5, 5, 0.1),
    /* 2 */ -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25),
    /* 3 */ 0 0 0 0 inset rgba(5, 5, 5, 0.1),
    /* 4 */ 0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25),
    /* 5 */ 0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1),
    /* 6 */ 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
    /* 7 */ -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25);
}
.button:hover .button-inner {
  clip-path: inset(
    clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px)
      clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 100em
  );
  box-shadow:
        /* 1 */
    0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),
    /* 2 */ -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),
    /* 3 */ 0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5),
    /* 4 */ 0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15),
    /* 5 */ 0 0 0 0 inset rgba(255, 255, 255, 1),
    /* 6 */ 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
    /* 7 */ -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25);
}
.button .button-inner span {
  position: relative;
  z-index: 4;
  font-family: 'Montserrat-Light', sans-serif;
  font-size: 14pt;
  letter-spacing: -0.05em;
  font-weight: 600;
  color: #004558;
  background-image: linear-gradient(
    135deg,
    #cdcfd4,
    #004558
  );
  -webkit-background-clip: text;
  background-clip: text;
  transition: transform 250ms ease;
  display: block;
  will-change: transform;
  text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.button:hover .button-inner span {
  transform: scale(0.975);
}
.button:active .button-inner {
  transform: scale(0.900);
}

.button-inner a {
   text-decoration: none;
     color: #004558;
}
/* Головна секція (Hero) */
.hero {
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-wrap: wrap; /* Щоб на менших екранах блоки переносилися */
  width: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 100px;
  position: relative;
  overflow: hidden; /* Щоб приховувати зайві елементи */
}

/* Блок зображення */
.hero-image {
  flex: 1 1 200px;
  max-width: 450px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}

.hero-image img {
  width: 85%;
  border-radius: 10rem;
  object-fit: cover;
  opacity: 0;
  transform: scale(0.5);
  animation: fadeInZoom 0.5s ease-out forwards;
  position: relative;
  z-index: 1;
  animation-delay: 0.5s;
}

/* Декоративне коло (крутілка) */ 
.hero-spinner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(180px, -120px);
  z-index: 2;
}

.loaders,
.loadersB {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: appear 1s ease forwards;
  animation-delay: 4.0s;
}
.loader {
  position: absolute;
  width: 1.15em;
  height: 13em;
  border-radius: 50px;
  background: #e0e0e0;
}
.loader:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.15em;
  height: 5em;
  background: #e0e0e0;
  border-radius: 50px;
  border: 1px solid #e2e2e2;
  box-shadow:
    inset 5px 5px 15px #d3d2d2ab,
    inset -5px -5px 15px #e9e9e9ab;
  mask-image: linear-gradient(
    to bottom,
    black calc(100% - 48px),
    transparent 100%
  );
}
.loader::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.15em;
  height: 4.5em;
  background: #e0e0e0;
  border-radius: 50px;
  border: 1px solid #e2e2e2;
  box-shadow:
    inset 5px 5px 15px #d3d2d2ab,
    inset -5px -5px 15px #e9e9e9ab;
  mask-image: linear-gradient(
    to top,
    black calc(100% - 48px),
    transparent 100%
  );
}
.loaderA {
  position: absolute;
  width: 1.15em;
  height: 13em;
  border-radius: 50px;
  background: transparent;
}
.ball0, .ball1, .ball2, .ball3, .ball4, .ball5, .ball6, .ball7, .ball8,
.ball9 {
  width: 1.15em;
  height: 1.15em;
  box-shadow:
    #004558 0px -10px 10px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -15px 15px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -40px 20px 0px inset,
    rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px,
    0px -1px 15px -8px rgba(0, 0, 0, 0.09);
  border-radius: 50%;
  transition: transform 800ms cubic-bezier(1, -0.4, 0, 1.4);
  background-color: rgb(232, 232, 232, 1);
  animation: 3.63s move ease-in-out infinite;
}
.loader:nth-child(2) {
  transform: rotate(20deg);
}
.loader:nth-child(3) {
  transform: rotate(40deg);
}
.loader:nth-child(4) {
  transform: rotate(60deg);
}
.loader:nth-child(5) {
  transform: rotate(80deg);
}
.loader:nth-child(6) {
  transform: rotate(100deg);
}
.loader:nth-child(7) {
  transform: rotate(120deg);
}
.loader:nth-child(8) {
  transform: rotate(140deg);
}
.loader:nth-child(9) {
  transform: rotate(160deg);
}
.loaderA:nth-child(2) {
  transform: rotate(20deg);
}
.loaderA:nth-child(3) {
  transform: rotate(40deg);
}
.loaderA:nth-child(4) {
  transform: rotate(60deg);
}
.loaderA:nth-child(5) {
  transform: rotate(80deg);
}
.loaderA:nth-child(6) {
  transform: rotate(100deg);
}
.loaderA:nth-child(7) {
  transform: rotate(120deg);
}
.loaderA:nth-child(8) {
  transform: rotate(140deg);
}
.loaderA:nth-child(9) {
  transform: rotate(160deg);
}
.ball1 {
  animation-delay: 0.2s;
}
.ball2 {
  animation-delay: 0.4s;
}
.ball3 {
  animation-delay: 0.6s;
}
.ball4 {
  animation-delay: 0.8s;
}
.ball5 {
  animation-delay: 1s;
}
.ball6 {
  animation-delay: 1.2s;
}
.ball7 {
  animation-delay: 1.4s;
}
.ball8 {
  animation-delay: 1.6s;
}
.ball9 {
  animation-delay: 1.8s;
}

/* Текстова частина */
.hero-text {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  margin-bottom: 0.5%;
}

.hero-text h1 {
  font-family: 'Montserrat-SemiBold', sans-serif;
  font-size: 48pt;
  font-weight: 700;
  clip-path: inset(100% 0 0 0);
  animation: revealText 0.5s ease-out forwards;
  animation-delay: 1s;
}

.firstline {
  font-family: 'Montserrat-Light', sans-serif;
  white-space: nowrap;
  font-size: 1.4rem;
  line-height: 1.5;
  margin-bottom: 5px;
  opacity: 0;
  transform: translateY(50px);
  animation: fadeInUp 0.4s ease-out forwards;
  animation-delay: 1.5s;
  font-weight: bold;
}

.secondline {
  font-family: 'Montserrat-Light', sans-serif;
  white-space: nowrap;
  font-size: 1.4rem;
  line-height: 1.5;
  margin-bottom: 5px;
  opacity: 0;
  transform: translateY(50px);
  animation: fadeInUp 0.4s ease-out forwards;
  animation-delay: 2.0s;
  font-weight: bold;
}

.thirdline {
  font-family: 'Montserrat-Light', sans-serif;
  white-space: nowrap;
  font-size: 1.4rem;
  line-height: 1.5;
  margin-bottom: 5px;
  opacity: 0;
  transform: translateY(50px);
  animation: fadeInUp 0.4s ease-out forwards;
  animation-delay: 2.5s;
  font-weight: bold;
}

.fourthline {
  font-family: 'Montserrat-Light', sans-serif;
  white-space: nowrap;
  font-size: 1.4rem;
  line-height: 1.5;
  margin-bottom: 5px;
  opacity: 0;
  transform: translateY(50px);
  animation: fadeInUp 0.4s ease-out forwards;
  animation-delay: 3.0s;
  font-weight: bold;
}

.fifthline {
  font-family: 'Montserrat-Light', sans-serif;
  white-space: nowrap;
  font-size: 1.4rem;
  line-height: 1.5;
  margin-bottom: 5px;
  opacity: 0;
  transform: translateY(50px);
  animation: fadeInUp 0.4s ease-out forwards;
  animation-delay: 3.5s;
  font-weight: bold;
}


/* Arrow (Стрілка Scroll вниз) */
.demo a {
  display: block;         /* або inline-block, але block легше центрувати */
  width: max-content;     /* або конкретна ширина */
  margin: 0 auto;         /* автоматичні лівий і правий відступи для центрування */
  position: relative;
  z-index: 2;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: #004558;
  font-family: 'Montserrat-Light', sans-serif;
  font-size: 16pt;
  text-decoration: none;
  text-decoration: none;
  transition: opacity .3s;
  margin-top: 2%;
  margin-bottom: -1%;
}
.demo a:hover {
  font-weight: bold;
}

#arrow a {
  padding-top: 70px;
}
#arrow a span {
  position: absolute;
  top: 0%;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #004558;
  border-bottom: 1px solid #004558;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  -webkit-animation: sdb06 1.5s infinite;
  animation: sdb06 1.5s infinite;
  box-sizing: border-box;
}

.about {
  background-color: #004558;
  padding: 2.2rem 6%;
}

.about-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: space-between; /* розносить блоки вліво і вправо */
  align-items: center; /* вертикально центрує */
  gap: 0px; /* відстань між колонками */
}

.about-left {
    flex: 1; /* обидві колонки займають рівну ширину */
}

.about-left p {
  color: #cdcfd4;   /* будь-який колір */
  font-size: 16pt;  /* за бажанням змінити розмір */
  line-height: 1.6; /* для кращої читабельності */
  font-family: 'Montserrat-Italic', sans-serif;
  text-indent: 30px;
  margin-bottom: 30px;
  margin-top: 0px; /* відступ від верху секції */
  margin-right: 6%;
  text-align: justify; /* МОЖЛИВО ПРИБРАТИ */ /*<-----------*/
}

.about-left p:first-child {
  margin-top: 80px;
}

.about-left p:last-child {
  margin-bottom: 80px;
}

.about-right {
  flex: 1; /* обидві колонки займають рівну ширину */
}

.about-right p {
  text-align: left; /* текст у кожній колонці центрований */
}



.card {
  opacity: 0; /* Початково прихований */;
  display: flex;             /* Вмикаємо flex */
  flex-direction: column;    /* Вертикальне розташування */
  padding: 40px 20px;         /* Відступи з усіх сторін (збільш або зменш — як потрібно) */
  height: 51rem;              /* Фіксована висота */
  min-height: 51rem; /* Мінімальна висота для збереження дизайну */
  max-height: 70rem; /* Максимальна висота для уникнення надмірного розтягування */
  overflow-y: hidden; /* Додаємо прокрутку, якщо вміст перевищує max-height */
  overflow-wrap: break-word; /* Дозволяємо переносити текст */
  box-sizing: border-box;    /* Щоб padding не розширював розміри */
  margin-left: 2%;
  border: 2px solid #004558;
  flex: 1 1 200px;
  position: relative;
  object-fit: cover;
  transform: scale(0.5);
  transition: opacity 0.5s ease, transform 0.5s ease; /* Плавний перехід */
  position: relative;
  z-index: 1;
  animation-delay: 1s;
  border-radius: 6.25em;
  background: #cdcfd4;
  box-shadow: 5px 5px 40px #cdcfd4,
              0px 0px 40px #cdcfd4;
  scale: 90%; /* ПОДИВИТИСЬ, МОЖЛИВО ВИДАЛИТИ <--------------*/
}


.card.animate {
  opacity: 1; /* Показати елемент */
  transform: scale(1); /* Масштаб 100% */
}

/* Перемикач Освіта/Досвід у .card */
.card-switcher {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}
.switch-btn {
  font-family: 'Montserrat-Light', sans-serif;
  font-size: 20pt;
  padding: 7px 22px;
  border-radius: 100em;
  border: none;
  background: #e0e0e0;
  color: #004558;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Тінь вниз вправо */
  outline: none;
  margin-bottom: 1%;
}

.switch-btn:not(.active):hover {
  font-weight: bold;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Тінь вниз вправо */
}

.switch-btn.active, .switch-btn:focus {
  background: #004558;
  color: #fff;
  font-weight: bold;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); /* Тінь вниз вправо */
  
}

.card-divider {
  border: none;
  border-top: 2px solid #004558;
  margin: 15px auto;
  opacity: 0.25;
  width: 90%;
  align-self: center;
}

.card-item {
  margin-left: 5%;
  display: flex;
  gap: 3%;
  margin-bottom: 15px;
  transition: transform 0.1s linear, filter 0.1s linear;
}

.card-item:hover {
  transform: scale(1.05);
}

.card-item-cover-img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75px;
  width: 75px;
}

.card-item-img-ntu {
  display: flex;
  align-items: center;
  height: 70px;
  width: 60px;
}

.card-item-img-uicbt {
  display: flex;
  align-items: center;
  height: 70px;
  width: 57px;
}

.card-item-img-nulp {
  display: flex;
  align-items: center;
  height: 70px;
  width: 74px;
}

.card-item-img-cepu {
  display: flex;
  align-items: center;
  height: 70px;
  width: 56px;
}

.card-item-img-ce {
  display: flex;
  align-items: center;
  height: 70px;
  width: 65px;
}

.card-item-img-ucu {
  display: flex;
  align-items: center;
  height: 70px;
  width: 70px;
}

.card-item-img-pipl {
  display: flex;
  align-items: center;
  height: 60px;
  width: 90px;
}

.card-item-img-cargo {
  display: flex;
  align-items: center;
  height: 70px;
  width: 64px;
}

.card-item-img-psy {
  display: flex;
  align-items: center;
  height: 59px;
  width: 70px;
}

.card-item-img-research {
  display: flex;
  align-items: center;
  height: 70px;
  width: 70px;
  filter: invert(22%) sepia(51%) saturate(686%) hue-rotate(155deg) brightness(91%) contrast(88%);
}

.card-item-img-conference {
  display: flex;
  align-items: center;
  height: 70px;
  width: 70px;
  filter: invert(22%) sepia(51%) saturate(686%) hue-rotate(155deg) brightness(91%) contrast(88%);
}

.card-item-title {
  font-family: 'Montserrat-Light', sans-serif;
  font-size: 16pt;
  font-weight: bold;
  margin-bottom: 4px;
  color: #004558;
  text-decoration: none;
}

.card-item-degree {
  font-family: 'Montserrat-Light', sans-serif;
  font-size: 12pt;
  margin-bottom: 4px;
  font-weight: bold;
}

.card-item-year {
  font-family: 'Montserrat-Light', sans-serif;
  font-size: 12pt;
  opacity: 100%;
}

.card-link{
  text-decoration:none;
  color:inherit;
  display:block;
}

/*-----SERVICES-----*/

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  padding: 50px 10%;
  background-color: #cdcfd4;
}

.column {
  text-align: left;
  border-radius: 6.25em;
}

.column-icon {
  width: 200px;
  height: 200px;
  margin-top: 20px;
  margin-bottom: 20px;
  filter: invert(18%) sepia(49%) saturate(2125%) hue-rotate(163deg) brightness(92%) contrast(101%);
}

.column-title {
  text-align: left;
  font-family: 'Montserrat-SemiBold', sans-serif;
  font-size: 1.5rem;
  color: #004558;
  margin-bottom: 20px;
}

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

.column-list li {
  font-family: 'Montserrat-Light', sans-serif;
  font-weight: bold;
  font-size: 1.33rem;
  color: #004558;
  margin-bottom: 10px;
}

/*-----PRICING-----*/

.pricing {
  text-align: center;
  background-color: #004558;
  padding: 20px 0px;
}

.pricing h2 {
  font-family: 'Montserrat-SemiBold', sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  background-color: transparent;
  color: #cdcfd4;
  margin: 20px;
}

.pricing h3 {
  margin: 1rem 0rem;
  display: inline-block;
  font-family: 'Montserrat-SemiBold', sans-serif;
  font-weight: bold;
  background-color: #cdcfd4;
  color: #004558;
  font-size: 2rem;
  border: 0.5rem solid #cdcfd4; /* Рамка того ж кольору, що й фон */
  border-radius: 6.25em; /* Закруглені кути */
  padding: 0.2rem 1rem;
  z-index: 2; /* Щоб елемент був поверх усього іншого */
  
} 

.pricing p {
  font-family: 'Montserrat-Light', sans-serif;
  background-color: transparent;
  color: #cdcfd4;
  font-size: 2rem;
  margin: 0px 20px 20px 20px;
}

.pricing ul {
  font-family: 'Montserrat-Light', sans-serif;
  font-weight: bold;
  background-color: transparent;
  padding: 20px 0px;
  font-size: 16pt;
  text-align: left;
  margin-left: 2em;
}

.pricing li {
  font-family: 'Montserrat-Light', sans-serif;
  font-size: 16pt;
  color: #cdcfd4;
  margin-bottom: 20px;
}


.card-divider-pricing {
  border: none;
  border-top: 2px solid #cdcfd4;
  margin: 15px auto;
  opacity: 0.25;
  width: 90%;
  align-self: center;
}

.pricing-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin: 2.5% 10%;
  gap: 40px;
  flex-wrap: wrap;
}

.card-pricing-offline,
.card-pricing-first,
.card-pricing-online,
.card-pricing-group {
  position: relative;
  flex: 1 1 calc(33.33% - 40px);
  padding: 20px;
  background: #004558;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
  text-align: center;
  border: 2px solid #cdcfd4;
  border-radius: 6.25em;
  background:  #004558;
  box-shadow: 5px 5px 40px #cdcfd4,
              0px 0px 40px #cdcfd4;
  transition: transform 0.1s linear, filter 0.1s linear;
  text-decoration: none;
}

.card-pricing-first:hover,
.card-pricing-online:hover,
.card-pricing-group:hover {
  transform: scale(1.05);
}

.card-pricing-offline:hover {
  opacity: 0.5; /* Зменшує прозорість */
}

.discount-badge {
  position: absolute;
  top: 0.5rem; /* Відступ від верхнього краю */
  right: -0.8rem; /* Відступ від правого краю */
  background: #cdcfd4;
  color: #004558;
  font-family: 'Montserrat-SemiBold', sans-serif;
  font-size: 2em;
  padding: 5px 10px; /* Внутрішні відступи */
  border: 2px solid #004558; /* Рамка того ж кольору, що й фон */
  border-radius: 6.25em; /* Закруглені кути */
  z-index: 2; /* Щоб елемент був поверх усього іншого */
}

.discount-badge20 {
  position: absolute;
  top: 0.5rem; /* Відступ від верхнього краю */
  right: -0.8rem; /* Відступ від правого краю */
  background: #cdcfd4;
  color: #004558;
  font-family: 'Montserrat-SemiBold', sans-serif;
  font-size: 2em;
  padding: 5px 10px; /* Внутрішні відступи */
  border: 2px solid #004558; /* Рамка того ж кольору, що й фон */
  border-radius: 6.25em; /* Закруглені кути */
  z-index: 2; /* Щоб елемент був поверх усього іншого */
}

.discount-badge20:hover::after {
  content: "Вартість онлайн-консультації знижена у порівнянні з форматом особистої зустрічі";
  white-space: pre-line; /* Allow line breaks */
  position: absolute;
  top: -220%; /* Position below the badge */
  left: 100%;
  transform: translateX(-50%);
  background: #004558;
  color: #fff;
  font-size: 0.5em;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 10;
  width: 250px; /* Adjust width as needed */
  text-align: center;
  display: block;
}

/*-----CONTACT-----*/

.contact {
  text-align: center; /* центрує кнопку */
  background-color: #cdcfd4;
}

.contact h2 {
  text-align: center;
  font-family: Montserrat-SemiBold, sans-serif;
  color: #004558;
  font-size: 24pt; /* розмір шрифту */
  margin: 30px;
}

.contact p {
  color: #004558;
  font-size: 16pt;
  line-height: 1.6;
  font-family: 'Montserrat-Italic', sans-serif;
  margin-bottom: 1rem;
  margin-top: 1rem;
  text-align: center;
}

/* Кнопка "Записатися зараз" */ 
.button2 {
  all: unset;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
  border-radius: 100em;
  background-color: #004558;
  box-shadow:
    -0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),
    0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1);
}
.button2::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: calc(100% + 0.3em);
  height: calc(100% + 0.3em);
  top: -0.15em;
  left: -0.15em;
  border-radius: inherit;
  background: linear-gradient(
    -135deg,
    #004558,
    transparent 20%,
    transparent 100%
  );
  filter: blur(0.0125em);
  opacity: 0.25;
  mix-blend-mode: multiply;
}
.button2 .button-outer2 {
  position: relative;
  z-index: 1;
  border-radius: inherit;
  transition: box-shadow 300ms ease;
  will-change: box-shadow;
  box-shadow:
    0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1),
    0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5),
    0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25);
}
.button2:hover .button-outer2 {
  box-shadow:
    0 0 0 0 rgba(5, 5, 5, 1),
    0 0 0 0 rgba(5, 5, 5, 0.5),
    0 0 0 0 rgba(5, 5, 5, 0.25);
}
.button-inner2 {
  --inset: 0.035em;
  position: relative;
  z-index: 1;
  border-radius: inherit;
  padding: 1em 1.5em;
  background-image: linear-gradient(
    135deg,
    #cdcfd4,
    rgba(180, 180, 180, 1)
  );
  transition:
    box-shadow 300ms ease,
    clip-path 250ms ease,
    background-image 250ms ease,
    transform 250ms ease;
  will-change: box-shadow, clip-path, background-image, transform;
  overflow: clip;
  clip-path: inset(0 0 0 0 round 100em);
  box-shadow:
    /* 1 */ 0 0 0 0 inset rgba(5, 5, 5, 0.1),
    /* 2 */ -0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25),
    /* 3 */ 0 0 0 0 inset rgba(5, 5, 5, 0.1),
    /* 4 */ 0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25),
    /* 5 */ 0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1),
    /* 6 */ 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
    /* 7 */ -0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25);
}
.button2:hover .button-inner2 {
  clip-path: inset(
    clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px)
      clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 100em
  );
  box-shadow:
    /* 1 */ 0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),
    /* 2 */ -0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),
    /* 3 */ 0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5),
    /* 4 */ 0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15),
    /* 5 */ 0 0 0 0 inset rgba(255, 255, 255, 1),
    /* 6 */ 0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),
    /* 7 */ -0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25);
}
.button2 .button-inner2 span {
  position: relative;
  z-index: 4;
  font-family: 'Montserrat-Light', sans-serif;
  font-size: 24pt;
  letter-spacing: -0.05em;
  font-weight: 600;
  color: #004558;
  background-image: linear-gradient(
    135deg,
    #cdcfd4,
    #004558
  );
  -webkit-background-clip: text;
  background-clip: text;
  transition: transform 250ms ease;
  display: block;
  will-change: transform;
  text-shadow: rgba(0, 0, 0, 0.1) 0 0 0.1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.button2:hover .button-inner2 span {
  transform: scale(0.975);
}

.button2:active .button-inner2 {
  transform: scale(0.900);
}

.social-buttons-contact {
  display: inline-flex;
  gap: 1.5rem;
}

.social-buttons-contact a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  transition: transform 0.15s ease, filter 0.2s ease;
}

.social-buttons-contact img {
  width: 100%;
  height: 100%;
  filter: invert(22%) sepia(51%) saturate(686%) hue-rotate(155deg) brightness(91%) contrast(88%); /* колір #004558 */
  transition: filter 0.2s ease;
}

.scrolled .social-buttons-contact img {
  filter: invert(92%) sepia(1%) saturate(383%) hue-rotate(180deg) brightness(95%) contrast(89%); /* колір #cdcfd4 */
}

.social-buttons-contact a:hover {
  transform: scale(1.35);
}

.social-buttons-contact a:active {
  transform:  scale(0.80);
}

.card-divider-contact {
  border: none;
  border-top: 2px solid #004558;
  opacity: 0.25;
  align-self: center;
  margin: 0 10%;
}

.documents-cards-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.marquee-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: marquee-scroll 30s linear infinite;
}

.card-document {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid #004558;
  border-radius: 2.5em;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(.4,2,.6,1), box-shadow 0.25s, border-color 0.25s;
  margin: 1.5rem 0;
  position: relative;
  width: 260px;
  min-width: 260px;
}

.card-document-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 2.2em 2.2em 0 0;
  display: block;
  transition: none;
}

.card-document-caption {
  font-family: 'Montserrat-SemiBold', sans-serif;
  background: #004558;
  color: #cdcfd4;
  font-size: 0.88rem;
  text-align: center;
  padding: 0.4em 0.4em 0.4em 0.4em;
  flex: 1;
  width: 100%;
}

.card-document:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 32px rgba(0,69,88,0.18);
  border-color: #004558;
  z-index: 2;
}

footer {
  background-color: #004558;
  color: #cdcfd4;
  text-align: center;
  padding: 20px 10px;
  font-size: 16px;
  margin-top: auto;
  font-family: 'Montserrat-Light', sans-serif;
}