@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

        :root {
            --cor1: #4B66FB;
            --cor2: #0025FA;
            --cor3: #000fff;
            --cor4: #00127A;
            --cor5: #161F30;
            --cor6: #000000;
            --cor7: #ffffff;
            --cor8: #f0f8ff;

        --fonte-padrao: Arial, Verdana, Helvetica, sans-serif;
        --fonte-destaque:  "Bebas Neue", sans-serif;
        }
        * {
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth; 
        }

        body {
            background-color: var(--cor8);
        }
        header {
            background-color: var(--cor4);
            color: var(--cor8);
            width: 90%;
            margin: auto;
            border-radius: 5px;
            padding: 10px 10px 50px 10px;
            margin-top: 20px;
            box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.534);
        }

        header div h1 {
            font-family: var(--fonte-destaque);
            font-weight: normal;
            letter-spacing: 2px;
        }

        header ul {
            list-style-position: inside;
        }
        header ul > li {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        li a {
            text-decoration: none;
            color: var(--cor1);
        }
        header h1 {
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: 30px;
            text-align: center;
            margin-bottom: 50px;
        }
        header strong {
            color: var(--cor1);
        }
        nav {
            background-color: aliceblue;
            max-width: 90%;
            height: 30px;
            margin: auto;
            border-radius: 5px;
            padding: 10px;
            margin-top: 50px;
            box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.534);
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        
        nav a {
            text-decoration: none;
            color: var(--cor4);
            border-radius: 5px;
            font-family: var(--fonte-padrao);
        }

        nav a:hover {
            background-color: var(--cor1);
            color: var(--cor8);
            text-decoration: none;
            padding: 15px 30px;
        }

        nav .traco {
            width: 1px;
            height: 22px;
            background-color: var(--cor4);
        }
        
        main section {
            display: flex;
            margin-top: 100px;
            justify-self: center;
        }
        .trilha img {
            width: 100%;
            border-radius: 10px;
        }
        .trilha button {
            padding: 5px 10px;
            border: none;
            background-color: var(--cor1);
            color: white;
            border-radius: 3px;
            cursor: pointer;
            transition: 0.5s;
        }

        .trilha button:hover {
            background-color: var(--cor3);
        }

        .trilha {
            max-width: 200px;
            background-color: aliceblue;
            padding: 10px;
            text-align: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-weight: normal;
            box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.493);
            border-radius: 5px;
        }
        .trilha strong {
            text-transform: uppercase;
            font-family: Arial, Helvetica, sans-serif;
        }
        .tabela {
            display: block;
            background-color: rgba(0, 0, 0, 0.632);
            width: 100%;
            height: 1500px;
            position: fixed;
            top: 0;
            left: 0;
            color: white;
            z-index: 2;
        }

        .foraDaTela {
            display: none;
        }

        .box {
            width: 800px;
            background-color: var(--cor8);
            color: var(--cor6);
            margin: auto;
            padding-bottom: 50px;
            overflow-y: auto;
            text-align: center;
        }

        .box img {
            width: 300px;
            transition: 0.5s;
            border-radius: 5px;
        }

        .box img:hover {
            transform: scale(1.05);
            box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.24);
        }
        
        main {
           
           align-items: start;
           background-image: linear-gradient(to right, var(--cor1), var(--cor2), var(--cor3) );
           padding-bottom: 50px;
           position: relative;
           padding-top: 100px;
        }

        .secoes {
            display: grid;
           grid-template-columns: 1fr 1fr 1fr 1fr;
           padding-bottom: 100px;
        }

        #secao1 {
            background-color: var(--cor4);
        }

        .categoria {
            font-family: var(--fonte-destaque);
            color: var(--cor7);
            font-weight: normal;
            letter-spacing: 3px;
            text-align: center;
        }
        
        .h1 {
            text-align: center;
            color: var(--cor4);
            font-family: Arial, Helvetica, sans-serif;
            margin-top: 50px;
            margin-bottom: 100px;
        }
        h2 {
            color: var(--cor5);
        }
        figcaption {
            font-size: 14px;
            font-weight: bold;
        }

        figcaption strong {
            font-size: 8px;
        }

        .x {
            background-color: red;
            color: white;
            text-align: center;
            padding: 10px;
            cursor: pointer;
            font-family: var(--fonte-padrao);
            width: 40px;
            border: none;
            transition-duration: 0.5s;
        }
        .tabela-texto h1 {
            font-family: var(--fonte-padrao);
            padding: 10px;
            text-align: center;
        }
        .tabela-texto p {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-size: 16px;
            margin: 0 50px;
            text-align: justify;
        }
        #administracao td {
            font-size: 13px;
        }
        table {
            font-family: var(--fonte-padrao);
            border-collapse: collapse;
            text-align: center;
            margin: -30px 50px 50px;
        }
        .conteiner-tb {
            display: flex;
            justify-content: center;
        }
        caption {
            background-color: rgb(59, 59, 228);
            color: white;
            font-weight: bold;
            padding: 5px;
        }
        th {
            background-color: rgb(51, 50, 50);
            color: white;
        }
        td {
            font-size: 18px;
            border: 1px solid var(--cor4);
        }

        #recHumanos td, #hotelariaTurismo td {
            font-size: 14px;
        }

        .scrollLeft {
            animation: lll 1.5s;
        }
        .scrollRight {
            animation: rrr 1.5s;
        }
        @keyframes lll {
            from {
              translate: 10vw 0;
            }
        
            to {
              translate: 0 0;
            }
          }
          @keyframes rrr {
            from {
              translate: -10vw 0;
            }
        
            to {
              translate: 0 0;
            }
          }
        footer {
            padding: 10px;
            background-color: var(--cor4);
            color: rgba(255, 255, 255, 0.712);
            text-align: center;
            font-family: Arial, Helvetica, sans-serif;
        }
        footer strong {
            color: white;
        }
        footer a {
            color: white;
            text-decoration: none;
            font-size: 0.8em;
           }
           a:hover {
            text-decoration: underline;
            color: #0025FA;
            transition-duration: 0.3s;
           }

           aside {
            width: 100%;
            background-color: var(--cor7);
            text-align: center;
            padding: 20px;
            display: flex;
           }

           aside img {
            width: 10%;
           }

        @media (max-width: 1150px) {
            .trilha img {
                width: 200px;
                height: 200px;
            }
            main section {
                display: inline;
            }
        }

        @media (max-width: 1000px) {
            .box {
                max-width: 70%;
                margin: auto;
            }

            .tabela-texto p {
                margin: 5px;
                font-size: 13px;
            }

            .box img {
                width: 35%;
            }

            #empreended td, #marketing td {
                font-size: 14px;
            }

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

        @media (max-width: 800px) {
            .tabela-texto h1 {
                font-size: 18px;
            }

            .box {
                max-width: 90%;
                height: 100%;
            }
        }

        @media (max-width: 700px) {
            .secoes {
                grid-template-columns: 1fr 1fr;
            }
            #inforEssencial td {
                font-size: 14px;
            }

            aside img {
                width: 15%;
            }
        }

        @media (max-width: 600px) {
            #recHumanos td, #hotelariaTurismo td {
                font-size: 12px;
            }
        }

        @media (max-width: 550px) {
            #contato {
                max-width: 400px;
                font-size: 14px;
            }
            header ul {
                width: 70%;
                font-size: 14px;
            }
            header h1 {
                font-size: 20px;
            }
            header ul >li {
                font-size: 14px;
            }
        }

        @media (max-width: 500px) {

            main section figcaption {
                font-size: 10px;
                margin-bottom: 10px;
            }

            .trilha {
                max-width: 120px;
                max-height: 280px;
            }

            .trilha img {
                max-width: 100%;
                height: 150px;
            }

            table {
                margin: 5px;
            }

            tr {
                display: grid;
                grid-template-columns: 1fr 1fr;
            }

            thead {
                display: none;
            }

            td {
                font-weight: bold;
            }

            #adm td {
                font-size: 10px;
            }

            #adm tr, #recHumanos tr, #hotelariaTurismo tr {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr;
            }

            #evoProfis td, #inforEssencial td, #tecContabeis td, #youtube td {
                font-size: 13px;
            }
            #evoProfis tr, #inforEssencial tr, #tecContabeis tr, #desGames tr, #desWeb tr, #youtube tr {
                display: grid;
                grid-template-columns: 1fr;
            }

            #inforEssencial td {
                font-size: 14px;
            }

            #empreended td {
                font-size: 11px;
            }

            #recHumanos h1 {
                font-size: 13px;
            }
        }

        @media (max-width: 400px) {
            td {
                padding: 2px;
            }

            #evoProfis p, #recHumanos p {
                font-size: 11px;
            }

            #inforEssencial td {
                font-size: 11px;
            }

            #recHumanos td, #hotelariaTurismo td {
                font-size: 10px;
            }

            table {
                margin-top: -30px;
            }

            #marketing td {
                font-size: 12px;
            }
        }