/* =========================================================
   JJ ENGENHARIA & ARQUITECTURA
   STYLE.CSS COMPLETO
========================================================= */


/* =========================================================
   VARIÁVEIS
========================================================= */

:root{
    --gold:#c9a45d;
    --gold-dark:#b68e48;
    --black:#111111;
    --dark:#17283e;
    --cream:#f7f6f2;
    --white:#ffffff;
    --gray:#666666;
    --light-gray:#dddddd;
}


/* =========================================================
   RESET
========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:var(--cream);
    color:var(--black);
    overflow-x:hidden;
}

body.menu-open{
    overflow:hidden;
}

img{
    width:100%;
    display:block;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea{
    font-family:inherit;
}


/* =========================================================
   HEADER
========================================================= */

.header{
    position:absolute;
    top:0;
    left:0;

    width:100%;

    padding:25px 7%;

    display:flex;
    align-items:center;
    justify-content:space-between;

    z-index:1000;

    color:white;

    transition:
        background .3s ease,
        padding .3s ease,
        box-shadow .3s ease;
}


/* HEADER FIXO */

.header.header-scrolled{
    position:fixed;

    background:rgba(17,17,17,.96);

    box-shadow:
        0 5px 25px rgba(0,0,0,.15);

    backdrop-filter:blur(8px);

    animation:headerDown .35s ease;
}

@keyframes headerDown{

    from{
        transform:translateY(-100%);
    }

    to{
        transform:translateY(0);
    }

}


/* =========================================================
   LOGO
========================================================= */

.logo{
    flex-shrink:0;
}

.logo a{
    display:block;
}

.logo img{
    width:190px;
    height:auto;
}


/* =========================================================
   MENU DESKTOP
========================================================= */

.header nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:35px;
}

.header nav a{
    position:relative;

    color:white;

    font-size:12px;
    font-weight:500;

    text-transform:uppercase;
    letter-spacing:2px;

    transition:.3s;
}

.header nav a::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:1px;

    background:var(--gold);

    transition:.3s;
}

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

.header nav a:hover::after{
    width:100%;
}


/* =========================================================
   BOTÃO HEADER
========================================================= */

.btn-header{
    flex-shrink:0;

    display:inline-block;

    padding:16px 30px;

    background:var(--gold);

    color:white;

    font-size:11px;

    text-transform:uppercase;
    letter-spacing:2px;

    transition:.3s;
}

.btn-header:hover{
    background:white;
    color:#111;
}


/* =========================================================
   MENU MOBILE
========================================================= */

.menu-toggle{
    display:none;

    width:46px;
    height:46px;

    padding:8px;

    border:0;

    background:transparent;

    cursor:pointer;

    position:relative;

    z-index:1200;
}

.menu-toggle span{
    display:block;

    width:28px;
    height:2px;

    margin:6px auto;

    background:white;

    transition:.3s;
}

.menu-toggle.active span:nth-child(1){
    transform:
        translateY(8px)
        rotate(45deg);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:
        translateY(-8px)
        rotate(-45deg);
}


/* =========================================================
   BOTÕES
========================================================= */

.btn-main{
    display:inline-block;

    padding:18px 42px;

    border:0;

    background:var(--gold);

    color:white;

    font-size:12px;
    font-weight:500;

    text-transform:uppercase;
    letter-spacing:2px;

    cursor:pointer;

    transition:.3s;
}

.btn-main:hover{
    background:white;
    color:#111;
}

.btn-main.dark{
    background:#111;
    color:white;
}

.btn-main.dark:hover{
    background:var(--gold);
    color:white;
}


/* =========================================================
   HERO HOME
========================================================= */

.hero{
    position:relative;

    width:100%;
    height:100vh;
    min-height:720px;

    padding:0 7%;

    display:flex;
    align-items:center;

    overflow:hidden;

    color:white;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.76),
            rgba(0,0,0,.38)
        ),
        url("../images/hero.jpg");

    background-size:cover;
    background-position:center;
}

.hero-content{
    position:relative;

    z-index:2;

    max-width:850px;

    margin-top:40px;
}

.subtitle{
    margin-bottom:30px;

    color:var(--gold);

    font-size:12px;

    text-transform:uppercase;
    letter-spacing:5px;
}

.hero h1{
    margin:0;

    font-size:82px;

    font-weight:700;

    line-height:1;

    letter-spacing:-2px;

    text-transform:uppercase;
}

.hero h1 span{
    color:var(--gold);
}

.hero-text{
    max-width:620px;

    margin:35px 0;

    font-size:18px;

    line-height:1.8;
}


/* =========================================================
   EXPERIENCE BOX
========================================================= */

.experience-box{
    position:absolute;

    right:10%;
    bottom:25%;

    padding-left:25px;

    border-left:2px solid var(--gold);

    z-index:2;
}

.experience-box strong{
    display:block;

    color:white;

    font-size:70px;

    line-height:1;
}

.experience-box span{
    display:block;

    margin-top:7px;

    color:white;

    font-size:12px;

    line-height:1.6;

    text-transform:uppercase;
    letter-spacing:3px;
}


/* =========================================================
   SCROLL
========================================================= */

.scroll{
    position:absolute;

    left:50%;
    bottom:30px;

    transform:translateX(-50%);

    color:rgba(255,255,255,.7);

    font-size:9px;

    letter-spacing:3px;

    z-index:2;
}


/* =========================================================
   HERO PÁGINAS INTERNAS
========================================================= */

.page-hero{
    position:relative;

    width:100%;
    height:70vh;
    min-height:520px;

    padding:0 7%;

    display:flex;
    align-items:center;

    color:white;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.76),
            rgba(0,0,0,.38)
        ),
        url("../images/hero.jpg");

    background-size:cover;
    background-position:center;
}

.page-hero > div{
    max-width:900px;
}

.page-hero .subtitle{
    color:var(--gold);
}

.page-hero h1{
    max-width:850px;

    color:white;

    font-size:75px;
    font-weight:700;

    line-height:1.05;

    text-transform:uppercase;
}

