/*----------------- NAVBAR ----------------- */

nav {
    background: var(--primary_color);
    border-bottom: 2px solid var(--text_details);
    filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.3));
    display: flex;
    align-items: center;
    position: fixed;
    width: 100%;
    /* max-width: 138rem; */
    z-index: 1000;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navbar .menu-items {
    display: flex;
}

.navbar .navbar-item {
    margin-left: 1.5rem;
}

.navbar ul {
    display: flex;
}

.navbar a {
    color: var(--text_light);
    font-family: 'Poppins', sans-serif;
}

.navbar a:hover {
    background: var(--primary_color);
    color: var(--text_details);
    transition: ease .7s;
}

.navbar a.brand img {
    width: 7rem;
    height: 7rem;
}

.navbar .toggle-button {
    display: none;
}

/*------------------ HERO --------------------- */

.hero {
    width: min(138rem, 100%);
    max-width: 1380px;
    display: flex;
    flex-direction: row;
    padding-top: 10rem;
}

.hero_caption {
    flex: 4;
    margin-top: 6rem;
    position: relative;
    /* background: red; */
}

.hero_caption h2 {
    font-size: 8.5rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    letter-spacing: .2rem;
    color: var(--text_tile);
    line-height: 8rem;

}

.hero_caption span {
    font-size: 2.5rem;
    font-weight: 700;
    display: block;
    margin: 1rem;

}

.hero_caption p {
    font-size: 1.7rem;
    line-height: 2rem;
    letter-spacing: 1.5px;
    margin: 2rem 0 1.5rem 0;
    font-family: 'Poppins', sans-serif;
    padding: .9rem;
}

.hero_caption a.button {
    margin-bottom: 2rem;
    color: var(--text_dark);
    width: 85%;
}

.box_social {
    display: flex;
    align-items: center;
    color: var(--text_dark);
    width: 100%;
    margin-top: 1rem;
}

.box_social a {
    color: var(--text_black);
    font-size: 1.5rem;
}

.box_social a:hover {
    color: var(--text_hover);
    transition: color .3s;
}

.box_social img {
    width: 4%;
    margin-right: 1.6rem;
}

.hero_images {
    flex: 8;
    display: flex;
    justify-content: space-between;
    margin-top: 2.2rem;
    /* background: blue; */
}

.box_image_container {
    width: 100%;
    padding: .5rem;
}

.box_image_container img {
    width: 100%;
}

.hero_images span {
    color: var(--text_light);
    text-shadow: .2rem .2rem .2rem var(--text_black);
}

.box_opacity {
    position: absolute;
    background: rgb(0, 0, 0, 0.2);
    width: 97%;
    /* width: 25%; */
    min-height: 97%;
    top: 1%;
    left: 1.5%;
    cursor: pointer;
    transition: ease 1s;

}

.box_opacity:hover {
    transition: ease 1s;
    background: rgb(0, 0, 0, 0.6);
}

.box_opacity_true {
    position: absolute;
    background: rgba(0, 0, 0, .1);
    width: 100%;
    min-height: 99%;
    top: 0;
    left: 0;
    transition: ease 1s;
}

.box_opacity span {
    writing-mode: vertical-rl;
    text-transform: uppercase;
    padding: 2rem;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    /* color: var(--text_details); */
}

/* .card_my {
    background: var(--body_bg_color);
    margin-top: 3.5rem;
    box-shadow: none;
} */

/* .card_my div {
    padding: .5rem;
    font-size: .95rem;
} */

/*-------------------------- ABOUT --------------------------*/
#about {
    margin: 8rem 0;
    padding: 10rem 0;
    background: var(--primary_color);
}

.about_box {
    display: flex;
}

.about_image {
    position: relative;
    flex: 1;
}

.about_image img {
    width: 100%;
}

.block {
    width: 4rem;
    min-height: 9rem;
    background: var(--text_details);
    position: absolute;
    top: 2rem;
    right: -2rem;
    z-index: 1000;
}

