.box {	float: left;}
#root {	max-width: 100%;	margin: 0 auto;	background-color: #fff;}
#body {	background-color: #fff;}
#botoestopo {	width: 69%;	text-align: right;	margin: auto;	margin-right: 1%;	margin-top: 1%;	background-color: #000}
#menu {	width: 100%; text-align: right;	z-index: 201;	margin-left: 0%;}


/* BOX HOME */
#box20 {
	width: 48%;
	margin: 1%;
	text-align: justify;
	height: auto;
	border-radius: 10px;
}
#box21 {
	width: 48%;
	margin: 1%;
	text-align: justify;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
#box22 {
	width: 48%;
	margin: 1%;
	text-align: justify;
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
#box22planotodos {
	width: 100%; /* Aumenta o tamanho da imagem */
	margin: 0 auto;
	text-align: center; /* Centraliza o conteúdo interno */
}

.button-group {
    display: flex;
    flex-wrap: wrap; /* Permite que os botões quebrem em linhas */
    gap: 20px; /* Espaçamento entre os botões */
    justify-content: center; /* Centraliza os botões */
}

.plan-button {
    padding: 15px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 20px;
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
    transition: background-color 0.3s;
    text-align: center;
}

.plan-title {
	font-family: 'Roboto', sans-serif;
    font-size: 25px; /* Tamanho menor para o título */
    font-weight: bold;
    margin-bottom: 5px;
	
}

.plan-lives {
	font-family: 'Roboto', sans-serif;
    font-size: 20px; /* Tamanho intermediário para o texto de vidas */
    margin-bottom: 5px;
}

.plan-price {
	font-family: 'Roboto', sans-serif;
    font-size: 40px; /* Tamanho maior para o valor */
    font-weight: bold;
    color: #ffffff;
}

/* Estilo para o efeito hover */
.plan-button:hover {
    background-color: #45a049; /* Cor verde mais escura ao passar o mouse */
}

.plan-cta {
	font-family: 'Roboto', sans-serif;
    font-size: 20px; /* Tamanho intermediário para o texto de vidas */
    margin-bottom: 5px;
	animation: piscar 1s infinite; /* Define a animação de piscar */
}

/* Ajustando para que os botões ocupem 33% da largura em telas maiores */
@media (min-width: 768px) {
    .plan-button {
        flex: 0 1 calc(33% - 20px); /* 33% da largura menos o espaço entre os botões (gap) */
    }
}


#box224 {	width: 48%;	margin: 1%;	text-align: justify;	height: auto;}

#box31 {
	width: 28%;
	margin: 2%;
	text-align: justify;
	height: auto;
}
#box32 {
	width: 28%;
	margin: 2%;
	text-align: justify;
	height: auto;
}
#box33 {
	width: 29%;
	margin: 2%;
	text-align: justify;
	height: auto;
}

#box41 {	width: 23%;	margin: 1%;	text-align: justify;	height: auto;}
#box41 {	width: 23%;	margin: 1%;	text-align: justify;	height: auto;}
#box42 {	width: 23%;	margin: 1%;	text-align: justify;	height: auto;}
#box43 {	width: 23%;	margin: 1%;	text-align: justify;	height: auto;}
#box44 {	width: 23%;	margin: 1%;	text-align: justify;	height: auto;}

#box51 {	width: 18%;	margin: 1%;	text-align: justify;	height: auto;}
#box52 {	width: 18%;	margin: 1%; text-align: justify;	height: auto;}
#box53 {	width: 18%;	margin: 1%;	text-align: justify;	height: auto;}
#box54 {	width: 18%;	margin: 1%;	text-align: justify;	height: auto;}
#box55 {	width: 18%;	margin: 1%;	text-align: justify;	height: auto;}

#box61 {	width: 14.5%;	margin: 1%;	text-align: justify;	height: auto;}
#box62 {	width: 14.5%;	margin: 1%; text-align: justify;	height: auto;}
#box63 {	width: 14.5%;	margin: 1%;	text-align: justify;	height: auto;}
#box64 {	width: 14.5%;	margin: 1%;	text-align: justify;	height: auto;}
#box65 {	width: 14.5%;	margin: 1%;	text-align: justify;	height: auto;}
#box66 {	width: 14.5%;	margin: 1%;	text-align: justify;	height: auto;}


