/* Hide scrollbar but still allow scrolling */
html, body {
  overflow: auto; /* Allow scrolling but hide the scrollbar */
  height: 100%;
}

/* Hide scrollbar in WebKit browsers (Chrome, Safari) */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar in Firefox */
html {
  scrollbar-width: none;
}
/* General Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  background: #1b1b1b;
  color: #e0e0e0;
  line-height: 1.6;
  overflow-x: hidden;
}

/* Header Styles */
header {
  position: sticky;
  top: 0;
  background: #181818;
  padding: 15px 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  text-align: center;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
}

nav ul li a {
  text-decoration: none;
  color: #e0e0e0;
  font-weight: 500;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: #f5f5f5;
}


/* Portfolio Section */
#portfolio {
  padding: 80px 20px;
  background-color: #121212; /* Dark background */
  color: #e0e0e0; /* Light grey text for contrast */
}

#portfolio h2 {
  font-size: 2.8rem;
  text-align: center;
  margin-bottom: 20px;
  font-weight: 700;
  color: #f1f1f1; /* Lighter shade of grey for the main heading */
}

#portfolio p {
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: 50px;
  color: #bbb; /* Slightly darker grey for the description */
  line-height: 1.6;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Softwares Section */
.softwares {
  text-align: center;
  margin-top: 40px;
}

.softwares h3 {
  font-size: 2.2rem;
  margin-bottom: 40px;
  font-weight: 600;
  color: #e0e0e0; /* Consistent grey color */
}

/* Button Container */
.software-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 30px;
  justify-items: center;
  margin-top: 20px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* Software Button Styles */
.software-btn {
  background-color: #1c1c1c; /* Darker background for the buttons */
  border: 2px solid #333; /* Slightly lighter grey border */
  border-radius: 12px;
  padding: 20px;
  width: 180px;
  height: 180px;
  text-align: center;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  color: #fff; /* Changed text color to white */
  font-weight: 500;
  margin-top: 10px;
}

.software-btn img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  transition: transform 0.3s ease;
}

/* Hover Effects */
.software-btn:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Darker shadow on hover */
}

.software-btn:hover img {
  transform: scale(1.15);
}

.software-btn:focus {
  outline: none;
}

/* Button Text */
.software-btn span {
  font-size: 1.1rem;
  color: #fff; /* Changed text color to white */
  font-weight: 500;
  margin-top: 10px;
}


/* Responsive Design */
@media (max-width: 768px) {
  #portfolio {
      padding: 60px 15px;
  }

  .software-btn {
      width: 160px;
      height: 160px;
      padding: 18px;
  }

  #portfolio h2 {
      font-size: 2.2rem;
  }

  .softwares h3 {
      font-size: 1.8rem;
  }

  .software-buttons {
      gap: 25px;
  }
}

@media (max-width: 480px) {
  #portfolio h2 {
      font-size: 1.8rem;
  }

  .software-btn {
      width: 140px;
      height: 140px;
      padding: 16px;
  }

  .software-btn span {
      font-size: 1rem;
  }
}

/* Photoshop Section */
#photoshop {
  padding: 80px 20px;
  background: #101010; /* Darker background for a sleek feel */
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid #333; /* Enhanced border for separation */
  border-top: 3px solid #333;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.7); /* Deeper shadow for modern look */
}

/* Subtle Background Effect */
#photoshop::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 75%);
  transform: translate(-50%, -50%);
  filter: blur(100px);
  z-index: -1;
}

/* Section Title */
#photoshop h3 {
  font-size: 3rem;
  color: #eaeaea;
  margin-bottom: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8); /* Stronger shadow for contrast */
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

#photoshop h3:hover {
  color: #bbb; /* Subtle hover effect */
  text-shadow: 6px 6px 16px rgba(0, 0, 0, 0.9); /* Stronger shadow on hover */
}

/* Slider Wrapper */
.wrapper {
  position: relative;
  width: 90%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 6px 35px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.wrapper:hover {
  transform: scale(1.03); /* Subtle zoom effect */
  box-shadow: 0 8px 45px rgba(0, 0, 0, 0.9); /* Stronger shadow on hover */
}

/* Image Styling */
.wrapper .img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.6s ease, filter 0.6s ease;
  transform: scale(1.05); /* Slight zoom-out effect for inactive images */
  filter: blur(4px); /* Blur effect on inactive images */
}

.wrapper .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Active Image */
#project1:checked ~ .img-1,
#project2:checked ~ .img-2,
#project3:checked ~ .img-3,
#project4:checked ~ .img-4,
#project5:checked ~ .img-5,
#project6:checked ~ .img-6,
#project7:checked ~ .img-7,
#project8:checked ~ .img-8,
#project9:checked ~ .img-9,
#project10:checked ~ .img-10,
#project11:checked ~ .img-11,
#project12:checked ~ .img-12,
#project13:checked ~ .img-13,
#project14:checked ~ .img-14,
#project15:checked ~ .img-15,
#project16:checked ~ .img-16,
#project17:checked ~ .img-17,
#project18:checked ~ .img-18,
#project19:checked ~ .img-19,
#project20:checked ~ .img-20,
#project21:checked ~ .img-21,
#project22:checked ~ .img-22,
#project23:checked ~ .img-23,
#project24:checked ~ .img-24,
#project25:checked ~ .img-25,
#project26:checked ~ .img-26,
#project27:checked ~ .img-27,
#project28:checked ~ .img-28,
#project29:checked ~ .img-29,
#project30:checked ~ .img-30 {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Slider Navigation */
.sliders {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px; /* Reduced spacing for additional dots */
  z-index: 1;
}

.sliders .dot {
  width: 12px;
  height: 12px;
  border: 2px solid #999;
  border-radius: 50%;
  cursor: pointer;
  background: #444;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.sliders .dot:hover {
  background: #777;
  transform: scale(1.4); /* Scale up the dot on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Active Dot */
#project1:checked ~ .sliders .dot:nth-child(1),
#project2:checked ~ .sliders .dot:nth-child(2),
#project3:checked ~ .sliders .dot:nth-child(3),
#project4:checked ~ .sliders .dot:nth-child(4),
#project5:checked ~ .sliders .dot:nth-child(5),
#project6:checked ~ .sliders .dot:nth-child(6),
#project7:checked ~ .sliders .dot:nth-child(7),
#project8:checked ~ .sliders .dot:nth-child(8),
#project9:checked ~ .sliders .dot:nth-child(9),
#project10:checked ~ .sliders .dot:nth-child(10),
#project11:checked ~ .sliders .dot:nth-child(11),
#project12:checked ~ .sliders .dot:nth-child(12),
#project13:checked ~ .sliders .dot:nth-child(13),
#project14:checked ~ .sliders .dot:nth-child(14),
#project15:checked ~ .sliders .dot:nth-child(15),
#project16:checked ~ .sliders .dot:nth-child(16),
#project17:checked ~ .sliders .dot:nth-child(17),
#project18:checked ~ .sliders .dot:nth-child(18),
#project19:checked ~ .sliders .dot:nth-child(19),
#project20:checked ~ .sliders .dot:nth-child(20),
#project21:checked ~ .sliders .dot:nth-child(21),
#project22:checked ~ .sliders .dot:nth-child(22),
#project23:checked ~ .sliders .dot:nth-child(23),
#project24:checked ~ .sliders .dot:nth-child(24),
#project25:checked ~ .sliders .dot:nth-child(25),
#project26:checked ~ .sliders .dot:nth-child(26),
#project27:checked ~ .sliders .dot:nth-child(27),
#project28:checked ~ .sliders .dot:nth-child(28),
#project29:checked ~ .sliders .dot:nth-child(29),
#project30:checked ~ .sliders .dot:nth-child(30) {
  background: #888;
  transform: scale(1.6);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* Focused State on Dots */
.sliders .dot:focus {
  outline: none;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); /* Stronger focus ring */
}