.block.small {
    width: 4rem;
    min-height: 9rem;
    background: var(--text_details);
    position: absolute;
    top: 3rem;
    right: 1rem;
    z-index: 1000;
}

.about_content {
    padding-left: 3rem;
    flex: 1;
}

.about_content h2 {
    font-size: 3.5rem;
    font-family: 'Poppins', sans-serif;
    color: var(--text_details);
    margin-bottom: 1rem;
}

.about_content p {
    font-size: 1.5rem;
    color: var(--text_light);
    text-align: left;
}

/*--------------------------- SERVICES ----------------------------- */
#services {
    margin: 8rem 0;
    padding: 8rem 0;
}

.services_box_content {
    display: flex;
}

.box_service {
    display: flex;
    flex: 1;
    flex-direction: column;

}

.service_item {
    display: flex;
    align-items: center;
    margin-bottom: 2.5rem;
    border-bottom: 2px solid var(--text_light);
    padding-bottom: 2rem;
}

.service_icon {
    min-width: 5rem;
    min-height: 5rem;
    border-radius: 50%;
    background: var(--primary_color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.service_icon i {
    color: var(--text_details);
    font-size: 3rem;
}

.service_caption {
    margin-left: 2rem;
}

.service_caption span {
    font-size: 2.8rem;
    cursor: pointer;
    transition: color .3s;
}

.service_caption span:hover {
    color: var(--text_hover);
}

.tab_services {
    display: none;
    flex: 1;
}

.service-box-image {
    flex: 2;
}

.service-box-image img {
    width: 100%;
    border-radius: 10rem;
}

.service-box-caption {
    flex: 3;
    padding: 0 1rem;
}

.service-box-caption p {
    text-align: justify;
}

.tab_services figure {
    padding: 1rem;
    margin-top: -2rem;
    filter: drop-shadow(2px 6px 6px rgba(0, 0, 0, 0.4));
    border-radius: 10rem;
}

.tab_services h2 {
    font-size: 3.5rem;
    font-family: 'Poppins', sans-serif;
    color: var(--text_tile);
    margin-bottom: 3rem;
}

.tab_services a.button {
    margin-top: 2rem;
    color: var(--text_black);
    width: 85%;
}

.box_slide {
    /* background: red; */
    display: flex;
    justify-content: center;
}

.slide_box {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5rem;
    /* max-width: 20rem; */
    margin-top: 2rem;
    /* background: red; */

}

.owl-item.active {
    background: none;
}

/* .slide_box img {
    width: 2%;
} */



.owl-dot {
    background: var(--bg_techs);
}

/* --------------------------------INSPIRATION ----------------------------- */
#inspiration {
    background: var(--primary_color);
    margin-top: -10rem;
    padding: 8rem 0;
}

.box_inspiration {
    display: flex;
    flex-direction: row;
}

.inspiration_image {
    position: relative;
    filter: drop-shadow(4px 8px 8px rgba(0, 0, 0, 0.4));
    flex: 2;
}

.inspiration_image img {
    width: 100%;
}


.inspiration_caption {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 50vh;
    flex-direction: column;
    padding: 5rem 0 0 2rem;
    flex: 1;

}


.inspiration_caption h3 {
    font-size: 2.5rem;
    margin-left: -15rem;
    color: var(--text_light);
}

.inspiration_caption span {
    font-size: 7rem;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    letter-spacing: 2.8px;
    position: absolute;
    right: -12rem;
    top: 15rem;
    z-index: 999;
    color: var(--text_details);
    margin-bottom: 0;
}

#inspiration .product_slide {
    margin-top: 22rem;
    display: flex;
    padding-right: .5rem;

}

#inspiration .box_inspiration_image {
    flex: 2;
}

#inspiration .product_slide figure {
    margin-top: 5rem;
    flex: 1;
    padding: .3rem;
    cursor: pointer;
}

#inspiration .product_slide figure img {
    width: 100%;
}

.inpiration_products {
    display: flex;
    margin-top: 1rem;
}

.box_prod {
    display: none;
    flex: 1;
}

