.text-purple {
    color: #800080; /* Фиолетовый цвет */
}
.text-white{
    color: #fff;
}
.text-gre{
  color: #1ddd91;
}

.bgt {
  
  background-color: #fce3fc; /* Оранжевый */
  background-color: rgba(92, 10, 92, 0.5);
  color: #1ddd91; /* Текст белого цвета */

}


.glit1 {
    font-family: 'Raleway', sans-serif;

    text-transform: uppercase;
    color: #fff;
    letter-spacing: 2px;
    font-size: 80px;
    position: relative;
  }
  
  .glit1:after, .glit1:before {
    content: "About Me";
    position: absolute;
    top: 0;
    color: #fff;
    background-color: #212121;
    overflow: hidden;
  }
  
  .glit1:after {
    left: 2px;
    text-shadow: -1px 0 #ff1b1b;
    animation: glitch1 2s infinite ease;
  }
  
  .glit1:before {
    left: -2px;
    text-shadow: 1px 0 #2124ff;
    animation: glitch2 10s infinite ease;
  }
  
  @keyframes glitch1 {
    0% {
      clip-path: inset(65% 0 8% 0);
    }
    4% {
      clip-path: inset(5% 0 70% 0);
    }
    8% {
      clip-path: inset(60% 0 27% 0);
    }
    12% {
      clip-path: inset(37% 0 18% 0);
    }
    16% {
      clip-path: inset(42% 0 13% 0);
    }
    20% {
      clip-path: inset(46% 0 9% 0);
    }
    24% {
      clip-path: inset(34% 0 67% 0);
    }
    28% {
      clip-path: inset(3% 0 26% 0);
    }
    32% {
      clip-path: inset(2% 0 31% 0);
    }
    36% {
      clip-path: inset(87% 0 2% 0);
    }
    40% {
      clip-path: inset(15% 0 47% 0);
    }
    44% {
      clip-path: inset(97% 0 2% 0);
    }
    48% {
      clip-path: inset(48% 0 49% 0);
    }
    52% {
      clip-path: inset(88% 0 11% 0);
    }
    56% {
      clip-path: inset(31% 0 65% 0);
    }
    60% {
      clip-path: inset(42% 0 58% 0);
    }
    64% {
      clip-path: inset(17% 0 76% 0);
    }
    68% {
      clip-path: inset(78% 0 6% 0);
    }
    72% {
      clip-path: inset(1% 0 48% 0);
    }
    76% {
      clip-path: inset(73% 0 1% 0);
    }
    80% {
      clip-path: inset(80% 0 7% 0);
    }
    84% {
      clip-path: inset(14% 0 81% 0);
    }
    88% {
      clip-path: inset(83% 0 1% 0);
    }
    92% {
      clip-path: inset(32% 0 60% 0);
    }
    96% {
      clip-path: inset(86% 0 5% 0);
    }
    100% {
      clip-path: inset(63% 0 17% 0);
    }
  }
  @keyframes glitch2 {
    0% {
      clip-path: inset(9% 0 71% 0);
    }
    4% {
      clip-path: inset(2% 0 33% 0);
    }
    8% {
      clip-path: inset(75% 0 19% 0);
    }
    12% {
      clip-path: inset(97% 0 3% 0);
    }
    16% {
      clip-path: inset(22% 0 59% 0);
    }
    20% {
      clip-path: inset(74% 0 8% 0);
    }
    24% {
      clip-path: inset(65% 0 11% 0);
    }
    28% {
      clip-path: inset(6% 0 54% 0);
    }
    32% {
      clip-path: inset(2% 0 6% 0);
    }
    36% {
      clip-path: inset(10% 0 57% 0);
    }
    40% {
      clip-path: inset(21% 0 46% 0);
    }
    44% {
      clip-path: inset(30% 0 9% 0);
    }
    48% {
      clip-path: inset(25% 0 35% 0);
    }
    52% {
      clip-path: inset(25% 0 35% 0);
    }
    56% {
      clip-path: inset(14% 0 45% 0);
    }
    60% {
      clip-path: inset(38% 0 15% 0);
    }
    64% {
      clip-path: inset(5% 0 64% 0);
    }
    68% {
      clip-path: inset(86% 0 9% 0);
    }
    72% {
      clip-path: inset(17% 0 30% 0);
    }
    76% {
      clip-path: inset(99% 0 2% 0);
    }
    80% {
      clip-path: inset(20% 0 15% 0);
    }
    84% {
      clip-path: inset(70% 0 30% 0);
    }
    88% {
      clip-path: inset(36% 0 43% 0);
    }
    92% {
      clip-path: inset(61% 0 33% 0);
    }
    96% {
      clip-path: inset(50% 0 17% 0);
    }
    100% {
      clip-path: inset(19% 0 47% 0);
    }
  }

  .hh {
    font-size: 14px;
    text-transform: uppercase;
    animation: animate 0.7s infinite;
    animation-timing-function: linear;
}

