/* (c) Carolina Santos, Inês Cruz, Iria Paulina, Miriam Jamal, Last updated 2024-12-20, LDC, FBAUP */
/*The following code is the main style file for the website. It starts with the font faces and the root variables. Then it has the styles for the header, the hero section, the several sections of the website, the footer, and the media query for mobile at the end.*/
/*We should have used more inheritance and less repetition, but we are still learning :)*/

/* Typography links */
@font-face {
  font-family: "Swiss721 Light";
  src: url("typography/Swiss721BT-Light.ttf") format("truetype"); /* Path for Light font */
  font-weight: 300; /* Light weight */
}

@font-face {
  font-family: "Swiss721 Roman";
  src: url("typography/Swiss721BT-Roman.ttf") format("truetype"); /* Path for Roman font */
  font-weight: 400; /* Normal weight */
}

@font-face {
  font-family: "Swiss721 BoldExtended";
  src: url("typography/Swiss721BT-BoldExtended.ttf") format("truetype"); /* Path for Roman font */
  font-weight: 700; /* Normal weight */
}

@font-face {
  font-family: "Swiss721 Bold";
  src: url("typography/Swiss721BT-Bold.ttf") format("truetype"); /* Path for Bold font */
  font-weight: 700; /* Bold weight */
}

:root {
  /* Colors */
  --color-primary: #f05454;
  --color-secondary: #090909;
  --color-background: #fffbf4;
  --color-text: #555;
  --color-text-light: #949494;
  --color-white: #fff;
  --color-text-dark: #444;

  /* Gradients */
  --gradient-red: linear-gradient(
    135deg,
    rgba(240, 84, 84, 0.9),
    rgba(138, 48, 48, 1)
  );
  --gradient-yellow: linear-gradient(135deg, #fbba17, #ee9c03);
  --gradient-blue: linear-gradient(135deg, rgba(90, 148, 196, 0.9), #287fd5);
  --gradient-purple: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.9),
    rgba(75, 0, 130, 1)
  );

  /* Typography */
  --font-primary: "Swiss721 Roman", sans-serif;
  --font-light: "Swiss721 Light", sans-serif;
  --font-bold: "Swiss721 Bold", sans-serif;
  --font-bold-extended: "Swiss721 BoldExtended", sans-serif;

  /* Font Sizes */
  --text-xs: 0.8rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-lg: 1.2rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 3.5rem;

  /* Line Heights */
  --leading-normal: 1.5;
  --leading-tight: 1.25;
  --leading-relaxed: 1.8;
}

html {
  background-color: var(--color-background);
}

body {
  font-family: var(--font-primary);
  font-weight: 525;
  overflow-x: hidden;
  line-height: var(--leading-normal);
  margin: 0;
  padding: 0;
}

/* HEADER SECTION */
header {
  height: 100px; /* Further reduced height for a smaller header */
  position: sticky;
  top: 0;
  background-color: var(--color-background);
  display: flex;
  padding: 0 3rem;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  z-index: 10; /* Make sure it is above other elements */
}

.header-title {
  font-family: var(--font-bold);
  font-weight: 700;
  font-size: clamp(
    1.5rem,
    2vw,
    2rem
  ); /* Responsive font size, clamp is used to make sure the font size is always between 1.5rem and 2rem */
  color: var(--color-primary);
}

.header-title a {
  color: inherit; /* Inherit the color from the parent */
  text-decoration: none; /* Remove underline from links */
}

/* Navigation Menu Section */
.nav-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid var(--color-primary);
  border-radius: 100px; /* Rounded corners */
  padding: 0.2rem 0.3rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 90%;
  z-index: 20; /* Make sure it is above other elements */
}

.nav-item {
  position: relative;
  color: var(--color-primary);
  font-family: var(--font-primary);
  font-size: clamp(
    0.8rem,
    1vw,
    1.2rem
  ); /* Responsive font size, clamp is used to make sure the font size is always between 0.8rem and 1.2rem */
  padding: 0.5rem clamp(0.8rem, 1vw, 1.2rem); /* Responsive padding */
  margin: 0 0.1rem;
  cursor: pointer;
  white-space: nowrap;
  border-radius: 100px; /* Rounded corners */
  transition: all 0.3s ease; /* Smooth transition for all properties */
}

/* Add styles for anchor tags within nav items */
.nav-item a {
  color: inherit; /* Inherit the color from the parent */
  text-decoration: none; /* Remove underline from links */
}

/* Add hover effect */
.nav-item:hover {
  background-color: var(--color-primary);
}

.nav-item:hover > a {
  color: var(--color-white); /* Change color to white on hover */
}