.page-hero h1 span{
    color:var(--gold);
}


/* =========================================================
   TÍTULOS GERAIS
========================================================= */

.section-label{
    margin-bottom:20px;

    color:var(--gold);

    font-size:11px;

    text-transform:uppercase;
    letter-spacing:4px;
}

.section-head{
    max-width:760px;

    margin-bottom:75px;
}

.section-head h2{
    margin-bottom:25px;

    font-size:55px;
    font-weight:600;

    line-height:1.1;
}

.section-head h2 span{
    color:var(--gold);
}

.section-head p{
    color:var(--gray);

    font-size:17px;

    line-height:1.8;
}


/* =========================================================
   SOBRE HOME
========================================================= */

.about{
    padding:120px 7%;

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:80px;

    align-items:center;

    background:var(--cream);
}

.about-image{
    overflow:hidden;
}

.about-image img{
    width:100%;
    height:600px;

    object-fit:cover;

    transition:.5s;
}

.about-image:hover img{
    transform:scale(1.03);
}

.about-content h2{
    margin-bottom:30px;

    font-size:55px;
    font-weight:600;

    line-height:1.15;
}

.about-content h2 span{
    color:var(--gold);
}

.about-content p{
    margin-bottom:20px;

    color:var(--gray);

    font-size:17px;

    line-height:1.8;
}

.about-content .btn-main{
    margin-top:15px;
}


/* =========================================================
   SOBRE PAGE
========================================================= */

.about-page{
    padding:120px 7%;

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:80px;

    align-items:center;

    background:white;
}

.about-page .about-image img{
    height:550px;

    object-fit:cover;
}


/* =========================================================
   MISSÃO / VISÃO / VALORES
========================================================= */

.values{
    padding:100px 7%;

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:30px;

    background:var(--cream);
}

.value-card{
    position:relative;

    padding:45px;

    overflow:hidden;

    background:white;

    box-shadow:
        0 15px 40px rgba(0,0,0,.08);

    transition:.3s;
}

.value-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:3px;

    background:var(--gold);
}

.value-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 20px 45px rgba(0,0,0,.12);
}

.value-card h3{
    margin-bottom:20px;

    color:var(--gold);

    font-size:30px;
}

.value-card p{
    color:var(--gray);

    font-size:16px;

    line-height:1.8;
}


/* =========================================================
   SERVIÇOS
========================================================= */

.services{
    padding:120px 7%;

    background:white;
}

.service-list{
    display:flex;

    flex-direction:column;

    gap:100px;
}

.service-item{
    display:grid;

    grid-template-columns:
        80px
        1fr
        1fr;

    gap:40px;

    align-items:center;
}

.service-number{
    align-self:start;

    padding-top:10px;

    color:var(--gold);

    font-size:45px;

    font-weight:700;
}

.service-image{
    overflow:hidden;
}

.service-image img{
    width:100%;
    height:450px;

    object-fit:cover;

    transition:.5s;
}

.service-image:hover img{
    transform:scale(1.04);
}

.service-info{
    padding:20px 0;
}

.service-info h3{
    margin-bottom:25px;

    font-size:42px;

    font-weight:600;

    line-height:1.15;
}

.service-info p{
    max-width:550px;

    margin-bottom:25px;

    color:var(--gray);

    font-size:17px;

    line-height:1.8;
}

.service-info a{
    color:var(--gold);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:2px;

    transition:.3s;
}

.service-info a:hover{
    color:#111;
}

.service-item.reverse .service-image{
    order:3;
}

.service-item.reverse .service-info{
    order:2;
}

.services-more{
    margin-top:80px;

    text-align:center;
}


/* =========================================================
   SUBCATEGORIAS SERVIÇOS
========================================================= */

.service-subcategories{
    margin-top:25px;

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:10px 25px;
}

.service-subcategories li{
    position:relative;

    padding-left:18px;

    list-style:none;

    color:#666;

    font-size:14px;

    line-height:1.6;
}

.service-subcategories li::before{
    content:"";

    position:absolute;

    left:0;
    top:9px;

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--gold);
}


/* =========================================================
   PROJECTOS
========================================================= */

.projects{
    padding:120px 7%;

    background:var(--cream);
}

.project-gallery{
    display:grid;

    grid-template-columns:
        2fr
        1fr
        1fr;

    grid-template-rows:
        300px
        300px;

    gap:25px;
}

.project-main{
    position:relative;

    grid-row:span 2;

    overflow:hidden;
}

.project-card{
    position:relative;

    overflow:hidden;
}

.project-gallery img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:.5s;
}

.project-main:hover img,
.project-card:hover img{
    transform:scale(1.08);
}

.project-main::after,
.project-card::after{
    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.82),
            rgba(0,0,0,.02) 65%
        );
}

.project-overlay{
    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:2;

    padding:30px;

    color:white;
}

.project-main h3,
.project-card h3{
    font-size:25px;
}

.project-main p{
    margin-top:8px;

    color:#ddd;

    font-size:13px;
}

.projects-more{
    margin-top:60px;

    text-align:center;
}


/* =========================================================
   GALERIA
========================================================= */

.gallery-section{
    padding:120px 7%;

    background:#111;

    color:white;
}

.gallery-head{
    max-width:850px;
}

.gallery-head h2{
    color:white;
}

.gallery-head p{
    color:#aaa;
}


/* =========================================================
   FILTROS GALERIA
========================================================= */

.gallery-filters{
    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:50px;
}

.gallery-filter{
    padding:13px 24px;

    border:1px solid #383838;

    background:transparent;

    color:#aaa;

    font-size:10px;
    font-weight:600;

    text-transform:uppercase;
    letter-spacing:2px;

    cursor:pointer;

    transition:.3s;
}

.gallery-filter:hover{
    border-color:var(--gold);

    color:var(--gold);
}

.gallery-filter.active{
    border-color:var(--gold);

    background:var(--gold);

    color:white;
}


/* =========================================================
   GRELHA GALERIA
========================================================= */

.gallery-grid{
    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    grid-auto-rows:320px;

    grid-auto-flow:dense;

    gap:20px;
}

