/*Parte geral*/
body { font-family: 'Muli', sans-serif; margin: 0 0 0 0; background-color: #FFFFFF;}
a {color: black; text-decoration: none;}
a:visited,
a:hover,
a:active,
a:focus {text-decoration: none !important;color: inherit;}
p {text-decoration: none; font-size:medium; color: black;}
h1 {font-size:xx-large; font-weight: bolder; color: black;}
h2 {font-size:x-large; font-weight:bold; color: black;}
h3 {font-size:large; font-weight:bolder; color: black;}

/*Apenas o menu*/
#menu {background-color: #ffffff; border-bottom: 1px solid #e5e5e5;}
#menu_img_logo {height: 80px; padding-left: 1vw; padding-right: 1vw;}
#menu_img_logo:hover {transform: scale(1.3);}
#menu_txt_logo {height: 80px; padding-left: 1vw; padding-right: 0vw;}
.linha_menu {border-collapse: collapse;border-bottom: 1px solid #e5e5e5;box-shadow: none;}
.linha_menu_sombra {border-collapse: collapse;border-bottom: none;box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);}
a.menu {color: #444;font-weight: 400;font-size: 1rem;padding-left: 0.8rem;padding-right: 0.8rem;padding-top: 0.4rem;padding-bottom: 0.4rem;border-bottom: none;}
a.menu:hover {color: #57A1D4;border-style: none; /* tira aquela linha em baixo */}
a.menu_icons {color: #555;font-weight: 400;font-size: 16px;padding-left: 0.3rem;padding-right: 0.3rem;}
a.menu_icons:hover {color: #57A1D4;border-style: none;}

#intro_index {
  background-image: url("fotos/braga_cor.jpg");
  background-attachment: scroll; background-size: cover; background-repeat: no-repeat; vertical-align: middle;
  padding-top: 20%;padding-left: 20%;padding-right: 20%;padding-bottom: 20%;
}
h1.titulo_intro {text-align: left; color:gray; padding-left: 20px; line-height: 1;}
h2.titulo_intro {text-align: left; color:gray; padding-left: 35px;line-height: 1;}
h3.titulo_intro {text-align: left; color:gray; padding-left: 25px; line-height: 1;}
p.texto_intro {text-align: left; color:gray; font-weight:lighter; padding-left: 60px;}
.overtitle_intro {
  font-size: 14px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #666;
  margin-bottom: 8px;
}
.lista_intro{
  text-align: left;
  list-style-type: disc;
  padding-left: 80px;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 15px;
  color: #666;
  line-height: 1.6;
}

/* Arredondar as imagens principais da home */
.linha_imagens_intro img, .hero-gc-card img, .img_preencher {border-radius: 18px; /* escolhe 12px / 18px / 24px se quiseres mais arredondado */}
.linha_imagens_intro {max-width: 1100px;   /* controla o tamanho máximo */margin: 40px auto;padding: 0 20px;}

#intro_faq {
  background-image: url("fotos/boulder_colegio_alemao_porto.jpg");
  background-attachment: scroll; background-size:auto; background-repeat: no-repeat; vertical-align: middle;
  padding-top: 10%; padding-left: 20%; padding-right: 20%; padding-bottom: 10%;
}
h2.subtitulo_faq {text-align: left; font-weight:bolder; color: black; padding-left: 60px; padding-right: 60px;}
h3.subsubtitulo_faq {text-align: left; font-weight:bolder; color: black; padding-left: 60px; padding-right: 60px;}
p.texto_faq {text-align: left; color:gray; font-weight:lighter; padding-left: 60px; padding-right: 60px}

#intro_manutencao {
  background-image: url("fotos/nuno_manutencao.jpg");
  background-attachment: scroll; background-size:auto; background-repeat: no-repeat; vertical-align: middle;
  padding-top: 10%; padding-left: 20%; padding-right: 20%; padding-bottom: 10%;
}
h1.titulo_manutencao {text-align: left; font-weight:bolder; color: black; padding-left: 60px; padding-right: 60px; font-size: 80px;}

#intro_homeclimbing {
  background-image: url("fotos/home_climbing.jpg");
  background-attachment: scroll; background-size:auto; background-repeat: no-repeat; vertical-align: middle;
  padding-top: 10%; padding-left: 20%; padding-right: 20%; padding-bottom: 10%;
}
h1.titulo_homeclimbing {text-align: left; font-weight:bolder; color: black; padding-left: 60px; padding-right: 60px; font-size: 80px;}

a.contact_icons {font-weight: lighter; font-size: 18px; padding-left: 0.1vw; padding-right: 0.1vw;}
a.contact_icons:hover {color: #57A1D4; border-style: none none solid none;}
a.comdecor {text-decoration:dashed;}

.fixedButton{position: fixed; bottom: 0px; right: 0px; padding: 15px;}
.roundedFixedBtn{height: 60px; line-height: 60px; width: 60px; font-weight: bold; border-radius: 50%; background-color: #48abe0; color: white; text-align: center; vertical-align: top; cursor: pointer;}

button {border-radius: 5px; border-style: 1px; padding: 10px 20px 10px 20px; font-size: 1vw; transition-duration: 0.4s;}
button.linha_azul {border-style:none; border-bottom-style: double; border-radius: 0%; color:black; background-color: white; padding: 10px 0px 10px 0px; font-size: 1vw; font-weight: bolder; transition-duration: 0.4s;}
button.linha_azul:hover {border-bottom-style: double; border-color:#57A1D4 ; color:#57A1D4; background-color: white; padding: 10px 0px 10px 0px; font-size: 1vw; transition-duration: 0.4s;}
button.linha_azul_mini {border-style:none; border-bottom-style: double; border-radius: 0%; color:#57A1D4; background-color: white; padding: 10px 0px 10px 0px; font-size:xx-small; font-weight: bolder; transition-duration: 0.4s;}
button.linha_azul_mini:hover {border-bottom-style: double; border-color:#57A1D4 ; color:#57A1D4; background-color: white; padding: 10px 0px 10px 0px; font-size:xx-small; transition-duration: 0.4s;}
button.preto_azul_linha { background-color:transparent; color:black;}
button.fundobranco { background-color:transparent; border-color: black; color:black;}
button.fundobranco:hover {background-color: black; color:white; border-color: black;}
button.fundopreto {color:white; background-color:black;}
button.fundopreto:hover {background-color: white; color:black; border-color: black;}
button.fundotransparente {border-color: white; padding: 10px 20px 10px 20px; color:white; background-color:transparent; transition-duration: 0.4s;}
button.fundotransparente:hover {background-color: white; color:black; border-color: white;}
button.setabrancafundonegro {border-radius: 5px; border-style: 1px; padding: 10px 20px 10px 20px; font-size: 1vw; color:white; background-color:black; transition-duration: 0.4s;}
button.redondo {border-radius: 100%; background-color: #48abe0; color: white; border: none; font-size: 20px; padding-left: 5px; padding-right: 5px; padding-top: 15px; height: 50px; width: 50px; box-shadow: 0 2px 4px darkslategray; cursor: pointer; transition: all 0.2s ease;}
button.redondo:hover {background-color: white; color:black;}
button.grande {background-color: #48abe0; /*Este botão tem a cor azul deste tema*/ color: white; border: none; font-size: xx-large; padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px; height: 100%; width: 100%; box-shadow: 0 2px 4px darkslategray; cursor: pointer; transition: all 0.2s ease;}
button.grande:hover {background-color: white; color:black;}
button.medio {
  background-color: #48abe0; /*Este botão tem a cor azul deste tema*/
  color: white;
  border: none;
  font-size: x-large;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  height: 100%;
  width: 100%;
  box-shadow: 0 2px 4px darkslategray;
  cursor: pointer;
  transition: all 0.2s ease;
}
button.medio:hover {background-color: white; color:black;}

.botao_arredondado {display: inline-block;padding: 12px 24px;background-color: #48abe0; /* Azul, muda conforme tua paleta */color: white;text-decoration: none;border-radius: 50px;font-weight: bold;transition: background-color 0.3s ease;}

.botao_arredondado:hover {background-color: #48abe0; /* Tom mais escuro no hover */color: whitesmoke; transform: scale(1.1);}

/* BOTÃO BASE */
.btn-gc {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 50px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: center;
}

/* BOTÃO PRIMÁRIO (o mais usado) */
.btn-gc.primario {background-color: #1a1a1a; /* preto moderno (cor comum no Grip&Climb) */color: #fff;border: 2px solid #1a1a1a;}
.btn-gc.primario:hover {background-color: #000;border-color: #000;transform: translateY(2px);}
/* BOTÃO SECUNDÁRIO (outline) */
.btn-gc.secundario {background-color: transparent;color: #1a1a1a;border: 2px solid #1a1a1a;}
.btn-gc.secundario:hover {background-color: #1a1a1a;color: #fff;transform: translateY(2px);}
/* ÍCONES DENTRO DOS BOTÕES */
.btn-gc .material-icons {font-size: 20px;vertical-align: middle;margin-right: 6px;}

#footer {clear: both; /*sempre que usar float tenho de libertar*/ width: 100%;
  padding: 20px; text-align: center; font-weight: bold; background-color:#303E4E; color: #FFFFFF;}
* {box-sizing: border-box;}
/*As proximas linhas são necessárias para criar o efeito das 3 ou 2*/
.coluna_5 {text-align: center; color:gray; font-weight: lighter;
  float: left; width: 20%; padding: 20px; text-align: center;}
.coluna_4 {text-align: center; color:gray; font-weight: lighter;
  float: left; width: 25%; padding: 10px; text-align: center;}
.coluna_3 {text-align: center; color:gray; font-weight: lighter;
  float: left; width: 33.33%; padding: 10px; text-align: center;}
.coluna_2 {text-align: center; color:gray; font-weight: lighter; float: left; width: 50%; padding: 5%; padding-bottom: 5%; text-align: center;}
.coluna_2_txt_img {float: left; width: 50%;}
.coluna_1 {/*A ideia é dividir o paragrafo em 3 partes*/ padding: 5% 25% 5% 25%; text-align: center;}

.margem_menu_top_bottom {padding-top: 220px; padding-bottom: 220px;}
.margemparaomenu {padding-top: 60px; /*Tenho de variar os px de acordo com a resolução e tamanho da barra de menu*/}
.margemparaoanterior {padding-top: 60px; /*Tenho de variar os px de acordo com a resolução e tamanho do ecran*/}
.margenslaterais {padding-left: 100px; padding-right: 100px;}
.margens_banner  {margin: 5% 10% 5% 10%;}

.largura100_altura100 {width: 100%; height: 100%;}
.largura_100 {width: 100%;}
.largura100 {width: 100%;}
.largura20 {width: 20%;}
.largura_20 {width: 20%;}
.largura30 {width: 30%;}
.largura_30 {width: 30%;}
.largura40 {width: 40%;}
.largura_40 {width: 40%;}
.largura50 {width: 50%;}
.largura_50 {width: 50%;}
.largura60 {width: 60%;}
.largura_60 {width: 60%;}
.largura70 {width: 70%;}
.largura_70 {width: 70%;}
.largura80 {width: 80%;}
.largura_80 {width: 80%;}
.largura90 {width: 90%;}
.largura_90 {width: 90%;}
.largura_200px {width: 200px; min-width: 200px;}
.largura_250px {width: 250px; min-width: 250px;}
.largura_250px_menu {width: 250px; min-width: 250px;}
.altura_100 {height: 100%;}
.altura_25px {height: 25px; min-height: 25px;}
.altura_50px {height: 50px; min-height: 50px;}
.altura_75px {height: 75px; min-height: 75px;}
.altura_100px {height: 100px; min-height: 100px;}
.altura_150px {height: 150px; min-height: 150px;} 
.altura_200px {height: 200px; min-height: 200px;}
.altura_250px {height: 250px; min-height: 250px;}
.altura_300px {height: 300px; min-height: 300px;}
.altura_400px {height: 400px; min-height: 400px;}
.altura_500px {height: 500px; min-height: 500px;}

.alinha_fundo {vertical-align: bottom;}
.alinha_centro {vertical-align: middle;}
.alinharaocentro {vertical-align: middle;}
.alinha_centro_menu {vertical-align: middle;}
.alinha_topo {vertical-align: top;}
.alinha_texto_direita {text-align: right;}
.alinha_texto_centro {text-align: center;}
.centrar {text-align: center;}
.alinha_texto_esquerda {text-align: left;}
.alinharesquerda {text-align: left;}
.alinhar_esquerda {text-align: left;}
.alinhar_direita {text-align: right;}

.margem_30px {width: 30px; min-width: 30px;}
.margem_60px {width: 60px; min-width: 60px;}
.margem_90px {width: 90px; min-width: 90px;}
.margem_120px {width: 120px; min-width: 120px;}
.margem_120px_menu {width: 120px; min-width: 120px;}
.margem_menu_top_bottom {padding-top: 40px; padding-bottom: 40px;}

.margens_laterais_50px {margin: 0px 50px 0px 50px;}
.margens_laterais_100px {margin: 0px 100px 0px 100px;}
.margens_laterais_150px {margin: 0px 150px 0px 150px;}

.padding_60px {padding-left: 60px; padding-right: 60px}
.padding_80px {padding-left: 80px; padding-right: 80px}

.font_48px { font-size: 48px; }
.font_64px { font-size: 64px; }
.font_80px { font-size: 80px; }

.texto_medio {font-size: font-size: 1rem;}

.texto_fininho {font-weight:lighter;}
.italico {font-style: italic;}
.negrito {font-weight: bolder;}

.img_preencher {height: 100%; width: 100%; object-fit: cover;}
.img_aumentar:hover {transform: scale(1.1);}
.imagem_aumentar:hover {transform: scale(1.1);}
.imagem_sombra{filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.5));}
.imagem_com_texto {
  position: relative;
  display: inline-block;
}
.texto_sobre_imagem {
  position: absolute;
  bottom: 10px;
  left: 10px;
  transform: rotate(-90deg);
  transform-origin: left bottom;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  text-shadow: 1px 1px 3px black;
  pointer-events: none;
}

.cinza {color: #767676;}
.branco {color: whitesmoke;}
.cinza_claro {color:gray;}
.sombra {-webkit-box-shadow: 1px 1px 15px 5px #000000; box-shadow: 1px 1px 15px 5px #000000;}
.sombra_menu {box-shadow: 0 2px 4px darkslategray;}

.fundo_circulos {background-image: url(fundo_circulos.png);}
.fundo_azul {background-color: #57A1D4; overflow: auto;}
.fundo_cinza {background-color:rgba(232,232,232,1); overflow: auto;}
.fundo_brancosujo {background-color:whitesmoke; overflow: auto;}
.fundo_branco {background-color: white; overflow: auto;}
.fundo_preto {background-color: #000000; overflow: auto;} 
.movel_oculta {visibility: visible;}
.pc_oculta {visibility: hidden;}
.pc_apaga {display: none;}
.imagem_esquerda {float: left; clear: left; width: 40%; padding-left: 2%; padding-right: 2%; padding-top: 2%; padding-bottom: 2%;}
.texto_direita {float:left; width: 60%; padding-left: 2%; padding-right: 2%; padding-top: 2%; padding-bottom: 2%;}


/* botões dropdown mais leves */
.dropbtn {
  background-color: white;
  color: black;
  border-color: white;
  padding: 12px;
  font-size:large;
  border-style: none none solid none;
  border-radius: 0;
  cursor: pointer;
}
.dropbtn {
  background-color: transparent;
  color: #444;
  border-color: transparent;
  padding: 8px 4px;
  font-size: 0.9rem;
  font-weight: 500;
  border-style: none;
}
.dropdown:hover .dropbtn {
  color: #57A1D4;
  border-color: transparent;
}
.dropdown {position: relative; display: inline-block;}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 250px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {color: #57A1D4; border-color: #57A1D4;}

html {
  scroll-behavior: smooth;
}
.hero {
  position: relative; /* necessário para posicionar o botão dentro desta secção */
}
.scroll-circle {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background-color: #57A1D4;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: background-color 0.3s ease, opacity 0.3s ease;
  z-index: 10;
}
.scroll-circle:hover {background-color: #0056b3; cursor: pointer;}
.scroll-circle.hidden {opacity: 0; pointer-events: none;}

.img-container {text-align: center; margin-bottom: 30px;}
.img-container img {width: 100%; max-width: 100%; height: auto;}

.titulo-sobreposto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  font-size: 2em;
  text-align: center;
  padding: 10px;
  z-index: 10;
}

@media (max-width: 1000px) {
  .sepequeno {
    display: none !important;
  }
}

/*Quando o meio é o tablet vamos alterar alguns itens*/
@media (max-width: 1000px) {
  .margemparaomenu {padding-top: 40px;}
  #menu_img_logo {height: 40px;}
  #menu_txt_logo {height: 40px;}
  #menu_img_logo:hover {transform: scale(1.1);}
  a.menu {font-size: 2vw;}
  h1.titulo_intro {padding-top: 120px; padding-left: 30px; padding-left: 30px;}
  p.texto_intro {padding-left: 30px; padding-left: 30px;}
  h1.titulo_manutencao {padding-left: 30px; padding-right: 30px; font-size: 80px;}
  button {padding: 5px 10px 5px 10px; font-size: 1.5vw;}
  .imagem_esquerda {float:none; width: 100%;}
  .texto_direita {float:none; width: 100%;}
  .margem_30px {width: 3px; min-width: 3px;}
	.coluna_5 {width: 100%;}
  .coluna_4 {width: 100%;}
	.coluna_3 {width: 100%;}
	.coluna_2 {width: 100%; padding: 10px;}
  .coluna_2_txt_img {width: 100%;}
  .imagem_esquerda {float: left; width: 100%; padding-left: 5%; padding-right: 5%;}
  .texto_direita {float:left; width: 100%; padding-left: 10%; padding-right: 10%;}
  .movel_oculta {visibility:hidden;}
  .movel_apaga {display: none;}
  .pc_oculta {visibility: visible;}
  .pc_apaga {display: block;}
  .largura_250px_menu {width: 125px; min-width: 125px;}
  .margem_120px_menu {width: 100px; min-width: 100px;}
  .alinha_centro {text-align: center;}
}

/*Quando o meio é o telémovel vamos alterar alguns itens*/
@media (max-width: 400px) {
  .margemparaomenu {padding-top: 30px; /*Tenho de variar os px de acordo com a resolução e tamanho da barra de menu*/}
  .margem_menu_top_bottom {padding-top: 0px; padding-bottom: 0px;}
  imagem_esquerda {float:none; width: 100%;}
  texto_direita {float:none; width: 100%;  padding-left: 20%; padding-right: 20%;}
  #menu_img_logo {height: 35px;}
  #menu_txt_logo {height: 35px;}
  #menu_img_logo:hover {transform: scale(1.1);}
  a.menu {font-size: 2vw;}
  h1.titulo_intro {padding-top: 120px; padding-left: 30px; padding-left: 30px;}
  p.texto_intro {padding-left: 30px; padding-left: 30px;}
  button {padding: 5px 10px 5px 10px; font-size: 1.5vw;}
	.coluna_4 {width: 100%;}
	.coluna_3 {width: 100%;}
	.coluna_2 {width: 100%; padding: 10px;}
  .coluna_2_txt_img {width: 100%;}
  .movel_oculta {visibility:hidden;}
  .movel_apaga {display: none;}
  .pc_oculta {visibility: visible;}
  .pc_apaga {display: block;}
  .largura_250px_menu {width: 100px; min-width: 100px;}
  .margem_120px_menu {width: 60px; min-width: 60px;}
  .alinha_centro {text-align: center;}
  .dropbtn {padding: 6px; font-size: 2vw;}
}