/* General Styles */
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    color: #ffffff;
    overflow-x: hidden;
    position: relative;
    background: #0a0a0a; /* Dark background */
  }
  
  /* Video Background */
  .video-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  
  .video-background video {
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
  }
  
  /* Overlay for better text visibility */
  .video-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Dark overlay */
    z-index: 1;
  }
  
  /* Sticky Navbar */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black background */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
  }
  
  .navbar.scrolled {
    background-color: rgba(0, 0, 0, 0.95); /* Darker on scroll */
  }
  
  .logo {
    font-size: 24px;
    font-weight: bold;
    color: #8a2be2; /* Purple */
    transition: color 0.3s ease;
  }
  
  .logo:hover {
    color: #7b1fa2; /* Darker purple */
  }
  
  .nav-links {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
    flex: 1; /* Take up remaining space */
    justify-content: center; /* Center the links */
  }
  
  .nav-links li {
    margin: 0 15px; /* Add spacing between links */
    perspective: 1000px; /* Enable 3D perspective */
  }
  
  .nav-links a {
    text-decoration: none;
    color: #ffffff;
    font-size: 16px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px; /* Space between icon and text */
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  
  .nav-links a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #8a2be2; /* Purple for animation */
    transform: rotateX(90deg) translateZ(-25px);
    transform-origin: bottom;
    transition: transform 0.3s ease;
    opacity: 0;
  }
  
  .nav-links a:hover {
    transform: translateZ(25px);
    background-color: #8a2be2; /* Purple on hover */
    color: #ffffff;
  }
  
  .nav-links a:hover::before {
    transform: rotateX(0deg) translateZ(0);
    opacity: 1;
  }
  
  /* Buttons Container */
  .nav-buttons {
    display: flex;
    gap: 10px; /* Space between buttons */
  }
  
  /* Buttons */
  .btn-signin, .btn-login {
    padding: 10px 20px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
  }
  
  .btn-signin {
    background-color: #8a2be2; /* Purple */
    color: #ffffff;
  }
  
  .btn-login {
    background-color: #007bff; /* Blue color */
    color: #ffffff;
  }
  
  .btn-signin:hover {
    background-color: #7b1fa2; /* Darker shade of purple */
  }
  
  .btn-login:hover {
    background-color: #005bb5; /* Darker shade of blue */
  }
  
  /* Content Styles */
  .content {
    padding: 150px 50px;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  
  .content h1 {
    font-size: 48px;
    margin-bottom: 20px;
    transform-style: preserve-3d;
    animation: float 5s infinite ease-in-out;
    color: #8a2be2; /* Purple */
  }
  
  .content p {
    font-size: 18px;
    color: #cccccc;
    transform-style: preserve-3d;
    animation: float 5s infinite ease-in-out;
  }
  
  /* 3D Floating Animation */
  @keyframes float {
    0%, 100% {
      transform: translateZ(0);
    }
    50% {
      transform: translateZ(50px);
    }
  }
  
  /* Parallax Effect */
  .parallax {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  /* Responsive Design */
  @media (max-width: 768px) {
    .navbar {
      flex-direction: column;
      padding: 10px;
    }
  
    .nav-links {
      flex-direction: column;
      gap: 10px;
    }
  
    .nav-buttons {
      margin-top: 10px;
    }
  
    .content {
      padding: 100px 20px;
    }
  }

/* Blog Section Styles */
.blog-section {
  display: flex;
  flex-direction: column; /* Stack content vertically */
  align-items: center;
  padding: 30px; /* Add padding inside the border */
  margin: 50px 0;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
  border-radius: 10px;
  border: 2px solid #8a2be2; /* Base border color */
  box-shadow:
    0 0 10px 2px rgba(138, 43, 226, 0.5), /* Inner glow */
    0 0 20px 5px rgba(138, 43, 226, 0.3), /* Middle glow */
    0 0 30px 10px rgba(138, 43, 226, 0.1); /* Outer glow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  perspective: 1000px; /* Enable 3D perspective */
  position: relative;
}

.blog-section::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid #8a2be2; /* Outer border */
  border-radius: 12px; /* Slightly larger radius */
  z-index: -1;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.blog-section:hover {
  transform: translateY(-10px) rotateX(5deg) rotateY(5deg);
  box-shadow:
    0 0 15px 5px rgba(138, 43, 226, 0.7), /* Brighter inner glow */
    0 0 30px 10px rgba(138, 43, 226, 0.5), /* Brighter middle glow */
    0 0 45px 15px rgba(138, 43, 226, 0.3); /* Brighter outer glow */
}

.blog-section:hover::before {
  opacity: 1; /* Make the outer border more visible on hover */
}

.blog-content {
  text-align: center;
  margin-bottom: 30px; /* Space between content and image */
}

.blog-content h2 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #8a2be2; /* Purple */
}

.blog-content p {
  font-size: 18px;
  color: #cccccc;
  margin-bottom: 30px;
}

.blog-image {
  width: 100%;
  max-width: 600px; /* Limit image width */
  text-align: center;
  
  
}

.blog-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 2px solid #8a2be2; /* Base border color */
  box-shadow:
    0 0 10px 2px rgba(138, 43, 226, 0.5), /* Inner glow */
    0 0 20px 5px rgba(138, 43, 226, 0.3), /* Middle glow */
    0 0 30px 10px rgba(138, 43, 226, 0.1); /* Outer glow */
  
}