.nav-item:active {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* Submenu styles */
.submenu {
  display: block; /* Stacks items naturally */
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-background);
  border: 3px solid var(--color-primary);
  border-radius: 100px;
  padding: 0.2rem 0.3rem;
  margin-top: 0.5rem;
  white-space: nowrap; /* Keeps the submenu items in a single line */
  z-index: 30; /* Make sure it is above other elements */
  opacity: 0; /* Initially hidden */
  visibility: visible; /* Initially visible */
  transition: opacity 0.3s ease; /* Smooth transition for opacity */
  pointer-events: none; /* Prevent pointer events */
}

.nav-item:hover .submenu {
  opacity: 1;
  pointer-events: auto;
}

.submenu:hover {
  opacity: 1;
  pointer-events: auto;
}

/* Add delay when hiding submenu */
.nav-item:not(:hover) .submenu:not(:hover) {
  transition: opacity 0.3s ease 0.2s;
  pointer-events: auto;
}

.submenu-item {
  padding: 0.5rem 1rem;
  color: var(--color-primary);
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0 0.1rem;
}

.submenu-item:hover {
  background-color: var(--color-primary);
  border-radius: 100px;
}

.submenu-item:hover a {
  color: var(--color-white);
}

/* Small arrow for items with submenus */
.has-submenu::after {
  content: "▼";
  font-size: 0.7em;
  margin-left: 5px;
  display: inline-block;
  transition: transform 0.3s ease;
}

.nav-item:hover .has-submenu::after {
  transform: rotate(180deg);
}

/* Hamburger Menu */
.hamburger-menu {
  display: none;
  flex-direction: column;
  cursor: pointer;
  width: 36px;
  height: 44px;
  z-index: 1001; /* Ensure it's above the menu */
}

.bar {
  height: 4px; /* Height of each bar */
  width: 100%; /* Full width */
  background-color: var(--color-primary); /* Color of the bars */
  border-radius: 100px; /* Rounded corners */
  margin: 3px 0; /* Space between bars */
}

/* Checkbox do menu*/
.menu-toggle {
  display: none;
}

/* Hero Section */
.hero {
  text-align: center;
  position: relative;
  z-index: 2; /* Set a higher z-index for the hero section */
}

/* Moved Hero Title Up */
.hero-title h1 {
  font-family: var(--font-light); /* Use Light font for hero title */
  font-size: var(--text-3xl);
  font-weight: 400; /* Ensure light weight is applied */
  margin: 4rem auto; /* Reduced margin to bring the section closer */
  max-width: 70%; /* controls width for alignment purposes */
  text-transform: uppercase;
  line-height: 1; /* Add this line to reduce space between lines */
}

.hero-title .highlight {
  font-family: var(--font-bold-extended); /* Use Light font for hero title */
  font-weight: 700; /* Keep bold for "- Connectivity" */
  color: var(--color-secondary); /* Keep the same color */
}

/* Text Blocks */
.text-block {
  max-width: 190px;
  font-family: var(--font-primary); /* Use Roman font for text blocks */
  font-size: var(--text-base); /* Standard font size */
  font-weight: 300; /* Ensure light weight is applied */
  line-height: var(
    --leading-tight
  ); /* Increased line height for vertical stretching */
  color: var(--color-primary); /* Text color */
  position: relative; /* Change to relative positioning */
  text-align: left; /* Align all text to the left */
  z-index: 2; /* Ensure text blocks are above the bubbles */
  margin-bottom: 1rem; /* Add margin to create space between text blocks */
}

.text-block.top-left {
  margin-top: 2rem;
  left: 3rem;
  text-transform: uppercase;
}

.text-block.bottom-left {
  margin-top: 2rem;
  left: 30%;
  text-transform: uppercase;
}

.text-block.bottom-right {
  margin-top: -4rem;
  right: 0;
  margin-bottom: 1rem;
  margin-left: 60%;
  display: block;
  z-index: 2;
  text-transform: uppercase;
}

/* About Button */
.about-btn {
  margin-top: 0;
  margin-bottom: 4rem;
  padding: 0.8rem 2rem;
  font-size: var(--text-base);
  font-weight: bold;
  color: var(--color-primary);
  background: var(--color-background);
  border: 2px solid var(--color-primary);
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s;
  position: relative; /* Ensure it is positioned relative to the hero section */
  z-index: 2; /* Ensure it is above the bubbles */
}

.about-btn:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.hero a {
  text-decoration: none;
  display: inline-block;
}

/* Outputs Section */
.outputs-section {
  display: flex;
  flex-direction: column; /* Ensure vertical stacking */
  gap: 2rem;
  padding: 2rem 3rem;
  max-width: 1400px;
  margin: 0;
}