/* BOX INTERNOS E GERAIS */


#box-internosm       {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	margin-top: 0;
	margin-bottom: 0;
	alignment-adjust: justify;
}

#box-interno       {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	margin-top: 1%;
	margin-bottom: 1%;
	alignment-adjust: justify;
	}


#box-geral-branco {	width: 100%;	background-color: #ffffff; position: relative;}
#box-geral-azuldark   {
	width: 100%;
	background-color: #10215C;
}

.imagem-centralizada {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
  }

.du-logo {
	max-width: 60%; /* Define largura máxima */
	height: auto; /* Mantém proporção */
	display: block; /* Garante centralização */
	margin: 0 auto; /* Centraliza dentro do bloco */
  }

/* Contêiner dos quadrados */
.square-group-du {
	display: flex; /* Alinha os quadrados em linha */
	flex-wrap: wrap; /* Permite quebrar linha se necessário */
	gap: 15px; /* Espaçamento entre os quadrados */
	justify-content: center; /* Centraliza os quadrados no contêiner */
	margin-top: 20px;
  }
  
  /* Estilo dos quadrados */
  .square-du {
	width: 200px; /* Largura fixa */
	height: 200px; /* Altura fixa para criar quadrados */
	background-color: #72a6f9; /* Cor de fundo */
	border: 1px solid #ccc; /* Borda para destaque */
	border-radius: 8px; /* Bordas arredondadas */
	display: flex; /* Flexbox para centralizar conteúdo */
	justify-content: center; /* Centraliza horizontalmente */
	align-items: center; /* Centraliza verticalmente */
	text-align: center; /* Centraliza o texto */
	padding: 10px; /* Espaçamento interno */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra leve */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer; /* Cursor de ponteiro ao passar o mouse */
  }
  
  /* Efeito ao passar o mouse */
  .square-du:hover {
	transform: scale(1.05); /* Amplia levemente */
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Aumenta a sombra */
  }
  
  /* Estilo do texto dentro dos quadrados */
  .square-du p {
	font-size: 18px;
	font-weight: bold;
	color: #100f0f; /* Cor do texto */
	margin: 0;
  }

 
.container-botao {
	text-align: center;
	margin: 30px 0;
  }
  
  .botao-contrate {
	display: inline-block;
	padding: 25px 40px;
	background-color: #50a63a; /* Cor de fundo do botão */
	color: #FFFFFF; /* Cor do texto do botão */
	font-size: 28px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 18px;
	animation: piscar 1s infinite; /* Define a animação de piscar */
  }
/* Animação de piscar */
@keyframes piscar {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
 }
#box-geral-azulnipo   {
	width: 100%;
	background-color: #2371FF;
}
#box-geral-azulpetroleo  {
	width: 100%;
	background-color: #3F4F90;
}
#box-geral-white   {
	width: 100%;
	background-color: #D0DBEA;
}
#box-geral-offwhite    {
	width: 100%;
	background-color: #FBF8F3;
}
#box-geral-black   {	width: 100%;	background-color: #000;}
#box-geral-gray    {	width: 100%;	background-color: #E5E5E5;}
#box-geral-graydark{
	width: 100%;
	background-color: #000000;
	background-image: url(../img/back-pedra2.jpg);
}
#box-geral-light   {	width: 100%;	background-color: #D4CCBC;}
#box-geral-blue    {	width: 100%;	background-color: #06F;}

#box-geral-estampado {	width: 100%;	background-image:url(../img/backgrounds/back-black-foral.png);}


}

