/* Section1 */
html {
  height: 100%;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  overflow: hidden;
  background-color: #000;
}

.toast {
  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 1.7em 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.active {
  transform: translateX(0%);
}

.toast .toast-content {
  display: flex;
  align-items: center;
}

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

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

.message .text {
  font-size: 16px;
  font-weight: 400;
  color: #c4c4c4;
}

.message .text.text-1 {
  font-weight: 600;
  color: rgb(94, 94, 94);
}

.message-mobile {
  display: none;
  position: absolute;
  visibility: hidden;
}

.toast .close {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 5px;
  cursor: pointer;
  opacity: 0.7;
}

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

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

}

.toast .progress:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #b5d555;
}

.progress.active:before {
  animation: progress 9s linear forwards;
}

@keyframes progress {
  100% {
    right: 100%;
  }
}
/*  */
/*Dialog Styles*/
.interview-popup {
  position: absolute;
  bottom: 20%;
  display: flex;
  justify-content: center;
  z-index: 10;
}

dialog {
  height: 90vh;
  overflow-y: hidden;
  margin: 1em auto;
  width: 27%;
  background: white;
  height: 100%;
  border: 0;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.1);
  -webkit-animation: fadeIn 1s ease both;
          animation: fadeIn 1s ease both;
          overflow-x: hidden;
}

dialog img {
  height: 100%;
  scale: 1.01;
  width: 100%;
}

dialog::-webkit-backdrop {
  -webkit-animation: fadeIn 1s ease both;
          animation: fadeIn 1s ease both;
  background: rgba(255, 255, 255, 0.4);
  z-index: 2;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
dialog::backdrop {
  -webkit-animation: fadeIn 1s ease both;
          animation: fadeIn 1s ease both;
  background: rgba(255, 255, 255, 0.037);
  z-index: 2;
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}
dialog .x {
  filter: grayscale(1);
  border: none;
  background: none;
  position: absolute;
  top: 1.2vw;
  right: 1vw;
  transition: ease filter, transform 0.3s;
  cursor: pointer;
  transform-origin: center;
}
dialog .x:hover {
  filter: grayscale(0);
  transform: scale(1.1);
}
dialog h2 {
  font-weight: 600;
  font-size: 2rem;
  padding-bottom: 1rem;
}
dialog p {
  font-size: 1rem;
  line-height: 1.3rem;
  padding: 0.5rem 0;
}
dialog p a:visited {
  color: rgb(var(--vs-primary));
}

/*General Styles*/
button.primary {
  position: absolute;
  text-transform: uppercase;
  display: inline-block;
  font-size: 1.5em;
  font-family: "Poppins";
  border: 1px solid white !important;
  font-weight: bold;
  top: 20%;
  color: #fff !important;
  background: rgb(var(--vs-primary)/100%);
  padding: 13px 25px;
  border-radius: 17px;
  transition: background-color 0.1s ease;
  box-sizing: border-box;
  transition: all 0.25s ease;
  border: 0;
  cursor: pointer;
  box-shadow: 0 10px 20px -10px rgb(var(--vs-primary)/50%);
}
button.primary:hover {
  box-shadow: 0 20px 20px -10px rgb(var(--vs-primary)/50%);
  transform: translateY(-5px);
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -120px 60px;
  }
}


.interview-contact {
  position: absolute;
  left: 36%;
  bottom: 1.1vw;
  padding: 0.5vw;
  border-radius: 10px;
  font-size: 1vw;
  z-index: 2;

  color: black;
  font-weight: 700;
  background: #b5d555;
}
/* dialog */
.section1 {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4;
    overflow: hidden;
} 

.section1-container {
  width: 75%;
  z-index: 4;
  background: transparent;
  pointer-events: none;
}

.section1-container-item {
  display: block;
  position: relative;
  width: 66.5%;
  margin: 0 auto;
  background: transparent;
}

.section1-container-item .s1ci-tb {
  width: 100%;
  display: block;
  margin: 0 auto 4vw auto;
  color: #fff;
  font-size: 10vw;
  font-weight: 600;
  background: transparent;
}

.section1-container-item .s1ci-tb img {
  width: 2.5vw;
  align-self: center;
  margin-top: 3vw;

  transform: translateY(20%);
  animation: floater 2s infinite;
  transition: ease 2s;
}

@keyframes floater {
  0%{transform: translateY(20%);transition: ease 1s;}
  50%{transform: translateY(-20%);transition: ease 1s;}
}

.section1-container-item .s1ci-tb .text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  height: 11.7vw;
}

.section1-container-item .s1ci-tb .text div {
  display: flex;
  align-items: baseline;
}

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