/* For INDEX CARDS - events and research */
.outputs-card {
  display: flex;
  flex-direction: row; /* Default to row layout */
  justify-content: space-between;
  align-items: stretch;
  background: var(--gradient-red);
  color: var(--color-white);
  border-radius: 20px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap; /* Allow wrapping for responsiveness */
}

.outputs-card:nth-child(2) {
  background: var(--gradient-yellow);
}

.outputs-card:nth-child(3) {
  background: var(--gradient-purple);
}

.outputs-content {
  padding: 2rem;
  flex: 1;
}

.outputs-title {
  font-size: var(--text-2xl);
  font-weight: bold;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.outputs-description,
.outputs-text {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}
.outputs-text {
  margin-bottom: 2rem;
}

.outputs-subtitle {
  font-size: var(--text-lg);
  font-weight: bold;
  margin: 1rem 0;
  text-transform: uppercase;
}

.outputs-button {
  padding: 0.8rem 1.5rem;
  font-size: var(--text-base);
  font-weight: bold;
  color: var(--color-white);
  background: transparent;
  border: 2px solid var(--color-white);
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 2;
  position: relative;
}

.outputs-button:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.outputs-image {
  flex: 0 0 50%; /* Metade da largura do container */
  height: auto; /* Ajusta automaticamente para flex containers */
  display: flex; /* Para alinhar o conteúdo interno */
  align-items: center; /* Alinha a imagem no centro verticalmente */
  justify-content: center; /* Alinha no centro horizontalmente */
}

.outputs-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ABOUT Section */
/* Add this new container style */
.content-container {
  max-width: calc(100% - 3rem);
  margin: 0 auto;
  padding: 0;
}
/* Redefining Section */
.redefining-section,
.lists {
  display: flex; /* Use flexbox for layout */
  align-items: flex-start; /* Align items at the start */
  padding: 3rem 2rem; /* Add padding for spacing */
  background-color: var(
    --color-background
  ); /* Background color for the section */
  position: relative; /* For positioning background elements */
  max-width: 1000px; /* Set a max width for the section */
  margin: 0 auto; /* Center the section */
}

.redefining-content {
  display: flex; /* Use flexbox for the title and content */
  width: 100%; /* Full width */
}

.redefining-title,
.lists h2 {
  font-size: var(--text-lg); /* Title size */
  font-weight: bold; /* Bold title */
  color: var(--color-primary); /* Title color */
  margin-right: 2rem; /* Space between title and content */
  width: 50%; /* Set width to match the content column */
}

.about-content {
  font-size: var(--text-base); /* Font size for content */
  line-height: var(--leading-relaxed); /* Line height for readability */
  color: var(--color-text); /* Text color */
  margin-bottom: 1.5rem; /* Space below paragraphs */
  width: 50%; /* Set width to match the title column */
}

.about-content p {
  margin-bottom: 2rem; /* Increase space between paragraphs */
}

/* Carousel Container */
.carousel-container {
  position: relative;
  overflow-x: auto;
  max-width: 100%;
  margin: 0;
  padding: 20px 20px; /* Match footer padding exactly */
}

.carousel {
  display: flex; /* Use flexbox for layout */
}

.carousel-slide {
  display: flex;
  margin: 0;
  padding: 16px;
}

/* Card Styles */
.card {
  flex: 0 0 45%; /* each card takes 45% of the carousel width */
  height: auto; /* width auto instead of fixed */
  min-height: 600px; /* minimum height */
  max-height: 800px; /* maximum height */
  box-sizing: border-box; /* includes padding and border in the width */
  padding: 1.5rem;
  margin: 0 10px;
  border-radius: 8px;
  background-color: #f9f9f9;
  overflow: hidden; /* overflow hidden to prevent scroll */
  color: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* shadow */
}

/* Mission and Research Cards */
.mission-research-container {
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space between the cards */
  padding: 3rem 2rem; /* Add padding for spacing */
  margin: 2rem auto; /* Center the container */
}

.mission-card {
  background: var(--gradient-blue); /* Blue gradient */
}

.research-card {
  background: var(--gradient-yellow); /* Yellow gradient */
}

.expected-outputs-card {
  background: var(--gradient-purple); /* Violet gradient */
}

.activity-plan-card {
  background: var(--gradient-red); /* Red gradient */
}

/* Titles */
.mission-title,
.research-topics-title,
.expected-outputs-title,
.activity-plan-title {
  font-size: var(--text-2xl); /* Consistent with other section titles */
  font-weight: bold;
  margin-bottom: 1rem; /* Space below the title */
  text-transform: uppercase;
}
/* Card Text */
.card p,
.card ul {
  font-size: var(--text-base); /* Consistent font size for paragraphs */
  line-height: var(--leading-relaxed); /* Line height for readability */
  color: var(--color-white); /* Text color */
  margin-bottom: 1.5rem; /* Space below paragraphs */
}
.card ul {
  list-style-type: disc; /* Use bullet points for the list */
  padding-left: 20px; /* Indent the list */
}
.card li {
  font-size: var(--text-base); /* Font size for list items */
  line-height: 1.6; /* Line height for readability */
  color: var(--color-white); /* Text color */
  margin-bottom: 0.5rem; /* Space between list items */
}

/*contact section styles */
.contact-section {
  padding: 4rem 2rem;
  background-color: var(--color-background);
  max-width: 1000px; /* Match redefining section max-width so they are aligned by the left */
  margin: 0 auto;
}

.contact-title {
  font-size: var(--text-xl);
  font-weight: bold;
  color: var(--color-primary);
  margin-bottom: 2rem;
}

.contact-text {
  color: var(--color-text);
  margin-bottom: 2rem;
  line-height: var(--leading-relaxed);
}

.contact-email {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: bold;
  display: block;
  margin-bottom: 2rem;
}

.contact-address {
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  font-style: normal; /* Remove italic style from address */
}

/* MEMBERS */

.intro-text {
  margin: 0 auto 3rem auto;
  text-align: center;
  font-size: var(--text-base);
  color: var(--color-text);
  padding: 0 2rem;
}
.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3rem;
  padding: 2rem;
  margin: 0 auto;
}

