@keyframes fadeShadow {
  from {
    filter: url('#archShadow');
  }
  to {
    filter: none;
  }
}

.fade-shadow {
  animation: fadeShadow 0.3s forwards; /* forwards to retain the final state after animation ends */
}


@font-face { font-family: "MyCustomFontText"; src: url("../subTitle.otf"); }

@font-face { font-family: "MyCustomFont"; src: url("../Title.otf"); }

body, html {
  height: 100%; /* Full viewport height */
  width: 100%; /* Full viewport width */
  margin: 0;
  padding: 0;
  background-color: #e8dab9; /* Background color */
}

body {
  font-family: 'Playfair Display', serif;
}

.top-left-arch {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99; /* Ensure this is higher than other elements */
}

#container-fluid {
  position: relative; /* For absolute positioning of children */
  min-height: 100vh; /* Minimum height is full viewport height */
}

.svg_test {
  position: absolute; /* Keeps the SVG at the top */
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  height: 100vh; /* Height adjusted to viewport height */
}

.main-title {
  mix-blend-mode: difference;
  position: absolute; /* Position it absolutely within the container */
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Center the div exactly */
  z-index: 15; /* Ensure it's above the squares and SVG but below the arch */
  text-align: center;
  font-weight: 500;
}

.main-title h1 {
  mix-blend-mode: difference;
  font-family: 'MyCustomFont', sans-serif; /* Use the custom font */
  color: white; /* Adjust color as needed */
  font-weight: 500;
  font-size: 8.5vw; /* Adjust size as needed */
  line-height: 0.6; /* Reduce line height for closer lines */
  position: relative;
  margin: 0; /* Remove default margins */
}

.first-letter {
  font-size: 20vw; /* Make the "G" larger */
  vertical-align: middle; /* Align the "G" with the middle of the text line */
  position: relative;
}

.first-name {
  position: relative;
  left: -11vw; /* Move the first name to the left */
  display: inline-block;
}

.second-name {
  display: block; /* Ensure the last name is on a new line */
  position: relative;
  left: 11vw; /* Move the second name to the right */
  margin-top: -1vw; /* Adjust margin to bring lines closer */
}





.menu-icon {
  position: absolute;
  top: 20px; /* Adjust as needed */
  left: 20px; /* Adjust as needed */
  width: 24px; /* Adjust width as needed */
  height: 24px; /* Adjust height as needed */
  fill: #2d2525; /* Adjust fill color */
  cursor: pointer; /* Add pointer cursor for interaction */
  z-index: 100;
  overflow-x: hidden;
}

.content {
  position: relative; /* Position relative to flow */
  z-index: 20; /* Above the SVG */
  background: white; /* Visible above the SVG */
  padding: 20px;
}

.scrollable-content {
  padding-top: 100vh; /* Pushes the scrollable content below the full-screen SVG */
}



.container-fluid.second_section {
  position: relative;
  width: 100%; /* Ensures the section takes full width */
  background-color: #2d2525; /* Light grey background */
  overflow-x: hidden;
}

.yeet {
  display: block; /* Removes bottom space/gap */
  width: 100vw;    /* Sets SVG width to 100% of the viewport width */
  height: auto;    /* Maintains the aspect ratio */
}


.preview_title {
  color: #e8dab9;
  font-weight: 10;
  font-size: 5vw; /* Adjust size as needed */
  font-family: 'MyCustomFontText', sans-serif; /* Use the custom font */
  text-align: center; /* Center text */
}

.card_title_one {
  color: #161212;
  font-weight: 10;
  font-size: 6vw; /* Adjust size as needed */
  font-family: 'MyCustomFont', sans-serif; /* Use the custom font */
  text-align: center; /* Center text */
  text-decoration: none;
}

.card_title_two {
  color: #e8dab9;
  font-weight: 10;
  font-size: 6vw; /* Adjust size as needed */
  font-family: 'MyCustomFont', sans-serif; /* Use the custom font */
  text-align: center; /* Center text */
}


.card_section {
  display: flex;
  justify-content: flex-start; /* Aligns card to the left */
  margin-bottom: 60px; /* Space between sections */
  background-color: #231d1d;
}

.card_section:nth-child(even) {
  justify-content: flex-end; /* Aligns card to the right */
}

.preview_card {
  display: flex;
  align-items: center; /* Align items vertically centered */
  background-color: #e8dab9; /* Adjust background color as needed */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  padding: 20px;
  transition: transform 1s ease-out; /* Smooth transition for transform scaling */
  height: 30vh; /* Increased height */
  width: 50vw; /* Increased width */
}

