/* ------------------------------------------ */
:root {
  --Background-1: #985E58;
  --Background-2: #FAF8F3;
  --Background-3: #FFFFFF;
  --Text-Header-1: #AD9E71;
  --Text-Header-2: #985E58;
  --Text-Header-3: #FAF8F3;
  --Text-Header-4: #E4DEC3;
  --Body-Light-Background: #333333;
  --Body-Dark-Background: #FFFFFF;
}
/* ------------------------------------------ */


/* ------------------------------------------ */
body {
    background: var(--Background-2);
    padding: 0;
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 180%;
    font-style: normal;
    letter-spacing: -3%;
    color: var(--Body-Light-Background);
}
p { margin: 0; }
/* ------------------------------------------ */


/* ------------------------------------------ */
h1, h2, h3, h4, h5 {
    margin: 0;
    font-style: normal;
    font-family: "Libre Franklin", sans-serif;
    line-height: 180%;
    letter-spacing: -3%;    
}

h1 {
    display: inline-block;
    padding: 0 8px 24px 0;
    font-size: 42px;
    font-weight: normal;

    color: var(--Text-Header-2);  
}

h2 {
    display: inline-block;
    padding: 0 8px 24px 0;
    font-size: 40px;
    font-weight: bold;
}

h3 {
    padding: 24px 0 24px 40px;
    font-size: 24px;
    font-weight: normal;
    color: var(--Text-Header-1);
}

h4 {
    padding: 0 0 16px 0;
    font-size: 24px;
    font-weight: normal;
    color: var(--Text-Header-4);
}

h5 {
    padding: 0 0 16px 0;
    font-size: 18px;
    font-weight: normal;
    color: var(--Text-Header-4);
}
.LightSectionHeaderStart { color: var(--Text-Header-1); }
.LightSectionHeaderEnd { color: var(--Text-Header-2); }
.DarkSectionHeaderStart { color: var(--Text-Header-3); }
.DarkSectionHeaderEnd { color: var(--Text-Header-4); }
/* ------------------------------------------ */


/* ------------------------------------------ */
.ContentContainer { margin: auto; max-width: 1920px; overflow: auto; }
/* ------------------------------------------ */


/* ------------------------------------------ */
#HomeImage { height: 70%; }
#HomeBGImage { float: right; width: auto; height: 100%; }
#CompanyLogo { position: absolute; left: 50%; transform: translate(-50%, -50%); max-width: 600px; }
#HomeCaption { display: flex; justify-content: center; align-items: center; height: 30%; text-align: center; }
/* ------------------------------------------ */


/* ------------------------------------------ */









@media (prefers-reduced-motion: no-preference) {
    #OurBusiness, #OurTeam > .ContentContainer, #OurProcess, #ContactUs > .ContentContainer {
        scale: .8; opacity: 0;
        animation: fade-in linear forwards;
        animation-timeline: view();
        animation-range: 1% 30%;

    }

    @keyframes fade-in {
        to { scale: 1; opacity: 1; }
    }    
}















#OurBusinessLeftSide { box-sizing: border-box; }
#KeyBenefits {
    background: var(--Background-1);
    display: inline-block;
    border-radius: 25px;
    box-sizing: border-box;
}
#KeyBenefits ul { margin: 0; color: var(--Body-Dark-Background); }
#KeyBenefits li { padding: 4px 0 0 0; }
#OurBusinessImage3 { width: 60%; float: right; }
#OurBusinessImage2 { float: left; width:40%; }
#OurBusinessRightSide { box-sizing: border-box; }
#OurBusinessImage1, #OurBusinessImage2, #OurBusinessImage3, #OurBusinessImage4, #OurBusinessImage5 { box-sizing: border-box; }
#OurBusinessImage1 img, #OurBusinessImage2 img, #OurBusinessImage3 img, #OurBusinessImage4 img, #OurBusinessImage5 img { width:100%; }
/* ------------------------------------------ */


/* ------------------------------------------ */
.ProfileCard { display: list-item; text-align: center; vertical-align: top; }
#ProfileCardContainer { text-align: center; }
.ProfileCard { text-align: center; vertical-align: top; padding: 0 40px 0 40px; }
.profileCard img { max-width: 400px; height: auto; }
.profileCard p { text-align: left; color: var(--Body-Dark-Background); }
/* ------------------------------------------ */


/* ------------------------------------------ */
#ProcessCardContainer { text-align: center; }
.ProcessCard { display: inline-block; text-align: center; vertical-align: top; }
.ProcessCard h3 { padding: 16px 0 16px 0; }
.ProcessCard img { max-width: 320px; height: auto; }
.ProcessCard p { text-align: left; }
/* ------------------------------------------ */


