header {
    position: relative;
    text-align: center;
    font-family: 'Readex Pro';
}
.background { 
    display: block;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
header h1 {
    font: 700 4rem 'Amiri';
    color: #fffbf3;
}
.title {
    width: 100%;
    padding: 2.5rem 3rem;
    background-color: #110c04c4;
    position: absolute;
    top: 35%;
    right: 0;
    text-align: right;
    color: #fff;
}
.title>h2 {
    padding: 1rem;
    padding-top: 2rem;
    font-weight: 600;
}
.title>p {
    font-style: italic;
}
.title>h1>span {
    display: inline-block;
}
@media (max-width: 1350px){
    .title>h1 { font-size: 3.5rem; }
}
@media (max-width: 1080px){
    .title>h1 { font-size: 3.3rem; }
}
@media (max-width: 900px){
    .title>h1 { font-size: 3rem; }
}
@media (max-width: 800px){
    .title>h1 { font-size: 2.8rem; }
}
@media (max-width: 600px) {
    .background {
        width: 100%;
        height: 60vh;
        overflow: hidden;
        object-fit:cover;
    }
    .title { top: 40%; }
    .title>h1 { font-size: 3rem; }
}

#whoarewe, #ourteam, #vision {
    background-color: #0f0e0d;
    padding: 2rem;
    display: flex;
    text-align: right;
}
#ourteam {
    background-color: #f1e7dd;
}
#vision {
    background-color: #463a2e;
}
#whoarewe>img {
    height: 70vh;
    margin: 1rem;
}
#ourteam>img, #vision>img {
    max-width: 50vw;
    object-fit: cover;
    margin: 1rem;
}
#whoarewe h2, #ourteam h2, #vision h2, #goals>h2 {
    font: 400 2rem 'Amiri';
    color: #fff7ea;
    padding: 1rem 0;
    margin: 1rem 2.5rem;
    border-bottom: 1px solid #fff7ea;
}
#whoarewe p, #ourteam p, #vision p {
    font: 300 1.5rem 'Readex Pro';
    color: #fff7ea;
    padding: 3rem;
}
#ourteam h2, #ourteam p, #goals>h2 {
    font-weight: 400;
    color: #0f0e0d;
    border-color: #0f0e0d;
}
@media (max-width: 950px) {
    #whoarewe>img {
        max-width: 45vw;
        object-fit: cover;
    }
}
@media (max-width: 800px) {
    #whoarewe p, #ourteam p, #vision p { font-size: 1.3rem; }
}
@media (max-width: 600px) {
    #whoarewe, #vision { flex-direction: column-reverse; }
    #whoarewe>img {
        max-width: 100%;
        height: 60vh;
    }
    #ourteam { flex-direction: column; }
    #ourteam>img, #vision>img { max-width: 100%; }
}
@media (max-width: 350px) {
    #whoarewe, #ourteam, #vision { padding: 2rem 0; }
}


