@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

:root{
    --brand-color: #BF945D;
    --main-background-color: #f2f3f5;
    --main-header-background-color: #ffffff;
    --white-color: #ffffff;
    --header-grey-text: #757575;
    --nav-hover: #545454;
    --cta-border-radius: .3em;
    --form-results-placeholder-color: #e7e7e7;
}

html{
    font-family: "Roboto", serif;
    font-weight: 400;
    font-style: normal;
    scroll-behavior: smooth;
}

header{
    top: 0;
    background-color: var(--main-header-background-color);
}

body{
    background-color: var(--main-background-color);
}

.main__header{
    margin: auto;
    padding-top: 1em;
}

.main__header_content{
    margin: auto;
    width: 80%;
    display: flex;
    justify-content: space-between;
    background-color: var(--white-color);
    padding: 0em 1em 1em 2em;
}

.main__header_content img{
    width: 400px;
    height: auto;
}

.main__header__content__div{
    display: flex;
    margin: 0;
}

.header__contact__details{
    margin: auto;
    display: flex;
    padding-top: 1em;
}

.header__contact__details a{
    color: var(--header-grey-text);
    text-decoration: none;
}

.header__contact__details p{
    color: var(--brand-color);
    margin: 0;
    padding: 0 1em 1em 0;
    font-weight: 300;
    font-size: .8em;
}

.header__contact__details span{
    font-size: 2em;
    color: var(--brand-color);
    padding-right: .2em;
}


.header__results__access{
    margin: auto;
    background-color: var(--brand-color);
    border-radius: var(--cta-border-radius);
    color: white;
}

.header__results__access a{
    background-color: var(--brand-color);
    text-decoration: none;
    color: var(--white-color);
    font-weight: bold;
    border-radius: var(--cta-border-radius);
    padding: 1em 2em;
    transition: background-color .3s ease;
}

.header__results__access a:hover{
    background-color: var(--white-color);
    outline: var(--brand-color) solid 1px;
    color: var(--brand-color);
}

.main__nav__menu{
    margin: auto;
    background-color: var(--brand-color);
    padding: .5em;    
}

.main__nav__menu ul{
    width: 80%;
    margin: auto;
}

.main__nav__menu ul li{
    text-decoration: none;
    list-style-type: none;
    display: inline-block;

}

.main__nav__menu a{
    text-decoration: none;
    color: var(--white-color);
    padding: 1em;
    font-weight: bold;
    transition: color .5s ease;
}

.main__nav__menu a:hover{
    color: var(--nav-hover);
}

.main__content{
    background-color: var(--main-header-background-color);
}

.main__content h2{
    color: var(--brand-color);
    font-size: 1.375em;
    margin-top: 1em;
}

.main_hero_banner_alignment{
    background-image: url(/img/hero_banner.JPG);
    background-position: center;
    height: 540px;
    width: auto;
    margin: auto;
    align-content: end;
    text-align: right;
    padding-bottom: 8em;
}

.main_hero_banner{
    width: 80%;
    margin: auto;
}

.main_hero_banner h1{
    margin: auto;
    text-align: right;
    color: var(--white-color);
    font-size: 3em;
    text-shadow: 1px 2px 2px var(--nav-hover);
    
}

.main_hero_banner a{
    display: flex;
    align-items: center;
    width: 8em;
    margin: auto 0 auto auto;
    background-color: var(--brand-color);
    color: white;
    font-size: 1em;
    font-weight: bold;
    text-decoration: none;
    padding: 1em 2em;
    border-radius: var(--cta-border-radius);
    box-shadow: 1px 2px 2px var(--nav-hover);
    transition: 
        color .5s ease, 
        background-color .5s ease;
}

.main_hero_banner a:hover{
    outline: solid 1px var(--brand-color);
    color: var(--brand-color);
    background-color: var(--white-color);
}

.main_hero_banner span{
    font-size: 1.25em;
    margin: auto;
    width: 0;
}

.main_hero_banner p{
    margin: 0;
    padding: 1em 0 3em 0;
    color: var(--white-color);
    font-size: 1.25em;
    text-align: right;
    text-shadow: 1px 2px 2px var(--nav-hover);

}