.bit-letter-1 {
  --color-1: #FF2C49;
  --color-2: #00D574;
  --color-3: #7D5EF7;
  --color-4: #00AAF8;
  --color-5: #2FF630;
  --color-6: #FFE751;
  --color-7: #FF6D46;

  color: #FF2C49;
}

.bit-letter-2 {
  --color-1: #FF6D46;
  --color-2: #FF2C49;
  --color-3: #00D574;
  --color-4: #7D5EF7;
  --color-5: #00AAF8;
  --color-6: #2FF630;
  --color-7: #FFE751;

  color: #FF6D46;
}

.bit-letter-3 {
  --color-1: #FFE751;
  --color-2: #FF6D46;
  --color-3: #FF2C49;
  --color-4: #00D574;
  --color-5: #7D5EF7;
  --color-6: #00AAF8;
  --color-7: #2FF630;

  color: #FFE751;
}

.bit-letter-4 {
  --color-1: #2FF630;
  --color-2: #FFE751;
  --color-3: #FF6D46;
  --color-4: #FF2C49;
  --color-5: #00D574;
  --color-6: #7D5EF7;
  --color-7: #00AAF8;

  color: #2FF630;
}

.bit-letter-5 {
  --color-1: #00AAF8;
  --color-2: #2FF630; 
  --color-3: #FFE751;
  --color-4: #FF6D46;
  --color-5: #FF2C49;
  --color-6: #00D574;
  --color-7: #7D5EF7;

  color: #00AAF8;
}

.bit-letter-6 {
  --color-1: #7D5EF7;
  --color-2: #00AAF8;
  --color-3: #2FF630;
  --color-4: #FFE751;
  --color-5: #FF6D46;
  --color-6: #FF2C49;
  --color-7: #00D574;

  color: #7D5EF7;
}

.bit-letter-7 {
  --color-1: #00D574;
  --color-2: #7D5EF7;
  --color-3: #00AAF8;
  --color-4: #2FF630;
  --color-5: #FFE751;
  --color-6: #FF6D46;
  --color-7: #FF2C49;

  color: #00D574;
}

@keyframes color-animation {
  0%    {color: var(--color-1)}
  14%   {color: var(--color-1)}
  15%   {color: var(--color-2)}
  28%   {color: var(--color-2)}
  29%   {color: var(--color-3)}
  42%   {color: var(--color-3)}
  43%   {color: var(--color-4)}
  56%  {color: var(--color-4)}
  57%  {color: var(--color-5)}
  70%  {color: var(--color-5)}
  71%  {color: var(--color-6)}
  84%  {color: var(--color-6)}
  85%  {color: var(--color-7)}
  100%  {color: var(--color-7)}
}

/* Here are just some visual styles. 🖌 */

.section1-container-item .s1ci-center {
  position: absolute;
  top: 55%;
  display: flex;
  justify-content: center;
  width: 100%;
  color: #fff;
  font-size: 1.2vw;
}

.section1-container-item .s1ci-center span {
  display: block;
  line-height: 0.5vw;
  text-align: justify;
}

.section1-container-item .s1ci-center span:nth-child(2){
  margin-right: 7vw;
}

.draw-text {
  font-family: "Cactus Jack";
  color: #fff;
  font-size: 2vw;
  position: absolute;
  top: 3vw;
  left: 0;
}

.fftdraw {
  position: absolute;
  top: 1vw;
  left: 1.5vw;
  line-height: 3vw;
  transform: rotate(-10deg);
  z-index: 4;
  pointer-events: none;
}

.fftdraw img {
  width: 15vw;
}

.welcome-to {
  position: absolute;
  right: 10vw;
  bottom: 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  pointer-events: none;
}

.welcome-to div {
  transform: translateY(-0.8vw);
  transform: rotate(9deg);
}

.welcome-to img {
  position: absolute;
  width: 19vw;
}

div.socials {
  width: 100%;
  position: absolute;
  display: block;
  bottom: 0;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  padding: 1vw;
  gap: 1vw;
  z-index: 4;
  pointer-events: none;
}

div.socials>*{
  width: 33%;
  display: flex;
  justify-content: center;
  font-size: 0.7vw;
}

div.socials div:nth-child(1){
  justify-content: left;
}

div.socials div a {
  color: #fff;
  position: relative;
  margin: 1vw;
  pointer-events: all;
}

div.socials div a svg {
  width: 1.2vw;
  height: 1.2vw;
  color: #fff;
  fill: #fff;
  position: absolute;
  transition: all 0.3s ease;
}
div.socials div a svg:hover {
  /* width: 2.6vw;
  height: 2.6vw; */
  transform: scale(1.4);
  color: #fff;
  fill: #fff;
}