/* Hide Radio Buttons */
input[type="radio"] {
  display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  #photoshop h3 {
    font-size: 2.4rem;
  }

  .wrapper {
    width: 100%;
  }

  .sliders {
    bottom: 18px;
  }

  .sliders .dot {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 480px) {
  #photoshop h3 {
    font-size: 2rem;
  }

  .sliders .dot {
    width: 8px;
    height: 8px;
  }
}


/* Illustrator Section */
#illustrator {
  padding: 80px 20px;
  background: #101010; /* Darker background for a sleek feel */
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid #333; /* Enhanced border for separation */
  border-top: 3px solid #333;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.7); /* Deeper shadow for modern look */
}

/* Subtle Background Effect */
#illustrator::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 75%);
  transform: translate(-50%, -50%);
  filter: blur(100px);
  z-index: -1;
}

/* Section Title */
#illustrator h3 {
  font-size: 3rem;
  color: #eaeaea;
  margin-bottom: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8); /* Stronger shadow for contrast */
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

#illustrator h3:hover {
  color: #bbb; /* Subtle hover effect */
  text-shadow: 6px 6px 16px rgba(0, 0, 0, 0.9); /* Stronger shadow on hover */
}

/* Slider Wrapper */
.wrapper {
  position: relative;
  width: 90%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 6px 35px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.wrapper:hover {
  transform: scale(1.03); /* Subtle zoom effect */
  box-shadow: 0 8px 45px rgba(0, 0, 0, 0.9); /* Stronger shadow on hover */
}

/* Image Styling */
.wrapper .img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.6s ease, filter 0.6s ease;
  transform: scale(1.05); /* Slight zoom-out effect for inactive images */
  filter: blur(4px); /* Blur effect on inactive images */
}

.wrapper .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Active Image */
#illustrator1:checked ~ .img-1,
#illustrator2:checked ~ .img-2,
#illustrator3:checked ~ .img-3,
#illustrator4:checked ~ .img-4,
#illustrator5:checked ~ .img-5,
#illustrator6:checked ~ .img-6,
#illustrator7:checked ~ .img-7,
#illustrator8:checked ~ .img-8,
#illustrator9:checked ~ .img-9,
#illustrator10:checked ~ .img-10,
#illustrator11:checked ~ .img-11,
#illustrator12:checked ~ .img-12,
#illustrator13:checked ~ .img-13,
#illustrator14:checked ~ .img-14,
#illustrator15:checked ~ .img-15,
#illustrator16:checked ~ .img-16,
#illustrator17:checked ~ .img-17,
#illustrator18:checked ~ .img-18,
#illustrator19:checked ~ .img-19,
#illustrator20:checked ~ .img-20,
#illustrator21:checked ~ .img-21,
#illustrator22:checked ~ .img-22,
#illustrator23:checked ~ .img-23,
#illustrator24:checked ~ .img-24,
#illustrator25:checked ~ .img-25,
#illustrator26:checked ~ .img-26,
#illustrator27:checked ~ .img-27,
#illustrator28:checked ~ .img-28,
#illustrator29:checked ~ .img-29,
#illustrator30:checked ~ .img-30 {
  opacity: 1;
  transform: scale(1);
  filter: blur(0); /* Clear blur on active image */
}

/* Slider Navigation */
.sliders {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 1;
}

.sliders .dot {
  width: 14px;
  height: 14px;
  border: 2px solid #999;
  border-radius: 50%;
  cursor: pointer;
  background: #444;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.sliders .dot:hover {
  background: #777;
  transform: scale(1.4); /* Scale up the dot on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Active Dot */
#illustrator1:checked ~ .sliders .dot:nth-child(1),
#illustrator2:checked ~ .sliders .dot:nth-child(2),
#illustrator3:checked ~ .sliders .dot:nth-child(3),
#illustrator4:checked ~ .sliders .dot:nth-child(4),
#illustrator5:checked ~ .sliders .dot:nth-child(5),
#illustrator6:checked ~ .sliders .dot:nth-child(6),
#illustrator7:checked ~ .sliders .dot:nth-child(7),
#illustrator8:checked ~ .sliders .dot:nth-child(8),
#illustrator9:checked ~ .sliders .dot:nth-child(9),
#illustrator10:checked ~ .sliders .dot:nth-child(10),
#illustrator11:checked ~ .sliders .dot:nth-child(11),
#illustrator12:checked ~ .sliders .dot:nth-child(12),
#illustrator13:checked ~ .sliders .dot:nth-child(13),
#illustrator14:checked ~ .sliders .dot:nth-child(14),
#illustrator15:checked ~ .sliders .dot:nth-child(15),
#illustrator16:checked ~ .sliders .dot:nth-child(16),
#illustrator17:checked ~ .sliders .dot:nth-child(17),
#illustrator18:checked ~ .sliders .dot:nth-child(18),
#illustrator19:checked ~ .sliders .dot:nth-child(19),
#illustrator20:checked ~ .sliders .dot:nth-child(20),
#illustrator21:checked ~ .sliders .dot:nth-child(21),
#illustrator22:checked ~ .sliders .dot:nth-child(22),
#illustrator23:checked ~ .sliders .dot:nth-child(23),
#illustrator24:checked ~ .sliders .dot:nth-child(24),
#illustrator25:checked ~ .sliders .dot:nth-child(25),
#illustrator26:checked ~ .sliders .dot:nth-child(26),
#illustrator27:checked ~ .sliders .dot:nth-child(27),
#illustrator28:checked ~ .sliders .dot:nth-child(28),
#illustrator29:checked ~ .sliders .dot:nth-child(29),
#illustrator30:checked ~ .sliders .dot:nth-child(30) {
  background: #888;
  transform: scale(1.6); /* Larger active dot */
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5); /* Glowing effect on active dot */
}

