@font-face {
    font-family: 'Coolvetica rg' ;
    src: url('assets/fonts/coolvetica_rg.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@import url('https://fonts.cdnfonts.com/css/creato-display?styles=96724');

@font-face {
    font-family: 'Bebas Neue rg';
    src: url('assets/fonts/BebasNeue-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Robotorg' ;
    src: url('assets/fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --color-brand: #ffc658;
    --color-dark: #404244;
    --color-text: #404040;
    --color-text-soft: #606467;
    --font-body: 'Creato Display', sans-serif;
    --title-size-desktop: 60px;
    --title-size-mobile: 36px;
}


/* Cookies */
    #cookiePopup {
    background-color: #ffffff;
    position: absolute;
    font-size: 14px;
    width: 70vw;
    max-width: 42.85em;
    box-shadow: 0 0 4em rgba(5, 0, 31, 0.15);
    font-family: "Poppins", sans-serif;
    text-align: justify;
    line-height: 1.8em;
    padding: 2em 1.4em;
    border-radius: 6px;
    transition: all 1s ease-in;
    z-index: 1;
    position: fixed;
}

    #cookiePopup img {
    display: block;
    width: 3.75em;
    transform: translateZ(0);
    position: relative;
    margin: auto;
}

    #cookiePopup p {
    text-align: center;
    margin: 1.4em 0;
}

    #cookieButtons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

    #cookiePopup button {
    background-color: var(--color-brand);
    border: none;
    color: var(--color-dark);
    font-size: 1.2em;
    padding: 1em 1.4em;
    margin: 0;
    border-radius: 5px;
    cursor: pointer;
    flex: 0 0 auto;
}

    #cookiePopup button.cookie-btn-secondary {
    background-color: transparent;
    color: var(--color-dark);
    border: 2px solid var(--color-dark);
}

    #cookiePopup button.cookie-btn-secondary:hover {
    transition: .5s;
    background-color: var(--color-dark);
    color: #ffffff;
}

    #cookiePopup button:hover {
    transition: .5s;
    background-color: var(--color-dark);
    color: var(--color-brand);
}

    #cookiePopup a {
    color: var(--color-brand);
}

    #cookiePopup a:hover {
        transition: .5s;
    color: var(--color-dark);
}

    .hide {
    visibility: hidden;
    bottom: 0;
    right: 2em;
}

    .show {
    visibility: visible;
    bottom: 2em;
    right: 2em;
}


  @media only screen and (max-width: 37.5em) {
    #cookiePopup {
      width: 100%;
    }
    .hide {
      bottom: 2em;
      right: 0;
    }
    .show {
      right: 0;
      bottom: 0;
    }
}


/* Gerais */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

body {
    font-family: 'Creato Display rg', sans-serif;
}

.row {
    margin: 0;
}

.container {
    padding: 70px 0;
}

p, li {
    color: rgb(46, 45, 45);
    font-size: 16px;
}


/* Barra de Navegações */
.logo {
    margin-top: 2px;
    margin-left: 3px;
}
header, .navbar {
    margin: 0;
    padding: 0;
    background-color: #e9e9e9;
}

.navbar {
    opacity: 0.84;
    transition: 0.18s ease-in-out;
}

.navbar:hover {
    opacity: 1;
}

#nav-container {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-brand {
    padding: 0;
    color: var(--color-text-soft);
}

.navbar-brand:hover {
    color: var(--color-brand); 
}

#navbar-links a {
    color: var(--color-dark);
}

#navbar-links a:hover {
    color: var(--color-brand);
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding: 1rem .8rem;
}


/* Slider */
.container-fluid {
    padding: 0;
}

#mainSlider .carousel-caption {
    top: 30%;
}

#mainSlider .carousel-caption h2 {
    font-family: 'Roboto', sans-serif;
    font-size: 50px;
    margin-bottom: 190px;
    color: transparent;

}

#mainSlider .carousel-caption h2::selection {
    color: transparent;
}

#mainSlider .main-btn {
    background-color: var(--color-brand);
    color: var(--color-dark);   
    width: 200px;
    height: 60px;
    padding: 10px 20px;
    border-radius: 30px;
    border: 3px solid transparent;
    transition: .5s;
    text-decoration: none;
    bottom: -40%;
    position: relative;
}

