@media (min-width: 768px) {
  #section2 {
    padding-top: 5%;
    margin-bottom: 5%;
  }
}

@media (max-width: 576px) {
  #section2 {
    padding-top: 25%;
    margin-bottom: 5%;
  }
}

@media (min-width: 768px) {
  #c2 {
  }
}

@media (min-width: 768px) {
  #h1 {
    font-size: 40px;
    margin-left: 1%;
    margin-right: 1px;
  }
}

@media (max-width: 576px) {
  #h1 {
    font-size: 30px;
    margin-left: 5%;
    margin-right: 5%;
  }
}

@media (max-width: 576px) {
  #c2 {
    padding-top: 10%;
  }
}

@media (max-width: 576px) {
  #h2 {
    font-size: 25px;
  }
}

@media (min-width: 768px) {
  #h2 {
    font-size: 40px;
  }
}

.btneffect:hover {
  background-color: #ffb800;
  color: white;
  border: 1.5px solid #ffb800;
}

.btneffect {
  width: 120px;
  height: 60px;
  border-radius: 25px;
  background: white;
  color: black;
  border: 1.5px solid #ffb800;
  font-weight: 700;
}

@keyframes fadeup {
  from {
    opacity: 0.2;
    transform: translate3d(0,100%,0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.divanim {
  animation: 0.4s fadeup ease-out;
}

.progress2 {
  width: 100%;
  background-color: #f1f1f1;
  position: relative;
  margin-bottom: 25px;
  border-radius: 30px;
  height: 60px;
}

.progress2 .bar2 {
  position: absolute;
  width: 0%;
  height: 100%;
  z-index: 0;
  border: 6px solid #f1f1f1;
  background-color: #ffb800;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 30px;
}

@media (max-width: 576px) {
  #h3 {
    font-size: 25px;
  }
}

@media (min-width: 768px) {
  #h3 {
    font-size: 40px;
  }
}

body {
  background: rgb(60,60,60);
  background: radial-gradient(circle, rgba(60,60,60,1) 0%, rgba(24,24,24,1) 100%);
}