/**
* ! Common style sectionOne
**/


.sectionOne_left--text{
    font-family: var(--font-2);
    font-size: var(--body);
    color: var(--color-white-75);
}

.sectionOne_left--btn{
    align-self: start;
    margin-top: 20px;
}

/**
* ! Common style sectionTwo
**/

.sectionTwo{
    padding: 40px 0;
    display: grid;
    gap: 30px;
}

.sectionTwo__content--text{
    font-family: var(--font-2);
    font-size: var(--sub);

}

.sectionTwo__logo{
    display: grid;
    grid-template-columns: repeat(5, 1fr);

}

.sectionTwo__logo img{
justify-self: center;
align-self: center;
}

.sectionTwo__btn{
justify-self: center;
}

/**
* ! Common style sectionThree
**/

.sectionThree__right--text{
    color: var(--color-dark-50);
    font-family: var(--font-2);
    font-size: var(--body);
}

.sectionThree__right--btn{
align-self: start;
}

/**
* ! Common style sectionFour
**/

.sectionFour__left--text{
    color: var(--color-dark-50);
    font-family: var(--font-2);
    font-size: var(--body);
}

.sectionFour__left--btn{
    align-self: start;
    }


/**
* ! Common style sectionFive
**/

.sectionFive{
display: grid;
gap: 30px;
margin-top: 15px;
margin-bottom: 30px;
}

.sectionFive__content--text{
    font-family: var(--font-2);
    font-size: var(--sub);

}

.sectionFive__cards{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}


[class^="sectionFive__cards--"] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: var(--shadow-1);
    border-radius: 5px;
    padding: 20px 25px;
  }

  [class^="sectionFive__cards--"] .name{

    font-family: var(--font-1);
    font-size: var(--h5);
    font-weight: bold;
  }

  [class^="sectionFive__cards--"] .position {

    font-family: var(--font-2);
    color: var(--color-dark-75);
    text-transform: uppercase;
  }

  .sectionFive__btn{
    justify-self: center;

  }

/**
* ! media queries are here
**/
@media (max-width: 1200px) {
   
    .sectionTwo__logo{
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    
    }


}

  @media(max-width: 768px){
    .sectionOne_right, .sectionFour__right{
        order: 0;

    }

    .sectionOne_left, .sectionFour__left{
        order: 1;

    }

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

  }


  @media(max-width: 568px){


    .sectionTwo__logo{
        grid-template-columns: repeat(1, 1fr);
        gap: 40px;
    
    }

    .sectionFive__cards{
        grid-template-columns: repeat(1, 1fr);
    }

  }