.inpiration_products figure {
    margin-right: 3rem;
    filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.4));
    flex: 1;
}

.inspiration_buttons {
    display: none;
}


#contact {
    margin: 6rem 0;
    padding: 6rem 0;
    height: auto;
}

.box_contact_content {
    display: flex;
    flex-direction: row;
}

.contact_labels {
    padding-right: 3rem;
    flex: 1;
}

.contact_labels span {
    color: var(--text_grey);
}

.contact_labels h2 {
    color: var(--text_tile);
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    margin-top: 2rem;
}

.contact_labels p {
    margin: 2rem 0 4rem 0;
}

.box_contact_item {
    margin-top: 2rem;
    display: flex;
    align-items: center;
}

.contact_icon {
    min-width: 5rem;
    min-height: 5rem;
    border-radius: 50%;
    background: var(--primary_color);

    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text_details);
    margin-right: 1rem;
}

.box_contact_item span {
    color: var(--text_tile);
}

.form_contact {
    background: var(--primary_color);
    padding: 3rem;
    border-radius: .8rem;
    flex: 1;
}

.form_contact span {
    color: var(--text_light);
    font-size: 1.6rem;
    font-weight: 100;
}

.form_contact .label {
    color: var(--text_light);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: .1rem;
}

.form_contact h2 {
    color: var(--text_details);
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    margin-top: 2rem;
}

.form_contact button {
    margin-top: -2rem;
}

.form_contact a {
    color: var(--text_details);
    display: flex;
    align-items: center;
    margin-left: 1rem;
}


/* MAP   */
#map {
    background: var(--primary_color);
    padding: 2rem 0 3rem 0;
}

.contact_map {
    width: 100%;
    min-height: 45rem;
    margin-top: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 5rem;
}

#map .contact_map h2 {
    color: var(--text_details);
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    margin: 2rem 0;
}

#map .contact_map span {
    color: var(--text_light);
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    margin: 1rem 0 4rem 0;
}


.contact_map iframe {
    width: 100%;
    min-height: 45rem;
    ;
}

/* FOOTER  */

#footer {
    background: var(--primary_color);
}

.footer {
    background: var(--primary_color);
    padding-top: 5rem;
    color: var(--text_details);
}

.footer_header {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.footer_title {
    flex: 1;
    justify-content: end;
}

.footer_image {
    flex: 1;
}

.footer_image img {
    margin-top: -12rem;
    display: block;
    width: 80%;

}

.footer h1 {
    font-size: 4rem;
    color: var(--text_light);
    font-family: 'Poppins', sans-serif;
}

.footer span {
    font-size: 2rem;
    color: var(--text_light);
    font-family: 'Poppins', sans-serif;
}

.footer a {
    color: var(--text_details);
    margin-top: 1rem;
    display: block;
}

.box_footer_cotact {
    display: flex;
    align-items: center;
    padding: 1rem 0;
}

.box_footer_cotact:nth-child(2) {
    display: flex;
    align-items: center;
    padding: 0;
}

.box_footer_cotact i {
    margin-right: .7rem;
}

.box_footer_cotact_plus {
    margin-top: .7rem;
}

.box_footer_cotact_plus a {
    display: flex;
    align-items: center;
}

.box_footer_cotact_plus i {
    margin-right: .7rem;
}

.footer_content {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.footer_bar {
    width: 100%;
    background: var(--blue_dark);
    color: var(--text_details);
}

.box_footer_bar {
    display: flex;
    width: 100%;
    padding: 1.5rem 0;
    justify-content: space-between;
    margin-top: 2rem;
}

/* MODAL  */
#modals {
    position: relative;
    width: 100%;
    height: auto;
}

.modal_content {
    position: fixed;
    width: 100vw;
    min-height: 100vh;
    background: rgb(8, 60, 155, 0.9);
    top: 0;
    left: 0;
    z-index: 1111;

    justify-content: center;
    align-items: center;
    transition: 1s;
}

.box_modal {
    background: var(--text_light);
    width: min(70rem, 98%);


    padding: 3rem;
    margin: 5rem auto;
    border-radius: .8rem;
    -webkit-box-shadow: 13px 23px 21px -9px rgba(0, 0, 0, 0.47);
    -moz-box-shadow: 13px 23px 21px -9px rgba(0, 0, 0, 0.47);
    box-shadow: 13px 23px 21px -9px rgba(0, 0, 0, 0.47);
}

.box_modal_faq {
    background: var(--text_light);
    width: 99%;
    height: auto;


    padding: 3rem;
    margin: auto;
    border-radius: .8rem;
    -webkit-box-shadow: 13px 23px 21px -9px rgba(0, 0, 0, 0.47);
    -moz-box-shadow: 13px 23px 21px -9px rgba(0, 0, 0, 0.47);
    box-shadow: 13px 23px 21px -9px rgba(0, 0, 0, 0.47);
}

.box_modal ul li {
    list-style: inside;
    margin-bottom: 1.5rem;
}

.box_modal h2 {
    color: var(--text_tile);
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    margin: 2rem 0;
}

.box_modal span {
    color: var(--text_tile);
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    margin: .5rem 0 1rem 0;
    display: block;
}

.box_modal {
    line-height: 2.5rem;
    margin-bottom: 2rem;

}

.box_modal .modal_buttons {
    display: flex;
    justify-content: center;
}

.box_modal .modal_buttons .button {
    margin: 3rem 0 2rem 0;
}

.box_modal .modal_buttons .button:nth-child(2) {
    margin-left: 5rem;
}

#faq {

    width: 100%;
    height: auto;
    min-height: 100vh;
    padding: 5rem 0;
}