.gallery-item{
    position:relative;

    overflow:hidden;

    cursor:pointer;

    background:#222;

    transition:
        opacity .35s ease,
        transform .35s ease;
}

.gallery-item.gallery-large{
    grid-row:span 2;
}

.gallery-item.gallery-wide{
    grid-column:span 2;
}

.gallery-item.hidden{
    display:none;
}

.gallery-item > img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .65s ease,
        filter .65s ease;
}

.gallery-item:hover > img{
    transform:scale(1.07);

    filter:brightness(.72);
}


/* =========================================================
   OVERLAY GALERIA
========================================================= */

.gallery-overlay{
    position:absolute;

    inset:0;

    padding:28px;

    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:25px;

    opacity:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.90),
            rgba(0,0,0,.05) 68%
        );

    transition:.35s;

    z-index:2;
}

.gallery-item:hover .gallery-overlay{
    opacity:1;
}

.gallery-overlay span{
    display:block;

    margin-bottom:9px;

    color:var(--gold);

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:3px;
}

.gallery-overlay h3{
    color:white;

    font-size:21px;
    font-weight:500;

    line-height:1.25;
}

.gallery-open{
    flex-shrink:0;

    width:48px;
    height:48px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.55);

    border-radius:50%;

    background:rgba(0,0,0,.15);

    color:white;

    font-size:28px;

    font-weight:300;

    cursor:pointer;

    transition:.3s;
}

