/*
==========
ABOUT HERO
==========
*/

.about-hero{
    background: var(--silver-color); 
    padding: 30px 20px;
    text-align: center;
}

.about-hero__container{
    max-width: 900px;
    margin: 0 auto;
}

.about-hero__logo{
    width: 100px;
    display: block;
    margin: 0 auto 20px auto;
}

.about-hero__title{
    font-size: 42px;
    margin-bottom: 15px;
    color: var(--lightskyblue-color);
}

.about-hero__text{
    color: var(--black-color);
}

.about-hero__animate {
    opacity: 0;
    transform: translateY(-50px); 
    transition: all 1s ease;
}

.about-hero__animate--visible {
    opacity: 1;
    transform: translateY(0);
}

/*
==========
HISTORY
==========
*/

.company-history{
  padding:100px 20px;
  background:var(--white-color);
}

.company-history__container{
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:60px;
  align-items:center;
}

.company-history__content{
  flex:1;
}

.company-history__image-wrapper{
  flex:1;
}

.company-history__image{
  width:100%;
  border-radius:12px;
  box-shadow:0 0px 20px var(--black-color-transparent);
}

.company-history__title{
  font-size:32px;
  margin-bottom:20px;
  color:var(--lightskyblue-color);
}

.company-history__text{
  margin-bottom:16px;
  color: var(--black-color);
  line-height:1.7;
}

/*
==========
COMPANY INFO
==========
*/

.company-info{
  padding:80px 20px;
  background:var(--lightskyblue-color);
}

.company-info__container{
  max-width:1200px;
  margin:auto;
  display:flex;
  gap:30px;
  flex-wrap:wrap;
  justify-content:center;
}

.company-info__card{
  background:var(--white-color);
  padding:30px;
  border-radius:10px;
  flex:1 1 250px;
  box-shadow:0 0px 20px var(--black-color-transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.icon__info{
  display: flex;
  width: 70px;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.icon__info i{
  display: flex;
  width: 70px;
  height: 70px;
}

.icon__info i svg{
  width: 100%;
  height: 100%;
  fill: var(--lightskyblue-color);
}

.company-info__title{
  color:var(--lightskyblue-color);
  margin-bottom:10px;
}

.company-info__text{
  color:var(--black-color);
}


/*
==========
Mission and VISION
==========
*/

.mission-vision{
  padding-top: 100px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  background:var(--white-color);
}

.mission-vision__container{
  max-width:1000px;
  margin:auto;
  display:flex;
  gap:40px;
}

.mission-vision__card{
  flex:1;
  padding:40px;
  border-radius:10px;
  background:var(--lightskyblue-color);
  color:var(--white-color);
}

.content__icon{
  width: 70px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 1em;
}

.content__icon i{
  width: 70px;
  height: 70px;
  display: flex;
}

.content__icon i svg{
  width: 100%;
  height: auto;
  fill: var(--white-color);
}

.mission-vision__title{
  margin-bottom:15px;
}

.mission-vision__text{
  line-height:1.7;
}


/*
==========
Values
==========
*/

.company-values{
  padding:50px 20px;
  background:var(--white-color);
}

.company-values__container{
  max-width:1200px;
  margin:auto;
}

.company-values__title{
  text-align:center;
  font-size: 32px;
  color:var(--lightskyblue-color);
  margin-bottom: 1.5em;
}

.company-values__grid{
  display:flex;
  justify-content: center;
  align-items: center;
  gap:20px;
  flex-wrap: wrap;
}

.company-values__card{
  background:var(--white-color);
  padding:25px;
  width: 250px;
  height: 170px;
  border-radius:10px;
  text-align:center;
  box-shadow:0 0px 20px var(--black-color-transparent);
  font-weight:600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1em;
}

.company-values__card i{
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.company-values__card i svg{
  width: 100%;
  height: 100%;
  fill: var(--lightskyblue-color);
}

/*
==========
Animations
==========
*/

.company-history__animate,
.company-info__animate,
.mission-vision__animate,
.company-values__animate{
  opacity:0;
  transition:all 1s ease;
}

.company-history__animate--left,
.company-info__animate--left,
.mission-vision__animate--left,
.company-values__animate--left{
  transform:translateX(-60px);
}

.company-history__animate--right,
.company-info__animate--right,
.mission-vision__animate--right,
.company-values__animate--right{
  transform:translateX(60px);
}

.section-visible{
  opacity:1;
  transform:translateX(0);
}


/*
==========
RESPONSIVE
==========
*/

@media(max-width:992px){

.company-history__container{
flex-direction:column;
}

.mission-vision__container{
flex-direction:column;
}

}