/* ------------------------------------------ */
#ContactUsCard { text-align: center; }
#ContactUs img { width:100%; max-width: 600px; height: auto; }
.EmailLink { margin: 0; padding: 0; font-size: 20px; font-weight: normal; color: var(--Text-Header-4); }
.EmailLink:hover { color: var(--Text-Header-3); }
/* ------------------------------------------ */


/* ------------------------------------------ */
#OurTeam, #ContactUs { background-color: var(--Background-1); }
/* ------------------------------------------ */


/* ------------------------------------------ */
@media screen and (min-height: 20px) {
    #CompanyLogo { top: 35%; left: 50%; width: 50%; }    
    #HomeCaption h1 { font-size: 32px; } 
}

@media screen and (min-height: 560px) {
    #CompanyLogo { top: 35%; left: 50%; width: 80%; }    
}

@media screen and (min-height: 960px) {
    #CompanyLogo { top: 50%; left: 50%; width: 100%; }    
}




/* ------------------------------------------ */
@media screen and (min-width: 20px) {
    #HomeCaption { padding: 8px 16px 0 16px; }
    #HomeCaption h1 { font-size: 26px; }
    .ContentContainer { padding: 40px 40px 40px 40px; }
    #KeyBenefits { margin: 24px 0 0 0; padding: 24px; width: 100%; }
    #OurBusinessLeftSide { float: none; width: 100%; }
    #OurBusinessRightSide { float: none; padding: 0; width: 100%; }
    #OurBusinessLeftSideImages { float: left; width: 100%; }
    #OurBusinessRightSideImages { float: right; width: 100%; }
    #OurBusinessImage1, #OurBusinessImage2, #OurBusinessImage3, #OurBusinessImage4, #OurBusinessImage5 { padding: 24px 0 0 0; }
    #OurBusinessImage1 { display: none; }
    #OurBusinessImage2 { display: none; }
    #OurBusinessImage3 { display: none; }
    #ProfileCardContainer { padding: 24px 0 0 0; }
    .ProfileCard { display: list-item; list-style-type: none; width: 100%; margin: auto; padding: 0; }
    .profileCard img { padding: 0 0 8px 0; width: 40%; }
    .ProfileCard h4 { padding: 0; }
    .ProfileCard h5 { padding: 0 0 8px 0; }
    .Spacing { padding: 0 0 80px 0; }
    #OurBusiness h3, #OurProcess h3 { padding: 0 0 24px 0; line-height: 140%; }
    #OurProcess h4 { padding: 16px 0 8px 0; color: var(--Text-Header-1); }
    #OurBusinessLeftSide, .caption { padding: 0; }    
    #ProcessCardContainer { padding: 40px 0 0 0; }
    .ProcessCard { padding: 0 8px 0 8px; width: 96%; }
    .ProcessCard img { width: 40%; }    
    .Spacing2, .Spacing3 { padding: 0 0 80px 0; }  
    #ContactUsCard { padding: 16px 0 0 0; }
}

@media screen and (min-width: 400px) {
    #HomeCaption { padding: 8px 16px 0 16px; }
    #HomeCaption h1 { font-size: 26px; }
    .ContentContainer { padding: 40px 40px 40px 40px; }
    #KeyBenefits { margin: 24px 0 0 0; padding: 24px; width: 100%; }
    #OurBusinessLeftSide { float: none; width: 100%; }
    #OurBusinessRightSide { float: none; padding: 0; width: 100%; }
    #OurBusinessLeftSideImages { float: left; width: 100%; }
    #OurBusinessRightSideImages { float: right; width: 100%; }
    #OurBusinessImage1, #OurBusinessImage2, #OurBusinessImage3, #OurBusinessImage4, #OurBusinessImage5 { padding: 24px 0 0 0; }
    #OurBusinessImage1 { display: none; }
    #OurBusinessImage2 { display: none; }
    #OurBusinessImage3 { display: none; }
    #ProfileCardContainer { padding: 24px 0 0 0; }
    .ProfileCard { display: list-item; list-style-type: none; width: 100%; margin: auto; padding: 0; }
    .profileCard img { padding: 0 0 8px 0; width: 40%; }
    .ProfileCard h4 { padding: 0; }
    .ProfileCard h5 { padding: 0 0 8px 0; }
    .Spacing { padding: 0 0 80px 0; }
    #OurBusiness h3, #OurProcess h3 { padding: 0 0 24px 0; line-height: 140%; }
    #OurProcess h4 { padding: 16px 0 8px 0; color: var(--Text-Header-1); }
    #OurBusinessLeftSide, .caption { padding: 0; }    
    #ProcessCardContainer { padding: 40px 0 0 0; }
    .ProcessCard { padding: 0 8px 0 8px; width: 96%; }
    .ProcessCard img { width: 40%; }    
    .Spacing2, .Spacing3 { padding: 0 0 80px 0; }  
    #ContactUsCard { padding: 16px 0 0 0; }
}

