/* General Styles */

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

html, body, h1, img {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

p {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 8.5vw;
  font-size: calc(1.5vw + 1.5vh);
  max-width: 100%;
}

/* Top Navigation Bar */
.top-nav {
  display: flex;
  white-space: nowrap;
  justify-content: space-around;
  align-items: center;
  height: 4vh;
  font-weight: bold;
  font-size: calc(1.8vw + 1.5vh);
  background-color: #296746;
  padding: 0 1rem;
}

.burger-menu {
  font-size: calc(1.8vw + 1.6vh);
  font-weight: bold;
  color: white;
  cursor: pointer;
}

.menu-content {
  display: none;
  position: absolute;
  top: calc(100vh / 18);
  left: 0;
  width: 33.33%;
  height: calc(100vh - calc(100vh / 18));
  background-color: #444;
  color: white;
  padding: 10px;
  z-index: 1000; /* Ensure this is higher than any other element on the page */
}

.menu-content.active {
  display: block;
}

.menu-right a {
  margin-left: 1rem;
  color: white;
  text-decoration: none;
}

/* Hero Section */
.hero {
  position: relative;
  height: 30vh;
}

.hero-image {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --->>> Hero band second version */

.hero-band {
  position: absolute;
  padding: 8px 12px 0 10px; /* Top Right Bottom Left */
  overflow-wrap: break-word; /* Breaks long words and keeps text inside the div */
  margin-top: 0;
  margin-bottom: 0;
  word-wrap: break-word; /* For older browsers */
  word-break: break-word;
  overflow: hidden;
  right: 0;
  top: 69%; /* Align with the hero button's vertical center */
  transform: translateY(-50%); /* Adjust to make it center perfectly */
  width: 70%;
  height: 27%;
  background-color: hwb(0deg 100% 0% / 80%); /* Semi-transparent background */
  z-index: 1; /* Band is behind the button */
  border-radius: 8px; /* Optional: rounding the corners */
}

#hero-message {
  text-align: right; /* Aligns the paragraph text to the left */
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 8.5vw;
  font-size: calc(1.6vw + 1.5vh);
  max-width: 100%;
}

#author {
  margin: 0.5vh 0 3vh 8.5vw; /* Top Right Bottom Left */
  font-size: calc(1.2vw + 1.3vh);
  text-indent: 7vw;
  max-width: 100%;
}

/* --->>> end of Hero band */

.hero-button {
  position: absolute;
  left: 4.5%;
  top: 60%;
  transform: translateY(-50%);
  width: 33vw;
  height: 33vw;
  background: url('../images/Francesco2.png') no-repeat center center;
  background-size: cover;
  cursor:pointer;
  border-radius: 50%;
  border: none;
  color: white;
  z-index: 2;
  font-size: 1rem;
}

/* Styling for Menu Band div in replacement of the hero section */
.green-top {
  width: 100%;
  height: 8vw;
  margin: 0;
  padding: 0;
  background-color: #2b6848;
  display: none;
}

.tile-content {
  display: none;
}

/* Hide hero section and show green-top div */

.show-green-top {
  width: 100%;
  height: 8vw;
  margin: 0;
  padding: 0;
  background-color: #2b6848;
  display: block;
}

.show-tile-content {
  display: block;
}

.hide-hero {
  display: none;
}

.hide-tile-content {
  display: none;
}

/* Horizontal Menu */

.hide-horizontal-menu {
  display: none;
}

.horizontal-menu {
  margin: 0;
  padding: 0.2rem 0 0 ;
  display: flex;
  justify-content: space-around;
  height: 4vh;
  font-weight: bold;
  font-size: calc(1.8vw + 1.5vh);
  background-color: 0;
}

.horizontal-menu a {
  color: hwb(0deg 0% 100%);
  text-decoration: none;
}

/* Main Content Area */
.main-content {
  overflow-y: scroll; /* ####@@@@####@@@ this is a test */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
  margin: 0;
  padding: 0 5.7vw 0 0; /* Top Right Bottom Left */
  max-height: 80vh; /* Make sure the container doesn't exceed the viewport height */
}

/* Scrollable Grid */

.scroll-container {
  overflow-x: scroll; /* Keeps it scrollable */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
  margin-top: 0;
  margin-bottom: 0;
  padding: 1rem 0;
  display: flex;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth; /* Smooth scrolling */
}

.scroll-container::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

.tile-page {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1rem;
  scroll-snap-align: center;
  width: 100vw;
  padding: 0 1rem 0 1.4rem; /* Top Right Bottom Left */
  box-sizing: border-box;
}

.tile {
  width: 40vw;
  height: 40vw;
  background-color: #185235;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 2px 4px hwb(0deg 0% 100% / 50%);
}

