@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');



.title-wrapper span{

    font-size: 24px !important;

    line-height: 30px !important;

}



p{

    font-size: 16px;

    font-weight: 300;

    line-height: 24px;

}



#about-us-hero{

    padding: 0;

    background: url(../img/about-us/hero-bg-pc.jpg);

    background-size: cover;

    background-position-x: 35%;

    display: flex;

    justify-content: flex-end;

}





.about-hero-wrapper{

    width: calc(calc( calc(100% - 160px) * 0.4) + 145px);

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    background: linear-gradient(270deg, rgba(69, 77, 69, 0.78) 0%, rgba(69, 77, 69, 0.78) 87.14%, rgba(69, 77, 69, 0) 100%);

    

}

.about-hero-title{

    border-left: 1px solid #F1F1EC;

    padding-top: 120px;

    padding-left: 20px;

    margin-bottom: 20px;

    margin-left: 100px;

}



.about-hero-title span{

    color: #F1F1EC;

    line-height: 60px;

    font-weight: 500;

    font-size: 40px;

}



.about-hero-desc{

    padding: 40px;

    padding-left: 100px;

    width: -webkit-fill-available;

    

}


.about-hero-desc p{
    
    color: #F1F1EC;

}


#experience, #versatility-2{

    padding: 100px 0;

    background-color: #F1F1EC;

}

#experience .container, #versatility .container, #versatility-2 .container{

    padding: 0;

}

#experience .title-wrapper, #versatility .title-wrapper{

    margin-bottom: 40px;

}

.about-db-wrapper{

    display: flex;

    padding: 0 60px 0 100px;

    justify-content: space-between;

}

.db-item{

    display: flex;

    flex-direction: column;

    height: 400px;

}

.first-db-item{

    width: 60%;

}

.sec-db-item{

    width: 40%;

    padding-left: 40px;

}

.about-db-wrapper img{

    object-fit: cover;

    height: 100%;

}



#versatility{

    padding: 0;

    background-color: #C1C9C0;

}

#versatility .title-wrapper{

    margin-top: 100px;

}

#versatility .sec-db-item{

    width: calc(40% + 60px);

    margin-right: -60px;

}

#versatility .first-db-item{

    height: 100%;

}



.quote{

    font-family: 'Caveat' !important;

    color: #36312A;

    font-size: 32px;

   font-weight:400;

    line-height: 40px;

    text-align: right;

    margin-top: auto;

    margin-left: auto;

}



#make-order{ 

    background-image: url(../img/about-us/bg-add.png); 

    background-repeat: no-repeat; 

    background-size: cover; 

    background-position: center;

} 

#make-order .container{

    padding: 112px 100px;

}

 

#make-order h2{ 

    margin-bottom: 20px; 

 

    font-style: normal; 

    font-weight: 500; 

    font-size: 25px; 

    line-height: 38px; 

     

    letter-spacing: 0.05em; 

    text-transform: uppercase; 

 

    color: #FFFFFF; 

} 

#make-order p{ 

    margin-bottom: 50px; 

 

    font-style: normal; 

    font-weight: 400; 

    font-size: 20px; 

    line-height: 30px; 

 

    letter-spacing: 0.05em; 

 

    color: #FFFFFF; 

} 

 

.default-button{ 

    margin-top: 10px !important; 

    color: #F1F1EC; 

    border: #F1F1EC 1px solid; 

    transition-duration: 0.5s; 

    display: block; 

    width: fit-content; 

} 

.default-button:hover{ 

    background-color: #36312A; 

}



#insta{

    background-color: #C1C9C0;

    padding: 0;

    padding-top: 50px;

    

}

#insta .container{

    padding: 0 170px;

    display: flex;

    flex-direction: column;

    align-items: center;

}

#insta .title-wrapper span{

    font-size: 32px !important;

    font-weight: 500;

    line-height: 52px !important;

}

.insta-link{

    margin-top: 10px;

    display: flex;

    align-items: center;

    text-decoration: none;

}

.insta-link *{

    color: #36312A;

}

.insta-link ion-icon{

    margin-right: 10px;

}

.insta-link span{

    font-size: 16px !important;

    font-weight: 400;

    line-height: 24px !important;

}