.gallery-open:hover{
    border-color:var(--gold);

    background:var(--gold);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.gallery-lightbox{
    position:fixed;

    inset:0;

    width:100%;
    height:100%;

    padding:60px 90px;

    display:flex;

    align-items:center;
    justify-content:center;

    visibility:hidden;

    opacity:0;

    background:rgba(0,0,0,.96);

    z-index:20000;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.gallery-lightbox.active{
    visibility:visible;
    opacity:1;
}

.lightbox-content{
    position:relative;

    width:auto;

    max-width:1150px;
    max-height:90vh;

    display:flex;

    flex-direction:column;

    align-items:center;
}

.lightbox-content img{
    display:block;

    width:auto;
    height:auto;

    max-width:100%;
    max-height:75vh;

    object-fit:contain;

    box-shadow:
        0 30px 80px rgba(0,0,0,.45);
}

.lightbox-caption{
    width:100%;

    padding-top:20px;

    text-align:left;
}

.lightbox-caption span{
    display:block;

    margin-bottom:7px;

    color:var(--gold);

    font-size:9px;

    text-transform:uppercase;

    letter-spacing:3px;
}

.lightbox-caption h3{
    color:white;

    font-size:23px;

    font-weight:500;
}


/* FECHAR */

.lightbox-close{
    position:absolute;

    top:25px;
    right:35px;

    width:50px;
    height:50px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:0;

    background:transparent;

    color:white;

    font-size:42px;

    font-weight:200;

    cursor:pointer;

    z-index:5;

    transition:.3s;
}

.lightbox-close:hover{
    color:var(--gold);

    transform:rotate(90deg);
}


/* SETAS */

.lightbox-arrow{
    position:absolute;

    top:50%;

    width:55px;
    height:80px;

    display:flex;

    align-items:center;
    justify-content:center;

    transform:translateY(-50%);

    border:0;

    background:transparent;

    color:white;

    font-size:65px;

    font-weight:200;

    cursor:pointer;

    z-index:5;

    transition:.3s;
}

.lightbox-arrow:hover{
    color:var(--gold);
}

.lightbox-prev{
    left:25px;
}

.lightbox-next{
    right:25px;
}


/* =========================================================
   VÍDEO DOS PROJECTOS
========================================================= */

.project-video{
    position:relative;

    padding:120px 7%;

    overflow:hidden;

    background:var(--cream);
}


/* DETALHE DECORATIVO */

.project-video::before{
    content:"";

    position:absolute;

    top:0;
    right:7%;

    width:1px;
    height:110px;

    background:var(--gold);
}


.project-video-head{
    max-width:800px;

    margin-bottom:55px;
}

.project-video-head h2{
    margin-bottom:25px;

    color:#111;

    font-size:55px;

    font-weight:600;

    line-height:1.1;
}

.project-video-head h2 span{
    color:var(--gold);
}

.project-video-head p{
    max-width:700px;

    color:var(--gray);

    font-size:17px;

    line-height:1.8;
}


/* =========================================================
   CAIXA DO VÍDEO
========================================================= */

.project-video-wrapper{
    position:relative;

    max-width:1150px;

    margin:0 auto;

    padding:12px;

    overflow:hidden;

    background:#111;

    border:
        1px solid
        rgba(201,164,93,.55);

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.15);
}


/* LINHA DOURADA */

.project-video-wrapper::before{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:120px;
    height:3px;

    background:var(--gold);

    z-index:2;
}

.project-video-wrapper video{
    position:relative;

    width:100%;
    height:min(76vh,760px);

    display:block;

    object-fit:contain;

    background:#000;

    outline:none;
}


/* =========================================================
   ESTATÍSTICAS
========================================================= */

.stats{
    padding:90px 7%;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    background:#111;

    color:white;

    text-align:center;
}

.stats > div{
    position:relative;

    padding:10px 20px;
}

.stats > div:not(:last-child)::after{
    content:"";

    position:absolute;

    top:15%;
    right:0;

    width:1px;
    height:70%;

    background:rgba(255,255,255,.10);
}

.stats strong{
    display:block;

    color:var(--gold);

    font-size:65px;
}

.stats p,
.stats span{
    display:block;

    margin-top:15px;

    color:#ccc;

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:2px;

    line-height:1.5;
}


/* =========================================================
   DESTAQUE
========================================================= */

.highlight{
    padding:120px 7%;

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:80px;

    align-items:center;

    background:#111;

    color:white;
}

.highlight-content{
    max-width:650px;
}

.highlight-content h2{
    margin-bottom:35px;

    font-size:55px;

    font-weight:600;

    line-height:1.15;
}

.highlight-content h2 span{
    color:var(--gold);
}

.highlight-content p{
    color:#ddd;

    font-size:17px;

    line-height:1.8;
}

.highlight-content ul{
    margin-top:35px;

    list-style:none;
}

.highlight-content li{
    margin-bottom:20px;

    color:#ddd;

    font-size:17px;
}

.highlight-image{
    overflow:hidden;
}

.highlight-image img{
    width:100%;
    height:550px;

    object-fit:cover;

    transition:.5s;
}

.highlight-image:hover img{
    transform:scale(1.03);
}


/* =========================================================
   PARCEIROS
========================================================= */

.partners{
    position:relative;

    padding:100px 0 70px;

    overflow:hidden;

    background:var(--cream);

    color:#111;
}

.partners-head{
    max-width:900px;

    margin:0 auto 65px;

    padding:0 30px;

    text-align:center;
}

.partners-label{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:20px;

    margin-bottom:25px;

    color:var(--gold);

    font-size:11px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:5px;
}

.partners-label::before,
.partners-label::after{
    content:"";

    width:60px;
    height:1px;

    background:var(--gold);
}

.partners-head h2{
    margin:0;

    color:#17283e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:56px;

    font-weight:400;

    line-height:1.1;
}

.partners-head h2 span{
    display:block;

    color:var(--gold);
}

.partners-description{
    max-width:720px;

    margin:25px auto 0;

    color:#666;

    font-size:17px;

    line-height:1.8;
}


/* =========================================================
   SLIDER PARCEIROS
========================================================= */

.partners-slider{
    position:relative;

    width:100%;

    overflow:hidden;

    background:white;

    border-top:
        1px solid
        rgba(201,164,93,.45);

    border-bottom:
        1px solid
        rgba(201,164,93,.45);
}

.partners-slider::before,
.partners-slider::after{
    content:"";

    position:absolute;

    top:0;

    width:90px;
    height:100%;

    z-index:5;

    pointer-events:none;
}

.partners-slider::before{
    left:0;

    background:
        linear-gradient(
            90deg,
            white,
            rgba(255,255,255,0)
        );
}

.partners-slider::after{
    right:0;

    background:
        linear-gradient(
            -90deg,
            white,
            rgba(255,255,255,0)
        );
}

.partners-track{
    display:flex;

    align-items:stretch;

    width:max-content;

    animation:
        partnersLoop
        50s
        linear
        infinite;

    will-change:transform;
}

.partners-slider:hover .partners-track{
    animation-play-state:paused;
}

.partner-item{
    flex:0 0 210px;

    width:210px;
    height:145px;

    padding:22px 27px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-right:1px solid #dedede;

    background:white;
}

.partner-item img{
    display:block;

    width:auto;
    height:auto;

    max-width:150px;
    max-height:92px;

    object-fit:contain;
}

.partner-item.partner-wide{
    flex-basis:255px;
    width:255px;
}

.partner-item.partner-wide img{
    max-width:205px;
    max-height:90px;
}

.partner-item.partner-msf{
    flex-basis:250px;
    width:250px;
}

.partner-item.partner-msf img{
    max-width:205px;
    max-height:90px;
}

.partner-item img[src*="delpaz"]{
    max-width:175px;
}

.partner-item img[src*="econos"]{
    max-width:155px;
}

.partner-item img[src*="edson-car"]{
    max-width:145px;
}

.partner-item img[src*="emose"]{
    max-width:140px;
}

.partner-item img[src*="jj-advogados"]{
    max-width:150px;
}

.partner-item img[src*="medicins"]{
    max-width:195px;
}

.partner-item img[src*="WhatsApp Image"]{
    max-width:190px;
    max-height:100px;
}


@keyframes partnersLoop{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}


.partners-infinity{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:25px;

    margin-top:38px;

    color:var(--gold);

    font-family:Georgia, serif;

    font-size:45px;

    line-height:1;
}

.partners-infinity::before,
.partners-infinity::after{
    content:"";

    width:95px;
    height:1px;

    background:var(--gold);
}


/* =========================================================
   FORNECEDORES
========================================================= */

.suppliers{
    position:relative;

    padding:100px 0 70px;

    overflow:hidden;

    background:#111;

    color:white;
}

.suppliers-head{
    max-width:900px;

    margin:0 auto 65px;

    padding:0 30px;

    text-align:center;
}

.suppliers-label{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:20px;

    margin-bottom:25px;

    color:var(--gold);

    font-size:11px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:5px;
}

.suppliers-label::before,
.suppliers-label::after{
    content:"";

    width:60px;
    height:1px;

    background:var(--gold);
}

.suppliers-head h2{
    margin:0;

    color:white;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:56px;

    font-weight:400;

    line-height:1.1;
}

.suppliers-head h2 span{
    display:block;

    color:var(--gold);
}

.suppliers-description{
    max-width:720px;

    margin:25px auto 0;

    color:#aaa;

    font-size:17px;

    line-height:1.8;
}


/* =========================================================
   SLIDER FORNECEDORES
========================================================= */

.suppliers-slider{
    position:relative;

    width:100%;

    overflow:hidden;

    background:#181818;

    border-top:
        1px solid
        rgba(201,164,93,.35);

    border-bottom:
        1px solid
        rgba(201,164,93,.35);
}

.suppliers-slider::before,
.suppliers-slider::after{
    content:"";

    position:absolute;

    top:0;

    width:100px;
    height:100%;

    z-index:5;

    pointer-events:none;
}

.suppliers-slider::before{
    left:0;

    background:
        linear-gradient(
            90deg,
            #181818,
            rgba(24,24,24,0)
        );
}

.suppliers-slider::after{
    right:0;

    background:
        linear-gradient(
            -90deg,
            #181818,
            rgba(24,24,24,0)
        );
}

.suppliers-track{
    display:flex;

    align-items:stretch;

    width:max-content;

    animation:
        suppliersLoop
        65s
        linear
        infinite;

    will-change:transform;
}

.suppliers-slider:hover .suppliers-track{
    animation-play-state:paused;
}

.supplier-item{
    flex:0 0 205px;

    width:205px;
    height:150px;

    padding:22px 25px;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;

    border-right:
        1px solid
        rgba(255,255,255,.09);

    background:#fff;

    transition:background .3s ease;
}

.supplier-item:hover{
    background:#f7f6f2;
}

.supplier-item img{
    display:block;

    width:auto;
    height:auto;

    max-width:155px;
    max-height:100px;

    object-fit:contain;

    transition:transform .35s ease;
}

.supplier-item:hover img{
    transform:scale(1.06);
}

.supplier-item.supplier-wide{
    flex-basis:250px;
    width:250px;
}

.supplier-item.supplier-wide img{
    max-width:205px;
    max-height:100px;
}


/* AJUSTES INDIVIDUAIS */

.supplier-item img[src$="/1.jpeg"]{
    max-width:145px;
}

.supplier-item img[src$="/2.jpeg"]{
    max-width:145px;
}

.supplier-item img[src$="/5.jpeg"]{
    max-width:140px;
}

.supplier-item img[src$="/6.jpeg"]{
    max-width:120px;
}

.supplier-item img[src*="21.04.28"]{
    max-width:210px;
}

.supplier-item img[src*="21.04.32"]{
    max-width:140px;
}

.supplier-item img[src*="21.04.33 (1)"]{
    max-width:135px;
}

.supplier-item img[src*="21.04.33.jpeg"]{
    max-width:200px;
}

.supplier-item img[src*="21.04.34"]{
    max-width:155px;
}

.supplier-item img[src*="21.04.35 (1)"]{
    max-width:205px;
}

.supplier-item img[src*="21.04.35.jpeg"]{
    max-width:145px;
}

.supplier-item img[src*="21.04.36 (1)"]{
    max-width:205px;
}

.supplier-item img[src*="21.04.36.jpeg"]{
    max-width:145px;
}

.supplier-item img[src*="21.04.37 (1)"]{
    max-width:150px;
}

.supplier-item img[src*="21.04.37.jpeg"]{
    max-width:145px;
}

.supplier-item img[src*="21.04.38 (1)"]{
    max-width:200px;
}

.supplier-item img[src*="21.04.38.jpeg"]{
    max-width:205px;
}


@keyframes suppliersLoop{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}


.suppliers-infinity{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:25px;

    margin-top:38px;

    color:var(--gold);

    font-family:Georgia, serif;

    font-size:45px;

    line-height:1;
}

.suppliers-infinity::before,
.suppliers-infinity::after{
    content:"";

    width:95px;
    height:1px;

    background:var(--gold);
}


/* =========================================================
   CONTACTO
========================================================= */

.contact{
    padding:120px 7%;

    display:grid;

    grid-template-columns:
        1.2fr
        .8fr;

    gap:90px;

    align-items:center;

    background:var(--cream);
}

.contact-content{
    max-width:850px;
}

.contact-content .section-label{
    margin-bottom:35px;
}

.contact-content h2{
    max-width:760px;

    margin-bottom:30px;

    color:#111;

    font-size:58px;

    font-weight:600;

    line-height:1.15;
}

.contact-content p{
    max-width:850px;

    margin-bottom:35px;

    color:var(--gray);

    font-size:17px;

    line-height:1.85;
}

.contact-info{
    width:100%;

    max-width:570px;

    justify-self:end;

    padding:50px;

    background:white;

    box-shadow:
        0 22px 55px
        rgba(0,0,0,.09);
}

.contact-info h3{
    margin-bottom:35px;

    font-size:28px;
}

.contact-info p{
    margin-bottom:27px;

    color:#555;

    font-size:16px;

    line-height:1.8;
}

.contact-info p:last-child{
    margin-bottom:0;
}

.contact-info strong{
    color:#222;
}

.contact-info a{
    color:inherit;

    transition:.3s;
}

.contact-info a:hover{
    color:var(--gold);
}


/* =========================================================
   FORMULÁRIO
========================================================= */

.contact-form-section{
    padding:120px 7%;

    background:white;
}

.contact-form{
    max-width:800px;

    display:flex;

    flex-direction:column;

    gap:20px;
}

.contact-form input,
.contact-form textarea{
    width:100%;

    padding:18px 20px;

    border:1px solid #ddd;

    border-radius:0;

    background:white;

    color:#111;

    font-size:16px;

    outline:none;

    transition:.3s;
}

.contact-form textarea{
    height:180px;

    resize:vertical;
}

.contact-form input:focus,
.contact-form textarea:focus{
    border-color:var(--gold);

    box-shadow:
        0 0 0 1px
        rgba(201,164,93,.15);
}

.contact-form button{
    align-self:flex-start;
}


/* =========================================================
   FOOTER
========================================================= */

footer{
    padding:70px 7% 30px;

    background:#111;

    color:white;
}

.footer-content{
    display:grid;

    grid-template-columns:
        1.8fr
        1fr
        1.2fr
        1fr;

    gap:55px;
}

.footer-content h3{
    margin-bottom:20px;

    font-size:32px;
}

.footer-content h3 span{
    color:var(--gold);
}

.footer-content h4{
    margin-bottom:20px;

    color:var(--gold);

    font-size:13px;

    text-transform:uppercase;

    letter-spacing:2px;
}

.footer-content p,
.footer-content a{
    color:#aaa;

    font-size:14px;

    line-height:2;
}

.footer-content a{
    transition:.3s;
}

.footer-content a:hover{
    color:var(--gold);
}

.instagram-link{
    display:inline-block;
}

.copyright{
    margin-top:50px;

    padding-top:25px;

    border-top:1px solid #333;

    color:#777;

    text-align:center;

    font-size:13px;
}


/* =========================================================
   WHATSAPP
========================================================= */

.whatsapp{
    position:fixed;

    right:25px;
    bottom:25px;

    width:60px;
    height:60px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#25D366;

    color:white;

    font-size:30px;

    z-index:9999;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.30);

    transition:.3s;
}

