/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Playfair+Display&family=Nunito&family=Lato&display=swap');

/* Color Definitions */
:root {
  --background_color: #01001b;
  --shape_color: #2e236c;
  --icon_color: #433d8b;
  --text_color: #c8acd6;
  --general_color: #000000;
  --white_color: #ffffff;
  --line_color: #100c28;
  --blog-color: #02002c;
  --link-color: #0000ff;
}

/* General Styles */
body {
  margin: 0;
  font-family: 'Nunito', sans-serif;
  color: var(--general_color);
  background-color: var(--background_color);
  margin-left: 10vw;
  margin-right: 10vw;
}

html {
  scroll-behavior: smooth;
}

/* navbar styles */
header {
  padding: 2vh 0;
  background-color: var(--background_color);
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1vh 2vw;
  background-color: var(--background_color); /* Background color */
  position: fixed; /* Fixed position */
  width: calc(100% - 19.7vw); /* Full width minus padding */
  top: 0; /* Stick to the top */
  z-index: 1000; /* Ensure it is above other content */
}

.logo {
  display: flex;
  align-items: center;
}

.logo-img {
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  margin-right: 1vw;
}

.company-name {
  font-family: 'Lato', sans-serif;
  font-weight: 600;
  font-size: 2vh;
  color: var(--text_color);
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 2vw;
  transition: transform 0.3s ease-in-out;
}

.nav-links li {
  position: relative;
}