.card_content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.responsive_img {
  width: auto;
  height: 100%;
  max-width: 60%; /* Increase the max-width to make the image larger */
  margin-right: 2vw; /* Space between the image and text */
  border: 1px solid #5b4b49; /* Add border if needed */
  object-fit: cover; /* Ensure the image maintains its aspect ratio and doesn't stretch */
  overflow: hidden; /* Hide any overflow if the image is larger than its container */
}


.card_text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1; /* Take remaining space */
  text-decoration: none;
}


/* Add hover transformations to each card when it is already in view */
#card1:hover, #card2:hover, #card3:hover {
  --scale: 1.02; /* Change scale variable on hover */
  filter: brightness(1.05); /* Increase brightness by 20% */
}

/* Optional: Ensure the hover effect transitions smoothly */
.preview_card {
  transition: transform 1s ease-out; /* Smooth transition for transform scaling */
}

#card1 {
  background-color: #c6b6a9;
  border-top: #5b4b49 20px solid;
  border-bottom: #5b4b49 20px solid;
  border-right: #5b4b49 20px solid;
}

#card2 {
  background-color: #5b4b49;
  border-top: #e8dab9 10px solid;
  border-bottom: #e8dab9 10px solid;
}

#card3 {
  background-color: #e8dab9;
  border-right: #161212 15px solid;
}


/* Initial state of the elements. They start out invisible and positioned slightly translated. */
.hiddenElement {
  opacity: 0;
}

.titleHidden {
  transition: opacity 1s ease-in-out;
}

/* State of the element when it is in view. It becomes fully opaque and moves into its final position. */
.in-view {
  opacity: 1;
  transform: translateX(0); /* Move into final position */
}

@media(prefers-reduced-motion: reduce) {
  .hiddenElement {
    transition: none; /* Disable transitions if user prefers reduced motion */
  }
}


@keyframes shake {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(3deg);
  }
  75% {
    transform: rotate(-3deg);
  }
}

@keyframes blurInFromRight {
  from {
    opacity: 0;
    transform: translateX(-100px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

@keyframes blurInFromLeft {
  from {
    opacity: 0;
    transform: translateX(100px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

#rightText.in-view {
  animation: blurInFromRight 1s ease-out forwards;
}

#leftText.in-view {
  animation: blurInFromLeft 1s ease-out forwards;
}

#mephoto:hover {
  opacity: 1;
  animation: shake 1s ease-out forwards;
  animation-duration: 0.2s;
}

.third_section {
  position: relative;
  width: 100%; /* Ensures the section takes full width */
  background-color: #cab09a; /* Light grey background */
  overflow-x: hidden;
}


.about_title {
  color: #161212;
  font-weight: 20;
  font-size: 5vw; /* Adjust size as needed */
  font-family: 'MyCustomFontText', sans-serif; /* Use the custom font */
  text-align: center; /* Center text */
}

#leftText {
  flex: 1; text-align: right; padding-right: 0.5vw; margin-right: 1vw;
}

#rightText {
  flex: 1; text-align: left; padding-left: 0.5vw; margin-left: 1vw;
}

.about_title_left {
  color: #161212;
  font-size: 3vw; /* Adjust size as needed */
  font-family: 'MyCustomFontText', sans-serif; /* Use the custom font */
  font-weight: 100;
}

.about_me_text {
  font-size: 1.5vw;
  color: #161212;
}


.img_container {
  width: 100%;
  height: 20vw;
  overflow: hidden;
}

.card_description {
  width: 25vw;
  position: absolute;
  top: 50%;
  white-space: normal;
  color: #e8dab9;
  font-family: "Playfair Display", serif;
  font-size: 1.5vw;
  overflow: hidden;
  transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
  opacity: 0;
  max-width: 30vw;
  transform: translateY(-50%);
}

#card1 .card_description, #card3 .card_description {
  left: 100%;
  border-left: 1px solid #e8dab9; /* Adjust the border color and width as needed */
  padding-left: 1vw; /* Add some padding to the left of the text */
}

#card1:hover .card_description, #card3:hover .card_description {
  transform: translateY(-50%) translateX(4vw);
  opacity: 1;
}

#card2 .card_description {
  right: 100%;
  text-align: right; /* Align text to the right */
  border-right: 1px solid #e8dab9; /* Adjust the border color and width as needed */
  padding-right: 1vw; /* Add some padding to the right of the text */
}

#card2:hover .card_description {
  transform: translateY(-50%) translateX(-4vw);
  opacity: 1;
}


