/*=========================================
 RESET E VARIÁVEIS
=========================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


:root{

    --orange:#f97316;

    --orange-dark:#ea580c;

    --white:#ffffff;

    --black:#111111;

    --text:#444;

    --gray:#f5f5f5;

    --gray2:#ececec;

    --footer:#08101f;

    --shadow:
    0 12px 35px rgba(0,0,0,.08);

    --radius:18px;

}



body{

    font-family:Poppins,sans-serif;

    color:var(--text);

    background:#fff;

    padding-top:68px;

    overflow-x:hidden;

}



img{

    max-width:100%;

    display:block;

}



section{

    padding:90px 8%;

}



.container{

    width:min(1200px,100%);

    margin:auto;

}



/*=========================================
 NAVBAR
=========================================*/


nav{

    position:fixed;

    top:0;

    left:0;

    right:0;


    height:68px;


    background:#fff;


    display:grid;

    grid-template-columns:

    1fr auto 1fr;


    align-items:center;


    padding:0 5vw;


    border-bottom:

    1px solid var(--orange);


    z-index:1000;

}



.nav-logo img{

    width:160px;

}



.nav-links{

    display:flex;

    list-style:none;

    gap:60px;

    justify-self:center;

}



.nav-links a{

    color:#222;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}



.nav-links a:hover{

    color:var(--orange);

}






.nav-social{

    display:flex;

    justify-self:end;

    gap:18px;

}



.nav-social a{

    color:#222;

    font-size:20px;

    transition:.3s;

}



.nav-social a:hover{

    color:var(--orange);

    transform:translateY(-3px);

}

.nav-links .nav-chamados {
    background: black;
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255, 166, 0, 0.35);
    transition: .3s ease;
}

.nav-links .nav-chamados:hover {
    background: var(--accent2);
    color: #fff;
    transform: translateY(-2px);
}



/*=========================================
 HERO GOVERNANÇA
=========================================*/


.hero{


    height:520px;


    background:


    linear-gradient(

        rgba(0,0,0,.60),

        rgba(0,0,0,.60)

    ),


    url("img/governanca4.jpg");



    background-size:cover;


    background-position:center;



    display:flex;


    align-items:center;


    justify-content:center;


    text-align:center;



}



.overlay{

    width:100%;

}



.hero-content{


    width:min(950px,90%);


    margin:auto;


    color:#fff;


}



.tag{


    display:inline-block;


    background:

    rgba(249,115,22,.18);



    border:

    1px solid rgba(255,255,255,.3);



    padding:

    8px 20px;



    border-radius:50px;



    margin-bottom:30px;



    font-size:14px;



    letter-spacing:1px;



}



.hero h1{


    font-size:58px;


    line-height:1.2;


    margin-bottom:25px;



}



.hero p{


    font-size:20px;


    line-height:1.8;


    margin-bottom:40px;



}



.hero-buttons{


    display:flex;


    justify-content:center;


    gap:20px;


    flex-wrap:wrap;


}



.btn-primary{


    display:inline-block;


    padding:16px 35px;


    background:var(--orange);


    color:#fff;


    text-decoration:none;


    border-radius:10px;


    font-weight:600;


    transition:.35s;


}



.btn-primary:hover{


    background:var(--orange-dark);


    transform:translateY(-3px);


}



.btn-outline{


    display:inline-block;


    padding:16px 35px;


    border:

    2px solid #fff;


    color:#fff;


    text-decoration:none;


    border-radius:10px;


    font-weight:600;


    transition:.35s;


}



.btn-outline:hover{


    background:#fff;


    color:var(--orange);


}



/*=========================================
 INTRODUÇÃO
=========================================*/


.sobre{

    background:#fff;

}



.sobre .container{


    display:grid;


    grid-template-columns:

    1fr 1fr;



    gap:70px;


    align-items:center;



}



.section-tag{


    color:var(--orange);


    font-size:13px;


    font-weight:700;


    letter-spacing:2px;


}



.sobre h2{


    font-size:42px;


    color:#111;


    margin:20px 0;



}



.sobre p{


    font-size:18px;


    line-height:1.9;


    margin-bottom:20px;



}



.imagem img{


    border-radius:18px;


    box-shadow:var(--shadow);



}

/*=========================================
 TÍTULOS DAS SEÇÕES
=========================================*/


.titulo{

    text-align:center;

    max-width:850px;

    margin:0 auto 60px;

}



.titulo span{

    color:var(--orange);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

}



.titulo h2{

    color:#111;

    font-size:42px;

    margin:15px 0;

}



.titulo p{

    font-size:18px;

    line-height:1.8;

}




/*=========================================
 COMO FUNCIONA GOVERNANÇA
=========================================*/


.equipamentos{

    background:var(--gray);

}




.cards{

    width:min(1200px,100%);

    margin:auto;

    display:grid;

    grid-template-columns:

    repeat(auto-fit,minmax(250px,1fr));

    gap:30px;

}




.equip-card{


    background:#fff;


    padding:35px 25px;


    text-align:center;


    border-radius:var(--radius);


    border:1px solid var(--gray2);


    box-shadow:var(--shadow);


    transition:.35s;


}



.equip-card:hover{


    transform:translateY(-10px);


    border-color:var(--orange);


}