.main_access_results{
    width: 80%;
    margin: auto;
    padding-bottom: 2em;
}

.main_access_results h2{
    color: var(--brand-color);
    padding: 0;
    margin: 1em 0;
    font-size: 1.375em;
    text-align: center;
}

.main_access_results p{
    text-align: center;
    color: var(--nav-hover);
}

.main_access_results_form fieldset{
    min-height: 6.25em;
    margin: auto;
    background-color: var(--main-content-form);
    border-radius: var(--cta-border-radius);
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    border: none;
    box-shadow: 1px 0px 5px var(--header-grey-text);
    text-align: center;
}

.main_access_results_form label{
    display: inline-block;
    font-size: 1em;
    padding: 2em .5em 2em 0;
    margin-left: .5em;
    font-weight: bold;
    color: var(--brand-color);
    text-align: left;
}

.main_access_results_form input,
.main_access_results_form select{
    font-size: 1em;
    display: flex;
    border: none;
    border-radius: var(--cta-border-radius);
    padding: .8em;
    margin-top: .4em;
    outline: solid #e7e7e7 1px;
    width: 15em;
}

.main_access_results_form select{
    width: 16.6em;
}

.main_access_results_form input:focus{
    outline: solid var(--brand-color) 1px;
}

.main_access_results_form input::placeholder{
    color: var(--header-grey-text);
}

.btn_results_form{
    padding: .8em 7.5em;
    border: none;
    background-color: var(--brand-color);
    color: var(--white-color);
    font-weight: bold;
    border-radius: var(--cta-border-radius);
    margin-left: .5em;
    transition: 
        color .5s ease, 
        background-color .5s ease;
}

.btn_results_form:hover{
    background-color: white;
    color: var(--brand-color);
    outline: solid 1px var(--brand-color);
    cursor: pointer;
}