.blog-section:hover .blog-image img {
  transform: translateZ(20px) rotateY(10deg);
  box-shadow:
    0 0 15px 5px rgba(138, 43, 226, 0.7), /* Brighter inner glow */
    0 0 30px 10px rgba(138, 43, 226, 0.5), /* Brighter middle glow */
    0 0 45px 15px rgba(138, 43, 226, 0.3); /* Brighter outer glow */
}

/* Read More Button */
.btn-readmore {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #8a2be2; /* Purple */
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-readmore:hover {
  background-color: #7b1fa2; /* Darker purple */
}
@media (max-width: 768px) {
  .blog-content h2 {
    font-size: 28px;
  }

  .blog-content p {
    font-size: 16px;
  }
}
/* Footer Styles */
/* Footer Styles */
.footer {
  background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black background */
  color: #ffffff;
  padding: 40px 20px;
  text-align: center;
  border-top: 2px solid #8a2be2; /* Purple border */
  margin-top: 50px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

/* Social Media Links */
.social-media {
  margin-bottom: 20px;
}

.social-media .social-link {
  color: #ffffff;
  font-size: 20px;
  margin: 0 10px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-media .social-link:hover {
  color: #8a2be2; /* Purple on hover */
  transform: translateY(-5px);
}

/* Footer Links */
.footer-links {
  margin-bottom: 20px;
}

.footer-links a {
  color: #ffffff;
  text-decoration: none;
  margin: 0 15px;
  font-size: 16px;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #8a2be2; /* Purple on hover */
}


@media (max-width: 768px) {
  .footer-links {
    flex-direction: column;
    gap: 10px;
  }

  .footer-links a {
    margin: 5px 0;
  }
}

/* Copyright Notice */
.copyright {
  font-size: 14px;
  color: #cccccc;
  margin-top: 20px;
}


/* Review Box Styles */
.review-box {
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
  border: 2px solid #8a2be2; /* Purple border */
  border-radius: 10px;
  padding: 20px;
  margin: 50px auto;
  max-width: 800px;
  text-align: center;
}

.review-box h3 {
  font-size: 24px;
  color: #8a2be2; /* Purple */
  margin-bottom: 20px;
}

#reviews {
  margin-bottom: 20px;
}

.review {
  background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white background */
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  text-align: left;
}

.review p {
  margin: 0;
  color: #cccccc;
}

.review .review-author {
  font-size: 14px;
  color: #8a2be2; /* Purple */
  font-style: italic;
  margin-top: 10px;
}

.review .like-button {
  background: none;
  border: none;
  color: #8a2be2; /* Purple */
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
}

.review .like-button:hover {
  color: #7b1fa2; /* Darker purple */
}

#review-form textarea {
  width: 100%;
  height: 100px;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #8a2be2; /* Purple border */
  background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white background */
  color: #ffffff;
  margin-bottom: 10px;
}

#review-form button {
  background-color: #8a2be2; /* Purple */
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#review-form button:hover {
  background-color: #7b1fa2; /* Darker purple */
}

