/* Reset de margens e paddings */
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            /* Corpo da página */
            body {
                font-family: Arial, sans-serif;
                line-height: 1.6;
                color: #333;
            }

            /* Cabeçalho */
            header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                padding: 12px;
                background: #000;
                color: white;
                height: 100px;
            }
            
            header .logo {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
            
            header .logo img {
                width: 70px;
                height: 70px;
            }

            header .nome {
                font-weight: bold;
                display: flex;
                font-size: 20px;
            }

            header nav {
                position: relative;
            }
            
            header nav ul {
                list-style-type: none;
                display: flex;
            }

            header nav ul li {
                margin: 0 15px;
            }

            header nav ul li a {
                color: #61CE70;
                text-decoration: none;
                font-weight: bold;
            }

            header nav ul li a:hover {
                color: #fff;
            }

            /* Seção Hero */
            .hero {
                background: url('img/arena.jpg') center/cover no-repeat;
                height: 50vh;
                display: flex;
                justify-content: center;
                align-items: center;
                color: white;
                text-align: center;
                font-size: 20px;
            }

            .hero .btn {
                background: #ff6600;
                padding: 10px 20px;
                color: white;
                text-decoration: none;
                font-weight: bold;
                border-radius: 5px;
                transition: background-color 0.3s ease;
            }

            .hero .btn:hover {
                background-color: #e55d00;
            }

            /* Produtos */
            .produtos {
                padding: 50px 20px;
                background: #f4f4f4;
                text-align: center;
            }

            .produtos h2 {
                margin-bottom: 20px;
            }

            .produtos-lista {
                display: flex;
                justify-content: space-between;
                gap: 20px;
                flex-wrap: wrap;
            }

            .produto {
                background: white;
                padding: 20px;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                width: 30%;
                text-align: center;
                flex: 1 1 23%; /* Isso vai garantir que as divs ocupem 30% da largura, mas se ajustar em telas menores */
                margin: 10px; /* Espaçamento entre os itens */
                
            }

            .produto img {
                width: 100%;
                border-radius: 8px;
            }

            .produto .btn {
                margin-top: 10px;
                background-color: #ff6600;
            }

            @media (max-width: 768px) {
                .produto {
                    flex: 1 1 100%; /* Em telas pequenas, cada div vai ocupar 100% da largura */
                }
            }

            /* Depoimentos */
            .depoimentos {
                padding: 50px 20px;
                background: #ffffff;
                text-align: center;
            }

            .depoimentos h2 {
                margin-bottom: 30px;
            }

            .depoimentos-carousel {
                display: flex;
                justify-content: center;
                gap: 30px;
            }

            .depoimento {
                background: #f0f0f0;
                padding: 30px;
                width: 250px;
                border-radius: 8px;
                text-align: center;
                box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            }

            .depoimento p {
                font-style: italic;
            }

            .depoimento span {
                display: block;
                margin-top: 10px;
                font-weight: bold;
            }

            .contato {
                padding: 50px 20px;
                background: #f4f4f4;
                color: #333;
                text-align: center;
            }

            .contato h2 {
                margin-bottom: 20px;
            }

            .contato div {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                gap: 20px;
                flex-wrap: wrap; /* Para se ajustar em telas menores */
            }

            .contato form {
                flex: 1; /* Ocupa metade do espaço */
                padding: 20px;
                background: white;
                border-radius: 8px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                height: 300px; /* Ajuste a altura conforme necessário */
            }

            .contato form input, 
            .contato form textarea, 
            .contato form button {
                width: 100%;
                margin-bottom: 10px;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 5px;
                font-size: 16px;
            }

            .contato form button {
                background: #61CE70;
                color: white;
                font-weight: bold;
                cursor: pointer;
                transition: background-color 0.3s ease;
            }

            .contato form button:hover {
                background: #000000;
            }

            .contato iframe {
                flex: 1; /* Ocupa metade do espaço */
                border: none;
                border-radius: 8px;
                height: 300px; /* Ajuste a altura conforme necessário */
                width: 100%; /* Para garantir que ocupe o espaço disponível */
            }

            /* Rodapé */
            footer {
                background: #000000;
                color: white;
                padding: 15px;
                text-align: center;
            }

            footer .social {
                margin-bottom: 10px;
            }

            footer .social-icon {
                color: white;
                font-size: 20px;
                margin: 0 10px;
                text-decoration: none;
            }

            footer .social-icon:hover {
                color: #61CE70;
            }

            #menu {
                position: fixed;
                top: 100px;
                right: -250px; /* Esconde o menu fora da tela */
                width: 250px;
                height: calc(100% - 100px);
                background-color: #000;
                color: white;
                display: flex;
                flex-direction: column;
                padding: 20px;
                box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
                transition: right 0.3s ease; /* Transição suave */
                z-index: 1000;
            }
            
            #menu li {
                margin: 10px 0;
            }
            
            #menu a {
                color: white;
                text-decoration: none;
                font-size: 18px;
                transition: color 0.2s;
            }
            
            #menu a:hover {
                color: #61CE70; /* Cor de destaque ao passar o mouse */
            }
            
            /* Quando o menu está visível */
            #menu.active {
                right: 0; /* Move o menu para dentro da tela */
            }
            
            /* Botão de menu */
            #menu-toggle {
                position: fixed;
                top: 30px;
                right: 20px;
                background: none;
                border: none;
                font-size: 20px;
                color: #fff;
                cursor: pointer;
                z-index: 1100;
                transition: transform 0.3s ease;
            }
            
            #menu-toggle:hover {
                transform: scale(1.2); /* Efeito de zoom ao passar o mouse */
            }
            
            /* Estilo para telas grandes (desktop) */
            @media (min-width: 768px) {
                #menu {
                    position: static;
                    width: auto;
                    height: auto;
                    display: flex;
                    flex-direction: row;
                    background-color: transparent;
                    color: black;
                    box-shadow: none;
                }
            
                #menu li {
                    margin: 0 15px;
                }
            
                #menu.active {
                    left: 0;
                }
            
                #menu-toggle {
                    display: none; /* Esconde o botão de menu em telas grandes */
                }
            }