#mainSlider .main-btn:hover {
    text-decoration: none;
    background-color: var(--color-text-soft);
    color: var(--color-brand);
    border-color: var(--color-dark);
}

#mainSlider .carousel-indicators .active {
    background-color: var(--color-brand);
}


/* About */
#about-area {
    padding-top: 25px;
    background-color: #F9F9F9;
    background-image:  linear-gradient(#f4f4f4 2px, transparent 2px), linear-gradient(90deg, #f4f4f4 2px, transparent 2px), linear-gradient(#f4f4f4 1px, transparent 1px), linear-gradient(90deg, #f4f4f4 1px, #ffffff 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;;

}

#contarea {
    padding-bottom: 0px;
}

.main-title {
    color: var(--color-dark);
    margin: 0 0 65px 0;
    font-size: 60px;
    text-align: center;
}

.about-title {
    font-size: 22px;
    color: #444;
    text-transform: uppercase;
    font-weight: bold;
}

#fachada2 {
    padding-top: 8%;
}

#about-list {
    list-style: none;
    padding-left: 0;
}

#about-list i {
    color: var(--color-brand);
    margin-right: 15px;
}


/* Carreiras */
#carrers-area {
    background-color: #F9F9F9;
    background-image:  linear-gradient(#f4f4f4 2px, transparent 2px), linear-gradient(90deg, #f4f4f4 2px, transparent 2px), linear-gradient(#f4f4f4 1px, transparent 1px), linear-gradient(90deg, #f4f4f4 1px, #ffffff 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
    padding-top: 90px;
}

.second-title {
    color: var(--color-dark);
    margin: 0 0 0 0;
    font-size: 60px;
    text-align: center;
}

.sub-title {
    color: var(--color-text-soft);
    font-size: 20px;
    line-height: 2;
    margin-bottom: 25px;
    text-align: center;
}

#carrers-list {
    list-style: none;
}

#carrers-list i {
    color: var(--color-brand);
    margin-right: 15px;
}

#facebookpag {
    max-width: 100%;
    overflow: hidden;
    text-align: center;
}

#facebookpag iframe,
#facebookpag span {
    max-width: 100% !important;
}


/* Localização */
#local-area {
    background-color: #F9F9F9;
    background-image:  linear-gradient(#f4f4f4 2px, transparent 2px), linear-gradient(90deg, #f4f4f4 2px, transparent 2px), linear-gradient(#f4f4f4 1px, transparent 1px), linear-gradient(90deg, #f4f4f4 1px, #ffffff 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
    padding-bottom: 0;
    padding-top: 30px;
}

.local-title {
    color: var(--color-dark);
    margin: 0 0 0px 0;
    font-size: 60px;
    text-align: center;
}

.googleMap {
    background-color: #F9F9F9;
    background-image:  linear-gradient(#f4f4f4 2px, transparent 2px), linear-gradient(90deg, #f4f4f4 2px, transparent 2px), linear-gradient(#f4f4f4 1px, transparent 1px), linear-gradient(90deg, #f4f4f4 1px, #ffffff 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}


/* Contato */
#contact-area {
    background-color: #F9F9F9;
    background-image:  linear-gradient(#f4f4f4 2px, transparent 2px), linear-gradient(90deg, #f4f4f4 2px, transparent 2px), linear-gradient(#f4f4f4 1px, transparent 1px), linear-gradient(90deg, #f4f4f4 1px, #ffffff 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
    padding-bottom: 0;
}

.contact-title {
    color: var(--color-dark);
    margin: 0 0 0px 0;
    font-size: 60px;
    text-align: center;
}


#phone-col-one {
    text-align: center;
}

#contact {
    padding-top: 35px;
}

#phone-icon {
    color: var(--color-dark);
    font-size: 50px;
}

#list1 {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#gps-col-two {
    text-align: center;
}

#gps-icon {
    color: var(--color-dark);
    font-size: 50px;
}

#list2 {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#mail-col-tre {
    text-align: center;
}

#mail-icon {
    color: var(--color-dark);
    font-size: 50px;
}

#list3 {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#mail-xml {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 0;
}

#file-icon {
    color: var(--color-dark);
    font-size: 20px;
}

