/* General Font Import */
body, .footer {
  font-family: "Cormorant Garamond", serif; /* Apply Cormorant Garamond font globally */
}

/* General Styles */
body {
  font-family: "Cormorant Garamond", serif;
  background-color: #f0ece4; /* Light beige background */
  color: #333; /* Default text color */
  margin: 0;
  padding-bottom: 80px; /* Extra space below the footer */
}

h1 {
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  color: #000;
  margin: 0;
}

/* Set the hero section to be relative for positioning of the header */
.hero-section {
  position: relative;
  width: 100%;
  max-width: 1500px;
}

/* Hero image styling */
.hero-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Position the header on top of the hero image */
.custom-header {
  position: absolute;
  z-index: 10; /* Ensure it's on top of the hero image */
  color: #fff; /* White text for better contrast */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease; /* Smooth color transition */
  display: flex; /* Set header to flexbox layout */
  justify-content: space-between; /* Space out elements: left side (h1), right side (menu) */
  align-items: center; /* Vertically center the content */
  width: 100%; /* Ensure it spans the full width */
  max-width: 100%; /* Prevent overflow */
  box-sizing: border-box; /* Include padding in the element's width */
  padding: 50px 50px; /* Add padding to the header */
}

/* Link hover effect */
.custom-header a:hover {
  color: #a2836e; /* Calm brown hover effect, same as footer */
  text-decoration: none; /* Ensure no underline on hover */
}

/* Styling for the h1 link */
.custom-header h1 a {
  color: #fff; /* White text for header */
  text-decoration: none; /* Remove underline from the link */
  font-size: 36px;
}

/* Position the header on top of the hero image */
.custom-header2 {
  display: flex; /* Flexbox layout */
  justify-content: space-between; /* Space out the elements */
  align-items: center; /* Vertically align the items */
  padding: 20px 50px; /* Padding around the header */
  color: black; /* White text for header */
  padding: 50px 50px; /* Add padding to the header */
}

/* Link hover effect */
.custom-header2 a:hover {
  color: #a2836e; /* Calm brown hover effect, same as footer */
  text-decoration: none; /* Ensure no underline on hover */
}

/* Styling for the h1 link */
.custom-header2 h1 a {
  color: #000; /* White text for header */
  text-decoration: none; /* Remove underline from the link */
  font-size: 36px;
}

/* Menu styles */
.menu {
  display: flex;
  gap: 30px; /* Space between menu items */
  margin-left: auto; /* Push the menu to the right */
}

.menu a {
  color: #fff; /* White text for links */
  text-decoration: none; /* Remove underline */
  padding: 10px;
  font-size: 16px;
  margin-right: 15px;
  font-weight: 300;
  transition: color 0.3s ease;
}

.menu a:hover {
  color: #a2836e; /* Calm brown on hover */
}

/* Menu styles */
.menu2 {
  display: flex;
  gap: 30px; /* Space between menu items */
  margin-left: auto; /* Push the menu to the right */
}

.menu2 a {
  color: #000; /* White text for links */
  text-decoration: none; /* Remove underline */
  padding: 10px;
  font-size: 16px;
  margin-right: 15px;
  font-weight: 300;
  transition: color 0.3s ease;
}

.menu2 a:hover {
  color: #a2836e; /* Calm brown on hover */
}

/* W3 CSS Adjustments */
.w3-bar-item {
  display: inline-block; /* Ensure these are inline elements */
}

.logo {
  flex: 1;
  text-align: left; /* Align logo to the left */
}

/* Hero text styling */
.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
}

.hero-text h1 {
  font-size: 3rem;
  margin: 0;
}

.hero-text p {
  font-size: 1.25rem;
  margin-top: 10px;
}


.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff; /* White text color */
}

.hero-text h1 {
  font-size: 5rem; /* Big text */
  margin: 0;
  color: #fff;
  font-family: 'Amore Dreaming Sans Serif';
}