.whatsapp:hover{
    transform:
        translateY(-4px)
        scale(1.05);

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.33);
}


/* =========================================================
   ANIMAÇÕES JS
========================================================= */

.reveal{
    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .75s ease,
        transform .75s ease;
}

.reveal.show{
    opacity:1;

    transform:translateY(0);
}


/* =========================================================
   RESPONSIVO - 1200PX
========================================================= */

@media(max-width:1200px){

    .header{
        padding-left:5%;
        padding-right:5%;
    }

    .logo img{
        width:165px;
    }

    .header nav{
        gap:22px;
    }

    .header nav a{
        font-size:10px;
    }

    .btn-header{
        padding:14px 20px;

        font-size:10px;
    }

    .hero{
        padding-left:5%;
        padding-right:5%;
    }

    .hero h1{
        font-size:66px;
    }

    .page-hero{
        padding-left:5%;
        padding-right:5%;
    }

    .page-hero h1{
        font-size:58px;
    }

    .about,
    .about-page,
    .highlight,
    .contact{
        gap:55px;
    }

    .about-content h2,
    .section-head h2,
    .highlight-content h2,
    .contact-content h2,
    .project-video-head h2{
        font-size:48px;
    }

    .service-item{
        grid-template-columns:
            60px
            1fr
            1fr;
    }

    .project-gallery{
        grid-template-columns:
            1.5fr
            1fr
            1fr;
    }

}


