.submit:hover {
  width: calc(160px / 0.707);
  /* height: 28px; */
  background: repeating-linear-gradient(-45deg, #766DF4 0 30px, #0000 0 40px) left/200% 100%;
  animation: i3 2s infinite linear;
  border-radius: 10px;
  border: 1px solid #766DF4;
}

@keyframes i3 {
  100% {
      background-position: right
  }
}

textarea {
  width: 100%;
  height: 200px;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
  font-family: Arial, sans-serif;
  font-size: 14px;

}

.gitbutton {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 15px;
  gap: 15px;
  background-color: #181717;
  outline: 3px #181717 solid;
  outline-offset: -3px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  transition: 400ms;
}

.gitbutton .text {
  color: white;
  font-weight: 700;
  font-size: 1em;
  transition: 400ms;
}

.gitbutton .text {
  margin-top: 13px;
}

.gitbutton svg path {
  transition: 400ms;
}

.gitbutton:hover {
  background-color: transparent;
}

.gitbutton:hover .text {
  color: #181717;
}

.gitbutton:hover svg path {
  fill: #181717;
}

img,
svg {
  vertical-align: middle;
  margin-top: -3px;
}


.plan {
  border-radius: 16px;
  /* box-shadow: 0 30px 30px -25px rgba(0, 38, 255, 0.205); */
  padding: 10px;
  background-color: #ecf0ff;
  /* color: #697e91; */
  max-width: 100%;
}

.plan strong {
  font-weight: 600;
  color: #425275;
}

.plan .inner {
  align-items: center;
  padding: 20px;
  padding-top: 40px;
  background-color: #ecf0ff;
  border-radius: 12px;
  position: relative;
}

.plan .pricing {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #bed6fb;
  border-radius: 99em 0 0 99em;
  display: flex;
  align-items: center;
  padding: 0.625em 0.75em;
  font-size: 1.25rem;
  font-weight: 600;
  color: #425475;
}

.plan .pricing small {
  color: #707a91;
  font-size: 0.75em;
  margin-left: 0.25em;
}

.plan .title {
  font-weight: 600;
  font-size: 1.55rem;
  color: #425675;
}

.plan .title+* {
  margin-top: 0.75rem;
}

.plan .info+* {
  margin-top: 1rem;
}

.plan .features {
  display: flex;
  flex-direction: column;
}

.plan .features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.plan .features li+* {
  margin-top: 0.75rem;
}

.plan .features .icon {
  background-color: #1FCAC5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ecf0ff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.plan .features .icon svg {
  width: 14px;
  height: 14px;
}

.plan .features+* {
  margin-top: 1.25rem;
}

.plan .action {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: end;
}

.plan .button {
  background-color: #6558d3;
  border-radius: 6px;
  color: #fff;
  font-weight: 500;
  font-size: 1.125rem;
  text-align: center;
  border: 0;
  outline: 0;
  width: 100%;
  padding: 0.625em 0.75em;
  text-decoration: none;
}

.plan .button:hover,
.plan .button:focus {
  background-color: #4133B7;
}



.navbar-brand:hover {
  color: #4133B7;

}

/* Basic styles for the section */
section {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100vh; */
  /*Full viewport height */
  /* background-color: #f0f0f0;*/
  /* Light background color */
}

/* Popup container styling */
.popup {
  background-color: #ecf0ff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* Textarea styling */
.input_field {
  width: 100%;
  /* height: 100px; */
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: none;
  /* Disable resizing */
  font-family: Arial, sans-serif;
  font-size: 14px;
}

/* Button styling */
.submit {
  background-color: #6558d3;
  border-radius: 6px;
  color: #fff;
  font-weight: 500;
  font-size: 1.125rem;
  text-align: center;
  border: 0;
  outline: 0;
  /* width: 100%; */
  width: calc(160px / 0.707);
  padding: 0.625em 0.75em;
  text-decoration: none;
}

/* Button hover effect */
.submit:hover {
  background-color: #4133B7;
}


#weblogo {
  margin-right: 5px;
  margin-top: -10px;

}

#gitlogo {
  margin-right: 50px;
  /* margin-right: 50px;
  margin-top: -10px; */
}

.footer {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ecf0ff;
  /* Optional background color */
  padding: 10px;
  text-align: center;
  width: 100%;
  /* Adjust as needed */
  z-index: 1000;
  color: #4133B7;
  font-size: 1.125rem;
  font-weight: 600;
  /* Ensure it stays above other elements */
}

.navBtn {
  font-size: 18px;
  color: #6558d3;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  border: none;
  background: none;
  /* text-transform: uppercase; */
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: #4133B7;
}

.navBtn:focus,
.navBtn:hover {
  color: #6558d3;
}

.navBtn:focus:after,
.navBtn:hover:after {
  width: 100%;
  left: 0%;
}

.navBtn:after {
  content: "";
  pointer-events: none;
  bottom: -2px;
  left: 50%;
  position: absolute;
  width: 0%;
  height: 2px;
  background-color: #6558d3;
  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 400ms;
  transition-property: width, left;
}


/* Responsive Adjustments */
@media (max-width: 991.98px) {
  .navbar-nav {
      flex-direction: column;
      align-items: flex-start;
      padding-left: 1rem;
  }

  .gitHubButton {
      margin-top: 1rem;
      width: 100%;
      justify-content: center;
  }
}

@media (max-width: 575.98px) {
  .gitHubButton {
      font-size: 0.75rem;
      padding: 0.4rem 1rem;
  }

  .navbar-brand {
      font-size: 18px;
  }

  .nav-link {
      font-size: 16px;
  }
}

.website-heading {
  color: #4133B7;
  font-weight: 800;
}

.bi{
  color: #4133B7;
}