body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  scroll-snap-type: y mandatory; /* Enable scroll snapping for the body */
  overflow-y: scroll;
}

.page-container {
  scroll-snap-type: y mandatory; /* Enable scroll snapping for the container */
}

header {
  background-color: transparent;
  color: black;
  padding: 20px 0;
  text-align: center;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  transition: background-color 0.3s;
}

.logo-wrapper {
  position: absolute;
  left: 10px; /* Adjust the left position as needed */
  z-index: 1; /* Ensure the logo is above the video */
}

.logo {
  width: 200px; /* Adjust the width of the logo as needed */
  height: auto; /* Maintain aspect ratio */
  transition: width 0.3s ease, top 0.3s ease; /* Smooth transition for changes */
}

.intro {
  background-color: black;
  color: white;
  text-align: center;
  padding: 2em;
  height: 100vh; /* Full viewport height */
  scroll-snap-align: start; /* Snap at the start */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.intro h2 {
  margin-top: 0;
  font-size: clamp(
    1.5rem,
    4vw,
    3rem
  ); /* Responsive font size with min and max */
}

.intro p {
  font-size: clamp(
    1rem,
    2vw,
    1.5rem
  ); /* Responsive font size with min and max */
  max-width: 800px; /* Optional: max width to improve readability on large screens */
  margin: 0 auto; /* Center align text */
}

.container {
  display: flex;
  width: 100%;
  height: 100vh; /* Full viewport height for each section */
  scroll-snap-align: start; /* Snap at the start */
}

.block {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: flex 0.6s ease; /* Smoother transition for flex */
  background: #f0f0f0;
  border: 1px solid #ddd;
  text-align: center;
  padding: 1%;
}

#block1 {
  background-color: white; /* Light red background for Block 1 */
}

#block2 {
  background-color: white; /* Light green background for Block 2 */
}

#block3 {
  background-color: white; /* Light blue background for Block 3 */
}

#block4 {
  background-color: white; /* Light yellow background for Block 4 */
}

.block h2 {
  margin: 5% 0 0 0;
  padding: 0;
  font-size: 1.5vw; /* Responsive font size */
  transition: font-size 0.6s ease; /* Add transition for font size */
}

.circle {
  width: 25%; /* Responsive width */
  padding-top: 25%; /* To maintain aspect ratio */
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 5%;
  background-color: #fff; /* Ensures visibility if image does not load */
  position: relative;
  transition: width 0.6s ease, padding-top 0.6s ease; /* Add transition for circle size */
}

.circle img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease; /* Add transition for image transform */
}

.additional-text {
  opacity: 0;
  bottom: 10px;
  left: 10px;
  right: 10px;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  font-size: 1.2vw; /* Responsive font size */
  transition: opacity 0.6s ease, font-size 0.6s ease; /* Smoother transition for text opacity and size */
}

.block:hover {
  flex: 2;
  background-image: url("./media/planeAirCat.jpg");
}

.block:hover .additional-text {
  display: block;
  opacity: 1;
}

.block:hover .circle {
  width: 30%; /* Increase width on hover */
  padding-top: 30%; /* Adjust padding-top to maintain aspect ratio */
}

.block:hover .circle img {
  transform: scale(1.1); /* Slightly scale up the image on hover */
}

.block:hover h2 {
  font-size: 2vw; /* Increase font size on hover */
}

.email-icon {
  color: #000;
  font-size: 1.5rem;
  transition: color 0.3s ease;
}

.email-icon:hover {
  color: #a7c6e7; /* Change to your preferred hover color */
}