/* Focused State on Dots */
.sliders .dot:focus {
  outline: none;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); /* Stronger focus ring */
}

/* Hide Radio Buttons */
input[type="radio"] {
  display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  #illustrator h3 {
    font-size: 2.4rem;
  }

  .wrapper {
    width: 100%;
  }

  .sliders {
    bottom: 18px;
  }

  .sliders .dot {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 480px) {
  #illustrator h3 {
    font-size: 2rem;
  }

  .sliders .dot {
    width: 10px;
    height: 10px;
  }
}

/* Match 3 Game Section */
#Match3Game {
  padding: 80px 20px;
  background: #1a1a1a;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 3px solid #444;
  border-bottom: 3px solid #444;
}

/* Background Glow Effect */
#Match3Game::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 80%);
  transform: translate(-50%, -50%);
  filter: blur(120px);
  z-index: -1;
}

/* Section Title */
#Match3Game h3 {
  font-size: 3rem;
  color: #eaeaea;
  margin-bottom: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

#Match3Game h3:hover {
  color: #bbb;
  text-shadow: 6px 6px 16px rgba(0, 0, 0, 0.9);
}

/* Slider Wrapper */
#Match3Game .slider-wrapper {
  position: relative;
  width: 90%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 6px 35px rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#Match3Game .slider-wrapper:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 45px rgba(0, 0, 0, 0.9);
}

/* Image Styling */
#Match3Game .slider-wrapper .img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.6s ease, filter 0.6s ease;
  transform: scale(1.05);
  filter: blur(4px);
}

#Match3Game .slider-wrapper .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Active Image */
#Match3Game1:checked ~ .img-1,
#Match3Game2:checked ~ .img-2,
#Match3Game3:checked ~ .img-3,
#Match3Game4:checked ~ .img-4,
#Match3Game5:checked ~ .img-5,
#Match3Game6:checked ~ .img-6,
#Match3Game7:checked ~ .img-7,
#Match3Game8:checked ~ .img-8,
#Match3Game9:checked ~ .img-9,
#Match3Game10:checked ~ .img-10,
#Match3Game11:checked ~ .img-11,
#Match3Game12:checked ~ .img-12,
#Match3Game13:checked ~ .img-13,
#Match3Game14:checked ~ .img-14,
#Match3Game15:checked ~ .img-15,
#Match3Game16:checked ~ .img-16,
#Match3Game17:checked ~ .img-17,
#Match3Game18:checked ~ .img-18,
#Match3Game19:checked ~ .img-19,
#Match3Game20:checked ~ .img-20,
#Match3Game21:checked ~ .img-21 {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Slider Navigation */
#Match3Game .sliders {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 1;
}

#Match3Game .sliders .dot {
  width: 14px;
  height: 14px;
  border: 2px solid #999;
  border-radius: 50%;
  cursor: pointer;
  background: #444;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

#Match3Game .sliders .dot:hover {
  background: #777;
  transform: scale(1.4);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Active Dot */
#Match3Game1:checked ~ .sliders .dot:nth-child(1),
#Match3Game2:checked ~ .sliders .dot:nth-child(2),
#Match3Game3:checked ~ .sliders .dot:nth-child(3),
#Match3Game4:checked ~ .sliders .dot:nth-child(4),
#Match3Game5:checked ~ .sliders .dot:nth-child(5),
#Match3Game6:checked ~ .sliders .dot:nth-child(6),
#Match3Game7:checked ~ .sliders .dot:nth-child(7),
#Match3Game8:checked ~ .sliders .dot:nth-child(8),
#Match3Game9:checked ~ .sliders .dot:nth-child(9),
#Match3Game10:checked ~ .sliders .dot:nth-child(10),
#Match3Game11:checked ~ .sliders .dot:nth-child(11),
#Match3Game12:checked ~ .sliders .dot:nth-child(12),
#Match3Game13:checked ~ .sliders .dot:nth-child(13),
#Match3Game14:checked ~ .sliders .dot:nth-child(14),
#Match3Game15:checked ~ .sliders .dot:nth-child(15),
#Match3Game16:checked ~ .sliders .dot:nth-child(16),
#Match3Game17:checked ~ .sliders .dot:nth-child(17),
#Match3Game18:checked ~ .sliders .dot:nth-child(18),
#Match3Game19:checked ~ .sliders .dot:nth-child(19),
#Match3Game20:checked ~ .sliders .dot:nth-child(20),
#Match3Game21:checked ~ .sliders .dot:nth-child(21) {
  background: #888;
  transform: scale(1.6);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* Hide Radio Buttons */
input[type="radio"] {
  display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  #Match3Game h3 {
    font-size: 2.4rem;
  }

  .slider-wrapper {
    width: 100%;
  }

  .sliders {
    bottom: 18px;
  }

  .sliders .dot {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 480px) {
  #Match3Game h3 {
    font-size: 2rem;
  }

  .sliders .dot {
    width: 10px;
    height: 10px;
  }
}

/* Racing Game Section */
#RacingGame {
  padding: 80px 20px;
  background: #1a1a1a;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 3px solid #444;
  border-bottom: 3px solid #444;
}

/* Background Glow Effect */
#RacingGame::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 80%);
  transform: translate(-50%, -50%);
  filter: blur(120px);
  z-index: -1;
}

/* Section Title */
#RacingGame h3 {
  font-size: 3rem;
  color: #eaeaea;
  margin-bottom: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

#RacingGame h3:hover {
  color: #bbb;
  text-shadow: 6px 6px 16px rgba(0, 0, 0, 0.9);
}

/* Slider Wrapper */
#RacingGame .slider-wrapper {
  position: relative;
  width: 90%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 6px 35px rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#RacingGame .slider-wrapper:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 45px rgba(0, 0, 0, 0.9);
}

/* Image Styling */
#RacingGame .slider-wrapper .img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.6s ease, filter 0.6s ease;
  transform: scale(1.05);
  filter: blur(4px);
}

#RacingGame .slider-wrapper .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Active Image */
#RacingGame1:checked ~ .img-1,
#RacingGame2:checked ~ .img-2,
#RacingGame3:checked ~ .img-3,
#RacingGame4:checked ~ .img-4,
#RacingGame5:checked ~ .img-5,
#RacingGame6:checked ~ .img-6,
#RacingGame7:checked ~ .img-7,
#RacingGame8:checked ~ .img-8,
#RacingGame9:checked ~ .img-9,
#RacingGame10:checked ~ .img-10,
#RacingGame11:checked ~ .img-11,
#RacingGame12:checked ~ .img-12,
#RacingGame13:checked ~ .img-13,
#RacingGame14:checked ~ .img-14,
#RacingGame15:checked ~ .img-15,
#RacingGame16:checked ~ .img-16,
#RacingGame17:checked ~ .img-17,
#RacingGame18:checked ~ .img-18,
#RacingGame19:checked ~ .img-19,
#RacingGame20:checked ~ .img-20,
#RacingGame21:checked ~ .img-21 {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Slider Navigation */
#RacingGame .sliders {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 1;
}

