/*=============== REUSABLE CSS CLASSES ===============*/

.section{
    padding-block: clamp(4.8rem, 3.6vh, 8.8rem);
  }
  
  .section__title{
    font-size: var(--h2-font-size);
    margin-bottom: var(--mb-3-2);
    line-height: 140%;
  }
  
  .center{
    text-align: center;
  }
  
  .f-center{
    align-items: center;
  }

  .f-start{
    align-items: flex-start;
  }

  .container {
    max-width: 1024px;
    margin-inline: var(--mb-2-4);
  }
  
  .grid{
    display: grid;
  }

  .blur-load{
    background-size: cover;
    background-position: center;
  }

  .link__btn{
    display: inline-block;
    color: #555;
    border-bottom: 1px solid #555;
    transition: .3s;
    text-transform: capitalize;
    font-weight: var(--font-medium);
  }

  .link__btn__white{
    color: var(--container-color);
    border-color: var(--container-color);
  }

  .btn{
    display: inline-block;
    padding: 1.4rem 2rem;
    border-radius: .8rem;
    transition: all .4s;
  }

  .primary-btn{
    background-color: var(--primary-color);
    color: var(--container-color);
  }

  .btn__onBlack{
    background-color: #fff;
    color: var(--grey-color-darken);
    border: 2px solid var(--off-white);
  }

  .btn__onBlack:hover{
    background-color: rgba(0,0,0, 0);
    color: var(--off-white);
    border: 2px solid var(--off-white);
  }

  .cta-btn{
    background-color: var(--grey-color-dark);
    color: var(--container-color);
    gap: 1rem;
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .cta-btn i{
    background-color: rgba(0, 0,0, 0);
  }

  .cta-btn i:hover{
    background-color: rgba(0,0,0, 0);
    color: #fff;
  }

  .primary-color{
    color:var(--primary-color)
  }

  .tertiary-bg-color{
    background-color: var(--tertiary-color);
  }
  .container-color{
    color: var(--container-color);
  }

  /* Colors */
  .ru-purple{
    color: var(--primary-color);
  }

  .white{
    color: #fff;
  }

  .grey-color{
    color: var(--grey-color);
  }

  .grey-color--dark{
    color: var(--grey-color-dark);
  }

  .grey-color--darken{
    color: var(--grey-color-darken);
  }

  .border-bottom{
    border-bottom: 1px solid var(--grey-color);
  }

  .border-right{
    border-right: 1px solid var(--grey-color-darken);
  }

  .border-color--primary{
    border-color: var(--primary-color);
  }

  .primary-bg--color{
    background-color: var(--primary-color);
  }

  .two-col-grid{
    grid-template-columns: repeat(2,1fr);
  }

  .three-col-grid{
    grid-template-columns: repeat(3,1fr);
  }
  
  .flex{
    display: flex;
  }
  
  .flex-c{
    flex-direction: column;
  }

  .flex-r{
    flex-direction: row;
  }

  .center-center{
    align-items: center;
    justify-content: center;
  }

  .justify-c{
    justify-content: center;
  }

  .justify-sb{
    justify-content: space-between;
  }

  .main{
    overflow: hidden;
  }
  
  .card__nav{
    flex-direction: column;
  }


  
/* Margins */

  .mb16{
    margin-bottom: 1.6rem;
  }

  .mb32{
    margin-bottom: 3.2rem;
  }

/* Paddings */

.pd-iln-end-3{
  padding-inline-end: 3rem;
}