body {
  overflow-x: hidden;
}

.tutorial-vid {
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
    rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px,
    rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#news {
  font-size: medium;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: initial;
}

#problem-section {
  clip-path: ellipse(98% 100% at 53.35% 100%);
  background-color: #5ec970;
  margin-bottom: 10px;
  padding-bottom: 50px;
  box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
}

#problem-section .container {
  padding-top: 200px;
  padding-bottom: 25px;
}

#header {
  padding-top: 150px;
}

#story-section {
  margin-top: 90px;
}

.features-icon {
  font-size: 50px;
  margin-bottom: 10px;
  color: #1c9432;
}

.features-title {
  font-size: 40px;
}

.step-number {
  font-size: 90px;
  color: #5ec970;
}

.full-width-height {
  height: calc(100vh - 71px);
}

.diagonal-green {
  background-image: linear-gradient(150deg, #1c9432 50%, green 40%);
}

.card-download {
  background-color: white;
  padding: 60px;
  box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
  border-radius: 5px;
}

#vertical-line {
  border-left: 6px solid rgb(17, 69, 17);
  height: 570px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: 0;
}

.step-title {
  font-size: 40px;
  margin-top: 25px;
}

.star-comment {
  color: orange;
}

.section {
  margin-top: 61px;
  margin-bottom: 61px;
}

.button-green-to-white:hover {
  border-color: darkgreen;
  color: white;
  background-color: darkgreen;
}

.button-green-to-white {
  background-color: green;
  color: white;
  border-color: green;
  border-width: 2px;
}

#testimonial-problem {
  background-color: white;
  border-radius: 5px;
  padding: 25px;
  box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
}

.icon-hesitation {
  font-size: 44px;
  margin-bottom: 25px;
  margin-top: 75px;
}

.button-white-to-green {
  background-color: white;
  border-width: 2px;
  color: green;
  border-color: green;
}

.button-white-to-green:hover {
  border-color: darkgreen;
  background-color: white;
  color: darkgreen;
}

.row-steps {
  margin-top: 60px;
}

.step-description {
  font-size: 20px;
}

@media (max-width: 996px) {
  #educpe-edt .row {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
  }
}

@media (max-width: 996px) {
  #vertical-line {
    display: none;
  }
}

@media (max-width: 996px) {
  #problem-title {
    margin-top: -100px;
  }
}
@media (max-width: 566px) {
  #problem-title strong {
    font-size: 40px;
  }
}

@media (max-width: 996px) {
  #problem-section {
    clip-path: ellipse(200% 100% at 50% 0%);
  }
}

@media (max-width: 996px) {
  #testimonial-problem {
    max-width: 90%;
  }
}

@media (max-width: 996px) {
  #educpe-edt {
    max-width: 90%;
  }
}

@media (max-width: 576px) {
  #header .row {
    display: flex;
    flex-direction: column-reverse;
  }
}

@media (max-width: 996px) {
  .card-download .row {
    display: flex;
    flex-direction: column;
  }

  .card-download .os-icon {
    margin-bottom: 20px;
  }
}

@media (max-width: 1501px) {
  #testimonial-image {
    display: none;
  }
}

.card-step {
  background-color: white;
  border-radius: 5px;
  box-shadow: rgba(100, 100, 111, 0.2) 0 7px 29px 0;
  padding: 25px 25px 25px 50px;
}

#callout {
  clip-path: ellipse(100% 100% at 53.35% 0%);
  z-index: 1;
}

#callout-image {
  margin-top: 90px;
  margin-bottom: -300px;
  z-index: 2;
  position: relative;
  max-width: 100%;
}

html {
  scroll-behavior: smooth;
}

.rounded-right-side {
  background: rgb(0, 32, 0);
  background: linear-gradient(
    90deg,
    rgba(0, 32, 0, 1) 0%,
    rgba(94, 201, 112, 1) 40%,
    rgba(55, 158, 124, 1) 91%
  );
}

#login-div {
  margin: 20px;
  border-radius: 15px;
  background-color: white;
  padding: 40px;
  width: 500px;
  box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
}

.full-width-height-div {
  width: 100%;
  min-height: 700px;
  height: calc(100vh - 56px);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    90deg,
    rgba(228, 228, 228, 1) 20%,
    rgba(255, 255, 255, 1) 30%
  );
}

@media (max-width: 800px) {
  .full-width-height-div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background: white;
  }
}

@media (max-height: 500px) and (min-width: 800px) {
  .full-width-height-div {
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
    background: white;
  }

  .left-div p {
    font-size: 20px;
  }

  .left-div h1 {
    font-size: 45px;
  }
}

.right-div {
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(94, 201, 112);
  border-radius: 40em 0 0 20em;
  background: linear-gradient(
    90deg,
    rgba(94, 201, 112, 1) 40%,
    rgba(55, 158, 124, 1) 91%
  );
  box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
}

.left-div {
  width: 30%;
  height: 100%;
  position: relative;
}

.small-div {
  background: rgb(94, 201, 112);
  background: linear-gradient(
    90deg,
    rgba(94, 201, 112, 1) 40%,
    rgba(55, 158, 124, 1) 91%
  );
  border-radius: 0 25em 15em 0;
  height: 45%;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
}

.error-message {
  color: rgb(204, 38, 38);
}

#signup-full-div {
  height: 100%;
  background-color: white;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.rounded-bubble {
  padding: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50em 20em 20em 50em;
  background: rgb(94, 201, 112);
  background: linear-gradient(
    90deg,
    rgba(94, 201, 112, 1) 40%,
    rgba(55, 158, 124, 1) 91%
  );
}

.card-license {
  box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
  padding: 30px;
  margin-top: 40px;
  margin-bottom: 40px;
}

#license-top {
  border-radius: 50em 40em 40em 20em;
  padding: 50px;
  background-color: white;
}

#license-top .col + div {
  padding: 20px;
}

#license-top img {
  max-height: 300px;
  margin: 40px 0;
}

.card-transaction {
  margin-top: 20px;
  box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  border-radius: 15px;
}

.right-side-transaction {
  background-color: #5ec970;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px;
  width: 40%;
  border-radius: 20em 30px 30px 30em;
}

.transaction-infos {
  padding: 40px;
}

.transaction-title {
  color: rgb(34, 86, 137);
  font-size: 23px;
}

.social-icons i:hover {
  background-color: #ede8e8;
  color: rgb(23, 142, 23);
}


@media (max-width: 900px) {
  .left-div {
    display: none;
  }
}

@media (max-width: 900px) {
  .right-div {
    width: 100%;
  }
}

@media (max-height: 500px) and (min-width: 800px) {
  .right-div {
    height: 100%;
    width: 60%;
    border-radius: 50em 20em 30em 20em;
  }

  .left-div {
    display: none;
  }
}

@media (max-width: 800px) {
  .rounded-bubble {
    padding: 0;
    width: 100%;
  }
}

.current-license-info {
  margin-bottom: 5px;
}

@media (max-width: 1000px) {
  #license-top .row {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 1000px) {
  #license-top .row .col {
    display: flex;
    flex-direction: column;
    padding: 0;
  }
}

@media (max-width: 775px) {
  .card-transaction .right-side-transaction {
    background: white;
    width: 100%;
    padding: 20px;
  }
}

@media (max-width: 775px) {
  .card-transaction {
    flex-direction: column;
    align-items: center;
  }
}

#success-div {
  color: white;
  background-color: #44ae56;
  margin: 50px;
  padding: 50px;
}

@media (max-width: 500px) {
  #success-div {
    margin: 0;
    margin-top: 20px;
  }
}