.member-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative; /* Add this for absolute positioning of role */
}

.member-image {
  width: 280px;
  height: 280px;
  background-color: #f0f0f0;
  border-radius: 10px;
  margin-bottom: 0.5rem; /* Reduced margin */
  position: relative; /* For role positioning */
}

.member-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.member-role {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: var(--text-xs);
  color: var(--color-white);
  background-color: var(--color-primary);
  padding: 0.3rem 0.6rem;
  border-radius: 3px;
  font-weight: bold;
  margin: 0; /* Remove margin */
  z-index: 1; /* Ensure it's above the image */
}

.member-card h3 {
  font-size: var(--text-base);
  color: var(--color-text);
  margin: 0.5rem 0; /* Add some margin */
  max-width: 280px;
  font-weight: normal;
}

/*listas*/
.lists ul {
  width: 50%;
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}

.lists ul li {
  font-size: var(--text-base);
  color: var(--color-text);
  text-align: left;
  padding-left: 0; /* Remove left padding since we removed the bullet */
  margin-bottom: 0.5rem;
  transition: transform 0.3s ease, color 0.3s ease;
  line-height: var(--leading-relaxed);
}

/* Update hover effect - remove the bullet point related styles */
.lists ul li:hover {
  transform: translateX(10px);
  color: var(--color-primary);
}

/* Remove the bullet point styles */
.lists ul li::before {
  content: none;
}

.lists p {
  font-size: var(--text-base); /* Font size for content */
  line-height: var(--leading-relaxed); /* Line height for readability */
  color: var(--color-text); /* Text color */
}

/* Listas da secção publications-section */
.publications-section {
  padding: 0 3rem; /* Add horizontal padding */
}
/* Add two-column layout for articles in proceedings */
.publications-section .publications-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates two equal columns */
  gap: 2rem; /* Space between columns and rows */
}

.publications-section ul {
  list-style: none; /* Remove default markers */
  padding-left: 0;
  margin-bottom: 20px;
}

.publications-section ul li {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  position: relative;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--color-primary); /* Highlight bar on the left */
  background-color: var(--color-background);
  transition: background-color 0.3s ease, transform 0.2s ease,
    box-shadow 0.3s ease;
  padding: 15px; /* Internal padding for the text */
  border-radius: 10px; /* Rounded corners to smooth */
}

/* Hover effect on list items */
.publications-section ul li:hover {
  background: var(--gradient-red); /* the whole card turns coral */
  color: var(--color-white);
  transform: translateX(5px); /* Small movement for interactivity */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Smooth shadow to highlight the item */
}

/* titles */
.publications-section h2 {
  font-size: var(--text-2xl);
  font-weight: bold;
  margin-bottom: 1rem;
  text-transform: uppercase;
}
.publications-section h3 {
  font-size: var(--text-lg);
  color: var(--color-text-dark);
  margin-bottom: 15px;
  position: relative;
  transition: color 0.3s ease, transform 0.2s ease;
}
/* Center the button in publications section */
.publications-section .about-btn {
  display: block;
  margin: 2rem auto;
}