.box_faq {
    /* background: var(--text_light); */
    padding: 3rem 2rem;
    border-radius: .8rem;
    box-shadow: inset -3px -3px 7px #ffffffb0,
        inset 3px 3px 5px rgba(94, 104, 121, 0.397);
    margin-bottom: 1rem;
    height: auto;
    margin-top: 5rem;

}

.faq h2 {
    text-align: center;

}

.faq span {
    text-align: center;
    font-weight: 600;
    font-size: 1.8rem;
    display: block;
    margin-top: .8rem;

}

.box_faq span.faq_question {
    font-size: 1.5rem;
    cursor: pointer;
}

.collapsible {
    /* background: var(--text_light); */
    color: var(--text_dark);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.5rem;
    transition: background-color .8s;
    border-radius: .8rem .8rem 0 0;
}

.active, .collapsible:hover {
    background: var(--primary_color);
    transition: background-color .8s;
    color: var(--text_details);
}

.faq_answer {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    /* background: var(--text_light); */
    border-radius: 0 0 .8rem .8rem;
    padding: 2rem .9rem;
}

.box_question_content {
    margin-bottom: .8rem;
    box-shadow: -3px -3px 7px #ffffffb0,
        3px 3px 5px rgba(94, 104, 121, 0.397);
    border-radius: .8rem;
    margin-bottom: 1rem;
}

/* TELA SUCCESS ENVIO DE EMAIL  */
main #emailSuccess {
    background: var(--text_light);
    width: 100%;
    min-height: 100vh;
}

.success_img {
    width: min(90rem, 100%);
    background: var(--bg_light);
    margin: 3rem auto;

    padding: 2rem 0;
    border-radius: .8rem;
    /* background: #e0e0e0; */
    box-shadow: 24px 24px 33px #c7c7c7,
        -24px -24px 33px #f9f9f9;

}

.success_img .email_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.success_img .email_content img {
    width: 40%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.success_img .email_content h2 {
    color: var(--text_title);
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    margin: 2rem 0;
    text-align: center;
}

.success_img .email_content span {
    text-align: center;
    font-weight: 600;
    font-size: 1.8rem;
    display: block;
    margin-top: .8rem;
}


/* CONTAINR  */

.container {
    padding: 0 1rem;
    width: 80%;
    margin: 0 auto;
    max-width: 138rem;
    /* background: red; */
}