@media screen and (min-width: 800px) {
    #HomeCaption { padding: 8px 24px 0 24px; }   
    #HomeCaption h1 { font-size: 30px; }
    .ContentContainer { padding: 56px 40px 56px 40px; }
    #KeyBenefits { box-sizing: border-box; margin: 32px 0 0 0; padding: 32px; width: 100%; }
    #OurBusinessLeftSide { float: none; width: 100%; }
    #OurBusinessRightSide { float: right; padding: 0 0 0 40px; width: 100%; }
    #OurBusinessLeftSideImages { float: left; width: 100%; }
    #OurBusinessRightSideImages { float: right; width: 100%; }
    #OurBusinessImage1, #OurBusinessImage2, #OurBusinessImage3, #OurBusinessImage4, #OurBusinessImage5 { padding: 24px 0 0 0; }
    #OurBusinessImage2 { display: none; }
    #OurBusinessImage3 { display: none; }
    #OurBusinessImage4, #OurBusinessImage5 { float: right; width:50%; }
    #OurBusinessImage4 { padding-left: 12px; }
    #OurBusinessImage5 { padding-right: 12px; }
    #ProfileCardContainer { padding: 32px 0 0 0; }
    .ProfileCard { display: list-item; list-style-type: none; width: 95%; margin: auto; padding: 0 0 0 40px; }
    .profileCard img { padding: 0 0 16px 0; width: 40%; }
    .ProfileCard h4 { padding: 0 ; }
    .ProfileCard h5 { padding: 0 0 16px 0; }
    .Spacing { padding: 0 0 80px 0; }
    #OurBusiness h3, #OurProcess h3 { padding: 8px 0 24px 40px; line-height: 160%; }
    #OurProcess h4 { padding: 24px 0 16px 0; color: var(--Text-Header-1); }
    #OurBusinessLeftSide, .caption { padding: 0 0 0 40px; }
    #ProcessCardContainer { padding: 56px 0 0 0; }
    .ProcessCard { padding: 0 32px 0 32px; width: 80%; }
    .ProcessCard img { width: 30%; }
    .Spacing2, .Spacing3 { padding: 0 0 80px 0; }  
    #ContactUsCard { padding: 24px 0 0 0; }
}

@media screen and (min-width: 1080px) {
    #HomeCaption { padding: 8px 32px 0 32px; } 
    #HomeCaption h1 { font-size: 36px; }
    .ContentContainer { padding: 80px 48px 80px 48px; }
    #KeyBenefits { margin: 32px 0 0 0; padding: 32px; width: 100%; }
    #OurBusinessLeftSide { float: left; width: 100%; }
    #OurBusinessRightSide { float: right; padding: 0 0 0 40px; width: 100%; }
    #OurBusinessLeftSideImages { float: left; width: 100%; }
    #OurBusinessRightSideImages { float: none; width: 100%; }
    #OurBusinessImage1, #OurBusinessImage2, #OurBusinessImage3, #OurBusinessImage4, #OurBusinessImage5 { padding: 32px 0 0 0 }
    #OurBusinessImage1 {display: none;}
    #OurBusinessImage2 { display: none; }
    #OurBusinessImage3 { display: none; }
    #OurBusinessImage4 { padding-left: 16px; }
    #OurBusinessImage5 { padding-right: 16px; }
    #OurBusinessImage4, #OurBusinessImage5 { float: right;}
    #ProfileCardContainer { padding: 32px 0 0 0; }
    .ProfileCard { display: inline-block; width: 27%; padding: 0 24px 0 24px; }        
    .profileCard img { padding: 0 0 16px 0; width: 90%; }
    .ProfileCard h4 { padding: 0; }
    .ProfileCard h5 { padding: 0 0 16px 0; }
    .Spacing { padding: 0; }
    #OurBusiness h3, #OurProcess h3 { padding: 16px 0 24px 40px; line-height: 170%; }
    #OurProcess h4 { padding: 24px 0 16px 0; color: var(--Text-Header-1); }
    #OurBusinessLeftSide, .caption { padding: 0 0 0 40px; }
    #ProcessCardContainer { padding: 64px 0 0 0; }    
    .ProcessCard { padding: 0 32px 0 32px; width: 40%; }
    .ProcessCard img { width: 50%; }
    .Spacing2 { padding: 0 0 40px 0; }     
    .Spacing3 { padding: 0; } 
    #ContactUsCard { padding: 40px 0 0 0; }
}