#RacingGame .sliders .dot {
  width: 14px;
  height: 14px;
  border: 2px solid #999;
  border-radius: 50%;
  cursor: pointer;
  background: #444;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

#RacingGame .sliders .dot:hover {
  background: #777;
  transform: scale(1.4);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Active Dot */
#RacingGame1:checked ~ .sliders .dot:nth-child(1),
#RacingGame2:checked ~ .sliders .dot:nth-child(2),
#RacingGame3:checked ~ .sliders .dot:nth-child(3),
#RacingGame4:checked ~ .sliders .dot:nth-child(4),
#RacingGame5:checked ~ .sliders .dot:nth-child(5),
#RacingGame6:checked ~ .sliders .dot:nth-child(6),
#RacingGame7:checked ~ .sliders .dot:nth-child(7),
#RacingGame8:checked ~ .sliders .dot:nth-child(8),
#RacingGame9:checked ~ .sliders .dot:nth-child(9),
#RacingGame10:checked ~ .sliders .dot:nth-child(10),
#RacingGame11:checked ~ .sliders .dot:nth-child(11),
#RacingGame12:checked ~ .sliders .dot:nth-child(12),
#RacingGame13:checked ~ .sliders .dot:nth-child(13),
#RacingGame14:checked ~ .sliders .dot:nth-child(14),
#RacingGame15:checked ~ .sliders .dot:nth-child(15),
#RacingGame16:checked ~ .sliders .dot:nth-child(16),
#RacingGame17:checked ~ .sliders .dot:nth-child(17),
#RacingGame18:checked ~ .sliders .dot:nth-child(18),
#RacingGame19:checked ~ .sliders .dot:nth-child(19),
#RacingGame20:checked ~ .sliders .dot:nth-child(20),
#RacingGame21:checked ~ .sliders .dot:nth-child(21) {
  background: #888;
  transform: scale(1.6);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* Hide Radio Buttons */
input[type="radio"] {
  display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  #RacingGame h3 {
    font-size: 2.4rem;
  }

  .slider-wrapper {
    width: 100%;
  }

  .sliders {
    bottom: 18px;
  }

  .sliders .dot {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 480px) {
  #RacingGame h3 {
    font-size: 2rem;
  }

  .sliders .dot {
    width: 10px;
    height: 10px;
  }
}

/* Elemental Socket Game Section */
#ElementalSocketGame {
  padding: 80px 20px;
  background: #1a1a1a;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 3px solid #444;
  border-bottom: 3px solid #444;
}

/* Background Glow Effect */
#ElementalSocketGame::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 80%);
  transform: translate(-50%, -50%);
  filter: blur(120px);
  z-index: -1;
}

/* Section Title */
#ElementalSocketGame h3 {
  font-size: 3rem;
  color: #eaeaea;
  margin-bottom: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

#ElementalSocketGame h3:hover {
  color: #bbb;
  text-shadow: 6px 6px 16px rgba(0, 0, 0, 0.9);
}

/* Slider Wrapper */
#ElementalSocketGame .slider-wrapper {
  position: relative;
  width: 90%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 6px 35px rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#ElementalSocketGame .slider-wrapper:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 45px rgba(0, 0, 0, 0.9);
}

/* Image Styling */
#ElementalSocketGame .slider-wrapper .img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.6s ease, filter 0.6s ease;
  transform: scale(1.05);
  filter: blur(4px);
}

#ElementalSocketGame .slider-wrapper .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Active Image */
#ElementalSocketGame1:checked ~ .img-1,
#ElementalSocketGame2:checked ~ .img-2,
#ElementalSocketGame3:checked ~ .img-3,
#ElementalSocketGame4:checked ~ .img-4,
#ElementalSocketGame5:checked ~ .img-5,
#ElementalSocketGame6:checked ~ .img-6,
#ElementalSocketGame7:checked ~ .img-7,
#ElementalSocketGame8:checked ~ .img-8,
#ElementalSocketGame9:checked ~ .img-9,
#ElementalSocketGame10:checked ~ .img-10,
#ElementalSocketGame11:checked ~ .img-11,
#ElementalSocketGame12:checked ~ .img-12 {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Slider Navigation */
#ElementalSocketGame .sliders {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 1;
}

#ElementalSocketGame .sliders .dot {
  width: 14px;
  height: 14px;
  border: 2px solid #999;
  border-radius: 50%;
  cursor: pointer;
  background: #444;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

#ElementalSocketGame .sliders .dot:hover {
  background: #777;
  transform: scale(1.4);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Active Dot */
#ElementalSocketGame1:checked ~ .sliders .dot:nth-child(1),
#ElementalSocketGame2:checked ~ .sliders .dot:nth-child(2),
#ElementalSocketGame3:checked ~ .sliders .dot:nth-child(3),
#ElementalSocketGame4:checked ~ .sliders .dot:nth-child(4),
#ElementalSocketGame5:checked ~ .sliders .dot:nth-child(5),
#ElementalSocketGame6:checked ~ .sliders .dot:nth-child(6),
#ElementalSocketGame7:checked ~ .sliders .dot:nth-child(7),
#ElementalSocketGame8:checked ~ .sliders .dot:nth-child(8),
#ElementalSocketGame9:checked ~ .sliders .dot:nth-child(9),
#ElementalSocketGame10:checked ~ .sliders .dot:nth-child(10),
#ElementalSocketGame11:checked ~ .sliders .dot:nth-child(11),
#ElementalSocketGame12:checked ~ .sliders .dot:nth-child(12) {
  background: #888;
  transform: scale(1.6);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* Hide Radio Buttons */
input[type="radio"] {
  display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  #ElementalSocketGame h3 {
    font-size: 2.4rem;
  }

  .slider-wrapper {
    width: 100%;
  }

  .sliders {
    bottom: 18px;
  }

  .sliders .dot {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 480px) {
  #ElementalSocketGame h3 {
    font-size: 2rem;
  }

  .sliders .dot {
    width: 10px;
    height: 10px;
  }
}


/* Mystic Maze Paradise Escape Section */
#MysticMazeParadiseEscape {
  padding: 80px 20px;
  background: #1a1a1a;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 3px solid #444;
  border-bottom: 3px solid #444;
}

/* Background Glow Effect */
#MysticMazeParadiseEscape::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 80%);
  transform: translate(-50%, -50%);
  filter: blur(120px);
  z-index: -1;
}

/* Section Title */
#MysticMazeParadiseEscape h3 {
  font-size: 3rem;
  color: #eaeaea;
  margin-bottom: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

