:root {
	--primary-color: #be172c;  
	--secondary-color: #a9abac; 
	--text-color: #264c5b;      
	--text-secondary-color: #707070;
	--background-color: #f5f5f5; 
  }

  html {
	scroll-behavior: smooth;
  }

@font-face {
  font-family: "Geogrotesque Exp";
  src: url("../assets/fonts/geogrotesque/EMTYPE FOUNDRY - GEOGROTESQUE EXP THIN.OTF") format("opentype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Geogrotesque Exp";
  src: url("./fonts/EMTYPE FOUNDRY - GEOGROTESQUE EXP THIN ITALIC.OTF") format("opentype");
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: "Geogrotesque Exp";
  src: url("../assets/fonts/geogrotesque/EMTYPE FOUNDRY - GEOGROTESQUE EXP ULTRALIGHT.OTF") format("opentype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "Geogrotesque Exp";
  src: url("../assets/fonts/geogrotesque/EMTYPE FOUNDRY - GEOGROTESQUE EXP ULTRALIGHT ITALIC.OTF") format("opentype");
  font-weight: 200;
  font-style: italic;
}

@font-face {
  font-family: "Geogrotesque Exp";
  src: url("../assets/fonts/geogrotesque/EMTYPE FOUNDRY - GEOGROTESQUE EXP REGULAR.OTF") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Geogrotesque Exp";
  src: url("../assets/fonts/geogrotesque/EMTYPE FOUNDRY - GEOGROTESQUE EXP REGULAR ITALIC.OTF") format("opentype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Geogrotesque Exp";
  src: url("../assets/fonts/geogrotesque/EMTYPE FOUNDRY - GEOGROTESQUE EXP MEDIUM.OTF") format("opentype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Geogrotesque Exp";
  src: url("../assets/fonts/geogrotesque/EMTYPE FOUNDRY - GEOGROTESQUE EXP MEDIUM ITALIC.OTF") format("opentype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Geogrotesque Exp";
  src: url("../assets/fonts/geogrotesque/EMTYPE FOUNDRY - GEOGROTESQUE EXP SEMIBOLD.OTF") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Geogrotesque Exp";
  src: url("../assets/fonts/geogrotesque/EMTYPE FOUNDRY - GEOGROTESQUE EXP SEMIBOLD ITALIC.OTF") format("opentype");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "Geogrotesque Exp";
  src: url("../assets/fonts/geogrotesque/EMTYPE FOUNDRY - GEOGROTESQUE EXP BOLD.OTF") format("opentype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Geogrotesque Exp";
  src: url("../assets/fonts/geogrotesque/EMTYPE FOUNDRY - GEOGROTESQUE EXP BOLD ITALIC.OTF") format("opentype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
  }
  .poppins-thin {
	font-family: "Poppins", sans-serif;
	font-weight: 100;
	font-style: normal;
  }
  
  .poppins-extralight {
	font-family: "Poppins", sans-serif;
	font-weight: 200;
	font-style: normal;
  }
  
  .poppins-light {
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	font-style: normal;
  }
  
  .poppins-regular {
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: normal;
  }
  
  .poppins-medium {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: normal;
  }
  
  .poppins-semibold {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-style: normal;
  }
  
  .poppins-bold {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-style: normal;
  }
  
  .poppins-extrabold {
	font-family: "Poppins", sans-serif;
	font-weight: 800;
	font-style: normal;
  }
  
  .poppins-black {
	font-family: "Poppins", sans-serif;
	font-weight: 900;
	font-style: normal;
  }
  
  .poppins-thin-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 100;
	font-style: italic;
  }
  
  .poppins-extralight-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 200;
	font-style: italic;
  }
  
  .poppins-light-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	font-style: italic;
  }
  
  .poppins-regular-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 400;
	font-style: italic;
  }
  
  .poppins-medium-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	font-style: italic;
  }
  
  .poppins-semibold-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-style: italic;
  }
  
  .poppins-bold-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 700;
	font-style: italic;
  }
  
  .poppins-extrabold-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 800;
	font-style: italic;
  }
  
  .poppins-black-italic {
	font-family: "Poppins", sans-serif;
	font-weight: 900;
	font-style: italic;
  }
	.space-grotesk-thin {
	font-family: "Space Grotesk", sans-serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;
	}
	.space-grotesk-medium {
	font-family: "Space Grotesk", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	}
	.space-grotesk-bold {
	font-family: "Space Grotesk", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
	}

  body {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400; /* normal */
  }

  #myLinks {
		  display: none;
			background-color: var(--background-color, white);
			position: absolute;
			top: 50px; /* pushes it below the navbar */
			right: 20px; /* align to the right under the hamburger */
			width: 250px; /* fixed width so it looks like a menu */
			border-radius: 8px;
			padding: 12px 0;
			box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* shadow effect */
			z-index: 1000;
	}