.nav-links a {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 2vh;
  color: var(--text_color);
  text-decoration: none;
  padding: 0.5vh 1vw;
  border-radius: 0.4vh;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.nav-links a:hover {
  background-color: var(--shape_color);
  box-shadow: 0 0.4vh 0.8vh rgba(0, 0, 0, 0.2);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.menu-toggle .bar {
  width: 5vw;
  height: 0.3vh;
  background-color: var(--text_color);
  margin: 0.4vh 0;
  transition: 0.4s;
}

/* About Section */
.about-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* Parent container for absolute positioning */
  margin-top: 5vh;
  margin-bottom: 5vh;
}

.about-container {
  position: relative; /* Parent container for absolute positioning */
  width: 100%;
  height: 125vh; /* Adjust height as needed */
  margin: 0 auto;
}

/* Common styles for all sections to position them absolutely */
.about-left,
.about-center,
.about-right,
.about-bottom {
  position: absolute; /* Absolute positioning */
}

/* Adjust positions here */
.about-left {
  width: 20%;
  height: 20%;
  top: 20vh; /* Example position, adjust as needed */
  left: 0;
  z-index: 10; /* Adjust z-index to bring this component in front or back */
}

.about-left-content {
  text-align: left;
}

.intro {
  font-family: 'Playfair Display', serif;
  font-size: 6vh;
  color: var(--white_color);
  margin: 0;
}

.name {
  color: var(--icon_color);
}

.intro-description {
  font-family: 'Nunito', sans-serif;
  font-size: 3vh;
  color: var(--white_color);
  margin: 0;
}

.about-center {
  width: auto;
  height: 85.5vh;
  top: 5vh; /* Example position, adjust as needed */
  position: relative; /* Example position, adjust as needed */
  z-index: 2; /* Adjust z-index to bring this component in front or back */
}

.image-container {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 5;
}

.profile-img {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
  text-decoration: underline;
  z-index: 5;
}

.blob-container {
  position: relative;
  width: 70vh;
  height: 70vh;
  margin-left: auto;
  margin-right: auto;
  bottom: 80vh;
  z-index: 0;
  padding: 0;
}

.blob {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}

.blob:nth-child(2) {
  filter: blur(4rem);
  z-index: -1;
}

.about-right {
  width: 35%;
  top: 20vh; /* Example position, adjust as needed */
  right: 0;
  z-index: 3; /* Adjust z-index to bring this component in front or back */
}

.about-right-content {
  text-align: left;
}

.about-right h2 {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 4.5vh;
  color: var(--icon_color);
  margin: 0 0 2vh;
  letter-spacing: 0.2em;
}

.about-description {
  line-height: 2.7vh;
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: 2vh;
  color: var(--white_color);
  margin: 0;
}

.about-bottom {
  width: auto;
  height: auto;
  text-align: center;
  /* Adjust position with top, left, bottom, right */
  top: 40vh; /* Example position, adjust as needed */
  left: 90vh;
  right: 0;
  z-index: 0; /* Adjust z-index to bring this component in front or back */
}

.about-bottom h2 {
  font-family: 'Pacifico', cursive;
  font-size: 14vh;
  color: rgba(67, 61, 139, 0.15); /* icon_color with 15% opacity */
  margin: 0;
  letter-spacing: 0.25em; /* 25% letter spacing */
}

/* Experience Section */
.experience-section {
  position: relative;
  padding: 0 6.25vw 0 6.875vw; /* Adjust as needed, removed bottom padding */
  color: var(--white_color);
  margin-top: -18.125vw; /* Adjust as needed to overlap the previous section */
}

.experience-top {
  text-align: center;
  /* Allow customization for top-left-right-bottom position */
  /* Adjust these properties to position the top section */
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.experience-top h2 {
  font-family: 'Nunito', sans-serif;
  font-size: 4.5vh;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: var(--icon_color);
  margin: 0;
}

.experience-center {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* Allow customization for top-bottom-left-right position */
  position: relative;
  margin-top: 3rem;
  margin-left: 10vw;
  padding: 0;
}

.experience-frame {
  display: flex;
  align-items: center;
  padding: 2rem;
  width: auto; /* Adjust as needed */
  height: auto; /* Adjust as needed */
  flex-direction: row-reverse; /* This will move the image to the right side */
}

.experience-image {
  width: auto;
  height: auto;
  border-top-right-radius: 0.75rem; /* 12px */
  border-bottom-right-radius: 0.75rem; /* 12px */
  margin-left: 1rem;
  object-fit: cover; /* Ensure the image covers the area */
}

.experience-details {
  width: 40vw; /* 495px */
  margin-top: -3rem; /* -50px */
}

.experience-title {
  font-family: 'Nunito', sans-serif;
  font-size: 3.5vh; /* 25px */
  font-weight: 600;
  color: var(--white_color);
}

.experience-date {
  font-family: 'Lato', sans-serif;
  font-size: 1.9vh; /* 14px */
  color: var(--white_color);
  opacity: 0.5;
  margin-top: -1.25rem; /* -20px */
}

.experience-description {
  line-height: 2.7vh; /* 20px */
  font-family: 'Lato', sans-serif;
  font-size: 2vh;
  color: var(--white_color);
  margin-top: 0px; /* Adjust as needed */
}

/* Experience Frame 2 */
.experience-frame-left {
  flex-direction: row; /* Set to row to place image on the left */
  margin-top: 1.25rem; /* 20px */
  margin-right: 15vw; /* 47em */
}

.experience-image-left {
  width: auto; /* Set image width to auto */
  height: auto; /* Set image height to auto */
  border-top-left-radius: 0.75rem; /* 12px */
  border-bottom-left-radius: 0.75rem; /* 12px */
  object-fit: cover; /* Ensure the image covers the area */
  margin-right: 1.5rem; /* 10px */ /* Add some space between image and text */
  z-index: 1;
}

.experience-bottom {
  margin-top: -6.25rem; /* -100px */
  position: relative; /* Allows positioning of the text */
  text-align: center; /* Center text horizontally */
}
.experience-bottom-text {
  font-family: 'Pacifico', cursive;
  font-size: 14vh; /* 120px */
  color: var(--icon_color);
  opacity: 0.15;
  letter-spacing: 0.2em;
  margin: 0; /* Adjust as needed for positioning */
  position: relative;
  top: 0; /* Change this value to adjust vertical positioning */
  left: 50%;
  transform: translateX(-50%); /* Center text horizontally */
  z-index: 0;
}

.experience-divider {
  width: 100%;
  height: 0.3125rem; /* 5px */ /* Adjust height as needed */
  background-color: var(--line_color);
  margin-top: 0px; /* Adjust margin as needed */
  position: relative;
  top: -1.5625rem; /* -25px */
}

/*Animation of Experience*/
.experience-section {
  position: relative;
  overflow: hidden;
}

.experience-top,
.experience-center,
.experience-bottom {
  transition: transform 0.5s ease-out;
}

.experience-top {
  transform: translateY(-100%);
}

.experience-center {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.experience-frame-1,
.experience-frame-2 {
  transition: transform 0.5s ease-out;
}

.experience-frame-1 {
  transform: translateX(100%);
}

.experience-frame-2 {
  transform: translateX(-100%);
}

.experience-bottom {
  transform: translateY(100%);
}

.experience-section.mouse-entered .experience-top {
  transform: translateY(0);
}

.experience-section.mouse-entered .experience-frame-1 {
  transform: translateX(0);
}

.experience-section.mouse-entered .experience-frame-2 {
  transform: translateX(0);
}

.experience-section.mouse-entered .experience-bottom {
  transform: translateY(0);
}

/* Hobby Section */
.hobby-section {
  position: relative;
  padding: 0%;
  overflow: hidden;
}

.hobby-top {
  text-align: center;
  margin-bottom: 1.25rem;
}

.hobby-header {
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  font-size: 4.5vh;
  color: var(--icon_color);
  letter-spacing: 0.2em;
  margin: 0;
}

.hobby-center {
  text-align: center;
}

.filters {
  margin-bottom: 1.25rem;
}

.filter {
  font-family: 'Lato', sans-serif;
  font-size: 2.5vh;
  color: var(--white_color);
  margin: 0 0.9375rem;
  cursor: pointer;
  transition: color 0.3s, border-bottom 0.3s;
}

.filter:hover {
  border-bottom: 0.125rem solid var(--icon_color);
}

.filter.active {
  color: var(--icon_color);
  border-bottom: 0.125rem solid var(--icon_color);
}

.images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4rem 3rem; /* 60px 40px */
}

.image-item {
  width: auto;
  height: auto;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, filter 0.3s;
  filter: grayscale(100%);
}

.image-item:hover {
  transform: scale(1.2);
  filter: grayscale(0%);
  z-index: 2;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: var(--white_color);
  text-align: center;
  display: none;
}

.image-item:hover .image-caption {
  display: block;
}

.image-keyword {
  font-family: 'Lato', sans-serif;
  font-size: 1.8vh; /* 16px */
  color: var(--text_color);
}

.image-title {
  font-family: 'Nunito', sans-serif;
  font-size: 2vh; /* 25px */
  font-weight: 500;
  flex-wrap: wrap;
}

.hobby-bottom {
  text-align: center;
  margin-top: -1.25rem; /* -20px */
  z-index: -2;
  margin-bottom: auto;
}

.hobby-bottom-text {
  font-family: 'Pacifico', cursive;
  font-size: 14vh; /* 120px */
  color: var(--icon_color);
  opacity: 0.15;
  letter-spacing: 0.25em;
}

.hobby-divider {
  width: 100%;
  height: 0.3125rem; /* 5px */ /* Adjust height as needed */
  background-color: var(--line_color);
  margin-top: 0px; /* Adjust margin as needed */
  position: relative;
  top: -1.5625rem; /* -25px */
}

/* Blog Section */
.blog-section {
  width: 100%;
  padding: 0 0;
  color: var(--text_color);
}

.blog-top {
  width: 100%;
  text-align: center;
}

.blog-header {
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  font-size: 4.5vh; /* 35px */
  color: var(--icon_color);
  letter-spacing: 0.25em;
  margin: 0;
  margin-bottom: 3.125rem; /* 50px */
}

.blog-center {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 2rem; /* 35px */
  padding: 0; /* 20px */
}

.blog-card {
  position: relative;
  width: 18vw; /* 350px */
  border-radius: 0.625rem; /* 10px */
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* 0 4px 8px */
  background-color: transparent;
  z-index: 1;
}

.blog-image {
  width: 100%;
  max-height: 20vh;
  border-top-right-radius: 0.625rem;
  border-top-left-radius: 0.625rem;
  object-fit: cover;
  z-index: 0;
}

.blog-details {
  background-color: #02002c;
  padding: 2.5rem; /* 20px */
  padding-top: 2vh;
  border-radius: 0 0 0.625rem 0.625rem; /* 0 0 10px 10px */
  width: 100%;
  box-sizing: border-box;
  position: relative;
  top: -2rem; /* -5px */
}

.blog-date {
  font-family: 'Lato', sans-serif;
  font-size: 1.5vh; /* 14px */
  color: var(--white_color);
  opacity: 0.5;
  margin-top: 0;
  margin-bottom: 0.625rem; /* 10px */
}

.blog-title {
  font-family: 'Nunito', sans-serif;
  font-weight: medium;
  font-size: 2.5vh; /* 25px */
  color: var(--white_color);
  margin-top: auto;
  margin-bottom: 1rem; /* 10px */
}

.blog-link {
  font-family: 'Lato', sans-serif;
  font-weight: medium;
  font-size: 2vh; /* 14px */
  color: #0000ff;
  text-decoration: none;
}

.blog-bottom {
  text-align: center;
  margin-top: -7rem; /* -80px */
  z-index: 0;
  margin-bottom: auto;
}

.blog-bottom-text {
  font-family: 'Pacifico', cursive;
  font-size: 14vh; /* 120px */
  color: var(--icon_color);
  opacity: 0.15;
  letter-spacing: 0.25em;
}

.blog-divider {
  width: 100%;
  height: 0.3125rem; /* 5px */
  background-color: var(--line_color);
  margin-top: 0px; /* Adjust margin as needed */
  position: relative;
  top: -1.5625rem; /* -25px */
}

/* Contact section */
.contact-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact-top,
.contact-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.contact-line {
  flex-grow: 1;
  height: 0.3125rem;
  background-color: var(--line_color);
}

.contact-title {
  font-family: 'Nunito', sans-serif;
  font-weight: bold;
  font-size: 4.5vh;
  color: var(--icon_color);
  text-align: center;
  letter-spacing: 0.25em;
  margin: 0 10px;
}

.contact-center {
  margin-top: 3.125rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: -6.25rem; /* -100px */
}

.top-frame {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 3.125rem; /* 50px */
  margin-bottom: 3.125rem; /* 50px */
}

.bottom-frame {
  display: flex;
  justify-content: center;
  margin-top: 2vh;
  width: 100%;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1vh;
}

.contact-icon {
  width: 4vh;
  height: 4vh;
}

.contact-text {
  font-family: 'Lato', sans-serif;
  font-size: 2vh;
  color: var(--white_color);
  text-decoration: none;
}
.contact-bot {
  text-align: center;
  z-index: 0;
}

.contact-bot-text {
  font-family: 'Pacifico', cursive;
  font-size: 14vh;
  color: var(--icon_color);
  opacity: 0.15;
  letter-spacing: 0.25em;
}

.social-media-icons {
  display: flex;
  justify-content: center;
  margin: 0.3256rem;
}

.social-media-icons:hover {
  transform: scale(1.3);
  z-index: 1;
}

.social-media-icons a img {
  width: 5vh;
  height: 5vh;
}

.contact-bottom .contact-line {
  flex-grow: 1;
}

/* Styles for the footer */
.footer {
  width: 100%;
  margin-top: 3rem; /* 50px */
  height: 2rem; /* 50px */
  background-color: var(--background_color);
  display: flex;
  align-items: center;
  justify-content: left;
  position: relative;
}

.footer-text {
  font-family: 'Lato', sans-serif;
  font-size: 2vh;
  color: var(--white_color);
  opacity: 0.5;
  margin: 0;
  position: relative;
  left: auto; /* 150px */ /* Adjust to match the web margin */
}