#MysticMazeParadiseEscape h3:hover {
  color: #bbb;
  text-shadow: 6px 6px 16px rgba(0, 0, 0, 0.9);
}

/* Slider Wrapper */
#MysticMazeParadiseEscape .slider-wrapper {
  position: relative;
  width: 90%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 6px 35px rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#MysticMazeParadiseEscape .slider-wrapper:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 45px rgba(0, 0, 0, 0.9);
}

/* Image Styling */
#MysticMazeParadiseEscape .slider-wrapper .img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.6s ease, filter 0.6s ease;
  transform: scale(1.05);
  filter: blur(4px);
}

#MysticMazeParadiseEscape .slider-wrapper .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Active Image */
#MysticMazeParadiseEscape1:checked ~ .img-1,
#MysticMazeParadiseEscape2:checked ~ .img-2,
#MysticMazeParadiseEscape3:checked ~ .img-3,
#MysticMazeParadiseEscape4:checked ~ .img-4,
#MysticMazeParadiseEscape5:checked ~ .img-5,
#MysticMazeParadiseEscape6:checked ~ .img-6 {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Slider Navigation */
#MysticMazeParadiseEscape .sliders {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 1;
}

#MysticMazeParadiseEscape .sliders .dot {
  width: 14px;
  height: 14px;
  border: 2px solid #999;
  border-radius: 50%;
  cursor: pointer;
  background: #444;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

#MysticMazeParadiseEscape .sliders .dot:hover {
  background: #777;
  transform: scale(1.4);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Active Dot */
#MysticMazeParadiseEscape1:checked ~ .sliders .dot:nth-child(1),
#MysticMazeParadiseEscape2:checked ~ .sliders .dot:nth-child(2),
#MysticMazeParadiseEscape3:checked ~ .sliders .dot:nth-child(3),
#MysticMazeParadiseEscape4:checked ~ .sliders .dot:nth-child(4),
#MysticMazeParadiseEscape5:checked ~ .sliders .dot:nth-child(5),
#MysticMazeParadiseEscape6:checked ~ .sliders .dot:nth-child(6) {
  background: #888;
  transform: scale(1.6);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* Hide Radio Buttons */
input[type="radio"] {
  display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  #MysticMazeParadiseEscape h3 {
    font-size: 2.4rem;
  }

  .slider-wrapper {
    width: 100%;
  }

  .sliders {
    bottom: 18px;
  }

  .sliders .dot {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 480px) {
  #MysticMazeParadiseEscape h3 {
    font-size: 2rem;
  }

  .sliders .dot {
    width: 10px;
    height: 10px;
  }
}


/* IndividualAsset Section */
#IndividualAsset {
  padding: 80px 20px;
  background: #1a1a1a;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 3px solid #444;
  border-bottom: 3px solid #444;
}

/* Background Glow Effect */
#IndividualAsset::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 80%);
  transform: translate(-50%, -50%);
  filter: blur(120px);
  z-index: -1;
}

/* Section Title */
#IndividualAsset h3 {
  font-size: 3rem;
  color: #eaeaea;
  margin-bottom: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

#IndividualAsset h3:hover {
  color: #bbb;
  text-shadow: 6px 6px 16px rgba(0, 0, 0, 0.9);
}

/* Slider Wrapper */
#IndividualAsset .slider-wrapper {
  position: relative;
  width: 90%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 6px 35px rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#IndividualAsset .slider-wrapper:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 45px rgba(0, 0, 0, 0.9);
}

/* Image Styling */
#IndividualAsset .slider-wrapper .img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.6s ease, filter 0.6s ease;
  transform: scale(1.05);
  filter: blur(4px);
}

#IndividualAsset .slider-wrapper .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Active Image */
#IndividualAsset1:checked ~ .img-1,
#IndividualAsset2:checked ~ .img-2,
#IndividualAsset3:checked ~ .img-3,
#IndividualAsset4:checked ~ .img-4,
#IndividualAsset5:checked ~ .img-5,
#IndividualAsset6:checked ~ .img-6,
#IndividualAsset7:checked ~ .img-7,
#IndividualAsset8:checked ~ .img-8,
#IndividualAsset9:checked ~ .img-9,
#IndividualAsset10:checked ~ .img-10,
#IndividualAsset11:checked ~ .img-11,
#IndividualAsset12:checked ~ .img-12,
#IndividualAsset13:checked ~ .img-13,
#IndividualAsset14:checked ~ .img-14,
#IndividualAsset15:checked ~ .img-15,
#IndividualAsset16:checked ~ .img-16,
#IndividualAsset17:checked ~ .img-17,
#IndividualAsset18:checked ~ .img-18,
#IndividualAsset19:checked ~ .img-19,
#IndividualAsset20:checked ~ .img-20,
#IndividualAsset21:checked ~ .img-21,
#IndividualAsset22:checked ~ .img-22 {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Slider Navigation */
#IndividualAsset .sliders {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 1;
}

#IndividualAsset .sliders .dot {
  width: 14px;
  height: 14px;
  border: 2px solid #999;
  border-radius: 50%;
  cursor: pointer;
  background: #444;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

#IndividualAsset .sliders .dot:hover {
  background: #777;
  transform: scale(1.4);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Active Dot */
#IndividualAsset1:checked ~ .sliders .dot:nth-child(1),
#IndividualAsset2:checked ~ .sliders .dot:nth-child(2),
#IndividualAsset3:checked ~ .sliders .dot:nth-child(3),
#IndividualAsset4:checked ~ .sliders .dot:nth-child(4),
#IndividualAsset5:checked ~ .sliders .dot:nth-child(5),
#IndividualAsset6:checked ~ .sliders .dot:nth-child(6),
#IndividualAsset7:checked ~ .sliders .dot:nth-child(7),
#IndividualAsset8:checked ~ .sliders .dot:nth-child(8),
#IndividualAsset9:checked ~ .sliders .dot:nth-child(9),
#IndividualAsset10:checked ~ .sliders .dot:nth-child(10),
#IndividualAsset11:checked ~ .sliders .dot:nth-child(11),
#IndividualAsset12:checked ~ .sliders .dot:nth-child(12),
#IndividualAsset13:checked ~ .sliders .dot:nth-child(13),
#IndividualAsset14:checked ~ .sliders .dot:nth-child(14),
#IndividualAsset15:checked ~ .sliders .dot:nth-child(15),
#IndividualAsset16:checked ~ .sliders .dot:nth-child(16),
#IndividualAsset17:checked ~ .sliders .dot:nth-child(17),
#IndividualAsset18:checked ~ .sliders .dot:nth-child(18),
#IndividualAsset19:checked ~ .sliders .dot:nth-child(19),
#IndividualAsset20:checked ~ .sliders .dot:nth-child(20),
#IndividualAsset21:checked ~ .sliders .dot:nth-child(21),
#IndividualAsset22:checked ~ .sliders .dot:nth-child(22) {
  background: #888;
  transform: scale(1.6);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* Hide Radio Buttons */
