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


* {

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

}



html {

    scroll-behavior: smooth;

}



:root {


    --orange: #f97316;

    --orange-dark: #ea580c;

    --white: #fff;

    --black: #111;

    --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: 60px;


}





.nav-links {


    display: flex;


    list-style: none;


    gap: 55px;


    justify-self: center;



}




.nav-links a {


    color: #222;


    text-decoration: none;


    font-weight: 600;


    transition: .3s;



}




.nav-links a:hover,




.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
=========================================*/


.hero {


    height: 520px;



    background:



        linear-gradient(rgba(0, 0, 0, .60),

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



        url("img/network3.jpg");



    background-size: cover;



    background-position: center;



    display: flex;


    align-items: center;


    justify-content: center;


    text-align: center;



}




.hero-content {


    width: min(950px, 90%);


    color: #fff;


}




.tag {


    display: inline-block;


    padding: 8px 20px;


    border-radius: 50px;


    background:

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



    border:

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



    font-size: 14px;


    letter-spacing: 1px;


    margin-bottom: 30px;



}




.hero h1 {


    font-size: 56px;


    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: .3s;



}





.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: .3s;



}





.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,


.diferencial h2 {


    color: #111;


    font-size: 42px;


    margin: 20px 0;



}





.sobre p,


.diferencial p {


    font-size: 18px;


    line-height: 1.9;


    margin-bottom: 20px;



}





.imagem img {


    border-radius: 18px;


    box-shadow: var(--shadow);



}







/*=========================================
 BLOCO DIFERENCIAL
=========================================*/


.diferencial {


    background: var(--gray);



}



.diferencial .container {


    display: grid;


    grid-template-columns:


        1fr 1fr;


    gap: 70px;


    align-items: center;



}






/*=========================================
 TÍTULOS DE SEÇÃO
=========================================*/


.titulo {


    max-width: 850px;


    margin: 0 auto 0;


    text-align: center;



}




.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;



}







/*=========================================
 CARDS DE SERVIÇOS
=========================================*/


.equipamentos {


    background: #fff;



}




.cards {


    width: min(1200px, 100%);


    margin: 60px auto 60px;


    display: grid;


    grid-template-columns:


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


    gap: 30px;



}




.equip-card {


    background: #fff;


    padding: 35px 30px;


    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);


    box-shadow:

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



}




.equip-card i {


    width: 75px;


    height: 75px;


    background:

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



    color: var(--orange);


    border-radius: 50%;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 32px;


    margin-bottom: 25px;



}





.equip-card h3 {


    color: #111;


    font-size: 22px;


    margin-bottom: 18px;



}





.equip-card p {


    font-size: 15px;


    line-height: 1.8;


    margin-bottom: 20px;



}







/*=========================================
 LISTAS DOS CARDS
=========================================*/


.card-list {


    list-style: none;


    margin-top: 20px;



}





.card-list li {


    position: relative;


    padding-left: 25px;


    margin-bottom: 10px;


    font-size: 14px;


    line-height: 1.5;



}





.card-list li::before {


    content: "✓";


    position: absolute;


    left: 0;


    color: var(--orange);


    font-weight: bold;



}

/*=========================================
 BENEFÍCIOS
=========================================*/


.beneficios {


    background: var(--gray);



}





.beneficios-grid {


    width: min(1200px, 100%);


    margin: auto;


    display: grid;


    grid-template-columns:


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


    gap: 30px;



}





.beneficio {


    padding: 35px;


    background: #fff;


    border-radius: var(--radius);


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


    box-shadow: var(--shadow);


    transition: .35s;



}




.beneficio:hover {


    transform: translateY(-8px);



}





.beneficio i {


    width: 65px;


    height: 65px;


    background: var(--orange);


    color: #fff;


    display: flex;


    justify-content: center;


    align-items: 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;



}








/*=========================================
 EQUIPE
=========================================*/


.equipe {


    background: var(--gray);



}







/*=========================================
 MODELOS DE ATENDIMENTO
=========================================*/


.diferenciais {


    background: var(--gray);



}




.diferenciais .beneficio {


    border-top:

        4px solid var(--orange);



}





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


.cta {


    background:



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

            rgba(234, 88, 12, .95)),



        url("img/suporte.jpg");



    background-size: cover;



    background-position: center;



    color: #fff;


    text-align: center;



}




.cta-container {


    max-width: 900px;


    margin: auto;



}





.cta span {


    font-size: 13px;


    letter-spacing: 2px;


    font-weight: 700;



}




.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:


        2fr 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,

    .diferencial .container {


        grid-template-columns: 1fr;



    }





    .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,

    .diferencial h2,

    .cta h2 {


        font-size: 32px;



    }





    .footer-grid {


        grid-template-columns: 1fr;



    }





    .footer-bottom {


        flex-direction: column;



    }



}