/* Remove underline from button link */
.publications-section a {
  text-decoration: none;
}

.development-note {
  font-size: var(--text-sm);
  color: var(--color-text-light);
  justify-items: center;
  text-align: center;
}

/* Publications Summary Table */
.summary-table {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Four equal columns */
  margin: 0 auto; /* Margin for spacing */
  max-width: 1000px;
  margin-bottom: 6rem;
  position: relative; /* Add relative positioning */
  z-index: 2; /* Higher z-index than background-section */
}

.summary-cell {
  background-color: var(--color-background); /* Background color */
  border: 2px solid var(--color-text);
  padding: 2rem; /* Padding inside cells */
  text-align: center; /* Center text */
  transition: background-color 0.3s ease; /* Smooth transition */
  color: var(--color-text);
  position: relative; /* Add relative positioning */
  z-index: 2; /* Higher z-index than background-section */
}

.summary-cell h3 {
  font-size: var(--text-3xl);
}

/* Apply rounded corners to the first and last cells */
.summary-cell:first-child {
  border-top-left-radius: 10px; /* Top left corner */
  border-bottom-left-radius: 10px; /* Bottom left corner */
}

.summary-cell:last-child {
  border-top-right-radius: 10px; /* Top right corner */
  border-bottom-right-radius: 10px; /* Bottom right corner */
}

.summary-cell:hover {
  background: var(--gradient-red); /* Change to gradient on hover */
  color: var(--color-white);
}

/*Different gradients for each cell on hover */
.summary-cell:nth-child(2):hover {
  background: var(--gradient-yellow);
}

.summary-cell:nth-child(3):hover {
  background: var(--gradient-blue);
}

.summary-cell:nth-child(4):hover {
  background: var(--gradient-purple);
}
/* FOOTER Styles */

footer {
  padding: 20px; /* Padding around the footer */
}

.footer-container {
  display: grid; /* Use grid layout for the footer */
  grid-template-columns: repeat(
    9,
    1fr
  ); /* Change to 9 columns for larger screens */
  gap: 5px; /* Reduced space between logos */
  justify-items: center; /* Center logos within their grid cells */
  padding: 0.5rem; /* Reduced padding for a smaller footer */
}

.footer-logo {
  position: relative;
  overflow: hidden; /* Ensure the hover effect stays within the logo bounds */
  transition: color 0.3s ease; /* Smooth transition for text color */
}

.footer-logo::before {
  content: "";
  position: absolute;
  top: 100%; /* Start below the logo */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent; /* Initial background color */
  transition: top 0.3s ease; /* Animate the top position */
  z-index: 0; /* Place behind the logo */
}

.footer-logo:hover::before {
  top: 0; /* Move the background color up to cover the logo */
}

/* Different colors for each logo */
.footer-logo:nth-child(1)::before {
  background-color: #f29b9b;
} /* Red */
.footer-logo:nth-child(2)::before {
  background-color: rgba(255, 182, 7, 0.7);
} /* Yellow */
.footer-logo:nth-child(3)::before {
  background-color: rgba(92, 217, 242, 0.7);
} /* Dark Red */
.footer-logo:nth-child(4)::before {
  background-color: rgba(124, 184, 247, 0.7);
} /* Blue */
.footer-logo:nth-child(5)::before {
  background-color: rgba(156, 242, 186, 0.7);
} /* Green */
.footer-logo:nth-child(6)::before {
  background-color: rgba(244, 154, 244, 0.7);
} /* Magenta */
.footer-logo:nth-child(7)::before {
  background-color: rgba(0, 255, 255, 0.7);
} /* Cyan */
.footer-logo:nth-child(8)::before {
  background-color: rgba(157, 237, 127, 0.7);
} /* Orange */
.footer-logo:nth-child(9)::before {
  background-color: rgba(246, 208, 142, 0.7);
} /* Purple */

.footer-logo img {
  position: relative; /* Ensure the image is above the background */
  z-index: 1; /* Place above the background */
  transition: opacity 0.3s ease; /* Smooth transition for image opacity */
  width: 100%; /* Scale the image to fit the width of the footer logo*/
  height: auto; /* Maintain aspect ratio */
}

.footer-logo:hover img {
  opacity: 0.8; /* Slightly fade the logo image on hover */
}

/* footer text */
.footer-text {
  text-align: center;
  color: var(--color-text-light);
  font-size: var(--text-sm);
  padding: 1rem 2rem;
  margin: 0 auto;
}

/* Media queries */