/* Laptop/Tablet (1024 px) */
@media only screen and (max-width: 1024px) {

#botoestopo {	width: 100%;	text-align: center;	margin: auto;}
#menuprincipal {	width: 100%;		margin-top: 2px;	margin-bottom: 2px; text-align:left; background-image: ;}
#menu {	width: 100%;	margin-top: 0px;	margin-bottom: 2px;	text-align: center;	background-color: ;	z-index: 201;}
#box-interno      {
	width: 80%;
	margin-left: 10%;
	margin-right: 10%;
	margin-top: 2%;
	margin-bottom: 2%;
	alignment-adjust: center;
	text-align: center;
}

#box-internosm { 	width: 94%;	margin-left: 3%;	margin-right: 3%;	margin-top: 1%;	margin-bottom: 0;	alignment-adjust: center;	text-align: center;}


/* BOX HOME */

#box20 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; background:#CCC; border-radius:10px;}
#box21 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box22 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box22planotodos {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}

#box31 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box32 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box33 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}

#box41 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box42 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box43 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box44 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}

#box51 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box52 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box53 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box54 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box55 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}

#box61 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box62 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box63 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box64 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box65 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box66 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}

#seguros1 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#seguros2 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#seguros3 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#seguros4 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#seguros5 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#seguros6 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}


}

/* Laptop/Tablet (800 px) */
@media only screen and (max-width: 800px) {
#box-interno { 	width: 94%;	margin-left: 3%;	margin-right: 3%;	margin-top: 2%;	margin-bottom: 2%;	alignment-adjust: center;	text-align: center;}
#box-internosm {
	width: 94%;
	align: center;
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 10%;
	margin-bottom: 0;
	alignment-adjust: center;
	text-align: center;
}

.square-du {
    width: 45%; /* Faz os quadrados ocuparem 45% da largura da tela */
    height: 180px; /* Ajusta a altura */
  }

/* BOX HOME */

#box20 {	width: 96%;	margin-left: 2%;	margin-right: 2%;	margin-top: 1%;	margin-bottom: 1%;	text-align: justify;	height: auto; background:#CCC; border-radius:10px;}
#box21 {
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
	margin-top: 1%;
	margin-bottom: 1%;
	text-align: justify;
	height: auto;
	alignment-adjust: center;
	text-align: center;
}
#box22 {
	width: 96%;
	margin-left: 2%;
	margin-right: 2%;
	margin-top: 1%;
	margin-bottom: 1%;
	text-align: justify;
	height: auto;
	alignment-adjust: center;
	text-align: center;
}

#box31 {	width: 96%;	margin-left: 2%;	margin-right: 2%;	margin-top: 1%;	margin-bottom: 1%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box32 {	width: 96%;	margin-left: 2%;	margin-right: 2%;	margin-top: 1%;	margin-bottom: 1%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box33 {	width: 96%;	margin-left: 2%;	margin-right: 2%;	margin-top: 1%;	margin-bottom: 1%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}

#box41 {	width: 96%;	margin-left: 2%;	margin-right: 2%;	margin-top: 1%;	margin-bottom: 1%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box42 {	width: 96%;	margin-left: 2%;	margin-right: 2%;	margin-top: 1%;	margin-bottom: 1%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box43 {	width: 96%;	margin-left: 2%;	margin-right: 2%;	margin-top: 1%;	margin-bottom: 1%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box44 {	width: 96%;	margin-left: 2%;	margin-right: 2%;	margin-top: 1%;	margin-bottom: 1%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}

#box51 {	width: 96%;	margin-left: 2%;	margin-right: 2%;	margin-top: 1%;	margin-bottom: 1%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box52 {	width: 96%;	margin-left: 2%;	margin-right: 2%;	margin-top: 1%;	margin-bottom: 1%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box53 {	width: 96%;	margin-left: 2%;	margin-right: 2%;	margin-top: 1%;	margin-bottom: 1%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box54 {	width: 96%;	margin-left: 2%;	margin-right: 2%;	margin-top: 1%;	margin-bottom: 1%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box55 {	width: 96%;	margin-left: 2%;	margin-right: 2%;	margin-top: 1%;	margin-bottom: 1%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}

#box61 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box62 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box63 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box64 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box65 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}
#box66 {	width: 46%;	margin: 2%;	text-align: justify;	height: auto; 	alignment-adjust: center;	text-align: center;}



}