input[type="radio"] {
  display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  #IndividualAsset h3 {
    font-size: 2.4rem;
  }

  .slider-wrapper {
    width: 100%;
  }

  .sliders {
    bottom: 18px;
  }

  .sliders .dot {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 480px) {
  #IndividualAsset h3 {
    font-size: 2rem;
  }

  .sliders .dot {
    width: 10px;
    height: 10px;
  }
}


/* Ungrouped Individuals Section */
#UngroupedIndividuals {
  padding: 80px 20px;
  background: #2a2a2a;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 3px solid #555;
  border-bottom: 3px solid #555;
}

/* Background Glow Effect */
#UngroupedIndividuals::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.04), transparent 80%);
  transform: translate(-50%, -50%);
  filter: blur(100px);
  z-index: -1;
}

/* Section Title */
#UngroupedIndividuals h3 {
  font-size: 2.8rem;
  color: #f0f0f0;
  margin-bottom: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.7);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

#UngroupedIndividuals h3:hover {
  color: #ddd;
  text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.8);
}

/* Slider Wrapper */
#UngroupedIndividuals .slider-wrapper {
  position: relative;
  width: 90%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #333;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#UngroupedIndividuals .slider-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 7px 40px rgba(0, 0, 0, 0.8);
}

/* Image Styling */
#UngroupedIndividuals .slider-wrapper .img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.6s ease, filter 0.6s ease;
  transform: scale(1.05);
  filter: blur(4px);
}

#UngroupedIndividuals .slider-wrapper .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Active Image */
#UngroupedIndividuals1:checked ~ .img-1,
#UngroupedIndividuals2:checked ~ .img-2,
#UngroupedIndividuals3:checked ~ .img-3,
#UngroupedIndividuals4:checked ~ .img-4,
#UngroupedIndividuals5:checked ~ .img-5,
#UngroupedIndividuals6:checked ~ .img-6,
#UngroupedIndividuals7:checked ~ .img-7,
#UngroupedIndividuals8:checked ~ .img-8,
#UngroupedIndividuals9:checked ~ .img-9,
#UngroupedIndividuals10:checked ~ .img-10,
#UngroupedIndividuals11:checked ~ .img-11,
#UngroupedIndividuals12:checked ~ .img-12,
#UngroupedIndividuals13:checked ~ .img-13 {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Slider Navigation */
#UngroupedIndividuals .sliders {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 1;
}

#UngroupedIndividuals .sliders .dot {
  width: 14px;
  height: 14px;
  border: 2px solid #aaa;
  border-radius: 50%;
  cursor: pointer;
  background: #666;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

#UngroupedIndividuals .sliders .dot:hover {
  background: #888;
  transform: scale(1.4);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Active Dot */
#UngroupedIndividuals1:checked ~ .sliders .dot:nth-child(1),
#UngroupedIndividuals2:checked ~ .sliders .dot:nth-child(2),
#UngroupedIndividuals3:checked ~ .sliders .dot:nth-child(3),
#UngroupedIndividuals4:checked ~ .sliders .dot:nth-child(4),
#UngroupedIndividuals5:checked ~ .sliders .dot:nth-child(5),
#UngroupedIndividuals6:checked ~ .sliders .dot:nth-child(6),
#UngroupedIndividuals7:checked ~ .sliders .dot:nth-child(7),
#UngroupedIndividuals8:checked ~ .sliders .dot:nth-child(8),
#UngroupedIndividuals9:checked ~ .sliders .dot:nth-child(9),
#UngroupedIndividuals10:checked ~ .sliders .dot:nth-child(10),
#UngroupedIndividuals11:checked ~ .sliders .dot:nth-child(11),
#UngroupedIndividuals12:checked ~ .sliders .dot:nth-child(12),
#UngroupedIndividuals13:checked ~ .sliders .dot:nth-child(13) {
  background: #aaa;
  transform: scale(1.6);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}


/* Animate 2D Section */
#animate2d {
  padding: 80px 20px;
  background: #101010; /* Darker background for a sleek feel */
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid #333; /* Enhanced border for separation */
  border-top: 3px solid #333;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.7); /* Deeper shadow for modern look */
}

/* Subtle Background Effect */
#animate2d::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 75%);
  transform: translate(-50%, -50%);
  filter: blur(100px);
  z-index: -1;
}

/* Section Title */
#animate2d h3 {
  font-size: 3rem;
  color: #eaeaea;
  margin-bottom: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8); /* Stronger shadow for contrast */
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

#animate2d h3:hover {
  color: #bbb; /* Subtle hover effect */
  text-shadow: 6px 6px 16px rgba(0, 0, 0, 0.9); /* Stronger shadow on hover */
}

/* Video Wrapper */
.video-wrapper {
  position: relative;
  width: 90%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 6px 35px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.video-wrapper:hover {
  transform: scale(1.03); /* Subtle zoom effect */
  box-shadow: 0 8px 45px rgba(0, 0, 0, 0.9); /* Stronger shadow on hover */
}

/* Video Styling */
.video-wrapper .video {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-wrapper .video video {
  width: 100%; /* Fit the container width */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Ensures proportional scaling */
  outline: none; /* No default focus outline */
  display: block; /* Ensures proper alignment */
  background: #1c1c1c; /* Neutral background in case of loading delays */
}

/* Active Video */
#animate1:checked ~ .video-1,
#animate2:checked ~ .video-2,
#animate3:checked ~ .video-3,
#animate4:checked ~ .video-4,
#animate5:checked ~ .video-5,
#animate6:checked ~ .video-6,
#animate7:checked ~ .video-7,
#animate8:checked ~ .video-8,
#animate9:checked ~ .video-9,
#animate10:checked ~ .video-10 {
  opacity: 1;
  z-index: 1;
}

/* Active Dot */
#animate1:checked ~ .sliders .dot:nth-child(1),
#animate2:checked ~ .sliders .dot:nth-child(2),
#animate3:checked ~ .sliders .dot:nth-child(3),
#animate4:checked ~ .sliders .dot:nth-child(4),
#animate5:checked ~ .sliders .dot:nth-child(5),
#animate6:checked ~ .sliders .dot:nth-child(6),
#animate7:checked ~ .sliders .dot:nth-child(7),
#animate8:checked ~ .sliders .dot:nth-child(8),
#animate9:checked ~ .sliders .dot:nth-child(9),
#animate10:checked ~ .sliders .dot:nth-child(10) {
  background: #888;
  transform: scale(1.6); /* Larger active dot */
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5); /* Glowing effect on active dot */
}



/* Slider Navigation */
.sliders {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 1;
}

