:root {
  --text-white: #ffffff;
  --bg: #16063c;
  --container-width: 1012px;
  --container-padding: 41px;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap");

/* Global */
.body {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: var(--text-white);
  min-width: 280px;
  background-color: var(--bg);
  position: relative;
  overflow-x: hidden;
}

.animate-fade-start {
  opacity: 0;
  transition: opacity ease-in 1s;
}

.animate-fade-show {
  opacity: 1;
}

.animate-typing {
  display: inline-block;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  white-space: nowrap;
  opacity: 0;
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  animation: typing 2.5s steps(30, end);
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

.animate-blink {
  animation: blinkText 1.2s infinite normal;
  animation-delay: 3.5s;
}

@keyframes typing {
  from {
    opacity: 1;
    width: 0;
    white-space: nowrap;
  }
  to {
    opacity: 1;
    width: 100%;
  }
}

@keyframes blinkText {
  from {
    color: white;
  }
  to {
    color: transparent;
  }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: white;
  }
}

.body__inner {
  overflow: hidden;
  position: relative;
}

.body__inner::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 0;
  left: 0;
  background-image: url(../images/red-abstr.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 1130px;
}

.body__inner::after {
  content: "";
  position: absolute;
  z-index: -2;
  bottom: 0;
  left: 0;
  background-image: url(../images/red-abstr-bootm.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 954px;
}

.line-blue {
  content: "";
  position: absolute;
  z-index: -1;
  top: 527px;
  left: 0;
  background-image: url(../images/left-blue-lines.png);
  background-repeat: no-repeat;
  width: 296px;
  height: 957px;
}
.line-red {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  background-image: url(../images/right-red-lines.png);
  background-repeat: no-repeat;
  width: 352px;
  height: 459px;
}

.bg-light-1 {
  content: "";
  position: absolute;
  z-index: -1;
  left: -506px;
  top: -670px;
  width: 825px;
  height: 963px;
  background: rgba(6, 72, 133, 0.8);
  mix-blend-mode: color-dodge;
  filter: blur(150px);
}

.bg-light-2 {
  content: "";
  position: absolute;
  z-index: -1;
  top: -645px;
  right: 119px;
  width: 532px;
  height: 621px;
  background: rgba(6, 72, 133, 0.8);
  mix-blend-mode: color-dodge;
  filter: blur(150px);
}

.bg-light-3 {
  content: "";
  position: absolute;
  z-index: -1;
  top: -425px;
  right: -320px;
  width: 457px;
  height: 694px;
  background: rgba(216, 152, 255, 0.53);
  mix-blend-mode: color-dodge;
  filter: blur(150px);
}

.bg-light-4 {
  content: "";
  position: absolute;
  z-index: -1;
  right: -288px;
  bottom: 514px;
  width: 906px;
  height: 621px;
  background: rgba(6, 72, 133, 0.8);
  mix-blend-mode: color-dodge;
  filter: blur(150px);
}

.bg-light-5 {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -408px;
  left: -377px;
  width: 825px;
  height: 963px;
  background: rgba(6, 72, 133, 0.8);
  mix-blend-mode: color-dodge;
  filter: blur(150px);
}

img {
  max-width: 100%;
  height: auto;
}

.wrapper {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.main {
  flex: 1 1 auto;
}

.container {
  max-width: var(--container-width);
  padding: 0 var(--container-padding);
  margin: 0 auto;
}

.title {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  text-align: center;
  margin-bottom: 28px;
}

.text-bold {
  font-weight: 700;
}

/*main styles*/

/*first section*/
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 126px 0 125px;
}

.main-title {
  text-align: center;
}

.main-title__content {
  font-weight: 700;
  font-size: 112px;
  line-height: 136px;
}

.subtitle {
  display: block;
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 39px;
  margin-top: 24px;
}

/*social section*/
.social {
  padding: 56px 0 32px;
}

.social__content {
  display: flex;
  justify-content: space-between;
  gap: 45px;
}

.social__line {
  position: relative;
  width: 341px;
  height: 557px;
  margin-top: 15px;
  margin-left: 15px;
}

.social__line::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -15px;
  right: -15px;
  bottom: -16px;
  left: -15px;
  border-radius: 41px;
  border: 4px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(180deg, #46a1c0 0%, #261965 100%) border-box;
}

.twitter-timeline {
  border-radius: 31px;
  border: 2px solid #261965;
  color: #fff;
}

.twitter-timeline-mob {
  display: none;
}

#twitter-widget-0 {
  border-radius: 31px;
}

.social__list {
  max-width: 478px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 72px;
  padding-top: 57px;
}

.social__item {
  position: relative;
  width: 202px;
  height: 202px;
  padding: 9px 6px 8px 8px;
}

.social__item::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -4px;
  right: -4px;
  bottom: -4px;
  left: -4px;
  border-radius: 16px;
  border: 4px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(180deg, #46a1c0 0%, #261965 100%) border-box;
}

.social__item-content {
  border-radius: 16px;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    #c486e5 -13.99%,
    #3e6ceb 16.71%,
    #67c8ff 51.04%,
    #2e60da 79.31%,
    #d084e1 115.24%,
    #aa7fc9 115.26%,
    #aa7fc9 115.26%,
    #aa7fc9 115.26%
  );
}

/*form section*/
.footer {
  padding: 137px 0 137px;
}

.form {
  position: relative;
  border-radius: 31px;
  background: linear-gradient(
    95.65deg,
    #261965 -9.08%,
    #3e6ceb 20.46%,
    #2e60da 53.5%,
    #2e60da 80.7%,
    #261965 115.28%,
    #aa7fc9 115.29%,
    #aa7fc9 115.29%,
    #aa7fc9 115.29%
  );
}

.form::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border-radius: 33px;
  border: 3px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(
        180deg,
        #c486e5 -13.99%,
        #3e6ceb 16.71%,
        #67c8ff 51.04%,
        #2e60da 79.31%,
        #d084e1 115.24%,
        #aa7fc9 115.26%,
        #aa7fc9 115.26%,
        #aa7fc9 115.26%
      )
      border-box;
}

.form::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  border-radius: 31px;
  background-image: url(../images/form-decor.png);
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.form__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 62px 72px 60px 42px;
}

.form__title {
  max-width: 365px;
  width: 100%;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
}

.form__input {
  position: relative;
}

.form__input input {
  border-radius: 20px;
  border: none;
  background: rgba(132, 168, 255, 0.48);
  padding: 32px 64px 31px 45px;
}

.form__input input,
.form__input input::placeholder {
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  color: var(--text-white);
}

.form__input-button {
  position: absolute;
  top: 34px;
  right: 29px;
  border: none;
  background-color: transparent;
}