/* =========================================================
   RESPONSIVO - 1000PX
========================================================= */

@media(max-width:1000px){

    .experience-box{
        right:5%;
    }

    .services{
        padding:100px 5%;
    }

    .service-item{
        gap:30px;

        grid-template-columns:
            55px
            1fr
            1fr;
    }

    .service-image img{
        height:390px;
    }

    .service-info h3{
        font-size:34px;
    }

    .stats{
        grid-template-columns:
            repeat(2,1fr);

        gap:50px 0;
    }

    .stats > div:nth-child(2)::after{
        display:none;
    }

    .values{
        grid-template-columns:1fr;
    }

    .contact{
        grid-template-columns:
            1fr
            .9fr;
    }

    .footer-content{
        grid-template-columns:
            1.5fr
            1fr
            1fr;
    }

    .footer-social{
        grid-column:
            2 / 4;
    }

}


/* =========================================================
   GALERIA TABLET
========================================================= */

@media(max-width:900px){

    .gallery-section{
        padding:90px 5%;
    }

    .gallery-grid{
        grid-template-columns:
            repeat(2,1fr);

        grid-auto-rows:300px;
    }

    .gallery-item.gallery-large{
        grid-row:span 1;
    }

    .gallery-item.gallery-wide{
        grid-column:span 2;
    }

    .gallery-overlay{
        opacity:1;

        background:
            linear-gradient(
                to top,
                rgba(0,0,0,.75),
                transparent 65%
            );
    }

    .gallery-lightbox{
        padding:70px 65px;
    }


    /* VÍDEO */

    .project-video{
        padding:90px 5%;
    }

    .project-video-wrapper video{
        height:min(70vh,680px);
    }

}


/* =========================================================
   RESPONSIVO - 800PX
========================================================= */

