* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #1a1e2b;
}
/* Scrollbar styling for modern browsers */
::-webkit-scrollbar {
  width: 12px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
  background: #1a1a1a; /* Background color of the scrollbar track */
}

::-webkit-scrollbar-thumb {
  background-color: #72b572; /* Color of the scrollbar thumb */
  border-radius: 6px; /* Rounded corners for the scrollbar thumb */
  border: 3px solid #1a1a1a; /* Adds padding around the thumb */
}

/* Scrollbar styling for Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #3ac986 #1a1a1a;
}

.why-us {
  color: #f1f1f1; /* Light text color for readability */
  padding: 40px 20px; /* Add padding for spacing */
  border-radius: 10px; /* Rounded corners */
  max-width: 800px; /* Maximum width for better readability */
  margin: 20px auto; /* Center the div */
  display: flex; /* Use flexbox for layout */
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center align items */
  justify-content: center; /* Center content vertically */
}

.why-us h1 {
  font-size: 2.5em; /* Larger font size for the heading */
  margin-bottom: 20px; /* Space below the heading */
  text-align: center; /* Center the heading */
  font-family: 'Arial', sans-serif; /* Font family */
}

.why-us p {
  font-size: 1.2em; /* Slightly larger font size for the paragraph */
  line-height: 1.6; /* Better line spacing for readability */
  text-align: center; /* Center align the paragraph text */
}

.add-button {
  background-color: #8ccf8c; /* Green background */
  color: white; /* White text color */
  padding: 15px 30px; /* Padding for size */
  border: none; /* Remove default border */
  border-radius: 5px; /* Rounded corners */
  font-size: 1.2em; /* Larger font size */
  cursor: pointer; /* Pointer cursor on hover */
  transition: background-color 0.3s ease; /* Smooth transition */
  display: inline-block; /* Align with text */
  margin-top: 20px; /* Space above the button */
}

.add-button:hover {
  background-color: #72b572; /* Darker green on hover */
}

@media (max-width: 600px) {
  .why-us {
      padding: 20px; /* Reduce padding on smaller screens */
  }

  .why-us h1 {
      font-size: 2em; /* Smaller heading size on mobile */
  }

  .why-us p {
      font-size: 1em; /* Smaller paragraph size on mobile */
  }
}
@keyframes focus-in {
  0% {
    transform: scale(1.1); /* Start slightly larger */
    filter: blur(5px); /* Start blurred */
    opacity: 0; /* Invisible at the start */
  }
  100% {
    transform: scale(1); /* End at normal size */
    filter: blur(0); /* End with no blur */
    opacity: 1; /* Fully visible */
  }
}

[data-aos="focus-in"] {
  animation: focus-in 1s ease forwards; /* Use the keyframes defined above */
}
.why-mitsuha {
  color: #f1f1f1; /* Light text color for readability */
  padding: 40px 20px; /* Padding for spacing */
  border-radius: 10px; /* Rounded corners */
  max-width: 800px; /* Maximum width for better readability */
  margin: 20px auto; /* Center the section */
  text-align: center; /* Center text */
}

.why-mitsuha h2 {
  font-size: 2.5em; /* Larger font size for the section title */
  margin-bottom: 20px; /* Space below the title */
}

.why-mitsuha p {
  font-size: 1.2em; /* Font size for the paragraph */
  line-height: 1.6; /* Line height for readability */
  margin: 0; /* Remove default margin for paragraphs */
  text-align: center;
}
.gif-inline {
  width: 30px; /* Adjust width as necessary */
  height: auto; /* Maintain aspect ratio */
  vertical-align: middle; /* Aligns GIF with text */
  margin: 0 5px; /* Spacing around the GIF */
}
.features {
  padding: 40px 20px;
  margin: 100px;
  text-align: center;
  color: #f1f1f1; /* Light text for readability */
}

.features h2 {
  font-size: 2em;
  margin-bottom: 20px; /* Space below the heading */
}

.features-container {
  display: flex; /* Use flexbox for layout */
  justify-content: space-between; /* Space between items */
  align-items: flex-start; /* Align items at the start */
}

.feature-grid {
  display: grid; /* Use grid layout for features */
  grid-template-columns: repeat(2, 1fr); /* Two columns */
  gap: 10px; /* Reduced space between feature items */
  width: 50%; /* Take half the width of the screen */
}

.feature {
  background: rgba(104, 121, 105, 0.199); /* Semi-transparent background */
  border-radius: 10px; /* Rounded corners */
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Shadow effect */
  transition: transform 0.3s; /* Animation on hover */
}

.feature:hover {
  transform: scale(1.05); /* Scale effect on hover */
  cursor: pointer;
}

.feature-image {
  width: 50%; /* Take half the width of the screen */
  flex-shrink: 0; /* Prevent image from shrinking */
}

.feature-image img {
  border-radius: 10px; /* Rounded corners */
  height: 300px; /* Maintain aspect ratio */
}

/* Responsive Styles */
@media (max-width: 768px) {
  .features-container {
    flex-direction: column; /* Stack features and image vertically */
    align-items: center; /* Center align items */
  }

  .feature-grid {
    width: 100%; /* Full width for the grid */
    grid-template-columns: repeat(1, 1fr); /* Single column for smaller screens */
  }

  .feature-image {
    width: 100%; /* Full width for image on smaller screens */
  }
}

@media (max-width: 600px) {
  .features {
    padding: 20px; /* Reduce padding on smaller screens */
  }

  .features h2 {
    font-size: 1.5em; /* Smaller heading size on mobile */
  }

  .feature {
    padding: 15px; /* Reduced padding for features */
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
.main-image {
  animation: float 3s ease-in-out infinite;
}
/* Set up the initial opacity for page content */
body {
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* Add a class for the fade-out effect */
.fade-out {
  opacity: 0;
}
/* This class will be added after the page loads */
.fade-in {
  opacity: 1;
}