.equip-card i{


    width:75px;


    height:75px;


    display:flex;


    align-items:center;


    justify-content:center;


    margin:0 auto 25px;


    background:

    rgba(249,115,22,.12);



    color:var(--orange);



    border-radius:50%;



    font-size:32px;



}



.equip-card h3{


    font-size:21px;


    color:#111;


    margin-bottom:15px;


}



.equip-card p{


    font-size:15px;


    line-height:1.7;


}



/*=========================================
 IMPACTO REAL
=========================================*/


.beneficios{


    background:#fff;


}



.beneficios-grid{


    width:min(1200px,100%);


    margin:auto;


    display:grid;


    grid-template-columns:


    repeat(auto-fit,minmax(260px,1fr));


    gap:30px;


}



.beneficio{


    background:#fff;


    padding:35px;


    border-radius:var(--radius);


    border:1px solid var(--gray2);


    box-shadow:var(--shadow);


    transition:.35s;


}



.beneficio:hover{


    transform:translateY(-8px);


    box-shadow:

    0 20px 45px rgba(0,0,0,.15);


}



.beneficio i{


    width:65px;


    height:65px;


    background:var(--orange);


    color:#fff;


    display:flex;


    align-items:center;


    justify-content:center;


    border-radius:14px;


    font-size:26px;


    margin-bottom:25px;



}



.beneficio h3{


    color:#111;


    font-size:21px;


    margin-bottom:15px;


}



.beneficio p{


    line-height:1.7;


}



/*=========================================
 PÚBLICO ALVO
=========================================*/


.publico{


    background:var(--gray);


}



.publico .beneficio{


    background:#fff;


}



/*=========================================
 DIFERENCIAIS
=========================================*/


.diferenciais{


    background:#fff;


}



.diferenciais .beneficio{


    border-top:

    4px solid var(--orange);


}



.diferenciais .beneficio:hover{


    transform:

    translateY(-12px);


}

/*=========================================
 CTA
=========================================*/


.cta{

    background:

    linear-gradient(
        rgba(234,88,12,.95),
        rgba(234,88,12,.95)
    ),

    url("img/governanca.jpg");


    background-size:cover;

    background-position:center;


    color:#fff;

    text-align:center;

}



.cta-container{

    max-width:900px;

    margin:auto;

}



.cta span{

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

}



.cta h2{

    font-size:44px;

    margin:20px 0;

}



.cta p{

    font-size:18px;

    line-height:1.8;

    margin-bottom:35px;

}



.cta .btn-primary{

    background:#fff;

    color:var(--orange-dark);

}



.cta .btn-primary:hover{

    background:#111;

    color:#fff;

}



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


footer{

    background:var(--footer);

    color:#aaa;

    padding:60px 8% 30px;

}



.footer-grid{

    display:grid;

    grid-template-columns:

    1fr 1fr 1fr;


    gap:50px;

    margin-bottom:40px;


}



.nav-logo-text{

    color:#fff;

    font-size:22px;

    font-weight:700;

    margin-bottom:25px;

}



.footer-brand p{

    font-size:14px;

    line-height:1.6;

    margin-bottom:3px;

}



.footer-brand strong{

    color:#fff;

}



.footer-col h4{

    color:#fff;

    margin-bottom:20px;

}



.footer-col ul{

    list-style:none;

}



.footer-col li{

    margin-bottom:12px;

}



.footer-col a{

    color:#aaa;

    text-decoration:none;

    transition:.3s;

}



.footer-col a:hover{

    color:var(--orange);

}



.footer-contact-list{

    display:flex;

    flex-direction:column;

    gap:12px;

}



.footer-divider{

    border:0;

    border-top:

    1px solid rgba(255,255,255,.1);

    margin-bottom:25px;

}



.footer-bottom{

    display:flex;

    justify-content:space-between;

    flex-wrap:wrap;

    gap:20px;

    font-size:13px;

}



.footer-bottom a{

    color:#aaa;

    text-decoration:none;

    margin-left:15px;

}



.footer-bottom a:hover{

    color:var(--orange);

}





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


.hero-content,
.sobre .texto,
.sobre .imagem,
.equip-card,
.beneficio{


    animation:

    fadeUp .8s ease forwards;


}



@keyframes fadeUp{


    from{

        opacity:0;

        transform:

        translateY(30px);

    }



    to{

        opacity:1;

        transform:

        translateY(0);

    }


}



/*=========================================
 RESPONSIVIDADE
=========================================*/


@media(max-width:1000px){


    .nav-links{

        gap:25px;

    }



    .hero h1{

        font-size:45px;

    }



    .sobre .container{

        grid-template-columns:1fr;

    }



    .sobre .imagem{

        order:-1;

    }


}



@media(max-width:768px){


    nav{

        grid-template-columns:1fr;

        justify-items:center;

    }



    .nav-links,
    .nav-social{

        display:none;

    }



    section{

        padding:60px 5%;

    }



    .hero{

        height:430px;

    }



    .hero h1{

        font-size:34px;

    }



    .hero p{

        font-size:16px;

    }



    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }



    .btn-primary,
    .btn-outline{

        width:100%;

        max-width:280px;

    }



    .titulo h2,
    .sobre h2,
    .cta h2{

        font-size:32px;

    }



    .footer-grid{

        grid-template-columns:1fr;

    }



    .footer-bottom{

        flex-direction:column;

    }


}