@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700;800&display=swap");
.bg-blue {
  border: 1px solid #8bbafe;
  background-color: #a5c9fe;
}
.bg-blue .btn, .bg-blue h2, .bg-blue p {
  color: #01193d;
}
.bg-blue .btn {
  background-color: #599bfe;
}
.bg-blue .btn:hover {
  background-color: #267dfd;
}
.bg-blue .icon {
  color: #8bbafe;
}

.bg-indigo {
  border: 1px solid #b389f9;
  background-color: #c3a1fa;
}
.bg-indigo .btn, .bg-indigo h2, .bg-indigo p {
  color: #150333;
}
.bg-indigo .btn {
  background-color: #9459f6;
}
.bg-indigo .btn:hover {
  background-color: #7528f3;
}
.bg-indigo .icon {
  color: #b389f9;
}

.bg-purple {
  border: 1px solid #b8a2e0;
  background-color: #c7b5e7;
}
.bg-purple .btn, .bg-purple h2, .bg-purple p {
  color: #170e29;
}
.bg-purple .btn {
  background-color: #9b7cd4;
}
.bg-purple .btn:hover {
  background-color: #7e55c7;
}
.bg-purple .icon {
  color: #b8a2e0;
}

.bg-pink {
  border: 1px solid #eb9dc4;
  background-color: #f0b2d1;
}
.bg-pink .btn, .bg-pink h2, .bg-pink p {
  color: #330a1e;
}
.bg-pink .btn {
  background-color: #e373aa;
}
.bg-pink .btn:hover {
  background-color: #da4891;
}
.bg-pink .icon {
  color: #eb9dc4;
}

.bg-red {
  border: 1px solid #efa2a9;
  background-color: #f3b7bd;
}
.bg-red .btn, .bg-red h2, .bg-red p {
  color: #3b0a0f;
}
.bg-red .btn {
  background-color: #e77681;
}
.bg-red .btn:hover {
  background-color: #e04b59;
}
.bg-red .icon {
  color: #efa2a9;
}

.bg-orange {
  border: 1px solid #fec392;
  background-color: #fed1ac;
}
.bg-orange .btn, .bg-orange h2, .bg-orange p {
  color: #441f01;
}
.bg-orange .btn {
  background-color: #fea860;
}
.bg-orange .btn:hover {
  background-color: #fd8c2d;
}
.bg-orange .icon {
  color: #fec392;
}

.bg-yellow {
  border: 1px solid #ffe187;
  background-color: #ffe7a0;
}
.bg-yellow .btn, .bg-yellow h2, .bg-yellow p {
  color: #3a2c00;
}
.bg-yellow .btn {
  background-color: #ffd454;
}
.bg-yellow .btn:hover {
  background-color: #ffc721;
}
.bg-yellow .icon {
  color: #ffe187;
}

.bg-green {
  border: 1px solid #43dc95;
  background-color: #59e0a1;
}
.bg-green .btn, .bg-green h2, .bg-green p {
  color: #09311e;
}
.bg-green .btn {
  background-color: #25c87c;
}
.bg-green .btn:hover {
  background-color: #1d9d61;
}
.bg-green .icon {
  color: #43dc95;
}

.bg-teal {
  border: 1px solid #7eeaca;
  background-color: #94eed3;
}
.bg-teal .btn, .bg-teal h2, .bg-teal p {
  color: #041913;
}
.bg-teal .btn {
  background-color: #52e3b8;
}
.bg-teal .btn:hover {
  background-color: #26dca6;
}
.bg-teal .icon {
  color: #7eeaca;
}

.bg-cyan {
  border: 1px solid #84e5f8;
  background-color: #9ceafa;
}
.bg-cyan .btn, .bg-cyan h2, .bg-cyan p {
  color: #03272e;
}
.bg-cyan .btn {
  background-color: #54dbf6;
}
.bg-cyan .btn:hover {
  background-color: #23d0f3;
}
.bg-cyan .icon {
  color: #84e5f8;
}

.bg-gray {
  border: 1px solid #d9d9d9;
  background-color: #f8f8f8;
}
.bg-gray .btn, .bg-gray h2, .bg-gray p {
  color: #4d4d4d;
}
.bg-gray .btn {
  background-color: #d9d9d9;
}
.bg-gray .btn:hover {
  background-color: #b3b3b3;
}
.bg-gray .icon {
  color: #ebebeb;
}

.section {
  border-radius: 6px;
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) {
  .section {
    padding-bottom: calc(3rem + 45px) !important;
  }
}
@media (max-width: 768px) {
  .section {
    padding-bottom: calc(1rem + 45px) !important;
  }
}
.section * {
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) {
  .section {
    min-height: 300px;
  }
}
.section .btn {
  border: 0 !important;
  font-weight: bolder;
  position: absolute;
}
@media (min-width: 768px) {
  .section .btn {
    bottom: 3rem;
  }
}
@media (max-width: 768px) {
  .section .btn {
    bottom: 1rem;
  }
}
.section .icon {
  font-size: 200px;
  display: block;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  transition: 0.8s;
  position: absolute;
  bottom: -5%;
  right: -5%;
  z-index: 1;
}
.section:hover .icon {
  font-size: 220px;
  width: 220px;
  height: 220px;
  line-height: 220px;
  bottom: -8%;
  right: -8%;
}

* {
  font-family: "Open Sans", sans-serif;
}

/*# sourceMappingURL=style.css.map */