.sliders .dot {
  width: 14px;
  height: 14px;
  border: 2px solid #999;
  border-radius: 50%;
  cursor: pointer;
  background: #444;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.sliders .dot:hover {
  background: #777;
  transform: scale(1.4); /* Scale up the dot on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}



/* Focused State on Dots */
.sliders .dot:focus {
  outline: none;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); /* Stronger focus ring */
}

/* Hide Radio Buttons */
input[type="radio"] {
  display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  #animate2d h3 {
    font-size: 2.4rem;
  }

  .video-wrapper {
    width: 100%;
  }

  .sliders {
    bottom: 18px;
  }

  .sliders .dot {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 480px) {
  #animate2d h3 {
    font-size: 2rem;
  }

  .sliders .dot {
    width: 10px;
    height: 10px;
  }
}

/* Resolve Section */
#Resolve {
  padding: 80px 20px;
  background: #121212;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 3px solid #444;
  border-bottom: 3px solid #444;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.7);
}

/* Background Effect */
#Resolve::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 75%);
  transform: translate(-50%, -50%);
  filter: blur(100px);
  z-index: -1;
}

/* Section Title */
#Resolve h3 {
  font-size: 3rem;
  color: #eaeaea;
  margin-bottom: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

#Resolve h3:hover {
  color: #bbb;
  text-shadow: 6px 6px 16px rgba(0, 0, 0, 0.9);
}

/* Video Wrapper */
.video-wrapper {
  position: relative;
  width: 90%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 6px 35px rgba(0, 0, 0, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.video-wrapper:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 45px rgba(0, 0, 0, 0.9);
}

/* Video Styles */
.video-wrapper .video {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.7s ease, z-index 0.7s ease;
}

.video-wrapper .video video {
  width: 100%;
  height: auto;
  object-fit: cover;
  outline: none;
  display: block;
  background: #1c1c1c;
}

/* Active Video */
#Resolve1:checked ~ .video-1,
#Resolve2:checked ~ .video-2,
#Resolve3:checked ~ .video-3,
#Resolve4:checked ~ .video-4,
#Resolve5:checked ~ .video-5,
#Resolve6:checked ~ .video-6,
#Resolve7:checked ~ .video-7,
#Resolve8:checked ~ .video-8,
#Resolve9:checked ~ .video-9 {
  opacity: 1;
  z-index: 1;
}

/* Slider Dots */
.sliders {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 1;
}

.sliders .dot {
  width: 14px;
  height: 14px;
  border: 2px solid #555;
  border-radius: 50%;
  cursor: pointer;
  background: #333;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.sliders .dot:hover {
  background: #777;
  transform: scale(1.4);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Active Dot */
#Resolve1:checked ~ .sliders .dot:nth-child(1),
#Resolve2:checked ~ .sliders .dot:nth-child(2),
#Resolve3:checked ~ .sliders .dot:nth-child(3),
#Resolve4:checked ~ .sliders .dot:nth-child(4),
#Resolve5:checked ~ .sliders .dot:nth-child(5),
#Resolve6:checked ~ .sliders .dot:nth-child(6),
#Resolve7:checked ~ .sliders .dot:nth-child(7),
#Resolve8:checked ~ .sliders .dot:nth-child(8),
#Resolve9:checked ~ .sliders .dot:nth-child(9) {
  background: #888;
  transform: scale(1.6);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* Hide Radio Buttons */
input[type="radio"] {
  display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  #Resolve h3 {
    font-size: 2.4rem;
  }

  .video-wrapper {
    width: 100%;
  }

  .sliders {
    bottom: 12px;
  }

  .sliders .dot {
    width: 12px;
    height: 12px;
  }
}

@media (max-width: 480px) {
  #Resolve h3 {
    font-size: 2rem;
  }

  .sliders .dot {
    width: 10px;
    height: 10px;
  }
}


/* Lightroom Classic Section */
#lightroom {
  padding: 80px 20px;
  background: #101010; /* Darker background for a sleek feel */
  text-align: center;
  position: relative;
  overflow: hidden;
  border-bottom: 3px solid #333; /* Enhanced border for separation */
  border-top: 3px solid #333;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.7); /* Deeper shadow for modern look */
}

/* Subtle Background Effect */
#lightroom::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 75%);
  transform: translate(-50%, -50%);
  filter: blur(100px);
  z-index: -1;
}

/* Section Title */
#lightroom h3 {
  font-size: 3rem;
  color: #eaeaea;
  margin-bottom: 40px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  text-shadow: 4px 4px 12px rgba(0, 0, 0, 0.8); /* Stronger shadow for contrast */
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

#lightroom h3:hover {
  color: #bbb; /* Subtle hover effect */
  text-shadow: 6px 6px 16px rgba(0, 0, 0, 0.9); /* Stronger shadow on hover */
}

/* Wrapper Styling */
#lightroom .wrapper {
  position: relative;
  width: 90%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 6px 35px rgba(0, 0, 0, 0.8); /* Stronger shadow for depth */
  border: 2px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#lightroom .wrapper:hover {
  transform: scale(1.03); /* Subtle zoom effect */
  box-shadow: 0 8px 45px rgba(0, 0, 0, 0.9); /* Stronger shadow on hover */
}

/* Image Styling */
#lightroom .wrapper .img {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.6s ease, filter 0.6s ease;
  transform: scale(1.05); /* Slight zoom-out effect for inactive images */
  filter: blur(4px); /* Blur effect on inactive images */
}

#lightroom .wrapper .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Active Image */
#lr-project1:checked ~ .img-1,
#lr-project2:checked ~ .img-2,
#lr-project3:checked ~ .img-3,
#lr-project4:checked ~ .img-4,
#lr-project5:checked ~ .img-5,
#lr-project6:checked ~ .img-6,
#lr-project7:checked ~ .img-7,
#lr-project8:checked ~ .img-8,
#lr-project9:checked ~ .img-9,
#lr-project10:checked ~ .img-10 {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* Navigation Dots */
#lightroom .sliders {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px; /* Reduced spacing for additional dots */
  z-index: 1;
}

#lightroom .sliders .dot {
  width: 12px;
  height: 12px;
  border: 2px solid #999;
  border-radius: 50%;
  cursor: pointer;
  background: #444;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

#lightroom .sliders .dot:hover {
  background: #777;
  transform: scale(1.4); /* Scale up the dot on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}

/* Active Dot */
#lr-project1:checked ~ .sliders .dot:nth-child(1),
#lr-project2:checked ~ .sliders .dot:nth-child(2),
#lr-project3:checked ~ .sliders .dot:nth-child(3),
#lr-project4:checked ~ .sliders .dot:nth-child(4),
#lr-project5:checked ~ .sliders .dot:nth-child(5),
#lr-project6:checked ~ .sliders .dot:nth-child(6),
#lr-project7:checked ~ .sliders .dot:nth-child(7),
#lr-project8:checked ~ .sliders .dot:nth-child(8),
#lr-project9:checked ~ .sliders .dot:nth-child(9),
#lr-project10:checked ~ .sliders .dot:nth-child(10){
  transform: scale(1.6);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