/* Tamanho mobile */
@media (max-width: 768px) {
  header {
    padding: 0 2rem;
  }
  .header-title {
    font-size: var(--text-2xl);
  }
  /* Menu de navegação */
  .nav-menu {
    display: none;
    flex-direction: column;
    position: fixed; /* Change to fixed */
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background-color: var(--color-background);
    border: 3px solid var(--color-primary);
    border-radius: 10px;
    padding: 1rem;
    z-index: 1000;
  }

  .hamburger-menu {
    display: flex; /* Display the hamburger menu */
  }

  .nav-item {
    margin: 0.5rem 0;
    width: 100%;
    text-align: center;
    font: var(--text-base);
  }

  /* Show menu when checkbox is checked */
  #menu-toggle:checked ~ .nav-menu {
    display: flex;
  }
  /* Modify submenu behavior for mobile */
  .submenu {
    position: static; /* Position within the flow instead of absolute */
    transform: none;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.3s ease; /* Smooth transition for max-height */
    pointer-events: auto; /* Allow pointer events */
  }

  /* Style submenu items for mobile */
  .submenu-item {
    padding: 0.5rem;
    margin: 0;
    font-size: 0.9em;
  }

  /* Show submenu when parent is clicked */
  .nav-item.active .submenu {
    max-height: 200px; /* Adjust based on your content */
    border-top: 1px solid var(--color-primary);
    margin-top: 0.5rem;
  }

  /* Rotate arrow when submenu is open */
  .nav-item.active .has-submenu::after {
    transform: rotate(180deg);
  }

  /* Adjust images to be above text */
  .outputs-section {
    padding: 2rem 2rem;
    margin-top: 2rem;
  }
  .outputs-card {
    flex-direction: column; /* Stack image above text */
  }
  .outputs-image {
    order: -1; /* Move image above text */
    flex: 0 0 100%; /* Full width for images */
  }
  .outputs-content {
    flex: 1; /* Allow content to take remaining space */
  }

  .outputs-description,
  .outputs-text {
    font-size: var(--text-lg);
  }
  /* Base styles for all text blocks */
  .text-block {
    max-width: 70% !important; /* Set maximum width to 70% of the parent */
    margin: 8rem 2rem !important; /* Add vertical margin of 8rem and horizontal margin of 2rem */
    position: static; /* Set position to static for normal flow */
    text-align: left; /* Align text to the left */
    font-size: var(--text-xl); /* Increased font size */
  }

  /* Margin for the top-left text block */
  .text-block.top-left {
    margin-top: 2rem !important; /* Add top margin of 2rem */
  }

  .text-block.bottom-right {
    margin-bottom: 0 !important; /* Reduced from default margin */
  }

  /* Top part of HOME*/
  .hero {
    padding: 2rem 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* Title disappears when it shrinks*/
  .hero-title h1 {
    display: none; /* Hide the hero title on mobile */
  }
  /* ABOUT button changes size */
  .hero .about-btn {
    width: fit-content; /* Force button to fit content */
    padding: 0.8rem 3rem; /* Wider padding */
    margin: 2rem auto; /* Center the button */
    display: block; /* Ensure block display */
  }

  /* Media of ABOUT page */
  .content-container {
    max-width: 100%;
  }
  .lists {
    flex-direction: column;
  }
  .redefining-section,
  .contact-section,
  .lists {
    padding: 2rem 0; /* Reduced padding */
    width: auto; /* Changed from 100% */
    max-width: 100%; /* Ensure it doesn't overflow */
    overflow-x: hidden; /* Prevent horizontal scroll */
    margin: 0 2rem;
  }
  .redefining-content {
    flex-direction: column;
    width: 100%; /* Changed from 85vw */
    margin: 0; /* Removed margin that was causing overflow */
  }
  .redefining-title,
  .contact-title,
  .lists h2 {
    width: 100%;
    margin-bottom: 2rem;
    text-align: left;
    font-size: var(--text-xl); /* Increased*/
  }

  .about-content,
  .contact-text {
    width: 100%;
    font-size: var(--text-lg); /* Increased */
  }
  .lists ul {
    width: 100%;
  }
  .lists ul li,
  .lists p {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
  }
  .about-content p {
    margin-bottom: 1.5rem;
    line-height: var(
      --leading-normal
    ); /* Adjusted line height for better readability */
  }
  .contact-email,
  .contact-address {
    font-size: var(--text-lg);
  }

  /* Media CAROUSEL */
  .carousel-container {
    overflow: hidden; /* Hide overflow */
    width: 100%; /* Full width */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
  }

  .carousel {
    display: flex; /* Display the carousel */
    width: 100%; /* Full width */
    overflow-x: scroll; /* Allow horizontal scrolling */
    scroll-snap-type: x mandatory; /* makes the cards stop at specific points, x axis */
    scroll-behavior: smooth; /* Smooth scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on touch devices */
    padding: 0; /* Remove padding */
  }

  .carousel-slide {
    display: flex; /* Display the carousel */
    width: 100%; /* Full width */
    padding: 0; /* Remove padding */
    margin: 0 1rem; /* Add margin */
    box-sizing: border-box; /* Include padding and border in the width */
    gap: 1rem; /* Add gap between cards */
  }

  .card {
    flex: 0 0 85vw; /* Flex grow, shrink, basis */
    width: 85vw; /* Width of the card */
    margin: 0; /* Remove margin */
    padding: 1.5rem; /* Add padding */
    scroll-snap-align: center; /* Snap to center */
    scroll-snap-stop: always; /* Stop at specific points */
    box-sizing: border-box; /* Include padding and border in the width */
  }

  /* Hide scrollbar */
  .carousel::-webkit-scrollbar {
    display: none;
  }

  .mobile-hidden {
    display: none;
  }

  /* Adjust spacing for mobile list items */
  .card li {
    margin-bottom: 1rem;
  }
  .card p {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
  }
  /* Make strong text more prominent on mobile */
  .card li strong {
    display: block;
    margin-bottom: 0.5rem;
    font-size: var(--text-lg);
  }
  /* Posição e estilo dos pontos */
  .carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
  }

  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #9d9d9d;
    transition: background-color 0.3s;
  }

  .dot.active {
    background-color: var(--color-white); /* Active dot color */
  }

  /* MEMBERS */
  .intro-text {
    font-size: var(--text-lg);
  }
  .members-grid {
    grid-template-columns: repeat(
      auto-fit,
      minmax(250px, 1fr)
    ); /* Auto-fit columns, minimum width 250px, maximum width 1fr */
    gap: 3rem;
    padding: 1.5rem;
  }

  .member-image {
    width: 220px;
    height: 220px;
  }

  .member-card h3 {
    font-size: var(--text-base);
    max-width: 220px;
  }

  .member-role {
    font-size: var(--text-sm);
  }

  .publications-section .publications-list {
    grid-template-columns: 1fr; /* Single column on mobile */
  }
  .publications-section {
    padding: 0 2rem;
  }
  .publications-section ul li {
    font-size: var(--text-lg);
  }
  .publications-section h3 {
    font-size: var(--text-xl);
  }

  .summary-table {
    grid-template-columns: repeat(2, 1fr); /* Change to 2 columns for mobile */
    margin: 0 2rem 4rem 2rem; /* Add 2rem margin left and right */
  }
  .summary-cell {
    padding: 1rem;
    border: 0;
    border-radius: 0;
    flex: 1; /* Ensure all cells have the same size */
  }
  /* Apply rounded corners to the first and last cells */
  .summary-cell:nth-child(1) {
    border-top-left-radius: 10px; /* Top left corner */
    border-bottom-left-radius: 0; /* Bottom left corner */
    background: var(--gradient-red);
    color: var(--color-white);
  }
  .summary-cell:nth-child(2) {
    border-top-right-radius: 10px; /* Top right corner */
    background: var(--gradient-yellow);
    color: var(--color-white);
  }
  .summary-cell:nth-child(3) {
    border-bottom-left-radius: 10px; /* Bottom left corner */
    background: var(--gradient-blue);
    color: var(--color-white);
  }
  .summary-cell:nth-child(4) {
    border-bottom-right-radius: 10px; /* Bottom right corner */
    border-top-right-radius: 0; /* Top right corner */
    background: var(--gradient-purple);
    color: var(--color-white);
  }

  /* Collapsible sections styles - Only for credits page on mobile */

  .credits-page .lists {
    margin-bottom: 1rem;
  }

  .credits-page .lists h2 {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between; /* Space between title and arrow */
    padding: 1rem 0;
  }

  /* Arrow indicator */
  .credits-page .lists h2::after {
    content: "▼"; /* Arrow indicator */
    font-size: 0.8em; /* Font size */
    transition: transform 0.3s ease; /* Smooth transition for transform */
  }

  /* Rotate arrow when section is open */
  .credits-page .lists.active h2::after {
    transform: rotate(180deg);
  }

  /* Hide content by default */
  .credits-page .lists ul,
  .credits-page .lists p {
    max-height: 0; /* Hide content by default */
    overflow: hidden; /* Hide overflow */
    transition: max-height 0.3s ease-out; /* Smooth transition for max-height */
    margin: 0; /* Remove margin */
    padding: 0; /* Remove padding */
  }

  /* Show content when section is active */
  .credits-page .lists.active ul,
  .credits-page .lists.active p {
    max-height: 1000px; /* Large enough to contain content */
    transition: max-height 0.3s ease-in; /* Smooth transition for max-height */
  }

  /* Media FOOTER */

  .footer-container {
    grid-template-columns: repeat(3, 1fr); /* 3 columns for mobile */
    gap: 10px; /* Space between logos */
    justify-items: center; /* Center logos within their grid cells */
    padding: 1rem; /* Add padding for spacing */
  }

  .footer-logo {
    width: 100%; /* Allow logos to take full width of the grid cell */
    height: auto; /* Maintain aspect ratio */
    padding: 0; /* Remove padding to ensure logos fit well */
  }

  .footer-text {
    font-size: var(--text-sm);
    padding: 1rem;
  }

  .about-btn {
    font-size: var(--text-xl);
    padding: 1.2rem 4rem;
    width: 80%; /* Makes button wider on mobile */
    max-width: 300px; /* Maximum width to maintain readability */
    margin: 2rem auto;
    border-width: 3px; /* Makes border more visible */
  }

  /* Reset hover styles for mobile */
  .nav-item:hover {
    background-color: transparent;
  }

  .nav-item:hover > a {
    color: var(--color-primary);
  }

  /* Add styles for redefining section */
  .credits-page .redefining-section {
    margin-bottom: 1rem;
  }

  .credits-page .redefining-section .redefining-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    width: 100%;
  }

  /* Arrow indicator for redefining section */
  .credits-page .redefining-section .redefining-title::after {
    content: "▼";
    font-size: 0.8em;
    transition: transform 0.3s ease;
  }

  /* Rotate arrow when section is open */
  .credits-page .redefining-section.active .redefining-title::after {
    transform: rotate(180deg);
  }

  /* Hide content by default */
  .credits-page .redefining-section .about-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    margin: 0;
    padding: 0;
  }

  /* Show content when section is active */
  .credits-page .redefining-section.active .about-content {
    max-height: 1000px;
    transition: max-height 0.3s ease-in;
  }

  /* Add this inside your existing mobile media query (@media (max-width: 768px)) */
  .credits-page .lists ul li strong {
    display: block;
    margin-bottom: 0.5rem;
  }

  /* Adjust spacing for list items in credits page */
  .credits-page .lists ul li {
    margin-bottom: 1.5rem; /* Add more space between items */
  }
}

