html {
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  overflow-x: hidden;
}

.page-section {
  padding: 4rem 0;
}

.text-black-60 {
  color: rgba(0, 0, 0, 0.6);
}
.fw-medium {
  font-weight: 500;
}
.mt-2rem {
  margin-top: 2rem;
}

header.hero {
  background: url("../assets/img/background.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
}

header.hero h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 2.25rem;
}

.carousel-item.active {
  display: flex;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.carousel-item {
  animation: fadeIn 0.2s;
}
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  transition: 0.1s;
  animation: fadeOut 0.2s;
}

.carousel-indicators .btn.active{
  color: rgba(79, 140, 129, 1);
  background-color: #fff;
}
.carousel-indicators .btn.active:hover{
  background-color: #e9e9e9;
}

#services h3 strong {
  color: #0C8774;
}
#benefits {
  background: rgba(25, 118, 210, 0.08);
}
#footer {
  background: #2D4F6E;
}
.check{
  width: 32px;
}

.social-media {
  width: 36px;
  height: 36px;
}

.dashed .col {
  position: relative;
  overflow: hidden;
}

.dashed .col::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 2px;
  right: 2px;
  height: 1px;
  border-top: 2px dashed #9CA3AF;
  z-index: -1;
}

.dashed .col:first-child:after {
  left: 50%;
}

.dashed .col:last-child:after {
  right: 50%;
}

iframe { 
  height: 545px; 
  width: 104%;
}

@media (min-width: 576px){
  .dashed a {
    width: 64px;
    height: 64px;
  }
  #tutorial-section img {
    width: 50% !important;
  }
  .text-sm-nowrap{
    white-space: nowrap !important;
  }
}
@media (min-width: 768px) {
  #tutorial-section img {
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  #tutorial-section .container {
    border: 0px !important;
  }
  .carousel-item {
    width: auto;
    margin-right: 0;
  }
  .buttons {
    position: relative !important;
  }
  #services h3 {
    font-size: calc(1.375rem + 1.5vw) !important;
  }
  header.hero {
    background: url("../assets/img/background-mobile.webp");
    background-position: right bottom;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
}
@media (min-width: 992px) {
  header.hero {
    height: 100%;
    min-height: 40rem;
    padding-bottom: 0;
  }
  header.hero p {
    font-size: 1.15rem;
  }
  header.hero h1 {
    font-size: 3rem;
  }
  .page-section {
    padding: 8rem 0;
  }
  .pe-lg-10{
    padding-right: 10rem;
  }
  #tutorial-section img {
    width: 80% !important;
  }
  #tutorial-section .container {
    padding: 3.25rem 6.25rem !important;
  }
}
@media (max-width: 992px) {
  header.hero{
    background-position: left 20% center;
  }
}
@media (min-width: 1200px) {
  header.hero h1 {
    font-size: 3.5rem;
  }
  .carousel-item .col-lg-8 {
    padding-right: 12rem;
  }
  #tutorial-section img {
    width: 60% !important;
  }
  iframe {
    height: 535px;
  }
  header {
    padding: 0 7rem;
  }
  header .container{
    max-width: none;
  }
}
@media (min-width: 1877px) {
  #form-div {
    width: 90%;
  }
}
@media (min-width: 2042px) {
  #form-div {
    width: 80%;
  }
}
@media (min-width: 2249px) {
  #form-div {
    width: 70%;
  }
}
@media (min-width: 2515px) {
  #form-div {
    width: 60%;
  }
}
@media (max-width: 390px) {
  #form-col {
    padding: 0; 
  }
}
@media (max-width: 350px) {
  #form-col { 
    margin-left: -1.5rem;
  }
  #form-div {
    width: 120%;
  }
}
@media (max-width: 320px) {
  #form-col { 
    margin-left: -1.5rem;
  }
  #form-div {
    width: 120%;
  }
}