@keyframes animate {
    0% {
        text-shadow: 4px 4px 0px purple;
    }
    25% {
        text-shadow: -4px -4px 0px blue;
    }
    50% {
        text-shadow: 4px 4px 0px purple;
    }
    75% {
        text-shadow: -4px -4px 0px blue;
    }
    100% {
        text-shadow: 4px 4px 0px purple;
    }
}

.lain_img{
  background-image: url('../img/la.jpg'); /* Фон для контейнера */
    background-size: cover; /* Растягиваем изображение по контейнеру */
    background-repeat: no-repeat; /* Отключаем повторение */
    background-position: center; /* Центрируем фон */
    width: 100%; /* Фон занимает всю ширину контейнера */
    height: 100%; /* Фон занимает всю высоту контейнера */
    max-width: 1920px;
}

.flcontainer {
  width: 100%; /* Растягиваем контейнер на всю ширину */
  height: 400px; /* Можно задать высоту */
  display: flex; /* Для выравнивания контента */
  align-items: center;
  justify-content: center;
  text-align: center;
}
.col-md-4{
  margin-top: 50px;
  margin-bottom: 25px;
}

/* Стиль для обычного состояния */
.custom-textarea {
  /* background-color: #4a235a !important;  */
  color: #4a235a !important;           
  /* border: 2px solid #4a235a !important;   */
}

/* Стиль для фокуса */
.custom-textarea:focus {
  /* background-color: #4a235a !important;  */
  color: #4a235a !important;
  border-color: #8A2BE2 !important;      
  box-shadow: 0 0 5px rgba(138, 43, 226, 0.5) !important; 
}


/* Оформляем ссылку, чтобы убрать подчеркивание и сделать цвет унаследованным */
.card-link {
  text-decoration: none; /* Убираем подчеркивание */
  color: inherit; /* Наследуем цвет от карточки */
}

.card-header {
            border-bottom: 1px solid #202f3e; /* Зеленая полоска между header и body */
        }

/* Стили для самой карточки */
.card-hover {
  background-color: #18232e; /* Темный фон */
  color: #471e57; /* Неоново-фиолетовый текст */
  border: 2px solid #00ff99; /* Рамка неоново-зеленого цвета */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Плавные переходы */
  box-shadow: 0 0 10px rgba(0, 255, 0, 0.8); /* Постоянное свечение */
}

/* Эффект при наведении: свечения исчезает */
.card-hover:hover {
  border: 2px solid #00ff2a; /* Рамка неоново-зеленого цвета */
  background-color: #1e2124; /* Более темный фон при наведении */
  cursor: pointer; /* Курсор в виде руки */
  box-shadow: none; /* Убираем свечение при наведении */
}

/* Стили для заголовка и текста */
.card-header, .card-title, .card-text {
  color: #9d02bc; /* Неоново-фиолетовый текст */
}

.pad1{
  margin-bottom: 10px;
}
.card-header-g, .card-title-g, .card-text-g {
  color: #ff073a;
}
.fix-g{
  color: #ff073a;
}
.card-hover-g {
  background-color: #18232e; /* Темный фон */
  color: #ff073a; 
  border: 2px solid #07ffcc; /* Рамка неоново-зеленого цвета */
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Плавные переходы */
  box-shadow: 0 0 10px rgba(0, 255, 174, 0.8); /* Постоянное свечение */
}

/* Эффект при наведении: свечения исчезает */
.card-hover-g:hover {
  border: 2px solid #00c8ff; /* Рамка неоново-зеленого цвета */
  background-color: #1e2124; /* Более темный фон при наведении */
  cursor: pointer; /* Курсор в виде руки */
  box-shadow: none; /* Убираем свечение при наведении */
}