html,body{
height: 100%;
scroll-behavior: smooth;
margin: 0;
}
/*desktop mode*/
header{
position: relative;
width: 100%;
height: 200px;
background: url("assets/images/about-hero-desktop.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.about-head{
display: flex;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
-ms-flex-pack: center;
justify-content: space-between;
}
.about-title h1{
color: white;
font-size: 2.5rem;
font-family:"Space Mono", monospace;
font-weight: bold;
position: absolute;
left: 4rem;
top:4rem;
}
.circle{
width: 234px;
height: 63px;
float: right;
}
.about-circle {
position: absolute;
top:4rem;
right: -1.5rem;
}
/* tablet mode*/
@media (max-width: 1024px) {
header{
background: url("assets/images/about-hero-tablet.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.about-title h1{
font-size: 2.5rem;
top:4.5rem;
}
}
/* mobile mode*/
@media (max-width: 767px) {
header{
height: 160px;
margin-top: 4rem;
background: url("assets/images/about-hero-mobile.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.circle{
display: none;
}
.about-head{
justify-content: center;
text-align: center;
}
.about-title h1{
position: absolute;
top:3.5rem;
left: 41%;
font-size: 2.3rem;
}
}
@media (max-width: 660px) {
.about-title {
text-align: center;
}
.about-article{
display: flex;
flex-wrap: wrap;
width:100%;
margin: auto;
justify-content: center;
}
}
@media (min-width: 1044px){
.about-articles .article_picture {
margin-top: 4rem;
}
.about-articles .pattern--circle--group-1 {
position: absolute;
top: 25rem;
right: 0;
-webkit-transform: translateX(410px);
transform: translateX(410px);
}
.about-articles .pattern--arrow--group-1 {
position: absolute;
top: 43.5rem;
right: -19%;
}
.about-articles .pattern--circle--group-2 {
position: absolute;
top: 67rem;
left: 0;
-webkit-transform: translateX(-405px);
transform: translateX(-405px);
}
.about-articles .pattern--arrow--group-2 {
position: absolute;
top: 67rem;
left: -9%;
}
}
@media (min-width:769px) and (max-width:1043.98px) {
.about-articles .pattern--circle--group-1 {
position: absolute;
top: 23.5rem;
right: 0;
-webkit-transform: translateX(350px);
transform: translateX(350px);
}
.about-articles .pattern--arrow--group-1 {
position: absolute;
top: 40rem;
right: -3%;
}
.about-articles .pattern--circle--group-2 {
position: absolute;
top: 75rem;
left: 0;
-webkit-transform: translateX(-350px);
transform: translateX(-350px);
}
.about-articles .pattern--arrow--group-2 {
position: absolute;
top: 75rem;
left: -10%;
}
}
@media (max-width: 768.98px) {
.about-articles .picture1{
margin-top: 20px;
}
.about-articles .feature{
height: 640px;
}
.about-articles .pattern--arrow--group-1 {
position: absolute;
top: 29rem;
right: -7%;
}
.careers .pattern--arrow--group-1 {
position: absolute;
top: 33rem;
right : -7%;
}
.about-articles .pattern--arrow--group-2 {
position: absolute;
top: 67rem;
left: -2%;
}
}
@media (max-width: 660px) {
.about-articles .pattern--arrow--group-1 {
position: absolute;
top: 28rem;
left : 33%;
}
.careers .pattern--arrow--group-1 {
position: absolute;
top: 23rem;
left : 33%;
}
.about-articles .pattern--arrow--group-2 {
position: absolute;
top: 55rem;
left: -2%;
}
.about-articles .article_text{
margin-bottom: 0%;
}
.about-articles .feature{
height: 620px;
}
}
@media (max-width: 460px) {
.about-title h1{
position: absolute;
top:3.5rem;
left: 35%;
}
.about-articles .pattern--arrow--group-1 {
position: absolute;
top: 27rem;
left : 35%;
}
.careers .pattern--arrow--group-1 {
position: absolute;
top: 22rem;
left : 33%;
}
.about-articles .pattern--arrow--group-2 {
position: absolute;
top: 58rem;
left: -25%;
}
}
@media (max-width: 360px) {
.about-articles .pattern--arrow--group-2 {
position: absolute;
top: 56rem;
left: -75%;
}
}
.values h4{
color: #495567;
font-family:"Space Mono", monospace;
font-weight: bold;
}
.values{
width: 100%;
text-align: center;
position: relative;
clear: both;
}
.values-head ,.faq-head h1{
color: #495567;
font-family:"Space Mono", monospace;
font-weight: bold;
font-size: 2.8rem;
margin: 20px;
}
.value{
position: relative;
margin: 0 1.5rem;
width: 350px;
height: 457px;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-ms-flex-pack: center;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
justify-content: center;
}
.value-picture{
height: 240px;
border-radius: 50%;
}
.value_pic{
width: 240px;
height: 240px;
object-fit: cover;
border-radius: 50%;
position: relative;
}
.number {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: absolute;
left:50%;
-webkit-transform: translate(-50%, 59%);
transform: translate(-50%, -49%);
width: 96px;
height: 96px;
background-color: #fcb72b;
border-radius: 50%;
}
.number h4{
position: relative;
font-size: 130%;
}
.value-copy h4{
font-size: 140%;
}
.value-copy{
margin-top: 3.5rem;
}
@media (min-width: 1044px){
.value-container{
max-width: 111rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 3.3rem 0 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media (max-width:1043.98px) {
.value-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
justify-content: center;
}
.value{
width: 457px;
height: 457px;
}
}
@media (max-width: 660px) {
.values-head ,.faq-head h1{
font-size: 2rem;
}
}
@media (max-width: 460px) {
.value{
width: 350px;
height: 470px;
}
}
@media (max-width: 377px) {
.value{
margin: 1rem 1.5rem;
width: 80%;
height: 480px;
}
}
.faq h2{
margin-top: 2rem;
}
.faq h3{
color: #495567;
font-family:"Space Mono", monospace;
font-weight: bold;
font-size: 1.2rem;
}
.faq{
text-align: center;
width: 100%;
position: relative;
}
.faq-container{
display: flex;
width: 100%;
}
.accordion {
width: 100%;
}
.card{
margin: 1.5rem;
border: none;
}
.card:hover {
background: #FFF4DF;
}
.card-header{
display: flex;
flex-direction: row;
height: 80px;
}
.card-header button{
position: absolute;
left: 87%;
}
.card-header button svg{
fill: #fcb72b;;
}
@media (min-width: 1044px){
.faq-how , .faq-driving{
display: flex;
flex-direction: row;
width: 90%;
}
.accordion {
width: 100%;
}
}
@media (max-width:1043.98px) {
.faq-container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
justify-content: center;
}
.faq-how , .faq-driving{
width: 70%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
justify-content: center;
}
.accordion {
margin-top: -1rem;
width: 100%;
}
}
@media (max-width: 768.98px) {
}
@media (max-width: 660px) {
.faq h3{
font-size: 1rem;
margin-right: 2px;
}
.card-header button{
position: fixed;
left: 70%;
}
}
@media (max-width: 560px) {
.faq-how , .faq-driving{
width: 100%;
}
.faq h2{
font-size: 1.5rem;
}
.card-header button{
position: absolute;
left: 87%;
}
}
@media (max-width: 377px) {
.faq h2{
font-size: 1.5rem;
}
}