#goals {
    background-color: #f3ece5;
    padding: 1rem;
    text-align: right;
}
.goalsContainer {
    display: flex;
    justify-content: center;
    padding: 1rem;
}
.goals1, .goals2 {
    width: 48vw;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.goals1 {
    border-right: 1px solid #0f0e0d;
}
.goal {
    display: flex;
    align-items: center;
    padding: 1rem;
}
.goals1>.goal {
    flex-direction: row-reverse;
}
.goals2>.goal {
    text-align: left;
}
.goal>img {
    max-height: 2.5rem;
}
.goal>p {
    font: 400 1.3rem 'Readex Pro';
    padding: 1rem;
}
@media (max-width: 700px) {
    .goalsContainer { padding: 1rem 0; }
    .goals1 { padding-left: 0; }
    .goals2 { padding-right: 0; }
    .goal>p { font-size: 1.2rem; }
}
@media (max-width: 500px) {
    .goals1 { padding-right: 1rem; }
    .goals2 { padding-left: 1rem; }
    .goal>p { font-size: 1.1rem; }
}
@media (max-width: 415px) {
    .goal, .goals1>.goal {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0;
    }
}


.service-header>h1 {
    position: absolute;
    top: 30%;
    right: 15%;
    background-color: #0f0e0da4;
    padding: 2rem;
    padding-left: 4rem;
    text-align: right;
}
@media (max-width: 550px) {
    .service-header>h1 {
        padding: 1.5rem;
        font-size: 3.5rem;
    }
}
@media (max-width: 400px) {
    .service-header>h1 {
        right: 10%;
    }
}
.serviceContainer {
    display: flex;
    justify-content: space-evenly;
    text-align: right;
    padding: 2rem;
    background-color: #f5e5d3;
    border-top: 1px solid #43301E;
}
.serviceContainer:nth-child(2), .serviceContainer:nth-child(4) {
    background-color: #81705f;
    color: #f5eee8;
}
.serviceContent {
    width: 45vw;
}
.serviceContent>h2 {
    padding: 1rem;
    margin: 2.5rem;
    border-bottom: 1px solid #43301E;
    font: 400 3rem 'Amiri';
}
.serviceContent>p {
    font: 400 1.5rem 'Readex Pro';
    padding: 1rem;
}
.serviceContent>ul {
    list-style: none;
    padding: 1rem 2rem 2rem 0;
    font: 300 1.2rem 'Readex Pro';
}
.swiperContainer {
    margin: 3rem 0;
    width: 45vw;
}
.slides>img {
    width: 100%;
}
@media (max-width: 1024px) {
    .serviceContent { width: 40vw; }
    .swiperContainer { width: 50vw; }
}
@media (max-width: 655px) {
    .serviceContainer { flex-direction: column-reverse;}
    .serviceContent { width: 85vw; }
    .serviceContent>ul { padding-bottom: 0;}
    .swiperContainer { width: 85vw; }
}



.contactBody {
    background-color: #f3e8dc;
}
.contact-header {
    margin: 2rem;
    margin-top: 0;
    padding-top: 6rem;
    text-align: right;
    font-family: 'Amiri';
    color: #0f0e0d;
    border-bottom: 2px solid #241907;
}
header>p {
    font: 300 1.8rem 'Readex Pro';
    text-align: center;
    margin-bottom: 2rem;
    padding: 0 2rem;
}
.contact-header>span {
    display: inline-block;
}
.contact-container {
    display: flex;
    flex-direction: row-reverse;
}
.contact-details {
    display: flex;
    flex-direction: column;
    align-items:end;
    text-align: center;
    background-color: #463a2e;
    font-family: 'Readex Pro';
    color: #faf1e8;
    width: 40%;
    padding: 2rem 2rem 0 0;
}
.contact-details>h2 {
    font: 300 1.3rem 'Readex Pro';
    padding-bottom: 0.5rem ;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #faf1e8;
}
.contact-details>a {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-evenly;
    align-items: center;
    padding: 1rem;
    text-decoration: none;
    text-wrap: nowrap;
    color: #faf1e8;
    transition: all 200ms ease-in-out;
}
.contact-details>a:hover {
    background-color: #6b5c4c;
}
.contact-details>a img {
    width: 2.5rem;
    padding: 0.5rem;
}
.contact-details span {
    display: flex;
    align-items: center;
    text-wrap: nowrap;
}
#emailSpan {
    padding-right: 0.4rem;
}
.contact-details>p {
    text-align: right;
    padding: 1rem;
}
@media (max-width: 930px) {
    .contact-details>a, .contact-details>p { padding-right: 0; }
}
@media (max-width: 890px){
    .contact-details>h2 { margin-left: 2rem; }
    .contact-details>a {
        flex-wrap: wrap;
        justify-content: end;
    }
    .contact-details span { padding-left: 7rem; }
    #whatsappSpan { padding-left: 6rem; }
    #emailSpan { padding-left: 5rem; }
}

input, textarea {
    width: 80%;
    display: block;
    padding: 1rem;
    text-align: right;
    border: 1px solid #ccc;
    border-radius: 10px; 
    margin: 6px 0 16px auto;
    resize: vertical;
    font-family: 'Readex Pro';
}

input[type=submit] {
    background-color: #332a21;
    color: white;
    padding: 1rem 2rem;
    text-align: center;
    max-width: 30%;
    min-width: 120px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 200ms ease-in-out;
}
input[type=submit]:hover {
    background-color: #4b3c2e;
}

.contact-form {
    width: 60%;
    background-color: #f3e3d5;
    font-family: 'Readex Pro';
    padding: 5rem;
    text-align: right;
}
@media (max-width: 560px) {
    .contact-header { font-size: 2.8rem; }
    .contact-container { flex-direction: column; }
    .contact-details, .contact-form { width: 100%; }
    .contact-details {
        padding: 3rem;
        font-size: 1.1rem;
    }
    input, textarea { font-size: 1rem; }
    .contact-details span { padding-left: 6.8rem; }
    #whatsappSpan { padding-left: 5.1rem; }
    #emailSpan { padding-left: 0rem; }
}
@media (max-width: 350px) {
    .contact-header { font-size: 2.1rem; }
    .contact-form { padding: 3rem;}
}

.success-body {
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.success-body>footer{
    margin-top: auto;
}
.success-card>h1 {
  color: #463a2e;
  font-weight: 900;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.success-card>p {
  color: #404F5E;
  font-size:1.3rem;
  margin: 0;
}
.success-card i {
    color: #f3e3d5;
    font-size: 6rem;
    line-height: 200px;
    margin-left:-15px;
}
.success-card {
    font-family: 'Readex Pro';
    background: #f3e3d5;
    padding: 60px;
    border-radius: 4px;
    box-shadow: 0 2px 3px #C8D0D8;
    display: inline-block;
    margin: 10rem auto;
}
.success-card>div {
    border-radius:200px;
    height:200px;
    width:200px;
    background: #463a2e;
    margin:0.2rem auto;
}