@media screen and (min-width: 1200px) {
    #HomeCaption { padding: 0 40px 0 40px; } 
    #HomeCaption h1 { font-size: 40px; }
    .ContentContainer { padding: 88px 56px 88px 56px; }
    #KeyBenefits { margin: 32px 0 0 0; padding: 32px; width: auto; }
    #OurBusinessLeftSide { float: left; width: 70%; }
    #OurBusinessRightSide { float: right; padding: 0 0 0 40px; width: 30%; }
    #OurBusinessLeftSideImages { float: none; width: 100%; }
    #OurBusinessRightSideImages { float: none; width: 100%; }
    #OurBusinessImage1, #OurBusinessImage2, #OurBusinessImage3, #OurBusinessImage4, #OurBusinessImage5 { padding: 8px; }
    #OurBusinessImage1 { display: block };
    #OurBusinessImage2 { display: none; }
    #OurBusinessImage3 { display: none; }
    #ProfileCardContainer { padding: 32px 0 0 0; }
    .ProfileCard { display: inline-block; width: 25%; padding: 0 40px 0 40px; }
    .profileCard img { padding: 0 0 24px 0; width: 100%; }
    .ProfileCard h4 { padding: 0 0 4px 0; }
    .ProfileCard h5 { padding: 0 0 16px 0; }
    .Spacing2 { padding: 0; }
    #OurBusiness h3, #OurProcess h3 { padding: 24px 0 24px 40px; line-height: 180%; }     
    #OurProcess h4 { padding: 24px 0 16px 0; color: var(--Text-Header-1); }
    #OurBusinessLeftSide, .caption { padding: 0 0 0 40px; }   
    #ProcessCardContainer { padding: 72px 0 0 0; }
    .ProcessCard { padding: 0 32px 0 32px; width: 40%; }
    .ProcessCard img { width: 50%; }
    .Spacing2 { padding: 0 0 80px 0; }
    .Spacing3 { padding: 0; }     
    #ContactUsCard { padding: 48px 0 0 0; }
}

@media screen and (min-width: 1460px) {
    .ContentContainer { padding: 96px 80px 96px 80px; }
    #KeyBenefits { margin: 32px 0 0 0; padding: 32px; width: auto; }
    #OurBusinessLeftSide { float: left; width: 70%; }
    #OurBusinessRightSide { float: right; padding: 0 0 0 40px; width: 30%; }
    #OurBusinessLeftSideImages { float: none; width: 100%; }
    #OurBusinessRightSideImages { float: none; width: 100%; }
    #OurBusinessImage1, #OurBusinessImage2, #OurBusinessImage3, #OurBusinessImage4, #OurBusinessImage5 { padding: 8px; }
    #OurBusinessImage2 { display: none; }
    #OurBusinessImage3 { display: none; }
    #OurBusiness h3, #OurProcess h3 { padding: 24px 0 24px 40px; line-height: 180%; }
    #OurProcess h4 { padding: 24px 0 16px 0; color: var(--Text-Header-1); }
    #OurBusinessLeftSide, .caption { padding: 0 0 0 40px; }
    #ProcessCardContainer { padding: 80px 0 0 0; }
    .ProcessCard { padding: 0 32px 0 32px; width: 18%; }
    .ProcessCard img { width: 80%; }
    .Spacing2, .Spacing3 { padding: 0; }
    #ContactUsCard { padding: 48px 0 0 0; }
}

@media screen and (min-width: 1780px) {
    .ContentContainer { padding: 120px 80px 120px 80px; }
    #KeyBenefits { margin: 40px 0 0 0; padding: 40px; width: auto; }
    #OurBusinessLeftSide { float: left; width: 60%; }
    #OurBusinessRightSide { float: right; padding: 0 0 0 40px; width: 40%; }
    #OurBusinessLeftSideImages { float: left; width: 60%; }
    #OurBusinessRightSideImages { float: right; width: 40%; }
    #OurBusinessImage1, #OurBusinessImage2, #OurBusinessImage3, #OurBusinessImage4, #OurBusinessImage5 { padding: 8px; }
    #OurBusinessImage2 { display: inline; }
    #OurBusinessImage3 { display: inline; }
    #OurBusinessImage4, #OurBusinessImage5 { float: none; width: 100%;}
    #OurBusiness h3, #OurProcess h3 { padding: 24px 0 24px 40px; line-height: 180%; }
    #OurProcess h4 { padding: 32px 0 24px 0; color: var(--Text-Header-1); }
    #OurBusinessLeftSide, .caption { padding: 0 0 0 40px; }
    #ProcessCardContainer { padding: 80px 0 0 0; }
    .ProcessCard { padding: 0 40px 0 40px; width: 18%; }
    .ProcessCard img { width: 100%; }
    .Spacing2, .Spacing3 { padding: 0; }
    #ContactUsCard { padding: 48px 0 0 0; }
}