/* Tiles background pictures setup */

#ansia {
  background: url('../images/vectors/Healthy_Mind2.svg') no-repeat center center;
  background-size: 95%;
  background-position: center;
  position: relative;
  background-color: #185235;
}

#panico {
  background: url('../images/vectors/Sei_al_Sicuro.svg') no-repeat center center;
  background-size: 95%;
  background-position: center;
  position: relative;
  background-color: #185235;
}

#problemi-coppia {
  background: url('../images/vectors/Couple_Issues.svg') no-repeat center center;
  background-size: 95%;
  background-position: center;
  position: relative;
  background-color: #185235;
}

#motivazione  {
  background: url('../images/vectors/Motivation.svg') no-repeat center center;
  background-size: 95%;
  background-position: center;
  position: relative;
  background-color: #185235;
}

#depressione {
  background: url('../images/vectors/Happyness.svg') no-repeat center center;
  background-size: 95%;
  background-position: center;
  position: relative;
  background-color: #185235;
}

#dipendenze {
  background: url('../images/vectors/Relational_Freedom.svg') no-repeat center center;
  background-size: 90%;
  background-position: center;
  position: relative;
  background-color: #185235;
}

#crescita {
  background: url('../images/vectors/Crescita.svg') no-repeat center center;
  background-size: 90%;
  background-position: center;
  position: relative;
  background-color: #185235;
}

#conflitti {
  background: url('../images/vectors/Getting_Along.svg') no-repeat center center;
  background-size: 90%;
  background-position: center;
  position: relative;
  background-color: #185235;
}

#stress-lavoro {
  background: url('../images/vectors/Relax_in_Nature.svg') no-repeat center center;
  background-size: 90%;
  background-position: center;
  position: relative;
  background-color: #185235;
}

#tempo {
  background: url('../images/vectors/Carefree.svg') no-repeat center center;
  background-size: 90%;
  background-position: center;
  position: relative;
  background-color: #185235;
}

#limiti {
  background: url('../images/vectors/Limitless.svg') no-repeat center center;
  background-size: 90%;
  background-position: center;
  position: relative;
  background-color: #185235;
}

#sabotaggio {
  background: url('../images/vectors/Excelling.svg') no-repeat center center;
  background-size: 90%;
  background-position: center;
  position: relative;
  background-color: #185235;
}

/* Scroll Indicator */
.scroll-indicator {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}

.scroll-indicator .dot {
  height: 10px;
  width: 10px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.scroll-indicator .dot.active {
  background-color: #185235;
}

/* Footer */
footer {
  display: flex;
  justify-content: space-around;
  margin-top: auto;
  align-items: center;
  height: 4vh;
  font-weight: bold;
  background-color: #47916A;
  color: white;
  padding: 0; /* Top Right Bottom Left */
  z-index: 1000; /* Keeps it above the main content */
}

footer a {
  margin: 0 1rem; /* Top Right Bottom Left */
  color: white;
  text-decoration: none;
}

.back-home {
  font-size: 2rem;
  cursor: pointer;
}

.hidden {
  display: none;
}

/* ################### External sources styling section ############### */

.map-container {
  width: 100%;   /* Make the map container take up the full width of its parent */
  height: 0;
  padding-bottom: 56.25%;  /* Maintain a 16:9 aspect ratio (56.25% = 9 / 16 * 100) */
  position: relative;
}

iframe {
  margin: 10px 0 20px; /* Top Right Bottom Left */
  padding: 10px;
  display: flex;
  width: 90vw;  /* Make the iframe take up the full container size */
  height: 30vh;
  }

/* ----> whatsapp button container section ---> */

.container {
  margin: 0;
  padding-bottom: 0;
  height: 200px;
  position: relative;
}

.whatsapp-center {
  margin: 0;
  padding-top: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.whatsapp {
  /* nothing here yet */
}

/* ############### About.html content ############# */

.main-content-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh; /* Full viewport height */

}

.profile-pic {
  margin: 10vh 35vw 0;
  padding: 0;
  transform: translateY(-15%);
  width: 33vw;
  height: 33vw;
  background: url('../images/Francesco2.png') no-repeat center center;
  background-size: cover;
  cursor: pointer;
  border-radius: 50%;
  border: none;
  color: white;
  z-index: 2;
  font-size: 1rem;
}

.topic {
  margin: 0 16vw 6vh; /* Top Right Bottom Left */
  padding-top: 0;
  position: relative;
  text-align: center;
  white-space: nowrap;
}

#cv {
  position: relative;
  margin: 0 2vw 0 0; /* Top Right Bottom Left */
  padding-bottom: 0;
  overflow-wrap: break-word; /* Breaks long words and keeps text inside the div */
  justify-content: center;
  max-height: 100vh;
 }