.hero-text p {
  font-size: 2.5rem; /* Subtitle size */
  margin: 10px 0 0;
  font-family: 'Amore Dreaming Signature';
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* Black overlay with 50% opacity */
  z-index: 1; /* Ensure the overlay is above the image but below the text */
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff; /* White text color */
  z-index: 2; /* Ensure the text is above the overlay */
}

@font-face {
  font-family: 'Amore Dreaming Sans Serif';
  src: url('fonts/amore-dreaming-sans-serif.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Amore Dreaming Signature';
  src: url('fonts/amore-dreaming-signature.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}





/* Photo Grid */
.w3-row-padding {
  display: flex;
  flex-wrap: wrap; /* Allow images to wrap */
  margin: 0; /* Remove negative margin */
  padding: 0 50px; /* Add padding to the left and right of the gallery */
}

.w3-quarter {
  box-sizing: border-box;
  padding: 15px; /* Space between image containers */
  flex: 1 1 calc(33.33% - 30px); /* Three columns with padding included */
}

.w3-quarter img {
  display: block;
  width: 100%;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.w3-quarter img:hover {
  transform: scale(1.02); /* Slight zoom effect */
  filter: brightness(0.9); /* Slightly darken the image */
}

.custom-padding img {
  width: 100%;
  height: auto; /* Maintain image aspect ratio */
  display: block; /* Removes bottom spacing under images */
  cursor: pointer;
}



@media (max-width: 768px) {
  .hero-text h1 {
    font-size: 2.5rem; /* Adjust for smaller screens */
  }
  .hero-text p {
    font-size: 1rem;
  }
}


/* Lightbox Customizations */
.lightboxOverlay {
  background: rgba(248, 246, 241, 0.95) !important; /* Overlay matching page background */
}

.lightbox {
  border: none !important;
  box-shadow: none !important;
}

.lightbox .lb-image {
  border: none !important; /* Remove white border around images */
}

.lb-data .lb-caption {
  display: none !important; /* Hide captions */
}

.lb-data .lb-number {
  display: none !important; /* Hide "image 6 of 8" text */
}

.photo-caption {
  font-size: 12px; /* Tiny font size */
  color: #555; /* Subtle color */
  text-align: left; /* Align text to the left */
  margin-top: 5px; /* Space between image and caption */
  margin-left: 0; /* Align caption with the image's left edge */
  line-height: 1.4; /* Improve readability */
}


/* General Styles for Services Section */
.creative-services {
  padding: 60px 20px; /* Padding */
  background-color: #d8c8b8; /* Darker Beige Background */
  text-align: center;
}

.section-title {
  font-size: 2.5em;
  font-weight: 300;
  color: #333;
  margin-bottom: 20px;
}

.section-description {
  font-size: 1.2em;
  color: #666;
  margin-bottom: 40px;
  line-height: 1.5;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Service Row Styling */
.service-row {
  display: flex;
  justify-content: center;
  gap: 15px; /* Standard gap between images */
  margin-bottom: 40px;
}

.service-item {
  text-align: center;
  position: relative;
}

.service-item img {
  display: block;
  width: 100%;
  border-radius: 8px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Image Size Variations */
.service-item.large img {
  max-width: 300px;
  padding: 0px 20px;
}

.service-item.medium img {
  max-width: 240px;
  padding: 0px 20px;
}

.service-item.small img {
  max-width: 280px;
  padding: 0px 20px;
}

.service-item.med img {
  max-width: 250px;
  padding: 0px 20px;
}

.service-item.large2 img {
  max-width: 300px;
  padding: 0px 20px;
}



/* Caption Styling */
.image-caption {
  font-size: 1.5em;
  color: #333;
  margin-top: 10px;
  font-weight: 300;
  padding: 10px;
}

/* Services Section Link Styles */
.image-caption a {
  color: #333; /* Default link color */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease; /* Smooth color transition */
}

.image-caption a:hover {
  color: #a2836e; /* Calm brown hover effect, same as footer */
  text-decoration: none; /* Ensure no underline on hover */
}

/* Hover Effects for Images */
.service-item:hover img {
  transform: scale(1.05);
  filter: brightness(0.9);
}

/* Second Row Styling */
.service-row:nth-of-type(2) {
  justify-content: center;
}

.service-item img {
  object-fit: cover;
}

/* Responsive Layout */
@media (max-width: 768px) {
  .service-item img {
    width: 100%;
  }

  .service-row {
    flex-direction: column;
    align-items: center;
  }
}


/* Default (Desktop View) */
.video-gallery {
  display: flex;
  justify-content: center;
  padding-top: 30px;  /* Add padding above the entire video gallery */
  padding-bottom: 30px;  /* Add padding below the entire video gallery */
}

.video-item {
  width: 48%; /* Each video takes up 48% of the container */
}

video {
  width: 100%; /* Make sure video fills its container */
  height: auto;
}

/* Mobile View */
@media screen and (max-width: 768px) {
  .video-gallery {
    flex-direction: column; /* Stack videos vertically on mobile */
    align-items: center;
  }

  .video-item {
    width: 90%; /* Videos take up most of the screen width on mobile */
    margin-bottom: 20px; /* Space between videos */
  }
}


/* Bio Section Styles */
.bio-slide {
  background-color: #f0ece4; /* Light beige background for the bio section */
  padding: 50px 20px; /* Add padding around the content */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px; /* Add some space below the section */
}

.bio-container {
  display: flex;
  align-items: center; /* Vertically align the content */
  max-width: 1200px;
  width: 100%;
}

.bio-image {
  flex: 1;
  padding-right: 30px; /* Space between photo and text */
}

.bio-image img {
  width: 100%;
  height: auto;
}

.bio-text {
  flex: 2;
}

.bio-text h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 2.5em;
  font-weight: 300;
  color: #000;
  margin-bottom: 20px;
}

.bio-text p {
  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  color: #000;
  line-height: 1.6;
}

/* Horizontal Gallery Styles */
.horizontal-gallery {
  background-color: #f0ece4;
  padding: 50px 20px;
  text-align: center;
}

.horizontal-gallery h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  color: #333;
  margin-bottom: 30px;
}

.gallery-container {
  overflow: hidden;
  width: 100%;
}

.gallery-images {
  display: flex;
  gap: 20px;
  animation: scroll-gallery 40s linear infinite; /* Continuous animation */
}

.gallery-images img {
  width: 300px; /* Adjust size as needed */
  height: auto;
}

/* Keyframe animation for scrolling the gallery */
@keyframes scroll-gallery {
  0% {
    transform: translateX(0); /* Start position */
  }
  100% {
    transform: translateX(-100%); /* End position, scrolls the entire gallery */
  }
}


/* Title Container */
.gallery-title-container {
  text-align: center; /* Center-align the title */
  margin-bottom: 30px; /* Add space between the title and the gallery */
}

/* Title Style */
.section2-title {
  font-size: 36px; /* Adjust font size */
  font-weight: 300; /* Bold title */
  margin: 0;
  color: #333; /* Title color */
}

/* Subtitle Style */
.section2-description {
  font-size: 18px; /* Subtitle font size */
  font-weight: 300; /* Normal weight */
  margin-top: 10px; /* Space between title and description */
  color: #777; /* Lighter color for description */
}

/* Contact */
.contact-section {
  background-color: #d8c8b8; /* Beige background color */
  padding: 50px 20px; /* Add padding for spacing */
}

.contact-box {
  background: #d8c8b8;
  padding: 20px;
  border-radius: 8px;
  width: 100%;
  max-width: 600px; /* Wider for desktop users */
  margin: 20px auto;
  box-sizing: border-box;
}

.contact-box h2 {
  margin-bottom: 20px;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 2.5em;
  font-weight: 300;
  color: #000;
}

.contact-box label {
  display: block;
  margin-bottom: 5px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  font-weight: bold;
}

.contact-box input,
.contact-box textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #a2836e;
  border-radius: 4px;
  font-family: "Cormorant Garamond", serif;
  font-weight: bold;
  background: transparent; /* Matches the page background */
  color: inherit; /* Text color matches the page */
  box-sizing: border-box;
}

.contact-box button {
  width: 100%;
  padding: 10px;
  background: transparent; /* Matches the background color */
  border: 2px solid #a2836e; /* Black border */
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  color: black;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
}

.contact-box button:hover {
  background: black; /* Turns black when hovered */
  color: white; /* Text becomes white */
}

@media (max-width: 768px) {
  .contact-box {
    padding: 15px;
    max-width: 90%; /* Adjusts width for mobile users */
  }
}



/* Social Media Icons */
.footer-icons {
  text-align: center;
  padding: 20px 0;
}

.footer-icons i {
  font-size: 20px;
  margin: 0 10px;
  color: #333;
  transition: color 0.3s ease;
}

.footer-icons i:hover {
  color: #a2836e; /* Calm brown hover effect for icons */
}

/* Footer Styles */
.footer {
  background-color: #f0ece4; /* Background color */
  padding: 40px 20px 80px; /* Add padding around footer */
  color: #333; /* Text color */
  font-size: 16px; /* Default font size for footer text */
}

.footer-container {
  display: flex;
  justify-content: space-between; /* Space out sections */
  align-items: center; /* Center elements vertically */
  max-width: 1200px; /* Limit footer width */
  margin: 0 auto; /* Center content */
}

.footer-left {
  display: flex;
  gap: 15px; /* Space between icons */
}

.footer-left a {
  font-size: 20px; /* Icon size */
  color: #333; /* Default icon color */
  transition: color 0.3s ease;
}

.footer-left a:hover {
  color: #a2836e; /* Calm brown hover effect */
}

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

.footer-title {
  font-size: 30px; /* Size for "Chiara Magi" */
  font-weight: 300; /* Light weight */
  margin: 0;
}

.footer-subtitle {
  font-size: 14px; /* Size for "Travel Photographer" */
  font-weight: 300; /* Light weight */
  margin: 5px 0 0; /* Space below subtitle */
}

.footer-right {
  text-align: right;
}

.footer-right p {
  margin: 5px 0; /* Space between lines */
  font-size: 16px; /* Consistent text size */
}

.footer-right a {
  color: #333; /* Default link color */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease;
}

.footer-right a:hover {
  color: #a2836e; /* Calm brown hover effect */
}



/* Portfolio Gallery */

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Four photos per row */
  gap: 15px; /* Space between photos */
  margin: 20px auto;
  max-width: 1200px; /* Adjust width for larger screens */
}

.gallery-item {
  overflow: hidden; /* Ensures images stay inside their container */
}

.gallery-item img {
  width: 100%; /* Make images responsive */
  height: auto; /* Maintain aspect ratio */
  display: block;
  transition: transform 0.3s ease; /* Smooth zoom effect */
}

.gallery-item img:hover {
  transform: scale(1.03); /* Slight zoom on hover */
}

.photo-caption a {
  color: #333; /* Default link color */
  text-decoration: none; /* Remove underline */
  transition: color 0.3s ease; /* Smooth color transition */
}

.photo-caption a:hover {
  color: #a2836e; /* Calm brown hover effect, same as footer */
  text-decoration: none; /* Ensure no underline on hover */
}

@media (max-width: 768px) {
  .photo-gallery {
    grid-template-columns: repeat(2, 1fr); /* Two photos per row on smaller screens */
  }
}

@media (max-width: 480px) {
  .photo-gallery {
    grid-template-columns: 1fr; /* One photo per row on very small screens */
  }
}