/* Focused State on Dots */
#lightroom .sliders .dot:focus {
  outline: none;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); /* Stronger focus ring */
}

/* Hide Radio Buttons */
input[type="radio"] {
  display: none;
}

/* Responsive Design */
@media (max-width: 768px) {
  #lightroom h3 {
    font-size: 2.4rem;
  }

  .wrapper {
    width: 100%;
  }

  .sliders {
    bottom: 18px;
  }

  .sliders .dot {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 480px) {
  #lightroom h3 {
    font-size: 2rem;
  }

  .sliders .dot {
    width: 8px;
    height: 8px;
  }
}


/*unreal*/
:root {
  --primary-color: #e0e0e0; /* Light gray */
  --secondary-color: #888;  /* Medium gray */
  --background-color: #1c1c1c; /* Dark background */
  --highlight-color: #444; /* Subtle hover effect */
  --accent-color: #222; /* Darker background for sections */
  --text-color: #bbb; /* Slightly lighter gray for text */
  --border-radius: 12px;
  --box-shadow: rgba(0, 0, 0, 0.2);
}

#unreal {
  padding: 80px 40px;
  background: var(--background-color);
  color: var(--text-color);
  text-align: center;
  position: relative;
  overflow: hidden;
  font-family: 'Roboto', sans-serif;
}

.section-label {
  font-size: 3.5rem;
  color: var(--primary-color);
  margin-bottom: 30px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
  animation: fadeIn 1.2s ease-out;
}

.unreal-container {
  padding: 60px;
  margin: 0 auto;
  max-width: 2400px;
  background: var(--accent-color);
  box-shadow: 0 30px 70px var(--box-shadow);
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: var(--border-radius);
  transition: box-shadow 0.3s ease;
}

.unreal-container:hover {
  box-shadow: 0 40px 90px var(--box-shadow);
}

.game-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px;
  background: var(--accent-color);
  border-radius: var(--border-radius);
  gap: 20px;
  transition: background 0.2s ease;
}

.game-info:hover {
  background: var(--highlight-color);
}

.game-logo-section {
  flex: 1;
  margin-right: 20px;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.game-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease-in-out;
}

.game-details {
  flex: 2;
  padding-right: 40px;
}

.game-name {
  font-size: 2.4rem;
  color: var(--primary-color);
  font-weight: 500;
  margin-bottom: 15px;
}

.game-description {
  font-size: 1.3rem;
  color: var(--text-color);
  line-height: 1.6;
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
}

.download-section {
  flex: 1;
  text-align: right;
}

.download-btn {
  background: var(--secondary-color);
  color: #fff;
  padding: 15px 30px;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1.2rem;
  transition: background 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.download-btn:hover {
  background: var(--highlight-color);
  transform: scale(1.1);
}

/* Media Section */
.game-media {
  padding: 20px;
  background: var(--accent-color);
  border-radius: var(--border-radius);
  max-width: 100%;
}

.game-slider {
  position: relative;
  width: 100%;
  max-width: 2200px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--border-radius);
  background: #111;
}

.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.slide {
  min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease-in-out;
}

.media-image,
.media-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--border-radius);
  transition: opacity 0.5s ease;
}

.navigation {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 20px;
}

.nav-btn {
  width: 20px;
  height: 20px;
  background: var(--secondary-color);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s ease-out, transform 0.3s ease-out;
}

.nav-btn:hover {
  background: var(--highlight-color);
  transform: scale(1.3);
}

input[type="radio"] {
  display: none;
}

/* Slider Logic */
input[type="radio"]:checked ~ .slides {
  transform: translateX(-100%);
}

input[type="radio"]:nth-child(1):checked ~ .slides {
  transform: translateX(0);
}

input[type="radio"]:nth-child(2):checked ~ .slides {
  transform: translateX(-100%);
}

input[type="radio"]:nth-child(3):checked ~ .slides {
  transform: translateX(-200%);
}

input[type="radio"]:nth-child(4):checked ~ .slides {
  transform: translateX(-300%);
}

input[type="radio"]:nth-child(5):checked ~ .slides {
  transform: translateX(-400%);
}

input[type="radio"]:nth-child(6):checked ~ .slides {
  transform: translateX(-500%);
}

input[type="radio"]:nth-child(7):checked ~ .slides {
  transform: translateX(-600%);
}

input[type="radio"]:nth-child(8):checked ~ .slides {
  transform: translateX(-700%);
}

input[type="radio"]:nth-child(9):checked ~ .slides {
  transform: translateX(-800%);
}

input[type="radio"]:nth-child(10):checked ~ .slides {
  transform: translateX(-900%);
}


/* Media Query for Responsiveness */
@media (max-width: 768px) {
  .game-info {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
  }

  .game-name {
    font-size: 2rem;
  }

  .game-description {
    font-size: 1.2rem;
  }

  .media-heading {
    font-size: 2rem;
  }

  .unreal-container {
    padding: 20px;
  }

  .download-btn {
    width: 100%;
    text-align: center;
    font-size: 1rem;
  }
}

/* Keyframes for Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}




/* Back-to-Top Button */
#back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  background-color: #444; /* Darker background for consistency */
  color: #fff;
  border: none;
  border-radius: 50%;
  padding: 18px;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  transition: background-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease, opacity 0.3s ease;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  animation: fadeInUp 0.5s ease-out;
  opacity: 0.9;
}

/* Hover Effects */
#back-to-top:hover {
  background-color: #555; /* Slightly lighter on hover */
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
  opacity: 1; /* Full opacity on hover */
}

/* Add Font Awesome Icon or an Arrow */
#back-to-top::before {
  content: "↑"; /* Upward arrow */
  font-size: 28px;
  font-weight: bold;
  display: inline-block;
  transition: transform 0.3s ease, color 0.3s ease;
  color: #e0e0e0; /* Light grey for the arrow */
}

/* Hover Icon Effect */
#back-to-top:hover::before {
  transform: translateY(-10px); /* Arrow lifts more on hover */
  color: #fff; /* Make arrow white on hover */
}

/* Scroll Visibility */
#back-to-top.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Scroll Down to Show Button */
#back-to-top.visible {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

/* Keyframe for Button Fade-In & Slide-Up Effect */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 0.9;
    transform: translateY(0);
  }
}


/* Footer */
footer {
  background: #181818;
  color: #bbb;
  padding: 20px 0;
  text-align: center;
}

footer .social-links {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

footer .social-links li a {
  color: #bbb;
  font-size: 1.5rem;
  transition: color 0.3s ease;
}

/* Animations */
@keyframes fadeInSection {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  #portfolio {
    padding: 60px 10px;
  }

  .portfolio-cards {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}