/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background: linear-gradient(90deg, #ff69b4, #ff0000);
  color: #fff;
  line-height: 1.6;
}

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Header Section */
.kaya-header {
background: linear-gradient(135deg, #000428, #004e92);
padding: 15px 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin-top: 20px;
}

.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo-text-container {
display: flex;
align-items: center;
gap: 20px;
}

.kaya-logo img {
max-width: 100px;
height: auto;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
transition: transform 0.3s ease;
}

.kaya-logo img:hover {
transform: scale(1.05);
}

.kaya-text {
max-width: 300px;
font-size: 6.5px;
color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.menu-container {
display: flex;
align-items: center;
gap: 15px;
}

.menu button,
.whatsapp-button {
width: 120px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: bold;
cursor: pointer;
border: none;
border-radius: 5px;
transition: background-color 0.3s ease, transform 0.3s ease;
}

.menu button {
background-color: #eb7c37;
color: #fff;
}

.menu button:hover {
background-color: #ff8f4f;
transform: translateY(-2px);
}

.whatsapp-button {
background-color: #25d366;
color: #fff;
text-decoration: none;
gap: 5px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
border-radius: 5px;
width: 120px;
height: 45px;
position: relative;
overflow: hidden;
animation: flashEffect 1s infinite;
transition: transform 0.3s ease;
}

.whatsapp-button:hover {
background-color: #1cb953;
transform: translateY(-2px);
}

.whatsapp-button i {
font-size: 18px;
}

.whatsapp-button .button-text {
animation: fadeEffect 2s infinite;
}

/* Keyframes for flashing effect */
@keyframes flashEffect {
0%, 100% {
background-color: #25d366;
color: #fff;
}
50% {
background-color: #1cb953;
color: #000;
}
}

.menu-overlay {
position: fixed;
top: 0;
right: -300px;
width: 300px;
height: 100%;
background-color: #1a1a1a;
color: #fff;
overflow-y: auto;
transition: right 0.3s ease;
z-index: 1000;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
}

.menu-overlay.active {
right: 0;
}

.menu-overlay h2 {
padding: 20px;
background-color: #2c2c2c;
margin: 0;
font-size: 1.5em;
text-align: center;
}

.menu-overlay ul {
list-style: none;
padding: 0;
margin: 0;
}

.menu-overlay ul li {
padding: 15px 20px;
border-bottom: 1px solid #3a3a3a;
transition: background-color 0.3s ease;
}

.menu-overlay ul li:hover {
background-color: #333;
}

.menu-overlay ul li a {
color: #fff;
text-decoration: none;
display: block;
font-size: 1.1em;
}

.menu-overlay .close-btn {
position: absolute;
top: 10px;
right: 20px;
font-size: 24px;
cursor: pointer;
color: #fff;
transition: color 0.3s ease;
}

.menu-overlay .close-btn:hover {
color: #eb7c37;
}

@media (max-width: 768px) {
.header-content {
flex-direction: column;
gap: 15px;
}

.logo-text-container {
flex-direction: column;
text-align: center;
}

.kaya-text {
font-size: 10px;
padding: 0 10px;
}

.menu-container {
width: 100%;
justify-content: center;
}
}

/* Updated Table of Content */
.table-of-content {
background-color: #fff; /* Match main content background */
color: #333; /* Dark text for readability */
padding: 20px;
border-radius: 8px; /* Match the border-radius */
margin-top: 20px;
line-height: 1.6;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
border: 1px solid #ddd; /* Light border for separation */
}

.table-of-content h2 {
font-size: 26px; /* Match content header font size */
color: #0aabe8; /* Accent color */
margin-bottom: 15px;
border-bottom: 2px solid #eb7c37; /* Matching border-bottom */
padding-bottom: 5px;
}

.table-of-content ul {
list-style: none; /* Remove default list styling */
padding-left: 0;
}

.table-of-content ul li {
margin: 10px 0;
}

.table-of-content ul li a {
color: #eb7c37; /* Matching link color */
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}

.table-of-content ul li a:hover {
color: #ff7043; /* Slightly darker hover effect */
text-decoration: underline;
}

/* Login Guide Styling */
.login-guide {
  display: flex; /* Align items horizontally */
  justify-content: space-between; /* Even spacing between images */
  align-items: center; /* Vertically center images */
  flex-wrap: wrap; /* Allow wrapping for smaller screens */
  gap: 10px; /* Space between images */
  margin-top: 10px;
}

.login-guide img {
  max-width: 12%; /* Adjust width so all 8 images fit in a row */
  height: auto; /* Maintain aspect ratio */
  border-radius: 8px; /* Add rounded corners */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add hover effect */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Hover Effect */
.login-guide img:hover {
  transform: scale(1.1); /* Slight zoom on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

/* Responsive Design */
@media (max-width: 768px) {
  .login-guide img {
      max-width: 45%; /* Adjust size for smaller screens */
  }
}

@media (max-width: 480px) {
  .login-guide img {
      max-width: 100%; /* Stack images vertically on very small screens */
  }
}

.blog-section h2 {
  color: #ff7043;
  margin-bottom: 15px;
}

.blog-section h3 {
  color: #ff8c69;
  margin-top: 20px;
  margin-bottom: 10px;
}

.blog-section p, .blog-section ul {
  margin-bottom: 15px;
}

.blog-section img {
  max-width: 100%;
  margin-top: 15px;
  border-radius: 8px;
}

/* General Styling */
.download-section {
  text-align: center;
  padding: 20px;
  background-color: #001b39;
  color: #fff;
  border-radius: 15px; /* Rounded corners for the section */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow for the section */
  margin-top: 40px; /* Add spacing before footer */
}

.download-section h2 {
  font-size: 2em;
  margin-bottom: 20px;
  color: #fff;
}

/* Image Container */
.download-images {
  display: flex;
  justify-content: space-evenly; /* Space between images */
  align-items: center;
  gap: 20px; /* Space between the images */
  flex-wrap: wrap; /* Wrap images for smaller screens */
}

/* Image Links */
.image-link img {
  max-width: 300px; /* Limit image size */
  width: 100%; /* Make images responsive */
  height: auto;
  border-radius: 10px; /* Optional: Rounded corners for the images */
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease; /* Smooth effects */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow for images */
}

/* Hover Effects */
.image-link img:hover {
  transform: scale(1.1); /* Zoom in slightly on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Enhance shadow on hover */
  filter: brightness(1.2); /* Slightly brighten the image */
}

/* Active (Click) Effect */
.image-link img:active {
  transform: scale(0.95); /* Slightly reduce size when clicked */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); /* Reduce shadow on click */
}

/* Responsive Design */
@media (max-width: 768px) {
  .download-images {
    flex-direction: column; /* Stack images vertically on smaller screens */
  }

  .image-link img {
    max-width: 90%; /* Limit width for smaller screens */
  }
}

/* Player Test ID */
.player-test-id {
text-align: center;
margin-top: 10px;
font-weight: bold;
font-size: 14px;
}

/* Section Wrapper */
.kaya-info {
background-color: #20588c;
border-radius: 8px;
padding: 20px;
color: #fff;
}

/* Flexbox Layout */
.kaya-content-wrapper {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

/* Left Column */
.left-column {
flex: 2;
min-width: 300px;
}

.left-column h1 {
font-size: 28px;
color: #eb7c37;
margin-bottom: 15px;
}

.left-column p {
margin-bottom: 15px;
font-size: 16px;
color: #ddd;
}

.left-column a {
color: #eb7c37;
text-decoration: underline;
}

/* Right Column: Sidebar */
.right-column {
flex: 1;
background-color: #eb7c37;
color: #fff;
padding: 20px;
border-radius: 8px;
min-width: 250px;
text-align: center;
}

/* Sidebar Image */
.sidebar-image img {
width: 100%;
height: auto;
margin-bottom: 15px;
border-radius: 8px;
}

/* Sidebar Content */
.right-column h3 {
font-size: 18px;
margin-bottom: 15px;
color: #fff;
}

.right-column ul {
list-style: none;
padding: 0;
}

.right-column ul li {
margin-bottom: 10px;
}

.right-column ul li a {
color: #fff;
text-decoration: none;
font-weight: bold;
}

.right-column ul li a:hover {
text-decoration: underline;
}

/* Responsive Layout */
@media screen and (max-width: 768px) {
.kaya-content-wrapper {
flex-direction: column;
}

.right-column {
margin-top: 10px;
}
}

/* Main Content Section */
.kaya-main-content {
background-color: #fff;
color: #333;
padding: 20px;
border-radius: 8px;
margin-top: 20px;
line-height: 1.6;
}

/* Content Section */
.content-section {
margin-bottom: 20px;
padding-left: 20px;
}

.content-section h2 {
font-size: 26px;
color: #0aabe8;
margin-bottom: 10px;
border-bottom: 2px solid #eb7c37;
padding-bottom: 5px;
}

.content-section h3 {
font-size: 20px;
color: #eb7c37;
margin-top: 15px;
margin-bottom: 5px;
}

.content-section p {
margin-bottom: 10px;
font-size: 16px;
color: #555;
}

/* CSS for Responsive Steps Section */
.steps {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: space-between;
}

.step {
flex: 1 1 calc(50% - 20px);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

.step img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.step h3 {
margin-top: 10px;
font-size: 1.2rem;
color: #333;
}

.step p {
font-size: 1rem;
color: #666;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
.steps {
flex-direction: column;
gap: 15px;
}

.step {
flex: 1 1 100%;
}

.step img {
width: 80%;
}
}

/* Highlighted Links */
.content-section a {
color: #eb7c37;
text-decoration: underline;
}

.content-section a:hover {
color: #ff7043;
text-decoration: none;
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
.content-section h2 {
font-size: 22px;
}

.content-section h3 {
font-size: 18px;
}

.content-section p {
font-size: 14px;
}

/* Adjust Container Padding for Small Screens */
.container {
margin-left: 8px;
margin-right: 8px;
}
}

/* Informative Section */
.informative-section {
background-color: #fff;
color: #fff;
padding: 40px 20px;
border-radius: 8px;
margin: 20px auto /* Add 20px margin at the top and bottom */
}

.section-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
}

/* Footer Section Reset */
.footer-section {
color: #000; /* Footer text color */
padding: 30px 20px;
text-align: center;
border-top: 2px solid #eb7c37;
}

.footer-section img {
max-width: 150px; /* Restrict logo size */
margin-bottom: 20px;
}

.footer-links ul {
list-style: none;
padding: 0;
margin: 10px 0;
display: flex;
justify-content: center;
gap: 15px; /* Space between links */
}

.footer-links ul li {
margin: 0;
}

.footer-links ul li a {
color: #000;
text-decoration: none;
font-size: 14px;
font-weight: bold;
transition: color 0.3s ease;
}

.footer-links ul li a:hover {
color: #eb7c37; /* Highlight link on hover */
}

/* Prevent Footer Conflict */
.footer-section ul, 
.footer-section p {
margin: 0; /* Reset margins */
padding: 0; /* Reset padding */
color: inherit; /* Inherit text color */
}

/* Ensure Mega888 Main Content Does Not Affect Footer */
.kaya-main-content.container {
margin-bottom: 40px; /* Add spacing before footer */
}

.download-section container {
margin-top: 40px; /* Add spacing before footer */
}