/* Scroll Arrows */
.scroll-arrows {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 1000;
}

/* Common styles for both arrows */
.scroll-arrow {
  width: 40px;
  height: 40px;
  background-color: var(--color-background);
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.scroll-arrow:hover {
  transform: scale(1.1);
  background-color: var(--color-primary);
}

/* Arrow icons */
.scroll-arrow i {
  color: var(--color-primary);
  font-size: 1.5rem;
}

/* Change icon color on hover */
.scroll-arrow:hover i {
  color: var(--color-white);
}

/* Hide scroll-to-top initially */
.scroll-top {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.scroll-top.visible {
  opacity: 1;
  visibility: visible;
}

/* Media query for mobile - hide scroll arrows */
@media (max-width: 768px) {
  .scroll-arrows {
    display: none; /* Hide completely on mobile */
  }
}

/* Estilos para as linhas do telemovel */
.mobile-svg {
  display: none; /* Hide by default */
}

@media (max-width: 768px) {
  /* Adjust the max-width as needed */
  .mobile-svg {
    display: block; /* Show on mobile */
    margin: 0 auto; /* Center the SVG if needed */
  }
}

/* Hide on desktop */
.mobile-svg {
  display: none;
}

/* Show on svg lines on mobile devices */
@media screen and (max-width: 768px) {
  .mobile-svg {
    display: block !important;
    width: auto;
    max-height: 300px;
    margin: -155px 0 -150px 0;
  }
}

/* SVG lines for mobile - variation for other pages, outside index */
.mobile-svg-2 {
  display: none; /* Hide by default */
}

@media (max-width: 768px) {
  /* Adjust the max-width as needed */
  .mobile-svg-2 {
    display: block; /* Show on mobile */
    margin: 0 auto; /* Center the SVG if needed */
  }
}

/* Hide on desktop */
.mobile-svg-2 {
  display: none;
}

/* Show on svg lines on mobile devices */
@media screen and (max-width: 768px) {
  .mobile-svg-2 {
    display: block;
    width: auto;
    max-height: 300px;
    margin: -155px 0 -70px 0;
  }
}