body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #1c1c1c;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
}

.header {
  padding: 20px 0;
  background-color: #000;
}

.logo {
  max-width: 150px;
}

.hero {
  background-image: url('background.png');
  background-size: cover;
  background-position: center;
  padding: 50px 0;
  margin-bottom: 0px;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.profile { 
  background-image: url('background-image.jpg');
  background-size: cover;
  background-position: center;
  padding: 60px 0;
}

/* Ajuste do padding para telas menores */
@media (max-width: 768px) {
  .profile {
    padding: 40px 0;
  }
}

@media (max-width: 480px) {
  .profile {
    padding: 30px 0;
  }
}

/* Ajuste do padding para telas maiores */
@media (min-width: 1200px) {
  .profile {
    padding: 70px 0;
  }
}

.profile-img-wrapper {
  position: relative;
}

.profile-img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.profile h2 {
  margin-top: 20px;
  font-size: 2rem;
}

.profile p {
  font-size: 1.2rem;
}

.comparison {
  padding: 50px 0;
  background-color: #000;
}

.comparison h2 {
  margin-bottom: 40px;
}

.comparison img {
  max-width: 100%;
  border-radius: 10px;
}

.testimonials {
  background-color: #333;
  padding: 50px 0;
}

.testimonials h2 {
  margin-bottom: 40px;
}

.cta {
  background-color: #b273d1;
  padding: 50px 0;
}

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

.pricing {
  background-image: url('background-image.jpg');
  background-size: cover;
  background-position: center;
  padding: 50px 0;
}

.pricing .preco {
  color: #c292e8;
  font-size: 2em;
}

.pricing .cta {
  background-color: #9154c8;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 1.1em;
}

.highlight {
  color: #6a0dad; /* Define a cor roxa para a parte destacada do texto */
}


.footer {
  background-color: #000;
  padding: 20px 0;
}

.text-content {
  padding: 20px;
}

@media (max-width: 768px) {
  .row {
    flex-direction: column;
    text-align: center;
  }
  
  .text-content {
    padding: 20px 0;
  }
}

.btn-custom {
  background-color: #9370db; /* Cor de fundo roxa */
  color: white; /* Cor do texto branca */
  border: none; /* Remove bordas */
  padding: 15px 30px; /* Espaçamento interno */
  font-size: 16px; /* Tamanho da fonte */
  border-radius: 10px; /* Bordas arredondadas */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra */
  text-transform: uppercase; /* Texto em maiúsculas */
  cursor: pointer; /* Cursor de ponteiro */
  transition: background-color 0.3s ease; /* Transição suave para a cor de fundo */
}

.btn-custom:hover {
  background-color: #7a5ebf; /* Cor de fundo roxa mais escura ao passar o mouse */
}


/* Estilos novos */
.l-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  width: 100%;
  max-width: 2071px;
  padding: 10px;
}

.b-game-card {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: 150%;
  perspective: 1000px;
}

.b-game-card__cover {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-size: cover;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
  transform-origin: top center;
  will-change: transform;
  transform: skewX(.001deg);
  transition: transform .35s ease-in-out;
}

.b-game-card__cover::after {
  display: block;
  content: '';
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: linear-gradient(226deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 35%, rgba(255,255,255,0.2) 42%, rgba(255,255,255,0) 60%);
  transform: translateY(-20%);
  will-change: transform;
  transition: transform .65s cubic-bezier(0.18, 0.9, 0.58, 1);
}

.b-game-card:hover .b-game-card__cover {
  transform: rotateX(7deg) translateY(-6px);
}

.b-game-card:hover .b-game-card__cover::after {
  transform: translateY(0%);
}

.b-game-card::before {
  display: block;
  content: '';
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 6px 12px 12px rgba(0, 0, 0, 0.4);
  will-change: opacity;
  transform-origin: top center;
  transform: skewX(.001deg);
  transition: transform .35s ease-in-out, opacity .5s ease-in-out;
}

.b-game-card:hover::before {
  opacity: 0.6;
  transform: rotateX(7deg) translateY(-6px) scale(1.05);
}

.video-section {
  position: relative;
  background-image: url('background-image.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 50px 0;
  z-index: 1;
}

.video-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Ajuste a opacidade conforme necessário */
  z-index: -1;
}

.video-section h2 {
  margin-bottom: 30px;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.comparison-cards {
  padding: 50px 0;
  background-color: #fff;
}

.comparison-cards .card {
  background-color: #333;
  color: #fff;
  border: none;
  margin-bottom: 30px;
}

.comparison-cards .card-img-top {
  border-radius: 0px;
}

.values-section {
  background-image: url('background.png');
  background-size: cover;
  background-position: center;
  padding: 50px 0;
}

.values-section .value-card {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.value-card img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.value-card h3, .value-card p {
    color: white;
}

        .cardContainer {
            position: relative;
            width: 300px;
            height: 450px;
            margin: 20px auto;
            perspective: 1000px;
        }
        .card {
            width: 100%;
            height: 100%;
            cursor: pointer;
            transform-style: preserve-3d;
            transform: translateZ(-100px);
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        .card.active {
            transform: translateZ(0px) rotateY(180deg);
        }
        .card .side {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 5px;
            background-color: white;
        }
        .card .front .img {
            width: 100%;
            height: 250px;
            background-position: center;
            background-size: cover;
            border-radius: 5px 5px 0 0;
        }
        .card .back {
            transform: rotateY(180deg);
        }
        .card .info {
            padding: 10px;
        }
        .card h2, .card h4, .card p, .card ul, .card li {
            margin: 0;
            padding: 0;
        }
        .card h2, .card h4 {
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
            color: #333;
        }
        .card h2 {
            font-size: 27px;
            font-weight: 500;
            letter-spacing: -0.2px;
            margin-bottom: 10px;
        }
        .card p, .card li {
            font-family: "Roboto", sans-serif;
            font-weight: 400;
            color: #555;
            line-height: 22px;
        }
        .card ul {
            padding-left: 20px;
        }
        .card ul, .card li {
            list-style: disc outside;
        }
        .card .reviews {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }
        .card .reviews svg {
            fill: #FFC324;
            height: 24px;
            width: 24px;
            margin-right: 5px;
        }
        .card .btn {
            position: absolute;
            bottom: 16px;
            width: calc(100% - 32px);
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #FFC324;
            background-image: linear-gradient(-90deg, #FFB714, #FFE579);
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease-out;
        }
        .card .btn:hover h4 {
            transform: translateX(0px);
        }
        .card .btn:hover svg {
            transform: translateX(0px);
            opacity: 1;
        }
        .card .btn h4 {
            transform: translateX(12px);
            transition: transform 0.3s ease-out;
        }
        .card .btn svg {
            margin: 1px 0 0 4px;
            transform: translateX(-8px);
            opacity: 0;
            transition: all 0.3s ease-out;
        }

.divider {
  border-width: 6px 0 0 0;
  border-style: solid;
  border-image: linear-gradient(to right, transparent, #d9b965, transparent) 1;
  margin-top: 20px 0;
}

 .fixed-button {
            z-index: 1;
            position: fixed;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #9154c8; /* Cor de fundo roxa */
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        .fixed-button:hover {
          background-color: #7a5ebf; /* Cor de fundo roxa mais escura ao passar o mouse */
        }
        .content {
            height: 1500px; /* Just to create a scrollable page */
        }
        #orcamento {
            padding: 50px;
            background-color: #f9f9f9;
            margin-top: 50px;
        }