@media(max-width:800px){

    /* HEADER */

    .header{
        padding:18px 5%;
        align-items:center;
    }

    .logo{
        position:relative;
        z-index:1201;
    }

    .logo img{
        width:150px;
    }

    .menu-toggle{
        display:block;

        margin-left:auto;
        margin-right:10px;
    }


    /* MENU MOBILE */

    .header nav{
        position:fixed;

        top:0;
        right:-100%;

        width:82%;
        max-width:360px;

        height:100vh;

        padding:
            115px
            35px
            40px;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        justify-content:flex-start;

        gap:0;

        overflow-y:auto;

        background:#111;

        box-shadow:
            -15px
            0
            40px
            rgba(0,0,0,.30);

        z-index:1100;

        transition:right .35s ease;
    }

    .header nav.active{
        right:0;
    }

    .header nav a{
        width:100%;

        padding:18px 0;

        color:white;

        font-size:12px;

        border-bottom:
            1px solid
            rgba(255,255,255,.1);
    }

    .header nav a::after{
        display:none;
    }

    .btn-header{
        display:none;
    }


    /* HERO */

    .hero{
        min-height:700px;

        height:100vh;

        padding:
            100px
            5%
            70px;
    }

    .hero-content{
        margin-top:20px;
    }

    .hero h1{
        font-size:47px;

        line-height:1.02;
    }

    .hero-text{
        max-width:520px;

        font-size:16px;
    }

    .experience-box{
        right:20px;

        bottom:45px;
    }

    .experience-box strong{
        font-size:48px;
    }

    .experience-box span{
        font-size:10px;
    }

    .scroll{
        display:none;
    }


    /* PAGE HERO */

    .page-hero{
        min-height:500px;

        height:60vh;

        padding:
            100px
            5%
            50px;
    }

    .page-hero h1{
        font-size:40px;
    }


    /* SOBRE */

    .about,
    .about-page{
        padding:80px 5%;

        display:flex;

        flex-direction:column;

        gap:45px;
    }

    .about-image{
        width:100%;
    }

    .about-image img,
    .about-page .about-image img{
        height:430px;
    }

    .about-content h2{
        font-size:39px;
    }


    /* VALUES */

    .values{
        padding:70px 5%;

        grid-template-columns:1fr;
    }


    /* SERVIÇOS */

    .services{
        padding:80px 5%;
    }

    .section-head{
        margin-bottom:60px;
    }

    .section-head h2{
        font-size:40px;
    }

    .service-list{
        gap:70px;
    }

    .service-item,
    .service-item.reverse{
        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:20px;
    }

    .service-item.reverse .service-image,
    .service-item.reverse .service-info{
        order:initial;
    }

    .service-number{
        padding:0;

        font-size:35px;
    }

    .service-image{
        width:100%;
    }

    .service-image img{
        height:370px;
    }

    .service-info h3{
        font-size:34px;
    }

    .service-subcategories{
        grid-template-columns:1fr;
    }


    /* PROJECTOS */

    .projects{
        padding:80px 5%;
    }

    .project-gallery{
        display:flex;

        flex-direction:column;

        gap:20px;
    }

    .project-main,
    .project-card{
        width:100%;

        height:360px;
    }


    /* VÍDEO */

    .project-video{
        padding:80px 5%;
    }

    .project-video::before{
        height:75px;
    }

    .project-video-head{
        margin-bottom:40px;
    }

    .project-video-head h2{
        font-size:40px;
    }

    .project-video-wrapper{
        padding:8px;
    }

    .project-video-wrapper video{
        height:min(70vh,620px);
    }


    /* STATS */

    .stats{
        padding:70px 5%;

        grid-template-columns:
            repeat(2,1fr);

        gap:45px 0;
    }

    .stats > div::after{
        display:none;
    }

    .stats strong{
        font-size:52px;
    }


    /* HIGHLIGHT */

    .highlight{
        padding:80px 5%;

        display:flex;

        flex-direction:column;

        gap:50px;
    }

    .highlight-content h2{
        font-size:40px;
    }

    .highlight-image{
        width:100%;
    }

    .highlight-image img{
        height:420px;
    }


    /* PARCEIROS */

    .partners{
        padding:
            75px
            0
            50px;
    }

    .partners-head{
        margin-bottom:45px;

        padding:0 20px;
    }

    .partners-label{
        gap:12px;

        font-size:10px;

        letter-spacing:4px;
    }

    .partners-label::before,
    .partners-label::after{
        width:35px;
    }

    .partners-head h2{
        font-size:39px;
    }

    .partners-description{
        font-size:15px;
    }

    .partner-item{
        flex-basis:170px;

        width:170px;
        height:110px;

        padding:15px 18px;
    }

    .partner-item img{
        max-width:120px;

        max-height:70px;
    }

    .partner-item.partner-wide,
    .partner-item.partner-msf{
        flex-basis:205px;

        width:205px;
    }

    .partner-item.partner-wide img,
    .partner-item.partner-msf img{
        max-width:165px;

        max-height:70px;
    }

    .partners-track{
        animation-duration:40s;
    }

    .partners-infinity{
        margin-top:28px;

        font-size:37px;
    }

    .partners-infinity::before,
    .partners-infinity::after{
        width:55px;
    }


    /* FORNECEDORES */

    .suppliers{
        padding:
            75px
            0
            50px;
    }

    .suppliers-head{
        margin-bottom:45px;

        padding:0 20px;
    }

    .suppliers-label{
        gap:12px;

        font-size:10px;

        letter-spacing:4px;
    }

    .suppliers-label::before,
    .suppliers-label::after{
        width:35px;
    }

    .suppliers-head h2{
        font-size:39px;
    }

    .suppliers-description{
        font-size:15px;
    }

    .supplier-item{
        flex-basis:170px;

        width:170px;

        height:115px;

        padding:15px 18px;
    }

    .supplier-item img{
        max-width:125px;

        max-height:75px;
    }

    .supplier-item.supplier-wide{
        flex-basis:210px;

        width:210px;
    }

    .supplier-item.supplier-wide img{
        max-width:170px;

        max-height:75px;
    }

    .suppliers-track{
        animation-duration:52s;
    }

    .suppliers-infinity{
        margin-top:28px;

        font-size:37px;
    }

    .suppliers-infinity::before,
    .suppliers-infinity::after{
        width:55px;
    }


    /* CONTACTO */

    .contact{
        padding:80px 5%;

        display:flex;

        flex-direction:column;

        gap:50px;
    }

    .contact-content{
        width:100%;
    }

    .contact-content h2{
        font-size:42px;
    }

    .contact-info{
        width:100%;

        max-width:none;

        padding:38px 32px;

        justify-self:auto;
    }


    /* FORM */

    .contact-form-section{
        padding:80px 5%;
    }


    /* FOOTER */

    .footer-content{
        grid-template-columns:
            1fr
            1fr;

        gap:40px;
    }

    .footer-brand{
        grid-column:
            1 / 3;
    }

    .footer-social{
        grid-column:auto;
    }


    /* WHATSAPP */

    .whatsapp{
        right:18px;
        bottom:18px;

        width:55px;
        height:55px;

        font-size:27px;
    }

}


/* =========================================================
   GALERIA MOBILE - 600PX
========================================================= */

@media(max-width:600px){

    .gallery-section{
        padding:70px 20px;
    }

    .gallery-filters{
        gap:8px;

        margin-bottom:35px;
    }

    .gallery-filter{
        padding:11px 15px;

        font-size:8px;

        letter-spacing:1.5px;
    }

    .gallery-grid{
        display:flex;

        flex-direction:column;

        gap:15px;
    }

    .gallery-item,
    .gallery-item.gallery-large,
    .gallery-item.gallery-wide{
        width:100%;
        height:300px;
    }

    .gallery-overlay{
        padding:20px;

        opacity:1;
    }

    .gallery-overlay h3{
        font-size:18px;
    }

    .gallery-open{
        width:42px;
        height:42px;

        font-size:24px;
    }


    /* LIGHTBOX */

    .gallery-lightbox{
        padding:
            70px
            20px
            90px;
    }

    .lightbox-content{
        max-width:100%;
    }

    .lightbox-content img{
        max-height:65vh;
    }

    .lightbox-close{
        top:15px;
        right:15px;
    }

    .lightbox-arrow{
        top:auto;
        bottom:18px;

        width:55px;
        height:55px;

        transform:none;

        border:
            1px solid
            rgba(255,255,255,.25);

        font-size:45px;
    }

    .lightbox-prev{
        left:
            calc(50% - 70px);
    }

    .lightbox-next{
        right:
            calc(50% - 70px);
    }

    .lightbox-caption{
        padding-top:15px;
    }

    .lightbox-caption h3{
        font-size:19px;
    }


    /* VÍDEO */

    .project-video{
        padding:70px 20px;
    }

    .project-video::before{
        right:20px;

        height:60px;
    }

    .project-video-head{
        margin-bottom:35px;
    }

    .project-video-head h2{
        font-size:35px;
    }

    .project-video-head p{
        font-size:15px;
    }

    .project-video-wrapper{
        padding:6px;
    }

    .project-video-wrapper video{
        height:68vh;

        max-height:640px;
    }

}