/* Style navigation menu links */
.top-menu a {
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.navbar a.icon {
  display: none;
}

@media (max-width: 600px) {
	.navbar a.icon {
		display: block;
		position: absolute;
		right: 20px;
		top: 0;
	}
  }

/* Add a grey background color on mouse-over */
.navbar a:hover {
  opacity: 0.8;
  /* color: black; */
}

.navbar {
	height: 207px;
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-left: clamp(24px, 10%, 128px);
	padding-right: clamp(24px, 10%, 128px);
  }

 .nav-item {
	color: var(--text-color);
	text-decoration: none;
	font-weight: 500;
	font-size: 24px;
	padding-left: 43px;
 }

 .page-title {
	font-family: "Geogrotesque Exp", sans-serif;
  	font-weight: 700;
	color: var(--text-color);
	font-size: 40px;
	font-style: italic;
 }

 .hero {
	position: relative;
	width: 100%;
	height: auto; 
	display: block;
  }
  .hero-img {
	width: 100%;
	height: auto;
	display: block;
  }

  .link-container {
	padding-left: 10px;
	padding-right: 10px;
  }

  .arrow {
	position: absolute;
	height: auto;
  }

  .link-title {
	font-size: 20;
	font-family: "Geogrotesque Exp", sans-serif;
	font-weight: 600;
	color: var(--text-color);
  }

  .mobile-links {
	font-size: 14px;
  }
  
  /* Positions */
  .arrow-tl {
	top: 10%;
	left: 10%;
  }
  
  .arrow-tr {
	top: 10%;
	right: 15%;
  }
  
  .arrow-bl {
	bottom: 20%;
	left: 10%;
  }
  
  .links-top {
	margin-top: -15%;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: var(--text-color);
	text-decoration: none;
  }

  .links-top a:hover {
	opacity: 0.6;
  }

  .links-bottom {
	/* margin-top: -15%; */
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: var(--text-color);
	text-decoration: none;
  }

  .link-tl {
	
  }
  .link-tr {
	margin-left: 30%;
  }
  .link-br {
	margin-left: 30%;
  }

  a {
	text-decoration: none;
	color: var(--text-color);
  }

  .arrow-br {
	bottom: 30%;
	right: 10%;
  }

  .hero-content {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
  }

  .info-section {
	margin-top: 45px;
  }
  
  .info-content {
	display: flex;
	align-items: center;
	gap: 40px;
	position: relative;
	overflow: visible; 
  }
  
  .info-text {
	display: flex;
	background: var(--background-color);
	color: var(--text-color);
	padding-right: 100px;
	position: relative;
	z-index: 1;
	width: 70%;
  }
  
  .red-strip {
	width: 43px;
	background: var(--primary-color);
	margin-right: 20px;
	margin-top: 3.5%;
	margin-bottom: 3.5%;
  }
  
  .text-block {
	padding-top: 20px;
	padding-bottom: 20px;
	margin-left: 3%;
  }
  
  .info-title {
	font-size: 2rem;
	margin-bottom: 16px;
	font-family: 'Geogrotesque Exp', sans-serif;
	font-weight: 700;
	font-style: italic;
  }
  
  .info-description {
	font-size: 1rem;
	line-height: 1.6;
	font-family: 'Montserrat', sans-serif;
  }
  

  .info-image {
	flex: 1;
	position: absolute;
	z-index: 2;
	display: flex;
	justify-content: flex-end;
	overflow: visible;
	right: 0;
	width: 30%;
  }
  

  .info-image img {
	width: 100%;
	height: auto;
	display: block;
  }

  .fab {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: url('../assets/images/topo-novo.png');
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	transition: background 0.3s ease, transform 0.3s ease;
	z-index: 1000;
  }
  
  .fab:hover {
	transform: scale(1.1);
  }

  /* Contact form */

  .contact-section {
	background: #f7f7f7;
	padding: 80px 15%;
	text-align: center;
	margin-top: 50px;
  }

  .complaint-section {
	background: #f7f7f7;
	padding: 80px 10%;
	text-align: center;
	margin-top: 50px;
  }
  
  .contact-title {
	font-family: 'Geogrotesque Exp', sans-serif;
	font-size: 40px;
	font-weight: 700;
	font-style: italic;
	margin-bottom: 40px;
	color: var(--text-color);
  }
  
  .contact-form {
	display: flex;
	flex-direction: column;
	gap: 50px;
  }
  
  .form-row {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	/* align-items: flex-end; */
  }
  
  .form-group {
	display: flex;
	flex-direction: column;
	flex: 1;
  }
  
  .form-group.full-width {
	flex: 100%;
  }
  
  .form-group label {
	margin-bottom: 4px;
	font-size: 20px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	text-align: left;
	color: var(--text-color);
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 12px;
	font-size: 1.5rem;
	border: none;
	color: var(--text-color);
	border-radius: 4px;
	background: #fff;
	width: 100%;
	box-sizing: border-box;
  }

  .form-group input::placeholder,
	.form-group textarea::placeholder,
	.form-group select::placeholder {
		color: #D1D3D4; 
		opacity: 1; 
	}
  
  .terms label {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.9rem;
	color: #333;
  }
  
  .button-row {
	margin-top: 20px;
	display: flex;
	justify-content: center;
  }
  
  .button-row button {
	background-color: #264c5b;
	color: white;
	font-size: 30px;
	padding: 10px 15px;
	border: none;
	cursor: pointer;
	border-radius: 4px;
	border-radius: 50px;
	min-width: 300px;
  }
  .button-row button:disabled {
  background-color: #999;
  cursor: not-allowed; 
  opacity: 0.7;
}

  /* Footer */
  .footer {
  /* background: #264c5b; dark background */
  /* color: white; */
  font-family: 'Montserrat', sans-serif;
}

.footer-top {
	display: flex;
	flex-direction: row;
  	justify-content: space-between;
  	/* flex-wrap: wrap; */
  	margin-bottom: 20px;
  	padding: 40px 10%;
  	align-items: flex-end;
	/* min-height: 400px; */
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: var(--background-color);
  padding: 0px 10%;
  align-items: flex-end;
  min-height: 400px;
}

.footer-col {
  /* flex: 1; */
  /* margin: 10px; */
  
  display: flex;
  flex-direction: column;
  gap: 40px;
  /* align-self: center; */
}

.social-icons {
	display: flex;
	flex-direction: row;
	gap: 20px;
	align-items: flex-start;
	justify-content: flex-start;
}

.icon-container {
	height: 50px;
	width: 50px;
	border-radius: 25px;
	background-color: #333;
	color: #fff;
	cursor: pointer;
	  display: flex;            
  justify-content: center;
  align-items: center;
  font-size: 22px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.icon-container a {
  color: #fff;
  font-size: 24px;
  transition: color 0.3s ease;
}

.icon-container:hover {
  	background-color: #343;

}

.footer-link {
	color: var(--text-color);
	opacity: 0.6;
  	text-decoration: underline;
  	font-size: 20px;
	font-family: 'Montserrat', sans-serif;
}

.footer-rights {
	color: var(--text-color);
	opacity: 0.6;
	font-size: 18px;
	font-family: 'Montserrat', sans-serif;
}

.footer p,
.footer li {
  line-height: 1.6;
  text-decoration: none;
  list-style: none;
}


.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  min-width: 200px;
  /* font-size: 14px; */
}

.footer-contact-title {
	font-family: 'Geogrotesque Exp', sans-serif;
	font-size: 40px;
	font-style: italic;
	color: var(--text-color);
	font-weight: 700;
}

.footer-sub-title {
	font-size: 29px;
	color: var(--text-color);
	font-family: 'Montserrat', sans-serif;
}

.footer-text {
	color: var(--text-secondary-color);
	font-family: 'Montserrat', sans-serif;
	font-size: 22px;
}

.footer-sub-text {
	font-size: 18px;
	color: var(--text-secondary-color);
	font-family: 'Montserrat', sans-serif;
}

.logo-footer {
	width: 180px;
	height: 50px;
}

.page-padding {
	padding: 53px 164px
}

.center {
	text-align: center;
}

ol[type="a"] {
    list-style-type: lower-alpha; /* ensures a, b, c */
  }
ol[type="a"] li::marker {
    content: counter(list-item, lower-alpha) ") "; /* adds the ) */
  }

  .dash-list {
    list-style: none;       /* remove default bullets */
    padding-left: 1.2em;    /* add spacing */
  }
  .dash-list li::before {
    content: "– ";          /* en dash or "-" */
    position: absolute;
    margin-left: -1.2em;
  }

.banner-title-section {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: url('../assets/images/Banner.png') center center/contain no-repeat;
	aspect-ratio: 1920 / 320; 
	height: auto;
}

.search-complaint {
	height: 50vh;
	display: flex;
	flex-direction: row;
	align-items: 'center';
	justify-content: center;
	background-color: #f5f5f5;
	padding-top: 20px;
}
search-input-container {

}
	@media (max-width: 1560px) {
		.hero-img {
			width: 100%;
			height: 75vh;
			object-fit: cover;
			object-position: center;
		}
		.arrow-tl {
			top: 3%;
			left: 7%;
		}
		
		.arrow-tr {
			top: 3%;
			right: 7%;
		}
		
		.arrow-bl {
			bottom: 6%;
			left: 7%;
		}

		.arrow-br {
			bottom: 9%;
			right: 7%;
		}
	}

	@media (max-width: 1024px) {
		.hero-img {
			width: 100%;
			height: 75vh;
			object-fit: cover;
			object-position: center;
		}
		.arrow-tl {
			top: 3%;
			left: 4%;
		}
		
		.arrow-tr {
			top: 3%;
			right: 3%;
		}
		
		.arrow-bl {
			bottom: 4%;
			left: 4%;
		}

		.arrow-br {
			bottom: 4%;
			right: 3%;
		}

		.contact-section {
		padding: 20px 20px;
	}

	.contact-title {
		font-size: 28px;
	}

	.contact-form {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
	.form-group label {
		margin-bottom: 12px;
		font-size: 1.2rem;
	}
	.form-group input,
	.form-group select,
	.form-group textarea {
		padding-top: 15px;
		padding-bottom: 15px;
		padding-left: 10px;
		padding-right: 10px;
		font-size: 1.2rem;
	}
	  .button-row button {
		font-size: 25px;
	}

	.footer-top {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 20px;
		padding: 40px 10%;
		align-items: flex-start;
	}
	}

  @media (max-width: 768px) {
	.navbar {
	  padding-left: 64px;
	  padding-right: 64px;
	}
	
	.page-padding {
	  padding: 40px 30px
	}

	.nav-links {
		display: none;
	}

	.arrow {
		display: none;
	}

	.hero-img {
		width: 100%;
		height: 50vh;
		object-fit: cover;
		object-position: center;
	}

	.navbar {
		height: 207px;
		display: flex;
		flex-direction: row;
		/* justify-content: center; */
		align-items: center;
		/* padding-left: clamp(24px, 10%, 128px);
		padding-right: clamp(24px, 10%, 128px); */
  	}
	.info-image  {
		display: none;
	}

	  .info-text {
		width: 100%;
  	}

	.form-row {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}

	.contact-section {
		padding: 20px 20px;
	}
	
	.complaint-section {
		padding: 20px 20px;
	}

	.contact-title {
		font-size: 28px;
	}

	  .contact-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
  }
  .form-group label {
	margin-bottom: 8px;
	font-size: 1rem;
  }
  .form-group input,
  .form-group select,
  .form-group textarea {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1rem;
  }
    .button-row button {
	font-size: 20px;
	padding: 10px 15px;
	}

	.footer-contact-title {
		font-size: 28px;
	}
	.footer-sub-title {
		font-size: 20px;
	}
	.footer-text {
		font-size: 16px;
	}

	.footer-bottom {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: var(--background-color);
		padding: 20px 10%;
		align-items: flex-end;
		min-height: 400px;
		gap: 20px;
	}

	.footer-col {
		/* flex: 1; */
		/* margin: 10px; */
		
		display: flex;
		flex-direction: column;
		gap: 20px;
		/* align-self: center; */
	}

	  .info-text {
		z-index: 1;
		width: 100%;
	}

}
  
  @media (max-width: 600px) {
	.navbar {
	  justify-content: center;
	}

	.page-padding {
	  padding: 20px 10px
	}

	.nav-links {
		display: none;
	}

	.arrow {
		display: none;
	}

	.hero-img {
		width: 100%;
		height: 50vh;
		object-fit: cover;
		object-position: center;
	}

	.logo-img {
		width: 150px;
		height: auto;
	}

	.info-image  {
		display: none;
	}

	.info-text {
		width: 100%;
  	}

	.form-row {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}

	.contact-section {
		padding: 20px 20px;
	}
	
	.complaint-section {
		padding: 20px 20px;
	}

	.portugal-image {
		width: 100%;
	}

	.banner-title-section {
		height: 100px;
	}

	 .page-title {
		font-size: 28px;
	}
  }

  .details {
	font-size: 22px;
	color: var(--text-color);
	font-family: 'Montserrat', sans-serif;
  }

  .body-title {
	font-size: 22px;
	color: var(--text-color);
	font-family: 'Montserrat', sans-serif;
	font-weight: 600;
  }

  ul.circle {
    list-style-type: circle; 
	padding-left: 1em;
  }

  .footer-rights-section {
	display: flex;
	flex-direction: row;
	gap: 20px;
	flex-wrap: wrap;
  }