.draw {
  cursor: none;
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
}

.draw #canvas {
  border: 1px solid black; 
  width: 100vw;
  height: 100%;
 }
 
.stroke-color {
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

.draw #clear-btn {
  display: none;
  position: absolute;
  color: #fff;
}
#cv {
  position: absolute;
  z-index: -1;
  opacity: 100%;
}
/* Section 1 end */

/* Media Queries */
@media (max-width: 767.98px) { 

.toast {
  top: 20vw;
  right: 0.5em;
  padding: 1em 1em 1.5em 0.4em;
  transform: translateX(calc(100% + 30px));
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}

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

.toast-content .message {
  margin: 0 10px;
}

.message-pc {
  display: none;
  position: absolute;
  visibility: hidden;
}

.message-mobile {
  display: inline-block;
  position: relative;
  visibility: visible;
}

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

.toast .close {
  top: 5px;
  right: 5px;
  width: 2.3em;
  height: 2.3em;
}

.toast .progress:before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #b5d555;
}
    
  .section1 {
      background-size: auto;
      background-position: center;
  }  

  .section1-container {
    width: 94%;
    margin: 0 auto;
  }

  .section1-container-item {
    width: 100%;
  }

  .section1-container-item .s1ci-tb {
    margin: 0;
    color: #fff;
    font-size: 19vw;
    font-weight: 600;
  }

  .section1-container-item .s1ci-tb img {
    width: 7vw;
    margin-top: 2vw;
  }

  .section1-container-item .s1ci-tb .text {
    height: 28vw;
  }

  .section1-container-item .s1ci-center {
    top: 50%;
    width: 100%;
    font-size: 1em;
  }

  .section1-container-item .s1ci-center span {
    line-height: 2em;
    position: absolute;
  }

  .section1-container-item .s1ci-center span:nth-child(1) {
    transform: translateY(-4vw);
  }

  .section1-container-item .s1ci-center span:nth-child(2){
    margin-right: 1vw;
    right: 0;
  }

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

  .fftdraw {
    position: absolute;
    top: 5%;
    transform: rotate(-10deg);
  }

  .fftdraw img {
    width: 40vw;
  }

  .welcome-to {
    right: 23vw;
    bottom: 25vw;
  }

  .welcome-to img {
    position: absolute;
    width: 45vw;
  }

  div.socials {
    bottom: 8vw;
    margin: 0 auto;
    padding: 2vw;
    gap: 8vw;
  }

  div.socials div:nth-child(1), div.socials div:nth-child(3) {
    position: absolute;
    display: none;
  }

  div.socials div a {
    position: relative;
    display: inline-block;
    margin: 0 5vw;
  }

  div.socials div a svg {
    width: 5vw;
    height: 5vw;
    fill: #fff;
    position: absolute;
    transition: all 0.3s ease;
  }
  div.socials div a svg:hover {
    /* width: 2.6vw;
    height: 2.6vw; */
    transform: scale(1.4);
    fill: #fff;
  }

    /* Section 1 end */
    .interview-popup {
      position: absolute;
      bottom: 30%;
      height: 80%;
      display: flex;
      justify-content: center;
      z-index: 10;
    }
    
    dialog {
      height: 80vh !important;
      overflow-y: hidden;
      margin: 4em auto;
      width: 90%;
      background: white;
      height: 100%;
      border: 0;
      box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.1);
      -webkit-animation: fadeIn 1s ease both;
              animation: fadeIn 1s ease both;
              overflow-x: hidden;
    }


    dialog .x {
      filter: grayscale(1);
      border: none;
      background: none;
      position: absolute;
      top: 1.1em;
      right: 0.9em;
      transition: ease filter, transform 0.3s;
      cursor: pointer;
      transform-origin: center;
    }

    .interview-contact {
      position: absolute;
      left: 35%;
      bottom: 1.1em;
      padding: 0.3em;
      border-radius: 10px;
      font-size: 0.9em;
      z-index: 2;

      color: black;
      font-weight: 700;
      background: #b5d555;
    }
    button.primary {
      position: absolute;
      text-transform: uppercase;
      display: inline-block;
      font-size: 0.8em;
      font-family: "Poppins";
      border: 1px solid white !important;
      font-weight: bold;
      top: 40%;
      color: #fff !important;
      background: rgb(var(--vs-primary)/100%);
      padding: 13px 25px;
      border-radius: 17px;
      transition: background-color 0.1s ease;
      box-sizing: border-box;
      transition: all 0.25s ease;
      border: 0;
      cursor: pointer;
      box-shadow: 0 10px 20px -10px rgb(var(--vs-primary)/50%);
    }
}
/* Media Queries end */