/* =========================================================
   MOBILE - 500PX
========================================================= */

@media(max-width:500px){

    .header{
        padding:16px 18px;
    }

    .logo img{
        width:140px;
    }

    .menu-toggle{
        margin-right:0;
    }


    /* HERO */

    .hero{
        min-height:680px;

        padding:
            100px
            20px
            60px;
    }

    .subtitle{
        margin-bottom:22px;

        font-size:9px;

        line-height:1.6;

        letter-spacing:3px;
    }

    .hero h1{
        font-size:38px;

        letter-spacing:-1px;
    }

    .hero-text{
        margin:28px 0;

        font-size:15px;

        line-height:1.7;
    }

    .experience-box{
        display:none;
    }


    /* PAGE HERO */

    .page-hero{
        padding:
            100px
            20px
            40px;
    }

    .page-hero h1{
        font-size:34px;
    }


    /* TÍTULOS */

    .about-content h2,
    .section-head h2,
    .highlight-content h2,
    .contact-content h2,
    .project-video-head h2{
        font-size:35px;
    }


    /* SOBRE */

    .about,
    .about-page{
        padding:65px 20px;
    }

    .about-image img,
    .about-page .about-image img{
        height:330px;
    }


    /* VALUES */

    .values{
        padding:60px 20px;
    }

    .value-card{
        padding:35px 28px;
    }


    /* SERVIÇOS */

    .services{
        padding:65px 20px;
    }

    .service-list{
        gap:60px;
    }

    .service-image img{
        height:300px;
    }

    .service-info h3{
        font-size:30px;
    }

    .service-info p{
        font-size:15px;
    }

    .services-more{
        margin-top:60px;
    }


    /* PROJECTOS */

    .projects{
        padding:65px 20px;
    }

    .project-main,
    .project-card{
        height:300px;
    }

    .project-overlay{
        padding:22px;
    }


    /* VÍDEO */

    .project-video{
        padding:65px 20px;
    }

    .project-video-head p{
        font-size:15px;
    }

    .project-video-wrapper{
        border-color:
            rgba(201,164,93,.4);
    }

    .project-video-wrapper video{
        height:65vh;

        max-height:590px;
    }


    /* STATS */

    .stats{
        padding:60px 20px;

        grid-template-columns:
            1fr
            1fr;

        gap:
            40px
            15px;
    }

    .stats strong{
        font-size:43px;
    }

    .stats p,
    .stats span{
        font-size:9px;

        letter-spacing:1.3px;
    }


    /* HIGHLIGHT */

    .highlight{
        padding:65px 20px;
    }

    .highlight-content li{
        font-size:15px;
    }

    .highlight-image img{
        height:330px;
    }


    /* PARCEIROS */

    .partners{
        padding:
            65px
            0
            45px;
    }

    .partners-head{
        padding:0 20px;
    }

    .partners-head h2{
        font-size:33px;
    }

    .partners-description{
        font-size:14px;

        line-height:1.7;
    }

    .partner-item{
        flex-basis:150px;

        width:150px;
        height:100px;
    }

    .partner-item img{
        max-width:105px;

        max-height:60px;
    }

    .partner-item.partner-wide,
    .partner-item.partner-msf{
        flex-basis:190px;

        width:190px;
    }

    .partner-item.partner-wide img,
    .partner-item.partner-msf img{
        max-width:150px;

        max-height:60px;
    }


    /* FORNECEDORES */

    .suppliers{
        padding:
            65px
            0
            45px;
    }

    .suppliers-head{
        padding:0 20px;
    }

    .suppliers-head h2{
        font-size:33px;
    }

    .suppliers-description{
        font-size:14px;

        line-height:1.7;
    }

    .supplier-item{
        flex-basis:150px;

        width:150px;
        height:100px;

        padding:14px 16px;
    }

    .supplier-item img{
        max-width:110px;

        max-height:65px;
    }

    .supplier-item.supplier-wide{
        flex-basis:185px;

        width:185px;
    }

    .supplier-item.supplier-wide img{
        max-width:145px;

        max-height:65px;
    }

    .suppliers-track{
        animation-duration:45s;
    }


    /* CONTACTO */

    .contact{
        padding:65px 20px;
    }

    .contact-content p br{
        display:none;
    }

    .contact-content .btn-main{
        width:100%;

        text-align:center;
    }

    .contact-info{
        padding:32px 25px;
    }

    .contact-info h3{
        font-size:24px;
    }

    .contact-info p{
        font-size:14px;
    }


    /* FORM */

    .contact-form-section{
        padding:65px 20px;
    }

    .contact-form button{
        width:100%;
    }


    /* FOOTER */

    footer{
        padding:
            55px
            20px
            25px;
    }

    .footer-content{
        display:flex;

        flex-direction:column;

        gap:35px;
    }

    .footer-content h3{
        font-size:28px;
    }


    /* WHATSAPP */

    .whatsapp{
        right:15px;
        bottom:15px;

        width:52px;
        height:52px;

        font-size:25px;
    }

}


/* =========================================================
   MOBILE MUITO PEQUENO
========================================================= */

@media(max-width:360px){

    .hero h1{
        font-size:33px;
    }

    .page-hero h1{
        font-size:30px;
    }

    .about-content h2,
    .section-head h2,
    .highlight-content h2,
    .contact-content h2,
    .project-video-head h2{
        font-size:31px;
    }

    .partner-item{
        flex-basis:140px;

        width:140px;
    }

    .supplier-item{
        flex-basis:140px;

        width:140px;
    }

    .supplier-item.supplier-wide{
        flex-basis:175px;

        width:175px;
    }

    .project-video-wrapper video{
        height:60vh;

        max-height:520px;
    }

}