/* Section1 */

html,body {
  height: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
}

.toast-cn {
  z-index: 100;
  position: absolute;
  top: 5vw;
  right: 30px;
  border-radius: 12px;
  background: rgba( 0, 0, 0, 0.55 );
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  backdrop-filter: blur( 1px );
  -webkit-backdrop-filter: blur( 1px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  padding: 1em 2em 3em 2em;
  box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transform: translateX(calc(100% + 30px));
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}

.toast-cn.active {
  transform: translateX(0%);
}

.toast-cn .toast-cn-content {
  display: flex;
  align-items: center;
  transform: translateY(25%);
}

.toast-cn-content .check {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4em;
  min-width: 4em;
}

.toast-cn-content .message {
  display: flex;
  flex-direction: column;
  margin: 0 20px;
}

.message .text {
  font-size: 1.2em;
  font-weight: 400;
  color: #fff;
}

.message .text.text-1 {
  font-weight: 600;
  color: var(--badass);
}

.toast-cn .close-cn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px;
  cursor: url('/assets/cursors/pointer.cur');
  opacity: 0.7;
}

.toast-cn .close-cn:hover {
  opacity: 1;
}

.toast-cn .progress-cn {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;

}

.toast-cn .progress-cn:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--badass);
}

.progress-cn.active:before {
  animation: progress-cn 15s linear forwards;
}

@keyframes progress-cn {
  100% {
    right: 100%;
  }
}

.section1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 4;
} 

.section1-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  margin: 4vw auto 0  auto;
  z-index: 4;
}

.connect-heading {
  width: 100%;
  padding: 2vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.connect-heading .h1 {
  display: flex;
  gap: 3vw;
  align-items: baseline;
}

.connect-heading .h1 span, h1 {
  font-size: 7vw;
  line-height: 8vw;
  color: #fff;
  font-weight: 600;
}

.connect-heading .established {
  color: #fff;
  font-size: 2vw;
  font-weight: 600;
  word-spacing: 0.4vw;
}

.bit-color-shift .bit-letter{
  animation: color-animation 1s linear infinite;
}

.bit-letter-1 {
  --color-1: #00D574;
  --color-2: #FF2C49;
  --color-3: #00AAF8;
  --color-4: #FFE751;

  color: #00D574;
}

.bit-letter-2 {
  --color-1: #FFE751;
  --color-2: #00D574;
  --color-3: #FF2C49;
  --color-4: #00AAF8;

  color: #FF2C49;
}

.bit-letter-3 {
  --color-1: #00AAF8;
  --color-2: #FFE751;
  --color-3: #00D574;
  --color-4: #FF2C49;

  color: #00AAF8;
}

.bit-letter-4 {
  --color-1: #FF2C49;
  --color-2: #00AAF8;
  --color-3: #FFE751;
  --color-4: #00D574;

  color: #FFE751;
}

@keyframes color-animation {
  0%    {color: var(--color-1)}
  24%    {color: var(--color-1)}
  25%    {color: var(--color-2)}
  49%    {color: var(--color-2)}
  50%    {color: var(--color-3)}
  74%    {color: var(--color-3)}
  75%    {color: var(--color-4)}
  99%    {color: var(--color-4)}
  100%    {color: var(--color-4)}
}

form {
  width: 100%;
}

.form {
  width: 100%;
  display: flex;
  justify-content: center;
  color: #fff;
  position: relative;
}

.form form label {
  font-size: 0.9vw;
  display: inline-block;
  margin: 0.3vw 0;
}

.form form input, .form form select, .form form textarea {
  width: 100%;
  border: 0.1vw solid #fff;
  background-color: #000;
  color: #fff;
  padding: 0.6vw;
  margin: 0 0 0.5vw 0;
  font-family: Poppins;
  font-size: 1.1vw;
  resize: none;
  transition: border-radius 0.2s ease;
}

input:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
  border-radius: 0.7vw;
}

.arrow-animated {
  height: 4vw;
  width: auto ;
  margin: 0 auto;
  display: block;
  padding: 0.1vw;
}

.form form .submit-btn {
  margin: 1.5vw 0;
  color: #000;
  font-weight: 600;
  border-radius: 2vw;
  background-color: var(--badass);
  border: none;
}

.form .cloud {
  position: absolute;
  width: 8vw;
  top:  -5vw;
  left: -5vw;
}

#cv {
  position: fixed;
  top:0;
  z-index: -1;
}
/* Section 1 end */

/* Media Queries */
@media (max-width: 767.98px) { 
    
    html,body {
      height: 100%;
    }
    
.toast-cn {
  width: 95%;
  top: 20vw;
  right: 0.5em;
  padding: 1em 1em 3em 1em;
  transform: translateX(calc(100% + 30px));
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
  background-color: #000;
}

.toast-cn-content .check {
  height: 3em;
  width: 3em;
}

.toast-cn-content .message {
  margin: 0 0 0 1em;
}

.message .text {
  font-size: 1em;
}

.toast-cn .close-cn {
  top: 5px;
  right: 5px;
  width: 3em;
  height: 3em;
}

.toast-cn .progress-cn:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--badass);
}
    
    .section1 {
      padding: 15vw 0 0 0;
    }  

    .section1-container {
      width: 100%;
      margin: 0 auto;
      padding: 5vw;
      overflow: hidden;
    }

    .connect-heading {
      padding: 8vw 0 6vw 0;
    }

    .connect-heading .h1 span, h1 {
      font-size: 13vw;
      line-height: 14vw;
    }

    .connect-heading .established {
      font-size: 5vw;
      word-spacing: 0.8vw;
    }
    
    .form form label {
      font-size: 0.8em;
      margin: 0;
    }
    
    .form form input, .form form select, .form form textarea {
      padding: 2em;
      margin: 0 0 3em 0;
      font-family: Poppins;
      resize: none;
      transition: border-radius 0.2s ease;
    }

    input:focus-visible, textarea:focus-visible {
      border-radius: 2vw;
      border: 2px solid white;
    }

    .form .cloud {
      position: absolute;
      width: 20vw;
      top:  -3vw;
      left: 83%;
      transform: rotate(50deg);
      z-index: -1;
    }

    .form form input, .form form select, .form form textarea {
      padding: 0.6em;
      margin: 0 0 0.5em 0;
      font-family: Poppins;
      font-size: 1em;
      resize: none;
      transition: border-radius 0.2s ease;
    }

    .arrow-animated {
      height: 3em;
      padding: 0.1em;
    }
    
    div.socials {
      margin: 0em 0 1em 0 ;
      gap: 8vw;
    }

    div.socials img {
      position: absolute;
      width: 40vw;
      height: auto;
      left: 5%;
      transform: translateY(-7vw);
    }

    div.socials a {
      position: relative;
      margin: 0.7vw;
    }
    
    div.socials a svg {
      width: 5vw;
      height: 5vw;
      fill: #fff;
      position: absolute;
      transition: all 0.3s ease;
    }
    /* Section 1 end */
}
/* Media Queries end */