body,
        html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: 'Ubuntu', sans-serif; /* Aplica a fonte Ubuntu como fonte principal */
        }
	a{
		text-decoration:none;
	}
p,.container-contacto .half-width .half-width2 p{
    font-family: 'Ubuntu', sans-serif;
    font-size: 16px;
    /* Outros estilos de parágrafo aqui, se necessário */
}

/* Estilos para o popup */
#popup-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Fundo preto transparente */
  z-index:99999;
}

#popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  height: 80%;
  overflow-y: auto;
  width: 90%;
  
  max-width: 400px; /* Defina aqui a largura máxima que achar melhor para dispositivos móveis */
  font-size: 14px; /* Ajuste o tamanho da fonte para melhor legibilidade em dispositivos móveis */
}

#popup-content h2, #popup-content p {
color:black;
}
#popup-content a {
color:#4267b2;
}

#fechar-popup {
  margin-top: 10px;
  background-color: #4267b2;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
    .flutuante {
        position: fixed;
        bottom: 20px;
        right: 6%;
    }
        #cabeca {
            position: relative;
            width: 100%;
            height: 120%;
            background: url("https://goldente.ao/i/bg_1_goldente.jpg") center/cover no-repeat;
    	    border-radius: 0 0 50% 50%/0 0 130px 130px;
        }
	#cabeca h1{
	    margin-top:90px;
	    font-weight: 600;
	    font-family: 'Inter',sans-serif;
	    font-size: 47px;
	}
        #cabeca::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
    	    border-radius: 0 0 50% 50%/0 0 130px 130px;
        }

        #cabeca .dica {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            color: #fff;
            z-index: 2;
        }
	#cabeca .dica h1{
	    color: #e1ab32;
	}
	#cabeca .dica .botaogold{
	    margin-top:30px;
	}
        #menu {
	    
            width: 88%;
            padding-left: 6%;
            padding-right: 6%;
	    padding-top:30px;
            color: red;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #menu .logo {
            height: 100%;
            width: 150px;
            z-index: 3;
        }

        #menu nav {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            z-index: 3;
            margin-left: auto; /* Isso empurra o nav para a direita */
        }

        #menu nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        #menu nav ul li {
            margin-right: 20px;
    	    text-decoration: none;
    	    padding: 8px;
    	    display: inline-block;
    	    transition: all .2s linear;
    	    font-size:16.5px;
        }

        #menu nav a {
            text-decoration: none;
            color: #fff;
        }

        .botaogold {
                background: #e1ab32;
    display: inline-block; /* ou display: block; */
		height:30px;
            color: #fff;

            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 20px;
            z-index: 3;
	    padding:15px 20px 5px 20px;
        }
        .botaogold:hover {
                background: #f9c349;
            color: #fff;
            
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-right: 20px;
            z-index: 3;
        }


        .container {
	    margin-top:80px;
       	    width: 88%;
            margin-left: calc(6% - 20px);
            margin-right: calc(6% - 20px);	    
        }
        .container .container-servicos h2{
		color:#e1ab32;
	}
        .container .half-width {
	    float:left;
            width: 50%;
    	    padding:20px;
            border: 0px solid #000; /* Adicione uma borda para visualização */
            box-sizing: border-box; /* Mantém a largura incluindo a espessura da borda */
        }
        .container-benvindo {
       	    width: 100%;
	    margin-top:40px;
        }
        .container .half-width img{
	    width:300px;
    	    margin-top: 35px;
	    height: auto; /* Isso manterá a proporção da imagem */
	}

        .container .half-width-one {
	    float:left;
            width: 70px;
            border: 0px solid #000; /* Adicione uma borda para visualização */
            box-sizing: border-box; /* Mantém a largura incluindo a espessura da borda */
        }
        .container .half-width-one-full {
	    float:left;
            width: 100%;
            border: 0px solid #000; /* Adicione uma borda para visualização */
            box-sizing: border-box; /* Mantém a largura incluindo a espessura da borda */
        }
        .container .half-width-one i::before{background:#f7faff;padding:10px;border-radius:50%;}
        .container .half-width-one i{font-size:35px;color:#e1ab32;}
        .container .half-width-two span{float:left;margin-top: -20px;color:#e1ab32;font-weight: bold;font-size:20px;}

        .container .half-width-two {
	    float:left;
            width: calc(100% - 70px);
    	    padding:20px;
            border: 0px solid #000; /* Adicione uma borda para visualização */
            box-sizing: border-box; /* Mantém a largura incluindo a espessura da borda */
        }
	.mosaico {
	    width: 300px; /* Largura fixa de 300px */
	    height: 40vh; /* Ajuste conforme necessário */
	    margin-top: -30vh; /* Ajuste conforme necessário para começar em 70% da altura */
	    margin-left: auto; /* Centraliza à esquerda */
	    margin-right: auto; /* Centraliza à direita */
	    background: radial-gradient(circle at 10% 10%, #ccc 5%, transparent 6%), radial-gradient(circle at 20% 20%, #ccc 5%, transparent 6%),
            radial-gradient(circle at 30% 10%, #ccc 5%, transparent 6%), radial-gradient(circle at 40% 20%, #ccc 5%, transparent 6%);
  	    background-size: 20px 20px; /* Ajuste o tamanho conforme necessário */
    	    background-repeat: repeat;
	}

    

        .container-contacto,.container-contacto2 {width: 100%; }
	.container-contacto .half-width, .container-contacto2 .half-width {
	    	margin-top:80px;
    		float: left;
    		width: 100%;
    		height: 659px; /* Ajuste conforme necessário */
    		padding-left:6%;
		padding-right:6%;
   		background: linear-gradient(to right, #387dff 80%, #f7faff 20%);
    		border: 0px solid #000; /* Adicione uma borda para visualização */
    		box-sizing: border-box; /* Mantém a largura incluindo a espessura da borda */
	}

       .container-contacto2 .half-width {
        height: 300px;
        padding-left:0%;
		padding-right:0%;
    }

        .container-contacto .half-width .half-width2{
	    float:left;
            width: 50%;
    	    padding:25px;padding-top:80px;
            border: 0px solid #000; /* Adicione uma borda para visualização */
            box-sizing: border-box; /* Mantém a largura incluindo a espessura da borda */
        }
       	.container-contacto .half-width .half-width2 h2,
	.container-contacto .half-width .half-width2 h3,
	.container-contacto .half-width .half-width2 p, 
	.container-contacto .half-width .half-width2 a{color:#fff;}


	.container-contacto .half-width .half-width2 #form{
		width:80%;
		height:450px;
		float:left;
		background:#fff;

padding: 25px 40px 24px;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 24px 80px -24px rgba(0,0,0,.16);
	}

/* Definindo variáveis para as cores */


/* Aplicando o estilo aos campos de entrada */
.container-contacto .half-width .half-width2 #form input[type="text"],
.container-contacto .half-width .half-width2 #form input[type="email"],
.container-contacto .half-width .half-width2 #form input[type="date"],
.container-contacto .half-width .half-width2 #form select, textarea {
    color: #666;
    padding: 0.75em;
    height: auto;
	width:100%;
margin-top:15px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--ast-border-color);
    border-radius: 2px;
    background: var(--ast-comment-inputs-background);
    box-shadow: none;
font-size:14px;
font-family: 'Ubuntu', sans-serif;
    box-sizing: border-box;
    transition: all 0.2s linear;
}


.container-servicos {
    margin-top: 70px;
    width: 88%;
    float: left;
    padding-left: 6%;
    padding-right: 6%;
  background: #8ed1fc1a;
  height: 507px;

}

.container-servicos #titulo-full{

    width:100%;float:left;
    margin-top: 30px;
    margin-bottom: 50px;
}

.container-servicos .box {
	float:left;
    width: 23%;
    padding: 20px;
    margin-right: 2%; /* Adiciona espaço entre as boxes */
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 8px 8px 8px 8px;
    box-shadow: 0 24px 80px -24px rgba(0,0,0,.16);
    height:200px;
}
.container-servicos .box i::before {

    background: #f7faff;
    padding: 10px;
    border-radius: 50%;
}

.container-servicos .box i{
    font-size: 40px;
    margin-top:-50px;
    color:#e1ab32;
}
.container-servicos .box p {
    text-align: center;
    text-justify: inter-word;
    font-size: 16px;


}

.container-servicos2 {
    margin-top: 70px;
    width: 88%;
    float: left;
    padding-left: 6%;
    padding-right: 6%;
  background: #fff;
  margin-top:90px;

}
.container-servicos2 .boxduplo {
	float:left;
    width: 50%;
    padding: 25px;
    margin-right: 0%; /* Adiciona espaço entre as boxes */
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0px;
    box-shadow: 0px;
    height:250px;
}
.container-servicos2 .box h3, .container-servicos2 .box p {color:#fff;}
.container-servicos2 .ultimo, .container-servicos2 .ultimo  a{
    z-index:10;
    background-color: #387dff;
    color:#fff;
    border-radius: 0 0 50% 0%/0 0 160px 0px;
}

.container-servicos2 .box .fundo, .container-servicos2 .box .fundo2{
    float:left;
    background: black;
    opacity: 0.8;
    z-index: 9;
    height: 100%;
    padding: 0px 30px 0px 30px;
    width: calc(100% - 60px);
    top: 0;
    left: 0;
    position: absolute;
}
.container-servicos2 .box .fundo2{
    opacity: 0.6
}

.container-servicos2 .box {
    float: left;
    width: 25%;
    
    margin-right: 0%;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0px;
    box-shadow: 0 24px 80px -24px rgba(0, 0, 0, .16);
    height: 250px;
    position: relative; /* Adicione position: relative para .fundo usar como referência */

}



        .titulo {
		color:#e1ab32;
		font-size:35px;
	}
	p{
		color:#7A7A7A;
		text-align: justify;
	}
	.gold{color:#e1ab32;}
    .inner-div {
        width: calc(33.33% - 40px); /* 40px é o espaço entre as divs */
        box-sizing: border-box;
        float: left;
        height: 450px; /* Ajuste conforme necessário */
        margin-right: 40px; /* Espaço entre as divs */
        background: white; /* Cor de fundo desejada */
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        margin-bottom: 40px;
        padding:30px;
        font-size:17px;
      }