@import url("global.css");
@import url("Font-Sk-Modernist.css");
html {
  scroll-behavior: smooth;
}
body {
  background-color: #000000;
}
header {
  margin-bottom: 30px;
}
::selection {
  background-color: #ffcc00; /* Цвет фона выделенного текста */
  color: #fff; /* Цвет текста на выделенном фоне */
}
.cursor-follower {
  position: fixed;
  width: 20px;
  height: 20px;
  background-color: #ffff00;
  box-shadow: 0px 0px 20px 5px #ffff00;
  border-radius: 50%;
  pointer-events: none; /* Позволяет курсору проходить сквозь элемент */
  transition: transform 0.1s ease-out, filter 0.1s ease-out; /* Добавляет плавное перемещение и размытие */
  filter: blur(0); /* Начальное значение размытия */
}
#static-text {
  display: inline-block;
  font-size: 5.1875em;
  color: #29D8FE;
  font-family: "Sk-Modernist-Bold";
  text-transform: uppercase;
  margin-bottom: 0;
  line-height: 83px;
  vertical-align: middle; /* Выравнивание по вертикали */
}
#dynamic-text {
  display: inline-block;
  border-right: 2px solid #ffffff; /* Линия для имитации мигающего курсора */
  white-space: normal;
  overflow: hidden;
  color: #29D8FE;
  font-family: "Sk-Modernist-Bold";
  font-size: 5.1875em;
  line-height: 83px;
  text-transform: uppercase;
  margin-bottom: 0;
  vertical-align: middle; /* Выравнивание по вертикали */
}
.burger-menu {
  display: none;
}
.logo {
  width: 45px;
  text-align: left;
  display: block;
}
.main-font {
  font-family: 'Sk-Modernist';
}
.title {
  color: #29D8FE;
  font-family: "Sk-Modernist-Bold";
  font-size: 5.1875rem;
  word-break: break-word;
}
.header__navigation {
  justify-content: space-around;
  display: flex;
  align-items: center;
  padding: 24px 271px;
  margin-top: 30px;
  border: 2px solid #29D8FE;
  border-radius: 50px;
}
.header__navigation-item {
  font-family: 'Sk-Modernist-Bold';
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  transition: 0.3s ease-in-out;
  animation-duration: 0.3s;
}
.header__navigation-item:hover {
  color: #29D8FE;
}
.header__navigation-item_last {
  margin-right: 0;
}
.flex-container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
.btn-lg-light {
  margin-top: 26px;
  margin-bottom: 23px;
  padding: 15px 20%;
  border: 2px solid #fff;
  border-radius: 50px;
  background: #FFF;
  text-decoration: none;
  color: #000;
  font-size: 18px;
  font-family: 'Sk-Modernist-Bold';
  line-height: normal;
  text-align: center;
  display: inline-block;
  transition: 0.500s ease-in-out;
  animation-duration: 0.3s;
}
.btn-lg-light:hover {
  background: transparent;
  border: 2px solid #29D8FE;
  color: #fff;
}
.personal-image {
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  display: block;
}
.parallax-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(../img/Text-backgrond01.png);
  background-size: cover;
  background-repeat: no-repeat;
  border: 3px solid #FFFF00;
  border-radius: 63px 63px 250px 63px;

}