.insta-gallery{

    display: flex;

    justify-content: space-between;

    margin-top: 40px;

    width: 100%;

}

.insta-gallery img{

    height: 400px;

    width: 30%;

    border-top-left-radius: 1000px;

    border-top-right-radius: 1000px;

    object-fit: cover;

    object-position: center;

}



#make-order .container{

    padding-top: 100px !important;

    padding-bottom: 100px !important;

    padding-left: 70px !important;

    padding-right: 70px !important;

}





@media (max-width:1330.78px) {

    .about-hero-title{

        padding-top: 80px;

    }

    #about-us-hero img{

        display: none;

    }

    

    #make-order .container{

        padding-top: 100px !important;

        padding-bottom: 100px !important;

    }

}

@media (max-width:1024.78px) {

    #about-us-hero{
        background-position-x: center;
        background-image: url(../img/about-us/hero-bg.jpg);
    }
    .about-hero-wrapper{

        width: 100%;

        margin-top: 300px;

        background: linear-gradient(0deg, rgba(69, 77, 69, 0.78) 0%, rgba(69, 77, 69, 0.78) 87.14%, rgba(69, 77, 69, 0) 100%);
    }

    .about-hero-title{

        border-left: none;

        border-bottom: 1px solid #F1F1EC;

        padding-left: 0;

    }

    .about-hero-desc{
        padding-top: 0;
    }
    .insta-gallery img:nth-child(1), .insta-gallery img:nth-child(3){

        display: none;

    }

    .insta-gallery img{

        width: 100%;

    }

}

@media (max-width:968.78px) {

    .db-item{

        height: auto !important;

    }

    .quote{

        margin-top: 20px;

        font-size: 20px;

        line-height: 26px;

    }

    #versatility .first-db-item p{

        margin-bottom: 50px;

    }

}

@media (max-width:870.78px) {

    

    .about-hero-desc{

        width: calc(100% - 160px);

    }

    #versatility .first-db-item{

        width: 100%;

    } 

    #versatility .container{

        background: rgba(201,209, 200,.9);

    }

    #versatility{

        background-image: url(../img/photo_9.jpg);

        background-size: cover;

        background-position: center;

    }

    #versatility .sec-db-item{

        display: none;

        width: calc(40% + 30px);

        margin-right: -30px;

    } 

    .first-db-item{

        width: 100%;

    }

    .sec-db-item{

        width: 100%;

        padding-left: 0;

        margin-top: 40px;

    }

    #versatility .title-wrapper{

        margin-top: 50px !important;

    }

    .about-db-wrapper{

        flex-direction: column;

    }

}

@media (max-width:780.78px) {

    .about-hero-title{

        margin-left: 30px;

    }

    

    .about-hero-desc{

        padding-left: 30px;

        width: auto;

        padding-bottom: 50px;

    }

    .about-db-wrapper{

        padding: 0 30px 0 30px;

    }

    #experience .title-wrapper, #versatility .title-wrapper{

        padding-bottom: 0 !important;

    }

    #experience, #versatility-2  {

        padding-top: 50px !important;

        padding-bottom:  50px !important;

    }

    

    

    

    #make-order .container{

        padding: 50px 0px !important;

    }

    #make-order{

        padding: 0 30px;

    }

    #insta .container{

        padding: 0;

        background-image: url(../img/photo_11.jpg);

        border-top-right-radius: 1000px;

        margin: 0 30px;

        background-size: cover;

        border-top-left-radius: 1000px;

    }

    .insta-gallery{

        visibility: hidden;

    }

    .insta-link *{

        color: #FFFFFF !important;

    }

    #insta .title-wrapper{

        margin-top: 200px !important;

        padding-bottom: 0 !important;

    }

    #insta .insta-gallery img{

        height: 100px;

    }

    #insta .title-wrapper span{

        color: #FFFFFF;

    }

}



@media (max-width:614.78px) {

    #insta .title-wrapper span{

        font-size: 24px !important;

    }

    #make-order h2{

        font-size: 24px;

    }

    #make-order p{

        font-size: 16px;

    }

}
@media (max-width:400.78px) {

    #insta .title-wrapper span{

        font-size: 20px !important;

    }

    #make-order h2{

        font-size: 24px;

    }

    #make-order p{

        font-size: 16px;

    }

}