/* Root Variables */
:root {
    --primary-bg: #f5f5dc;
    --primary-text: #333;
    --accent-color: #5E4A31;
    --hover-color: #B94047;
    --font-header: 'Noto Serif JP', serif;
    --font-body: 'Noto Serif JP', sans-serif;
  }
  
  /* Dark Theme */
  body.dark {
    --primary-bg: #1a1a1a;
    --primary-text: #f0f0f0;
    --accent-color: #d1a171;
    --hover-color: #bb8c5f;
  }
  
  /* Reset and Base Styles */
  body {
    margin: 0;
    font-family: var(--font-body);
    background-color: var(--primary-bg);
    color: var(--primary-text);
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  .container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  /* Smooth Scrolling */
  html {
    scroll-behavior: smooth;
  }
  
  /* Header */
  .header {
    width: 985px;
    height: 93px;
    background-image: url('./images/header.svg');
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
  }
  
.logo {
    font-size: 24px;
    font-weight: bold;
    color: var(--accent-color);
    font-family: var(--font-header);
    position: absolute;
    top: 50px;
    left: 150px;
    z-index: 10;
    color: white;
}
  
  .logo span:first-child {
    font-size: 40px;
  }

  .logo span:last-child {
    font-size: 20px;
  }
  
  .nav ul {
    list-style: none;
    display: flex;
    gap: 85px; /* Increase spacing between words */
    margin: 0;
    padding: 0;
  }
  
  .nav ul li a {
    text-decoration: none;
    color: var(--accent-color);
    font-weight: bold; /* Make the text bold */
    font-family: var(--font-header); /* Use the header font */
    font-size: 20px; /* Increase font size */
    transition: color 0.3s ease;
  }
  
  .nav ul li a:hover {
    color: var(--hover-color);
  }
  
  /* Hero Section */
  .hero {
    position: relative;
    height: 100vh; /* Full viewport height */
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
  }
  .slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
    position: absolute;
  }
  
  .slide.active {
    opacity: 1;
    z-index: 1;
  }
  .image-number {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
  }
  
  /* Services Section */
  .services {
    padding: 50px 20px;
    text-align: center;
  }
  
  .services-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .service-slide {
    flex: 0 0 40%; /* Default size for non-active slides */
    max-width: 300px; /* Limit the size of non-active slides */
    height: 250px; /* Adjust height for non-active slides */
    margin: 0 15px; /* Add spacing between slides */
    transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
    position: relative;
    opacity: 0.5; /* Default opacity for non-active slides */
    filter: blur(5px); /* Default blur for non-active slides */
  }
  
  .service-slide.active {
    flex: 0 0 60%; /* Active slide takes 60% of the width */
    max-width: 400px; /* Increase size for the active slide */
    height: 300px; /* Increase height for the active slide */
    opacity: 1; /* Fully visible */
    filter: blur(0); /* No blur for the active slide */
    transform: scale(1.1); /* Slightly enlarge the active slide */
    margin: 0 30px; /* Add extra spacing for the center slide */
  }
  
  .service-slide.left,
  .service-slide.right {
    flex: 0 0 40%; /* Left and right slides take 40% of the width */
    max-width: 300px; /* Limit size for left and right slides */
    opacity: 0.7; /* Slightly more visible than non-active slides */
    filter: blur(3px); /* Slight blur for left and right slides */
    transform: scale(0.9); /* Slightly shrink left and right slides */
  }
  
  .service-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
  }
  
  .service-info {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 5px;
  }
  
  .service-name {
    font-size: 18px;
    font-weight: bold;
  }
  
  .service-price {
    font-size: 14px;
  }
  
  .slider-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--accent-color);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .left-btn {
    left: 10px;
  }
  
  .right-btn {
    right: 10px;
  }
  .pagination {
    position: absolute;
    bottom: 0; /* Adjust this value to position the dots correctly */
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    z-index: 10;
    width: 1057px; /* Ensure it spans the full width */
    height: 49px; /* Adjust height to fit the background image */
    background-image: url('./images/foot.svg'); /* Add the foot.svg image */
    background-size: cover; /* Ensure the image covers the container */
    background-position: center; /* Center the image */
  }
  
  .dot {
    width: 12px;
    height: 12px;
    background-color: #d9d9d9; /* Default color for inactive dots */
    border-radius: 50%;
    transition: background-color 0.3s ease;
  }
  
  .dot.active {
    background-color: #5E4A31; /* Color for the active dot */
  }


  /* Support Section */
.support {
    padding: 70px 20px;
    text-align: center;
    background-color: var(--primary-bg);
  }
  
  .support h2 {
    font-size: 32px;
    margin-bottom: 20px;
  }
  
  .support p {
    font-size: 18px;
    margin-bottom: 20px;
  }
  
  .support-cards {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }
  
  .card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .card h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  .card p {
    font-size: 16px;
  }
  
  /* Bookings Section */
  .bookings {
    padding: 50px 20px;
    text-align: center;
    background-color: #f5f5dc;
  }
  
  .bookings h2 {
    font-size: 32px;
    margin-bottom: 20px;
  }
  
  .bookings p {
    font-size: 18px;
    margin-bottom: 20px;
  }
  
  .booking-btn {
    padding: 10px 20px;
    background-color: #5E4A31;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
  }
  
  .booking-btn:hover {
    background-color: #B94047;
  }
  
  /* Responsive Buttons */
  button {
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: var(--accent-color);
    color: white;
    transition: background-color 0.3s ease;
  }
  
  button:hover {
    background-color: var(--hover-color);
  }
  
  /* About Us Section */
  .about {
    padding: 50px 20px;
    text-align: center;
    background-color: #f5f5dc;
  }
  
  .about h2 {
    font-size: 32px;
    margin-bottom: 20px;
  }
  
  .about p {
    font-size: 18px;
  }
  
  /* Footer Section */
  .footer {
    padding: 20px;
    background-color: #5E4A31;
    color: white;
    text-align: center;
  }
  
  .footer .social-links {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 10px 0 0;
    padding: 0;
  }
  
  .footer .social-links li a {
    color: white;
    text-decoration: none;
  }
  
  .footer .social-links li a:hover {
    color: #B94047;
  }
  
  .footer .social-links img {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
  }
  
  .footer .social-links img:hover {
    transform: scale(1.2);
  }