.profile-container {
  position: relative;
  display: flex; 
  justify-content: center; 
  align-items: center; 
  padding: 4vw 5vw;
  margin-bottom: 4vh;
  overflow-y: hidden;
}

/* Centered navigation container */
.centered-navigation {
  position: fixed; /* Use fixed positioning to keep it in the middle */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the container */
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center; /* Center items horizontally */
  text-align: center; /* Center text */
  z-index: 100;
}

/* Navigation list styling */
.nav-list {
  list-style: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
  z-index: 100;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  70% {
    transform: translateY(-5px);
  }
  90% {
    transform: translateY(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.nav-list li {
  opacity: 0; /* Initial state for the animation */
  animation: fadeInUp 0.8s ease-out forwards;
  margin: 5vh 0;
}

.nav-list li:nth-child(1) {
  animation-delay: 0.2s;
}

.nav-list li:nth-child(2) {
  animation-delay: 0.4s;
}

.nav-list li:nth-child(3) {
  animation-delay: 0.6s;
}

.nav-list li:nth-child(4) {
  animation-delay: 0.8s;
}

/* Navigation link styling */
.nav-list li a {
  text-decoration: none; /* Remove underline from links */
  color: #2d2525; /* Change link color as needed */
  font-family: 'MyCustomFontText', sans-serif; /* Use your custom font */
  font-size: 4.5vw; /* Adjust font size as needed */
  transition: color 0.3s; /* Smooth transition for color change */
}

.nav-list li a:hover {
  color: white;
}

.hidden-navigation {
  display: none;
}


.contact-methods {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3vh;
}

.method {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  font-size: 1.5vw;
}

.method img {
  width: 2.5vw;
  height: auto;
}

.download-cv-button {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #5b4b49;
  color: #e8dab9;
  border: 2px solid #e8dab9;
  border-radius: 25px;
  font-family: 'MyCustomFontText', sans-serif;
  font-size: 1vw;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  z-index: 1000; /* Make sure it stays above other elements */
}

.download-cv-button:hover {
  background-color: #e8dab9;
  color: #5b4b49;
}

.more-info {
  text-align: center;
  padding: 20px;
  background-color: #2d2525; /* Background color to match the theme */
  color: #e8dab9; /* Text color to match the theme */
  font-size: 1.5vw; /* Adjust font size as needed */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effect */
  overflow-x: hidden;
  max-width: 100vw;
}

.info-outer {
  background-color: #2d2525; 
}

.more-info a {
  color: #e8dab9; /* Text color for the link */
  text-decoration: none; /* Remove underline from the link */
  transition: color 0.3s; /* Smooth transition for color change */
}

.more-info:hover {
  background-color: #382e2e; /* Background color on hover */
  color: #2d2525; /* Text color on hover */
}

@media (max-width: 768px) {
  .profile-container {
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center align items */
    text-align: center; /* Center text */
    padding: 2vw; /* Adjust padding for better spacing */
  }

  .profile-container > div {
    margin: 2vw 0; /* Add margin to each child for spacing */
    width: 90%; /* Full width for each child */
  }

  .profile-container img {
    width: 90vw; /* Adjust image width for better fit */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 4vw; /* Add margin below the image */
  }

  /* Update these classes to center text alignment on mobile */
  .text-left,
  .text-right {
    padding: 0; /* Remove padding for text sections */
    text-align: center; /* Center text alignment */
    margin-left: auto; /* Center horizontally */
    margin-right: auto; /* Center horizontally */
    width: 100%; /* Take full width on mobile */
  }

  .about_title {
    margin-bottom: 2vw; /* Reduce gap between "About me" and "Hey there" */
    font-size: 5vw; /* Adjust font size */
    text-align: center; /* Center align title */
  }

  .about_me_text {
    font-size: 4vw; /* Adjust font size for readability */
    margin-bottom: 4vw; /* Add margin below about me text */
    text-align: center; /* Center align about me text */
  }

  #leftText, #rightText {
    text-align: center;
  }

  .contact-methods {
    flex-direction: column; /* Stack contact methods vertically */
    align-items: center; /* Center align methods */
    gap: 3vw; /* Adjust gap between contact methods */
    text-align: center; /* Center align contact methods */
  }

  .method {
    font-size: 4vw; /* Adjust font size for methods */
    gap: 1vw; /* Adjust gap between icon and text */
  }

  .method img {
    width: 6vw; /* Adjust icon size */
    height: auto; /* Maintain aspect ratio */
  }

  .download-cv-button {
    font-size: 4vw; /* Adjust button font size */
    text-align: center; /* Center align button text */
  }
}