:root {
    --gray: #707070;
    --lightGray: #f1f1f1;
    --blue: #5488ff;
    --red: #f57a7a;
    --red-selec: #d06464;
    --background: white;
  }
  
  #titulo{
  text-align:left;
  }
  
  #carouselExampleIndicators {
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    }
  
  
    #carouselExampleIndicators h4{
        padding:0 450px;
    }
  
  body {
    background-color: var(--background);
    overflow-x: hidden;
  }
  
  .holder {
    background-color: var(--background);
    margin-top: 5%;
    border-radius: 15px;
  }
  
  .q-container {
    max-width: 1550px;
    margin: 0 auto;
  }
  
  .align {
    min-height: 30rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2em;
  }
  
  .q-btn,
  .q-btn-lg {
    background: var(--red);
    color: white;
    font-weight: 500;
    border-radius: 20px;
    text-decoration: none;
    transition: 0.2s;
  }
  
  .q-btn-outline {
    border: 2px solid var(--red);
    color: var(--red);
    background-color: var(--background);
    font-weight: 500;
    border-radius: 20px;
    text-decoration: none;
    transition: 0.2s;
  }
  
  .q-btn {
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
  }
  
  .q-btn-lg {
    font-size: 36px;
    padding: 0.5rem 5rem;
  }
  
  .q-btn:hover,
  .q-btn-lg:hover {
    background: var(--red-selec);
    color: white;
  }
  
  .q-number {
    height: 90%;
    width: 90%;
    background-color: var(--red);
    margin: 5%;
  }
  h1,
  h2 {
    font-size: 60px;
    color: var(--gray);
    line-height: 96px;
  }
  
  h1 {
    font-weight: bold;
  }
  h4 {
    font-size: 25px;
    line-height: 33px;
    color: var(--gray);
  }
  
  p {
    font-size: 25px;
    color: var(--gray);
  }
  
  .q-desc {
    font-size: 25px;
    line-height: 33px;
    color: var(--gray);
  }
  
  h4 {
    line-height: 48px;
  }
  
  .q-blue {
    color: var(--blue);
  }
  
  .q-lgray {
    color: var(--lightGray);
  }
  
  .q-bg-lgray {
    background-color: var(--lightGray);
  }
  
  .q-rounded {
    border-radius: 5px;
  }
  
  .q-bg-blue {
    background-color: var(--blue);
  }
  
  .q-banner-img {
    max-width: 820px;
    width: 100%;
    height: auto;
  }
  
  .custom-height {
    height: 40rem;
  } 
  
  .object-fit {
    height: 100%;
    object-fit: cover;
  }
  
  .q-bg {
    color: var(--background);
  }
  
  .q-x {
    display: flex;
    align-items: center;
  }
  
  .q-even {
    display: flex;
    justify-content: space-between;
  }
  
  .q-w-1 {
    max-width: 812px;
  }
  
  .q-p {
    padding: 0 10%;
  }
  
  .q-icon {
    height: 30;
    width: auto;
  }
  
  .q-floating {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    width: 60px;
    border-radius: 100%;
    background-color: var(--red);
    z-index: 200;
    bottom: 70;
    right: 30;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
  
  .q-floating:hover {
    background-color: var(--red-selec);
  }
  
  .q-icon-lg {
    height: 40%;
    width: auto;
  }
  
  .q-path img {
    position: absolute;
    top: -15%;
    right: -600;
    z-index: -1;
    width: 1314px;
    height: auto;
  }
  
  .q-path-2 img {
    position: absolute;
    bottom: -37%;
    right: 67%;
    z-index: -1;
    width: 1314px;
    height: auto;
  }
  
  .q-w {
    width: 70%;
  }
  
  .q-w-6 {
    width: 60%;
  }
  
  .accordion-button {
    border-radius: 133px;
    background-color: var(--lightGray);
    height: 5%;
    margin-top: 10px;
  }
  
  /* .q-benefits {
    margin-top: 5%;
    margin-bottom: 10%;
  } */
  
  .q-funcitem{
    height:250px;
    margin-right: 20px;
    margin-bottom: 25px;
    border-radius: 33px;
    padding: 5%;
    background-color: var(--lightGray);
  }
  
  .stepBox {
    height: 600px;
    padding: 5% 2.5%;
    margin-top: 5%;
    background-color: var(--lightGray);
    border-radius: 33px;
    border: solid 5px var(--lightGray);
  }
  
  .stepNumber {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--background);
    font-size: 150%;
    height: 60px;
    width: 60px;
    border-radius: 100%;
    background-color: var(--red);
    position: relative;
    top: 0;
    left: 0;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
  
  .stepContent {
    padding: 5%;
  }
  
  .item1{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--background);
    font-size: 200%;
    height: 90%;
    margin: 5% 0;
    width: auto;
    background-color: var(--red);
  }
  
  .item2{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--background);
    font-size: 200%;
    height: 45%;
    margin-top: 5%;
    width: auto;
    background-color: var(--red);
  }
  
  .item3{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--background);
    font-size: 200%;
    height: 41%;
    margin-top: 5%;
    width: auto;
    background-color: var(--red);
  }
  
  /* Extra small devices (phones, 600px and down) */
  @media only screen and (max-width: 600px) {
  
    #carouselExampleIndicators{
      height: 60vh;
  }
  
    #carouselExampleIndicators h4{
      padding:0 40px;
  }
    .q-center {
      text-align: center;
      justify-self: center;
    }
  
    .stepBox{
    height: 450px;
    }
  
    .q-icon-lg {
      height: 25%;
    }
  
    .q-funcitem{
      margin: 2% 0;
    }
  
    h1 {
      font-size: 35px;
      line-height: 45px;
    }
  
    h4 {
      font-size: 22px;
      line-height: 31px;
    }
  
    .q-desc {
      font-size: 16px;
      line-height: 25px;
    }
  
    h1,
    h2,
    h4 {
      text-align: center;
    }
  
    p{
      font-size: 16px;
    }
  
    .q-p {
      padding: 0 5%;
    }
  
    h1 {
      font-size: 28px;
    }
  
    h2{
    line-height: 40px;
      font-size: 22px;
  
    }
  
    .item1{
      height: 150px;
      margin: 1 0;
    }
    .item2, .item3{
      margin: 2% 0;
      height: 100px;
    }
  
    .item3{
      margin-bottom:30px;
    }
  
    .custom-height {
      height: 60%;
    }
  
    .object-fit {
      object-fit: contain;
    }
  }
  
  /* Small devices (portrait tablets and large phones, 600px and up) */
  @media only screen and (min-width: 600px) {
    .q-container {
      max-width: 1500px;
    }
  }
  
  
  
  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {
  
    .q-p {
      padding: 0 15px;
    }
  
    .q-icon-lg {
      height: 30%;
    }
  
    .q-container {
      max-width: 900px;
    }
  
    h1{
      font-size: 39px;
      line-height: 50px;
    }
  
    .q-desc {
      font-size: 16px;
      line-height: 23px;
    }
  
    .q-w-1 {
      max-width: 420px;
    }
  }
  
  
    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {
  
      .q-container{
        max-width: 1000px;
      }
  
      h1,
      h2 {
        font-size: 50px;
        line-height: 67px;
      }
    
      .q-btn-lg {
        font-size: 25px;
      }
    
      .q-w-1 {
        max-width: 625px;
      }
    
      h4 {
        font-size: 26px;
        line-height: 36px;
      }
    
      .q-desc {
        font-size: 18px;
        line-height: 25px;
      }
    }
  
  
  
      /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1200px) {
  
  
    .q-container{
      max-width: 1400px;
    }
  
    .q-w-1 {
      max-width: 565px;
    }
  
    .q-desc {
      font-size: 20px;
      line-height: 33px;
    }
  
    .q-w-1 {
      max-width: 725px;
    }
  }
  
    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1550px) {
      .q-container{
        max-width: 1500px;
      }
    }
  
  /* VERIFICACION ANIMADO */
  .checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  }
  
  .checkmark {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 5% auto;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
  }
  
  .checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.5s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
  }
  
  @keyframes stroke {
    100% {
      stroke-dashoffset: 0;
    }
  }
  @keyframes scale {
    0%, 100% {
      transform: none;
    }
    50% {
      transform: scale3d(1.1, 1.1, 1);
    }
  }
  @keyframes fill {
    100% {
      box-shadow: inset 0px 0px 0px 60px #7ac142;
    }
  }
  
  
  #hero {
    margin: 0 0 3% 0;
    padding: 5% 0;
  }
  
  #hero2 {
    padding: 5% 0;
    margin: 5% 0;
  }
  
  #hero3 {
    padding: 5% 0;
    margin: 5% 0;
  }
  
  #contenido1 {
    margin: 10% 0;
  }
  
  #steps {
    padding: 3% 0;
  }
  
  #colapsibles{
    padding: 3% 0;
    margin: 5% 0;
  
  }
  
  #functions{
    padding: 3% 0;
    margin: 5% 0;
  }
  
  #check{
    padding: 3% 0;
    margin: 5% 0;
  }
  
  
  #contenidoDerecha{
    padding: 3% 0;
    margin: 5% 0;
  }
  
  #contenidoIzq{
    padding: 3% 0;
    margin: 5% 0;
  }
  
  #centrado{
    padding: 3% 0;
    margin: 3% 0; 
  }
  
  #numeros{
    padding: 2% 0;
    margin-top: 2% 0; 
  }
  
          /* Slideshow container */
          .slideshow-container {
            position: relative;
            background: #5488FF;
            height: 800px;
            display: flex;
            align-items: center;
        }
  
        /* Slides */
        .mySlides {
            display: none;
            padding: 80px;
            text-align: center;
        }
  
        .mySlides h4{
            color: white;
  
        }
  
        /* Next & previous buttons */
        .prev,.next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            margin-top: -30px;
            padding: 16px;
            color: #888;
            font-weight: bold;
            font-size: 20px;
            border-radius: 0 3px 3px 0;
            user-select: none;
            -webkit-transition: 0.5s;
            -o-transition: 0.5s;
            transition: 0.5s;
        }
  
        /* Position the "next button" to the right */
        .next {
            position: absolute;
            right: 0;
            border-radius: 3px 0 0 3px;
            color: white;
  
        }
  
        .prev {
            position: absolute;
            left: 0;
            border-radius: 3px 0 0 3px;
            color: white;
  
        }
  
        /* On hover, add a black background color with a little bit see-through */
        .prev:hover,
        .next:hover {
            background-color: white;
            color: #5488FF;
        }
  
        /* The dot/bullet/indicator container */
        .dot-container {
            margin-left: auto;
            margin-right: auto;
            left: 0;
            right: 0;
            position: absolute;
            bottom: 0;
            text-align: center;
            padding: 20px;
        }
  
        /* The dots/bullets/indicators */
        .dot {
            cursor: pointer;
            height: 15px;
            width: 15px;
            margin: 0 2px;
            border-radius: 50%;
            display: inline-block;
            background-color: #5488FF;
            border: 3px solid white;
            transition: background-color 0.6s ease;
        }
  
        /* Add a background color to the active dot/circle */
        .active,
        .dot:hover {
            background-color: white;
  
        }
  
        /* Add an italic font style to all quotes */
        q {
            font-style: italic;
            font-size: 20px;
        }
  
        /* Add a blue color to the author */
        .author {
            color: white;
        }
  
        .frase{
            color: white;
  
        }