#list4 {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.mail1-link, #mail2, .phone-link, .loca-link {
    text-decoration:none;
    color: inherit;
}

#list1:hover a, #list1:hover i, #list2:hover a, #list2:hover i, #list3:hover a, #list3:hover i {
    color:var(--color-brand);
    transition: 0.2s ease-in-out;
}

#mail2:hover {
    color:var(--color-brand);
    transition: 0.2s ease-in-out;
}

#phonetx, #gpstx, #mailtx {
    font-family: var(--font-body); color: var(--color-text); font-size: 40px; padding-top: 20px;
}

#xmltx {
    font-family: var(--font-body); color: var(--color-text); font-size: 20px; padding-top: 10px;
}



/* ---------- Mobile: até 767.98px ---------- */
@media screen and (max-width: 767.98px) {

    #cookiePopup button:hover {
        transition: none;
    }

    .container {
        padding: 0;
    }

    #logo {
        width: 200px;
        height: 69px;
    }


    /* Slider */
    #mainSlider {
        margin-top: 70px;
    }

    #mainSlider .carousel-caption h2 {
        font-size: 34px;
        margin-bottom: 0px;
        position: relative;
        bottom: 35px;
    }

    #mainSlider .main-btn {
        width: 60px;
        height: 24px;
        border-radius: 9px;
        padding: 6px 12px;
        border: 1px solid transparent;
        font-size: 10px;
        position: relative;
        bottom: -80%;
    }

    #mainSlider .carousel-indicators {
        top: 83%;
    }

    
    /* Sobre */
    #about-area {
        padding-top: 35px;
    }

    #about-area img {
        margin-top: 0px;
        padding-bottom: 15px;
    }

    .main-title {
        font-size: var(--title-size-mobile);
        margin-bottom: 40px;
    }

    .about-title {
    font-size: 22px;
    color: #444;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    }

    .about-sub-title {
        text-align: center;
    }
    
    #fachada2 {
        padding-top: 0%;
    }


    /* Carreiras */
    #carrers-area {
        padding-top: 28px;
    }

    #facebookpag {
        width: 100%;
    }

    .second-title {
        font-size: var(--title-size-mobile);
        margin: 0;
        text-align: center;
    }

    .sub-title {
        font-size: 12px;
        margin-bottom: 25px;
        text-align: center;
    }

    #carrers-list {
        padding-right: 20px;
    }


    /* Localização */
    #local-area {
        padding-top: 28px;
    }

    .local-title {
        font-size: var(--title-size-mobile);
        padding-bottom: 20px;
    }


    /* Contato */
    #contact-area {
        padding-top: 28px;
    }

    .contact-title {
        font-size: var(--title-size-mobile);
    }

    #phone-icon, #gps-icon, #mail-icon {
        font-size: 35px;
    }

    #phone-col-one, #gps-col-two {
        padding-bottom: 15px;
    }

    #gpstx, #mailtx, #phonetx {
        padding-top: 0px;
    }

    .phone-link, .loca-link, .mail1-link {
        font-size: 35px;
    }

    #xmltx {
        font-size: 12px;
    }
}

/* ---------- Tablet: 768px – 1024px ---------- */
@media screen and (min-width: 768px) and (max-width: 1024.98px) {

    #cookiePopup button:hover {
        transition: none;
    }

    .container {
        padding: 0;
    }


    /* Slider */
    #mainSlider .carousel-inner,
    #mainSlider .carousel-item {
        height: auto;
    }

    #mainSlider .carousel-caption h2 {
        font-size: 28px;
        margin-bottom: 60px;
    }


    /* Sobre */
    #about-area {
        padding-top: 100px;
    }

    #about-area img {
        margin-top: 100px;
    }


    /* Carreiras */
    #colunatrab {
        width: 55%;
    }


    /* Localização */
    #local-area {
        padding-top: 100px;
    }

    .googleMap {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    
    /* Contato */
    #contact-area {
        padding-top: 12px;
    }

    #phone-icon, #gps-icon, #mail-icon {
        font-size: 35px;
    }

    .phone-link, .loca-link, .mail1-link {
        font-size: clamp(22px, 1.8vw + 10px, 28px);
        padding-top: 20px;
    }
}