.form_support_button{
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form_support_button p{
    padding-right: .3em;
}

.form_support_button a{
    color: var(--brand-color);
}

.section_about__us{
    margin: auto;
    width: 80%;
    padding-top: .5em;
    /* outline: solid rgb(0, 38, 255) 2px; */
}

.article_about_us{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2em;

}

.article_about_us article{
    width: 48.5%;
    text-align: center;
    padding-bottom: 3em;
}

.article_about_us h3{
    color: var(--nav-hover);    
}

.article_about_us img{
    margin-top: 1.17em;
    width: calc(100% - 1em);
    height: auto;
    border-radius: 1em;
    box-shadow: 2px 2px 3px var(--header-grey-text);
}

.article_about_us p{
    text-align: justify;
    margin-top: 0;
    line-height: 1.8em;
    color: var(--nav-hover);
}

.row{
    display: flex;
    flex-wrap: wrap;
}

.col{
    flex: 1 0 auto;
}

.articles_values{
    display: flex;
    flex-shrink: 1;
    margin: auto;
    justify-content: center;
}
.articles_values span{
    font-size: 2.5em;
    color: rgba(84, 84, 84, .7);
}

.articles_values h4{
    color: var(--brand-color);
    font-size: 1.5em;
    margin: .8em 0;
}

.articles_values p{
    text-align: justify;
    line-height: 1.8em;
    color: var(--header-grey-text);
}

.articles_values div{
    width: 90%;
    margin: auto;
}

.article_padding{
    width: 30%;
    padding: 0em 1.5em 0em 1.5em;
}

.article_values_border{
    border-left: solid 1.5px rgba(84, 84, 84, .1);
    border-right: solid 1.5px rgba(84, 84, 84, .1);
}


.tittle_contonus{
    margin: auto;
    width: 40%;
    text-align: center;
    padding: 5em 0 3em 0;
}

.tittle_contonus h1{
    color: var(--brand-color);
}

.section__feedback{
    width: 80%;
    margin: auto;
}

.article_feedback{
    outline: solid 1px rgba(191, 149, 93, 0.1);
    border-radius: var(--cta-border-radius);
    box-shadow: 2px 2px 4px rgba(191, 148, 93, 0.3);
    width: calc(33% - 1rem);
    height: 13em;
    margin: auto;
}

.article_feedback h3{
    font-size: 1em;
    font-style: italic;
    margin: 0;
}

.article_feedback_distribuition{
    display: flex;
}

.section_feedback_article{
    display: flex;
    margin-top: 2em;
}

.persona_feedback_picture img{
    width: 50px;
    height: auto;
    padding: 1em;
}

.persona_feedback_stars{
    margin: auto auto auto 0;
    padding: 0;
    /* outline: solid red 2px; */
    gap: 0;
}

.persona_feedback_stars img{
    width: 57px;
    height: auto;
    margin: 0;
    padding: 0;
}

.article_feedback p{
    text-align: justify;
    margin: 0 1.5em;
    line-height: 1.5em;
    font-style: italic;
}

.service__locations{
    margin: auto;
    width: 80%;
    padding-bottom: 5em;
}

.service_location_distribuition{
    display: flex;
    gap: 1em;
}

.service_location_article{
    background-color: var(--brand-color);
    border-radius: var(--cta-border-radius);
    color: var(--white-color);
    width: calc(39% - 1rem);
    height: 13em;
    box-sizing: border-box;
    box-shadow: 2px 2px 3px rgb(0, 0, 0, .4);
    transition: background-color .6s ease;
    display: flex;
}

.service_location_distribuition article:hover{
    background-color: var(--white-color);
    outline: var(--brand-color) solid 1px;
    color: var(--brand-color);
}

.service_location_article_div{
    margin: 1.2em;
}

.service_location_article_div div{
    display: flex;
    align-items: center;
}

.service_location_article_div p{
    margin: 0;
}


.service_location_article_div h3{
    margin: 0;
}

.service_location_article_div img{
    padding-right: 1em;
}

.service_location_article_div a{
    background-color: var(--white-color);
    color: var(--brand-color);
    border-radius: var(--cta-border-radius);
    text-decoration: none;
    padding: 1em 2em;
    font-weight: bold;
    margin: 0;
    outline: solid var(--brand-color) 1px;
}


.location_div_spacing{
    /* padding: 3em 0 2em 0; */
    padding-top: 1em;
    padding-bottom: 3em;
    align-content: center;
    align-items: center;
}

.location_div_spacing p{
    padding: .3em;
}

.service_location_article iframe{
    width: 200px;
    height: 180px;
    margin: auto 1em auto auto;
    border-radius: var(--cta-border-radius);
    box-shadow: 1px 2px 5px rgba(84, 84, 84, 0.5);
    border: 0;
}

.footer_background{
    background-color: var(--brand-color);
}

.footer_align{
    margin: auto;
    width: 80%;
}

.footer_menu_logo_contact{
    display: flex;
    padding-top: 3em;
    padding-bottom: 2em;
}

.footer_menu_logo_contact a{
    transition: color .4s ease;
}

.footer_menu_logo_contact a:hover{
    color: var(--nav-hover);
}

.footer_logo{
    margin: 1em;
}

.footer_menu{
    margin: 1em 0 1em 8em;
    color: var(--white-color);
}

.footer_menu h3{
    text-transform: uppercase;
    font-size: 1em;
}

.footer_menu ul li{
    list-style: none;
    padding: .3em 0 .3em 0;
    
}

.footer_menu a{
    text-decoration: none;
    color: var(--white-color);
    padding: .4em 0 .4em 0;
    height: 2em;    
}

.footer_menu span{
    padding-right: .3em;
}

.footer_rt_details{
    padding-bottom: 1em;
    font-size: .8em;
}

.footer_rt_details div{
    margin: auto;
    color: white;
    text-align: center;
}

.rt_details p{
    margin: 0;
    padding-bottom: .5em;
}

.footer_company_details{
    display: flex;
    margin: auto;
    width: 100%;
    justify-content: center;
}

.footer_company_details p{
    text-align: center;
    padding: 0 .2em 0 .2em;
}

.footer_website_details a{
    color: var(--white-color);
    font-weight: bold;
}