.btn-profile {
  padding: 10px;
  border-radius: 50%; /* Make it circular */
  background-color: #8a2be2; /* Purple */
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; /* Fixed width */
  height: 40px; /* Fixed height */
}

.btn-profile:hover {
  background-color: #7b1fa2; /* Darker purple */
  transform: scale(1.1); /* Slightly enlarge on hover */
}




/* Dropdown menu */
.dropdown-menu {
  display: none; /* Hide dropdown by default */
  position: absolute;
  top: 100%; /* Position below the profile button */
  right: 0; /* Align to the right */
  background-color: #7b1fa2;
  border-radius: 4px;
  padding: 10px 0;
  list-style: none;
  min-width: 150px;
  z-index: 1000; /* Ensure dropdown is above other content */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow for better visibility */
}

.dropdown-menu li {
  margin: 0;
  padding: 0;
}

.dropdown-menu a {
  display: block;
  padding: 8px 16px;
  color: #fff;
  text-decoration: none;
}

.dropdown-menu a:hover {
  background-color:  black;/* Hover effect */
}

/* Show dropdown on hover or click */

.nav-buttons:focus-within .dropdown-menu {
  display: block;
}


/* Responsive styles for profile dropdown */
@media (max-width: 768px) {
 

  .dropdown-menu {
    right: -50%; /* Adjust dropdown position */
  }
}



/* Settings Page Styles */
.settings-container {
  max-width: 800px;
  margin: 50px auto;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black background */
  border-radius: 10px;
  border: 2px solid #8a2be2; /* Purple border */
  box-shadow: 0 0 10px 2px rgba(138, 43, 226, 0.5); /* Inner glow */
}

.settings-container h1 {
  font-size: 36px;
  color: #8a2be2; /* Purple */
  text-align: center;
  margin-bottom: 30px;
}

.settings-section {
  margin-bottom: 30px;
}

.settings-section h2 {
  font-size: 24px;
  color: #8a2be2; /* Purple */
  margin-bottom: 20px;
}

.settings-section label {
  display: block;
  font-size: 16px;
  color: #cccccc;
  margin-bottom: 8px;
}

.settings-section input,
.settings-section textarea,
.settings-section select {
  width: 100%;
  padding: 10px;
  border: 1px solid #8a2be2; /* Purple border */
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent white background */
  color: #ffffff;
  margin-bottom: 20px;
}

.settings-section input:focus,
.settings-section textarea:focus,
.settings-section select:focus {
  outline: none;
  border-color: #7b1fa2; /* Darker purple */
}

.btn-save {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #8a2be2; /* Purple */
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-save:hover {
  background-color: #7b1fa2; /* Darker purple */
}




/* Notification Styles */
.notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  padding: 15px 20px;
  background-color: #8a2be2; /* Purple */
  color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: none; /* Hidden by default */
  z-index: 1000;
}

.notification.show {
  display: block; /* Show notification */
  animation: fadeInOut 3s ease-in-out; /* Animation */
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
    transform: translateY(20px);
  }
  10%, 90% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Active Link Styles */
.nav-links a.active {
  color: #8a2be2; /* Purple */
  font-weight: bold;
  border-bottom: 2px solid #8a2be2; /* Add an underline or other indicator */
}



/* Smooth Transition for Active Link */
.nav-links a {
  transition: color 0.3s ease, border-bottom 0.3s ease;
}