main{
  overflow: hidden;
}

#about{
  padding-top:70px;
}

#about > section{
  display: flex; 
  justify-content:space-between;
  margin-bottom:80px;
}

#about .title{
  font-size:61px;
  max-width:592px;
  margin-right:76px;
  width:100%;
}

#about .content{
  max-width:516px;
  width:100%;
  font-size:20px;
}

.bg-image{
  background-image: url( '../images/about/bg_image.jpg' );
  background-size:cover;
  background-position: center;
  width:100%;
  height:450px;
}

#company-information{
  background-color:#204ECF;
}

#company-information .container{
  display: flex;
  padding:40px 20px;
  color:white;
  font-size:20px;
  font-family:"Clash Display";
}

#company-information .container > div{
  margin-right:100px;
}

#company-information .container .number{
  font-size:49px;
  font-weight:600;
}

#mission-vision{
  display: flex;
  margin-bottom:100px;
}

#mission-vision .left-col,
#mission-vision .right-col{
  padding:90px 20px;
  width:50%;
}

#mission-vision .left-col > section,
#mission-vision .right-col > section{
  max-width:460px;
  width:100%;
  margin:auto;
}

#mission-vision section h2{
  font-size:49px;
  margin-bottom:24px;
}

#mission-vision .left-col{
  background-color: rgba(242, 87, 73, 0.08);
}

#mission-vision .right-col{
  background-color: rgb(242, 87, 73);
  color:white;
}

#about-who{
  margin-bottom:150px;
}

#about-who > section{
  text-align: center;
  margin-bottom:64px;
  max-width:1000px;
  width:100%;
  margin:auto auto 64px auto;
}

#about-who > section .title{
  font-size:49px;
  margin-bottom:24px;
}

#about-who > section .sub-title{
  font-size:31px;
  font-style: italic;
  margin-bottom:16px;
  color:#204ECF;
}

#about-who .about-who-list{
  display: flex;
}

#about-who .about-who-list li{
  max-width:389px;
  width:100%;
  margin-right:16px;
}

#about-who .about-who-list li:last-child{
  margin:0;
}

#about-who .about-who-list li .title{
  font-family:'Clash Display';
  font-weight:600;
  font-size:31px;
}


#team{
  padding-top:110px;
  background-color: #060F17;
  color:white;
  margin-bottom:100px;
}

#team .container > section{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom:56px;
}

#team .container > section .title{
  font-size:49px;
}

#team .container > section a{
  color:#F25749;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}

#team .container > section .circle-arrow{
  margin-left:20px;
  z-index:2;
} 

#team .team-list{
  display: flex;
  flex-wrap: wrap;
  gap:20px;
  /* justify-content: space-between; */
}

#team .team-list li{
  width:23%;
  margin-bottom:56px;
}

#team .team-list .image{
  background-size:cover;
  background-position: center;
  width:100%;
  height:254px;
  margin-bottom:8px;
  border-radius: 20px;
}

#team .team-list .name{
  text-transform: capitalize;
  margin-bottom:2px;
  font-family: "Clash Display";
  font-size:20px;
}

#team .team-list .position{
  text-transform: uppercase;
  font-style: italic;
  font-size:14px;
}

#join{
  overflow: hidden;
  margin-bottom:80px;
}

#join .image{
  width:100%;
  height:400px;
  border-radius: 50px 50px 0px 0px;
}

#join .container{
  padding: 40px;
  display: flex;
  background-color: #204ECF;
  justify-content: space-between;
  color:white;
  border-radius: 0px 0px 50px 50px;
}

#join .container > section .title{
  font-size:49px;
}

#join .content{
  max-width:670px;
  width:100%;
  font-size:20px;
}

#join .content > p{
  margin-bottom:24px;
}

#join .content a{
  color:white;
  display: flex;
  align-items: center;
  font-size:16px;
  font-family:"Clash Display";
}

#join .content a .circle-arrow{
  margin-left:20px;
  color:white;
  border:none;

}

#join .content a .circle-arrow::before{
  background-color:white;
  z-index:1;
}

#join .content a .circle-arrow::after{
  border:white 2px solid;
}

#join .content a .circle-arrow .icon{
  transition: color 0.3s ease;
}


#join .content a .circle-arrow:hover .icon{
  color:#204ECF;
  z-index:2;
}

@media( max-width:768px ){


  #about{
    padding-top:60px;
  }
  
  #about > section{
    flex-direction: column;
  }
  
  #about .title{
    margin-right:0;
    max-width:636px;
    margin-bottom:24px;
  }
  
  #about .content{
    max-width:100%;
  }
  
  .bg-image{
    height:420px;
  }

  #company-information .container{
    flex-wrap: wrap;
  }
  
  #company-information .container > div{
    width:50%;
  }

  #company-information .container > div{
    margin-right:0;
  }

  
  #mission-vision{
    flex-direction: column;
  }
  
  #mission-vision .left-col,
  #mission-vision .right-col{
    width:100%;
  }

  #about-who{
    margin-bottom:80px;
  }

  #about-who > section{
    margin-bottom:40px;
  }
  
  #about-who .about-who-list{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  #about-who .about-who-list li{
    max-width:544px;
    margin:auto auto 32px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  } 
  
  #team{
    padding:80px 0;
    margin-bottom:60px;
  }
  
  #team .container > section{
    margin-bottom:40px;
  }

  #team .team-list li{
    width:47%;
    margin-bottom:24px;
  }
  
  #join .container{
    flex-direction: column;
  }
  
  #join .container > section .title{
    font-size:49px;
  }
  
  #join .content{
    max-width:608px;
  }
}

@media( max-width:480px ){
  #about{
    padding-top:20px;
  }

  #mission-vision{
    margin-bottom:40px;
  }

  #about .title,
  #mission-vision section h2,
  #about-who > section .title,
  #team .container > section .title,
  #join .container > section .title,
  #about-who .about-who-list li .title{
    font-size:25px;
  }

  #about-who > section .sub-title{
    font-size:18px;
  }

  #about .content,
  #team .team-list .name{
    font-size:16px;
  }

  .bg-image{
    height:200px;
  }

  #company-information .container > div{
    width:50%;
    margin-bottom:15px;
  }

  #company-information .container .number{
    font-size:20px;
  }

  #mission-vision .left-col, #mission-vision .right-col{
    padding:45px 20px;
  }

  #team .team-list .image{
    height:150px
  }

  #join .image{
    height:250px;
  }

  #join .content p{
    font-size:16px;
  }

  .circle-arrow{
    width:35px;
    height:35px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .circle-arrow .icon{
    width:20px;
    height:20px;
  }

  #company-information .container > div:nth-child(2n){
    margin-right:0;
  }
}

@media( max-width:375px ){
  #team .team-list{
    gap:10px;
  }
}