.parallax-layer img {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: block;
  object-fit: cover;
}
.column {
  padding-top: 60px;
  display: flex;
  justify-content: right;
}
.column-2 {
  padding-top: 30px;
}
.card {
  display: flex;
  justify-content: center;
  border: 2px solid #29D8FE;
  background-color: #000;
  padding: 40px 110px 40px 50px;
  border-radius: 50px;
  margin-left: 410px;
  transition: 0.3s ease-in-out;
  animation-duration: 0.3s;
}
.card:hover {
  box-shadow: 0px 0px 20px 5px #29d8febf;
  transform: translateY(-10px);
}
.card-2 {
  margin-left: 30px;
}
.card-3 {
  padding: 53px 110px 53px 50px;
  margin-left: 60px;
}
.card-4 {
  background-color: #fff;
  margin-left: 30px;
  display: block;
}
.card-4:hover {
  box-shadow: none;
}
.icon {
  width: 69px;
  height: 69px;
  margin-bottom: 30px;
}
.card-text {
  color: #FFF;
  font-size: 18px;
  font-family: "Sk-Modernist-Regular";
  width: 220px;
}
.card-text-2 {
  color: #000;
  font-size: 18px;
  font-family: "Sk-Modernist-Regular";
  width: 220px;
  padding-top: 50px;
}
.card-group-1 {
  display: contents;
}
.icon-col {
  display: flex;
}
.subtitle {
  color: #FFF;
  font-family: "Sk-Modernist-Bold";
  font-size: 50px;
  font-weight: 700;
  word-break: break-word;
}
.col-text {
  color: #FFF;
  font-family: "Sk-Modernist-Regular";
  font-size: 16px;
  font-weight: 400;
  width: 350px;
  margin-bottom: 0;
}
.col-content {
  margin-top: auto;
}
.title-2 {
  color: #FFF;
  font-family: "Sk-Modernist-Bold";
  font-size: 80px;
  text-align: center;
  margin-bottom: 0;
  word-break: break-word;
}
.title-3 {
  margin-bottom: 60px;
  word-break: break-word;
}
.logo-lemon-school {
  width: 129px;
  height: 56px;
  margin-top: 10px;
  margin-left: 30px;
}
.flex-container-2 {
  margin-bottom: 20px;
  align-items: center;
  justify-content: center;
}
.flex-container-3 {
  margin-bottom: 80px;
}
.second-section {
  margin-bottom: 90px;
}
.button-box {
  display: flex;
}
.third-section {
  margin-bottom: 90px;
}
.fourth-section {
  margin-bottom: 90px;
}
.tab-button {
  cursor: pointer;
  border-radius: 20px;
  background: #fff;
  font-family: "Sk-Modernist-Bold";
  color: #000;
  font-weight: 700;
  padding: 10px 76px;
  font-size: 18px;
  text-decoration: none;
  border: 2px solid #29d8fe;
  transition: 0.500s ease-in-out;
  animation-duration: 0.3s;
}
.tab-button.active,
.tab-button:hover {
  background: #29D8FE;
}
.tab-button-light {
  color: #000000;
  background: #fff;
  margin-right: 0;
}
.title-tab {
  color: #fff;
  font-size: 23px;
  font-family: "Sk-Modernist-Bold";
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tab-text {
  color: #fff;
  font-size: 16px;
  font-family: "Sk-Modernist";
  width: 40%;
  margin-right: 60px;
}
.tab-col {
  display: flex;
  justify-content: center;
}
.certificate {
  padding-top: 10px;
  width: 370px;
  height: 30%;
}
.underline {
  text-decoration: underline; 
  text-decoration-color: #ffff00;
  text-decoration-thickness: 4px;
  text-decoration-style: solid; 
}

.tabs-nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 60px;
}
.tab-content {
  display: none;
  color: #fff;
}
.tab-content.active {
  display: block;
  border: none;
}
.tab-button.tab-button-0.active::after {
  display: none;
}
#tab-0.tab-content.tab-content-0.active::after {
  display: none;
}
#tab-1.tab-content.tab-content-1.active::after {
  display: none;
}
.tab-button.tab-button-light.tab-button-1.active::after {
  display: none;
}
/* Стили для активного состояния (раскрытого элемента) */
.accordion-item.active .accordion-content {
  display: block;
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: solid 2px #29D8FE;
  border-radius: 50px;
  background-color: transparent;
  color: #fff;
  font-family: "Sk-Modernist-Bold";
  text-transform: uppercase;
  font-size: 23px;
  padding: 35px 70px;
  margin-bottom: 25px;
  width: 100%;
}
.content-accordion {
  border: solid 2px #29D8FE;
  border-radius: 50px;
  padding: 45px 70px 45px 60px;
  color: #000;
  background-color: #fff;
  font-family: "Sk-Modernist-Regular";
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 25px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active {
  border: solid 2px #29D8FE;
}
/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  display: none;
  overflow: hidden;
}
.accordion:after {
  content: url(../img/icon-plus.png); /* Unicode character for "plus" sign (+) */
  font-size: 0;
  float: right;
}
.active:after {
  content: url(../img/icon-minus.png); /* Unicode character for "minus" sign (-) */
}
.card-project {
  background-color: #fff;
  border: solid 2px #29D8FE;
  border-radius: 50px;
  padding: 80px;
  display: flex;
  margin-bottom: 35px;
  align-items: center;
  justify-content: space-between;
  column-gap: 20px;
}
.card-project-2 {
  margin-top: 0;
  background-color: #D7DEFC;
  column-gap: 90px;
}
.card-project-3 {
  margin-top: 0;
  background: #fff;
  column-gap: 130px;
}
.card-project-4 {
  margin-top: 0;
  padding: 80px;
}
.card-project-col {
  margin-top: auto;
  margin-bottom: auto;
}
.subtitle-project-card {
  color: #000;
  font-family: "Sk-Modernist-Bold";
  font-size: 18px;
  margin-bottom: 0;
  text-transform: uppercase;
}
.subtitle-project-2-card {
  color: #000F40;
}
.title-project-card {
  color: #000;
  font-family: "Sk-Modernist-Bold";
  font-size: 70px;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.title-project-2-card {
  color: #000F40;
}
.text-project-card {
  color: #000;
  font-family: "Sk-Modernist-Regular";
  font-size: 16px;
  font-weight: 400;
  width: 85%;
  margin-bottom: 50px;
}
.text-project-2-card {
  color: #000F40;
}
.btn-md {
  padding: 10px 40px;
  margin-right: 13px;
  font-size: 16px;
  font-family: "Sk-Modernist-Bold";
  text-decoration: none;
  color: #fff;
  background: #000;
  border: 2px solid #000;
  border-radius: 50px;
  display: inline-block;
  transition: 0.500s ease-in-out;
  animation-duration: 0.3s;
}
.btn-md:hover {
  background: transparent;
  color: #000;
  transition: 0.500s;
}
.btn-md-outline-dark {
  background: transparent;
  color: #000;
  margin-right: 0;
}
.btn-md-outline-dark:hover {
  background: #000;
  color: #fff;
}
.btn-md-red {
  background: #0612F4;
  color: #fff;
  border-color: #0612F4;
}
.btn-md-red:hover {
  color: #000;
  border-color:#000;
}
.btn-md-azure2 {
  background: #0b787c;
  color: #fff;
  border-color: #0b787c;
}
.btn-md-azure2:hover {
  color: #000;
  border-color:#000;
}
.btn-md-lila {
  background: #7485FF;
  color: #fff;
  border-color: #7485FF;
}
.btn-md-lila:hover {
  color: #000;
  border-color:#000;
}
.btn-md-outline-red {
  background: transparent;
  border-color:#fff;
  margin-right: 0;
}
.btn-md-outline-red:hover {
  color: #fff;
  background: #001340;
  border-color:#001340;
}
.btn-md-blue {
  background: #003087;
  border-color:#003087;
}
.btn-md-blue:hover {
  color: #003087;
}
.btn-md-outline-blue {
  background: transparent;
  color: #003087;
  border-color:#003087;
  margin-right: 0;
}
.btn-md-outline-blue:hover {
  color: #fff;
  background: #003087;
}
.btn-md-light {
  color: #000;
  background: #fff;
  border-color: #fff;
  margin-right: 0;
}
.btn-md-light:hover {
  color: #fff;
  border-color: #fff;
}
.btn-md-azure {
  color: #000;
  background: #29d8fe;
  border-color: #29d8fe;
  margin-right: 0;
}
.btn-md-azure:hover {
  color: #fff;
}
.first-image-project {
  width: 40%;
  height: auto;
}
.fourth-image-project {
  width: 50%;
}
.instruments-card {
  padding: 2% 13%;
  border-radius: 50px;
  border: 2px solid #29D8FE;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}
.instruments-card:hover {
  box-shadow: 0px 0px 20px 5px #29d8febf;
  transition: 0.250s;
}
.instruments-icon {
  width: 68px;
  height: 68px;
}
.icon-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon-text {
  font-family: "Sk-Modernist-Bold";
  color: #FFF;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0;
  margin-left: 10px;
  text-transform: uppercase;
}
.group-small-card-project {
  display: flex;
  justify-content: space-between;
}
.small-card-project {
  padding: 50px 50px;
  border-radius: 50px;
  border: 2px solid #29D8FE;
  text-align: center;
}
.small-card-project-2 {
  margin-left: 35px;
  margin-right: 35px;
}
.logo-small-card-project {
  width: 180px;
  height: 48px; 
  margin-bottom: 37px;
}
.logo-small-card-project-last {
  width: 120px;
  margin-bottom: 21px;
}
.title-small-card-project {
  color: #fff;
  font-family: "Sk-Modernist-Bold";
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 60px;
}
.plus::after {
  display: none;
}
form {
  width: 100%;
  background-color: #fff;
  border: 2px solid #29D8FE;
  border-radius: 50px;
  padding: 40px 60px;
}
#email {
  width: 100%;
  font-family: 'Sk-Modernist-Bold';
  font-size: 18px;
  border: solid 1px;
  border-radius: 20px;
  padding: 15px 0 15px 20px;
  margin-bottom: 20px;
}
#formMessage {
  width: 100%;
  font-family: 'Sk-Modernist-Bold';
  font-size: 18px;
  border: solid 1px;
  border-radius: 20px;
  padding: 15px 0 15px 20px;
  margin-bottom: 30px;
  overflow: hidden;
  resize: none; /* отключаем возможность изменения размеров с помощью мыши */
}
.btn-form {
  padding: 10px 40px;
  border-radius: 20px;
  border: 2px solid #29d8fe;
  background: #29D8FE;
  color: #000;
  font-size: 16px;
  font-family: "Sk-Modernist-Bold";
  text-decoration: none;
  transition: 0.500s ease-in-out;
  animation-duration: 0.3s;
}
.btn-form:hover {
  background: transparent;
  border: 2px solid #29d8fe;
}
.fifth-section {
    margin-bottom: 90px;
}
.footer-icon {
  width: 38px;
  height: 38px;
  margin-left: 10px;
  animation: scaleAnimation 2s infinite; /* Убрали 'alternate' для плавной анимации */
  animation-timing-function: ease-in-out; /* Используем 'ease-in-out' для плавной анимации */
}
@keyframes scaleAnimation {
  0%, 100% {
    transform: scale(1); /* Исходный размер */
  }
  50% {
    transform: scale(1.1); /* Увеличенный размер */
  }
}
.footer-icon:hover {
  box-shadow: 0px 0px 4px 2px #29d8fe80;
  transition: 0.250s;
}
.footer-icon-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-title {
  color: #000;
  font-family: "Sk-Modernist-Bold";
  font-size: 23px;
  font-weight: 700;
  margin-bottom: 0;
  margin-right: 15px;
}
footer {
  margin-top: 90px;
  padding: 43px 60px;
  border-radius: 50px;
  border: 2px solid #29D8FE;
  background: #FFF;
  display: flex;
  justify-content: space-between;
  color: #000;
}
body {
  padding-bottom: 30px;
}


text {
  fill: #fff;
  font-family: "Sk-Modernist-Regular";
  font-size: 22px;
  text-transform: uppercase;
  font-variant-ligatures: none;
  letter-spacing: 6px;
  animation: rotate 25s linear infinite;
  transform-origin: 250px 250px;
}
svg {
  max-width: 41vmin;
  padding-top: 20px;
  padding-right: 30px;
  position: absolute;
}
svg:hover .textcircle {
  transform: scale(1.2) rotate(50deg);
}
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}
.textcircle {
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
  transform-origin: 250px 250px;
}