/* Custom CSS for FantasyGamesClik */

/* Ensure Poppins font is applied */
body {
  font-family: "Poppins", sans-serif;
}

/* General body styling for background and text color */
body {
  background-color: #0f172a; /* Dark blue-gray */
  color: #e2e8f0; /* Light gray for general text */
}

/* Custom styles for headings to use accent color */
h1,
h2,
h3 {
  color: #facc15; /* Gold accent color */
}

/* Specific styling for the Hero Section background overlay */
.hero-section {
  position: relative;
  background-size: cover;
  background-position: center;
}

.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7); /* Dark overlay */
  z-index: 0;
}

.hero-section > .container {
  position: relative;
  z-index: 1;
}

/* Adjust Material Symbols icon colors */
.material-symbols-outlined.text-blue-400 {
  color: #60a5fa;
}
.material-symbols-outlined.text-green-400 {
  color: #4ade80;
}
.material-symbols-outlined.text-red-400 {
  color: #f87171;
}
.material-symbols-outlined.text-yellow-400 {
  color: #facc15;
}
.material-symbols-outlined.text-purple-400 {
  color: #c084fc;
}
.material-symbols-outlined.text-teal-400 {
  color: #2dd4bf;
}

/* Disclaimer section specific styling */
.disclaimer-section {
  background-color: rgba(127, 29, 29, 0.3); /* Dark red with transparency */
  border-top: 4px solid #b91c1c; /* Red border top */
  border-bottom: 4px solid #b91c1c; /* Red border bottom */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6),
    inset 0 -2px 4px rgba(0, 0, 0, 0.6); /* Inner shadow */
}

.disclaimer-section h2 {
  color: #f87171; /* Red color for disclaimer heading */
}

.disclaimer-section .material-symbols-outlined {
  color: #f87171; /* Red color for warning icon */
}

/* Footer social icons - ensure they are visible and change color on hover */
footer .social-icons a {
  color: #9ca3af; /* Gray for default */
  transition: color 0.2s ease-in-out;
}

footer .social-icons a:hover {
  color: #facc15; /* Gold on hover */
}

/* Footer organization logos - ensure no grayscale or filters */
footer .flex-wrap img {
  filter: none; /* No filters */
  max-width: 100px; /* Max width for logos */
  height: auto;
  object-fit: contain;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
  .hero-section .flex-col {
    align-items: center;
  }
  .hero-section .md:text-left {
    text-align: center;
  }
  .hero-section h1 {
    font-size: 3rem; /* Smaller font size for mobile */
  }
  .hero-section p {
    font-size: 1.125rem; /* Smaller font size for mobile */
  }
  .hero-section .flex-col.sm:flex-row {
    flex-direction: column;
  }
  .hero-section .md:w-1/2 {
    width: 100%;
  }
  .features-grid,
  .reviews-grid,
  .faq-list {
    grid-template-columns: 1fr;
  }
} /* New styles for .userClauseNet and its children */

/* Base container for content, providing padding and centering */
.userClauseNet {
  padding: 3rem 1.5rem; /* Top/bottom and left/right padding */
  max-width: 960px; /* Maximum width for content readability */
  margin: 0 auto; /* Center the container */
  box-sizing: border-box; /* Include padding in element's total width and height */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  .userClauseNet {
    padding: 2rem 1rem; /* Reduced padding on smaller screens */
  }
}

/* Heading 1 styles within .userClauseNet */
.userClauseNet h1 {
  font-size: 2.25rem; /* ~36px - Moderate size for main section headings */
  margin-top: 2.5rem; /* Space above the heading */
  margin-bottom: 1.25rem; /* Space below the heading */
  line-height: 1.2; /* Tighter line height for headings */
}

/* Heading 2 styles within .userClauseNet */
.userClauseNet h2 {
  font-size: 1.875rem; /* ~30px - Sub-section headings */
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

/* Heading 3 styles within .userClauseNet */
.userClauseNet h3 {
  font-size: 1.5rem; /* ~24px - Minor section headings */
  margin-top: 1.75rem;
  margin-bottom: 0.875rem;
  line-height: 1.4;
}

/* Heading 4 styles within .userClauseNet */
.userClauseNet h4 {
  font-size: 1.25rem; /* ~20px - Smaller headings, often for lists or specific points */
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}

/* Heading 5 styles within .userClauseNet */
.userClauseNet h5 {
  font-size: 1.125rem; /* ~18px - Even smaller headings */
  margin-top: 1.25rem;
  margin-bottom: 0.625rem;
  line-height: 1.6;
}

/* Paragraph styles within .userClauseNet */
.userClauseNet p {
  font-size: 1rem; /* Base font size for paragraphs */
  line-height: 1.7; /* Good readability for body text */
  margin-bottom: 1rem; /* Space between paragraphs */
}

/* Unordered list styles within .userClauseNet */
.userClauseNet ul {
  list-style-type: disc; /* Standard disc bullets */
  margin-left: 1.5rem; /* Indentation for list items */
  margin-bottom: 1rem; /* Space after the list */
  padding-left: 0; /* Ensure no extra padding from user agent stylesheets */
}

/* List item styles within .userClauseNet */
.userClauseNet li {
  font-size: 1rem; /* Inherit or set base font size for list items */
  line-height: 1.7; /* Consistent line height with paragraphs */
  margin-bottom: 0.5rem; /* Space between list items */
}

/* Ensure the last element in the container doesn't have extra bottom margin */
.userClauseNet *:last-child {
  margin-bottom: 0;
}

.text-3xl.font-bold.text-yellow-400.tracking-wide,
.text-4xl.font-extrabold.text-yellow-400.tracking-wide{
  font-size: clamp(18px, 4vw, 32px);
}

.flex.justify-center.gap-6.mb-8{
  flex-wrap: wrap;
}