@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: "Proxima";
  src: url("./fonts/ProximaNovaRegular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
/* 
html, body {
  height: 100%;
  width: 100%;
  font-family: 'Proxima', sans-serif; /* Add fallback fonts 
} */

.Home-Page-wrapper section:nth-of-type(2) {
  background-color: #f3fbf1;
  margin-top: 10px;
  border-radius: 10px;
  height: 600px;
  padding-top: 90px;
  padding-left: 20px;
}
.Home-Page-wrapper section:nth-of-type(3) {
  background-color: #f3fbf1;
  margin-top: 10px;
  border-radius: 10px;
  height: 600px;
  padding-top: 90px;
}
.Home-Page-wrapper section:nth-of-type(4) {
  background-color: #f3fbf1;
  margin-top: 10px;
  border-radius: 10px;
  height: 600px;
  padding-top: 90px;
  padding-left: 15px;
}
/* .Home-Page-wrapper {
  background-image: url('images/img1.avif');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
} */
.card-train-outer {
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 400px;
  margin: 0 auto;
}
.card-train-inner {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 2rem;
}
.card-train-inner > div {
  min-width: 350px;
  max-width: 350px;
  height: 350px;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.15), 0 1.5px 6px 0 rgba(0, 0, 0, 0.1);
}
.flip-card {
  min-width: 350px;
  max-width: 350px;
  height: 500px;
  box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5);
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flip-card-front {
  background: #fff;
}
.flip-card-back {
  background: #fff;
  padding: 1rem;
  box-sizing: border-box;
}
.back-img-1 {
  background-image: url("images/back1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.back-img-2 {
  background-image: url("images/backk2.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.back-img-3 {
  background-image: url("images/back3.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Prevent section 8 train cards from scrolling over the navbar/header */
.card-train-outer,
.card-train-inner > div {
  z-index: 1 !important;
  position: relative !important;
}

nav {
  position: fixed;
  z-index: 2000 !important;
  top: 0;
  left: 0;
  width: 100%;
}

.Home-Page-wrapper {
  padding-top: 90px;
}

/* FindInfluencer.php section 2 red background */
/* .findInfluencer-wrapper{
  display: flex;
  flex-direction: column;
}
.findInfluencer-wrapper section {
  height: 500px;
  width: 100%;
  object-fit: cover;
  position: sticky;
  top:0;
  margin-bottom: 0;
} */
.findInfluencer-wrapper section {
  margin-top: 0px;
}
.findInfluencer-wrapper section:nth-of-type(1) {
  /* background-color: #a7d7c5; */
  background-color: #f3fbf1;
  height: 500px;
  padding-top: 90px;
}

.findInfluencer-wrapper section:nth-of-type(2) {
  margin-bottom: 0px;

  margin-top: 10px;

  background-color: #f3fbf1;
  border-radius: 10px;
  height: 550px;
  padding-top: 90px;
}

.findInfluencer-wrapper section:nth-of-type(1) {
  margin-top: 10px;
  border-radius: 10px;
}
.findInfluencer-wrapper section:nth-of-type(3) {
  /* background-color:  #a7d7c5; */
  background-color: #f3fbf1;
  border-radius: 10px;
  height: 500px;
  padding-top: 90px;
  margin-top: 10px;
  /* margin: 10px; */
}
.findInfluencer-wrapper section:nth-of-type(4) {
  /* background-image: url('images/'); */
  /* background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
   */
  background-color: #f3fbf1;
  margin-top: 10px;
  border-radius: 10px;
  height: 600px;
  padding-top: 90px;
}
.findInfluencer-wrapper section:nth-of-type(5) {
  /* background-color: #d3f6d1; */
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
  padding-top: 90px;
}

.findInfluencer-wrapper section:nth-of-type(6) {
  /* background-color: #a7d7c5; */
  background-color: #f3fbf1;
  margin-top: 10px;
  border-radius: 10px;
  height: 600px;
  padding-top: 90px;
}
.findInfluencer-wrapper section:nth-of-type(7) {
  /* background-color:  #d3f6d1; */
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
  padding-top: 90px;
}
.findInfluencer-wrapper section:nth-of-type(8) {
  /* background-color: #dddddd; */
  background-color: #b4cd93;
  height: 450px;
  border-radius: 10px;
  /* background-color: #d3f6d1; */
  /* background-color: #f3fbf1; */

  margin-top: 10px;
}

/* Snake Animation CSS */
/* .snake-segment {
  width: 20px;
  height: 20px;
  background: #7ED957;
  border-radius: 50%;
  position: absolute;
  box-shadow: 0 0 10px rgba(126, 217, 87, 0.5);
} */
/* -------------------------------------------------------------------------------------- */
/* .profileAnalysis-wrapper{
  display: flex;
  flex-direction: column;
}
.profileAnalysis-wrapper section {
  height: 500px;
  width: 100%;
  object-fit: cover;
  position: sticky;
  top:0;
  margin-bottom: 0;
} */
.profileAnalysis-wrapper section:nth-of-type(1) {
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
}
.profileAnalysis-wrapper section:nth-of-type(2) {
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
}
.profileAnalysis-wrapper section:nth-of-type(3) {
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
}
.profileAnalysis-wrapper section:nth-of-type(4) {
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
}
.profileAnalysis-wrapper section:nth-of-type(5) {
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
}
.profileAnalysis-wrapper section:nth-of-type(6) {
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
}
.profileAnalysis-wrapper section:nth-of-type(7) {
  background-color: #f3fbf1;
  /* background-color:  #b4cd93; */
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
}
/* .profileAnalysis-wrapper section:nth-of-type(8){
  background-color:  #b4cd93;
  
  
  border-radius: 10px;
  
  
  margin-top: 10px;
  
   
} */

/* .manageInfluencer-wrapper{
  display: flex;
  flex-direction: column;
}
.manageInfluencer-wrapper section {
  height: 500px;
  width: 100%;
  object-fit: cover;
  position: sticky;
  top:0;
  margin-bottom: 0;
 
} */
.manageInfluencer-wrapper section:nth-of-type(1) {
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
  padding-top: 90px;
}
.manageInfluencer-wrapper section:nth-of-type(2) {
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
  padding-top: 90px;
}
.manageInfluencer-wrapper section:nth-of-type(3) {
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
  padding-top: 90px;
}
.manageInfluencer-wrapper section:nth-of-type(4) {
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
  padding-top: 90px;
}
.manageInfluencer-wrapper section:nth-of-type(5) {
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
  padding-top: 90px;
}
.manageInfluencer-wrapper section:nth-of-type(6) {
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 600px;
  padding-top: 90px;
}
.manageInfluencer-wrapper section:nth-of-type(7) {
  background-color: #dddddd;
  margin-top: 15px;
  border-radius: 10px;
  height: 600px;
}
.aboutUs-wrapper section:nth-of-type(1) {
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 1000px;
}
.aboutUs-wrapper section:nth-of-type(2) {
  background-color: #f3fbf1;
  margin-top: 10px;
  padding-left: 15px;
  border-radius: 10px;
  height: 400px;
  padding-top: 50px;
}

/* ------------------------------------------------------------------------------ */
/* MultipleFiles/input.css or directly in your HTML/PHP */

/* Example: Changing background and text color in dark mode */
body {
  background-color: #f3fbf1; /* Light mode default */
  color: #333; /* Light mode default text color */
}

.dark body {
  background-color: #1a202c; /* Dark mode background */
  color: #e2e8f0; /* Dark mode text color */
}

/* Example: Changing section background in dark mode */
.Home-Page-wrapper section:nth-of-type(2) {
  background-color: #f3fbf1; /* Light mode default */
}

.dark .Home-Page-wrapper section:nth-of-type(2) {
  background-color: #2d3748; /* Dark mode background */
}

/* Apply similar dark mode styles to other elements as needed */
.dark .findInfluencer-wrapper section:nth-of-type(1) {
  background-color: #2d3748;
}

.dark .findInfluencer-wrapper section:nth-of-type(2) {
  background-color: #2d3748;
}

.dark .findInfluencer-wrapper section:nth-of-type(3) {
  background-color: #2d3748;
}

.dark .findInfluencer-wrapper section:nth-of-type(4) {
  background-color: #2d3748;
}

.dark .findInfluencer-wrapper section:nth-of-type(5) {
  background-color: #2d3748;
}

.dark .findInfluencer-wrapper section:nth-of-type(6) {
  background-color: #2d3748;
}

.dark .findInfluencer-wrapper section:nth-of-type(7) {
  background-color: #2d3748;
}

.dark .findInfluencer-wrapper section:nth-of-type(8) {
  background-color: #4a5568; /* A slightly different dark shade */
}

.dark .profileAnalysis-wrapper section:nth-of-type(1),
.dark .profileAnalysis-wrapper section:nth-of-type(2),
.dark .profileAnalysis-wrapper section:nth-of-type(3),
.dark .profileAnalysis-wrapper section:nth-of-type(4),
.dark .profileAnalysis-wrapper section:nth-of-type(5),
.dark .profileAnalysis-wrapper section:nth-of-type(6),
.dark .profileAnalysis-wrapper section:nth-of-type(7) {
  background-color: #2d3748;
}

.dark .manageInfluencer-wrapper section:nth-of-type(1),
.dark .manageInfluencer-wrapper section:nth-of-type(2),
.dark .manageInfluencer-wrapper section:nth-of-type(3),
.dark .manageInfluencer-wrapper section:nth-of-type(4),
.dark .manageInfluencer-wrapper section:nth-of-type(5),
.dark .manageInfluencer-wrapper section:nth-of-type(6) {
  background-color: #2d3748;
}

.dark .manageInfluencer-wrapper section:nth-of-type(7) {
  background-color: #4a5568;
}

/* Adjust text colors for dark mode */
.dark .text-black {
  color: #e2e8f0; /* Lighter text in dark mode */
}

/* About Us page dark mode styles */
.dark .aboutUs-wrapper section:nth-of-type(1) {
  background-color: #2d3748;
}

.dark .aboutUs-wrapper section:nth-of-type(2) {
  background-color: #2d3748;
}

.dark .aboutUs-wrapper section:nth-of-type(3) {
  background-color: #2d3748;
}

/* Dark mode styles for cards in about us page */
.dark .aboutUs-wrapper .bg-white {
  background-color: #4a5568 !important; /* Blue-grey background for cards in dark mode */
}

.dark .aboutUs-wrapper [style*="background-color:#b4cd93"] {
  background-color: #2d3748 !important; /* Darker background for section containers */
}

.dark .aboutUs-wrapper .bg-\[#F5FAFA\] {
  background-color: #2d3748 !important; /* Darker background for section containers */
}

.dark .aboutUs-wrapper .bg-\[#F5F7FA\] {
  background-color: #374151 !important; /* Darker background for icon containers */
}

/* For Influencers page dark mode styles */
.dark .forInfluencer-wrapper section:nth-of-type(1) {
  background-color: #2d3748;
}

.dark .forInfluencer-wrapper section:nth-of-type(2) {
  background-color: #2d3748;
}

.dark .forInfluencer-wrapper section:nth-of-type(3) {
  background-color: #2d3748;
}

.dark .forInfluencer-wrapper section:nth-of-type(4) {
  background-color: #2d3748;
}

.dark .forInfluencer-wrapper section:nth-of-type(5) {
  background-color: #2d3748;
}

/* Dark mode styles for cards in for influencers page */
.dark .forInfluencer-wrapper .bg-\[#F5F7FA\] {
  background-color: #4a5568 !important; /* Blue-grey background for cards in dark mode */
}

.dark .forInfluencer-wrapper [style*="background-color:#f3fbf1"] {
  background-color: #2d3748 !important; /* Darker background for section containers */
}

.dark .forInfluencer-wrapper .bg-\[#d7f3cc\] {
  background-color: #4a5568 !important; /* Blue-grey background for the final card */
}

/* Ensure sections 3 and 4 have the same styling as section 2 */
html.dark .forInfluencer-wrapper section:nth-of-type(3) .bg-\[#F5F7FA\] {
  background-color: #4a5568 !important; /* Blue-grey background for section 3 */
}

html.dark .forInfluencer-wrapper section:nth-of-type(4) .bg-\[#F5F7FA\] {
  background-color: #4a5568 !important; /* Blue-grey background for section 4 */
}

html.dark
  .forInfluencer-wrapper
  section:nth-of-type(3)
  [style*="background-color:#f3fbf1"] {
  background-color: #2d3748 !important; /* Dark background for section 3 container */
}

html.dark
  .forInfluencer-wrapper
  section:nth-of-type(4)
  [style*="background-color:#f3fbf1"] {
  background-color: #2d3748 !important; /* Dark background for section 4 container */
}

/* Make sure all sections have consistent background colors */
html.dark .forInfluencer-wrapper section:nth-of-type(2) .bg-\[#F5F7FA\] {
  background-color: #4a5568 !important; /* Blue-grey background for section 2 */
}

html.dark
  .forInfluencer-wrapper
  section:nth-of-type(2)
  [style*="background-color:#f3fbf1"] {
  background-color: #2d3748 !important; /* Dark background for section 2 container */
}

/* Remove the card-like background from sections 3 and 4 - make them transparent */
html.dark .forInfluencer-wrapper section:nth-of-type(3) .bg-\[#F5F7FA\] {
  background-color: transparent !important; /* Remove card background for section 3 */
}

html.dark .forInfluencer-wrapper section:nth-of-type(4) .bg-\[#F5F7FA\] {
  background-color: transparent !important; /* Remove card background for section 4 */
}

/* Alternative: make the card background same as section background */
html.dark .forInfluencer-wrapper section:nth-of-type(3) .bg-\[#F5F7FA\] {
  background-color: #2d3748 !important; /* Same as section background for section 3 */
}

html.dark .forInfluencer-wrapper section:nth-of-type(4) .bg-\[#F5F7FA\] {
  background-color: #2d3748 !important; /* Same as section background for section 4 */
}

/* More specific selectors to completely remove card backgrounds */
html.dark
  .forInfluencer-wrapper
  section:nth-of-type(3)
  div[class*="bg-[#F5F7FA]"] {
  background-color: #2d3748 !important; /* Remove card background completely */
}

html.dark
  .forInfluencer-wrapper
  section:nth-of-type(4)
  div[class*="bg-[#F5F7FA]"] {
  background-color: #2d3748 !important; /* Remove card background completely */
}

/* Target the exact elements by their full class list */
html.dark
  .forInfluencer-wrapper
  section:nth-of-type(3)
  .w-full.mt-10.px-5.py-3.bg-\[#F5F7FA\].rounded-xl.px-12.py-16 {
  background-color: #2d3748 !important; /* Remove card background */
}

html.dark
  .forInfluencer-wrapper
  section:nth-of-type(4)
  .w-full.mt-10.px-5.py-3.bg-\[#F5F7FA\].rounded-xl.px-12.py-16 {
  background-color: #2d3748 !important; /* Remove card background */
}

/* Force override with maximum specificity */
html.dark .forInfluencer-wrapper section:nth-of-type(3) .bg-\[#F5F7FA\],
html.dark .forInfluencer-wrapper section:nth-of-type(4) .bg-\[#F5F7FA\] {
  background-color: #2d3748 !important; /* Force remove card background */
  background: #2d3748 !important; /* Alternative way to force background */
}

/* Remove the light blue-grey background completely from sections 3 and 4 */
html.dark .forInfluencer-wrapper section:nth-of-type(3),
html.dark .forInfluencer-wrapper section:nth-of-type(4) {
  background-color: #2d3748 !important; /* Same dark background as section 2 */
}

/* Remove any light backgrounds from the inner containers in sections 3 and 4 */
html.dark .forInfluencer-wrapper section:nth-of-type(3) div,
html.dark .forInfluencer-wrapper section:nth-of-type(4) div {
  background-color: transparent !important; /* Remove any light backgrounds */
}

/* Footer bar dark mode styles */
html.dark .footer-bar-hover {
  background-color: #2d3748 !important; /* Single dark background for footer */
  border-radius: 1rem !important; /* Consistent border radius */
}

html.dark .footer-bar-hover .bg-\[#D7F3CC\] {
  background-color: transparent !important; /* Remove inner card background in dark mode */
}

html.dark .footer-bar-hover div {
  background-color: transparent !important; /* Make all inner divs transparent in dark mode */
}

html.dark .footer-bar-hover [style*="background-color: #b4cd93"] {
  background-color: #2d3748 !important; /* Override any inline styles in dark mode */
}

/* Remove nested card effect in footer - make inner card transparent */
.footer-bar-hover .bg-\[#D7F3CC\] {
  background-color: transparent !important; /* Remove inner card background */
}

/* Light mode - also remove inner card background */
.footer-bar-hover .bg-\[#D7F3CC\] {
  background-color: transparent !important; /* Remove inner card background in light mode too */
}

/* Ensure the footer looks like a single card */
.footer-bar-hover {
  background-color: #b4cd93 !important; /* Single background for footer */
  border-radius: 1rem !important; /* Consistent border radius */
}

/* Make the entire footer light green */
.footer-bar-hover {
  background-color: #d7f3cc !important; /* Light green background for entire footer */
  border-radius: 1rem !important; /* Consistent border radius */
}

/* Remove any dark green backgrounds */
.footer-bar-hover[style*="background-color: #b4cd93"] {
  background-color: #d7f3cc !important; /* Override any inline dark green styles */
}

/* Ensure inner elements don't have different backgrounds */
.footer-bar-hover .bg-\[#D7F3CC\] {
  background-color: transparent !important; /* Keep inner card transparent */
}

.footer-bar-hover div {
  background-color: transparent !important; /* Make all inner divs transparent */
}

/* More specific selector for the inner content card in footer bar */
.dark .footer-bar-hover > div:nth-child(2) {
  background-color: #4a5568 !important; /* Blue-grey background for inner content card */
}

.dark .footer-bar-hover .rounded-3xl {
  background-color: #4a5568 !important; /* Blue-grey background for rounded card */
}

/* Stronger selector to override the bg-[#D7F3CC] class */
.dark .footer-bar-hover div[class*="bg-[#D7F3CC]"] {
  background-color: #4a5568 !important; /* Light blue-grey background for inner card */
}

.dark .footer-bar-hover div.bg-\[#D7F3CC\] {
  background-color: #4a5568 !important; /* Light blue-grey background for inner card */
}

/* Most specific selector to ensure it overrides */
.dark
  .footer-bar-hover
  .w-full.max-\[900px\]:w-full.flex.max-\[900px\]:flex-col.text-black.items-center.p-6.rounded-3xl.bg-\[#D7F3CC\].mt-12 {
  background-color: #4a5568 !important; /* Light blue-grey background for inner card */
}

/* Direct approach - target the exact element */
.dark section.footer-bar-hover div:nth-child(2) {
  background-color: #4a5568 !important; /* Blue-grey background for inner card */
}

/* Alternative approach using data attributes if needed */
.dark .footer-bar-hover div[class*="D7F3CC"] {
  background-color: #4a5568 !important; /* Blue-grey background for inner card */
}

/* Ultra specific selector for the footer bar card */
html.dark .footer-bar-hover div.bg-\[#D7F3CC\] {
  background-color: #4a5568 !important; /* Blue-grey background for inner card */
}

/* Target the exact element by its position and classes */
html.dark section.footer-bar-hover > div:nth-child(2) {
  background-color: #4a5568 !important; /* Blue-grey background for inner card */
}

/* Force override with maximum specificity */
html.dark
  .footer-bar-hover
  div.w-full.max-\[900px\]:w-full.flex.max-\[900px\]:flex-col.text-black.items-center.p-6.rounded-3xl.bg-\[#D7F3CC\].mt-12 {
  background-color: #4a5568 !important; /* Blue-grey background for inner card */
}

/* For Influencers page bottom section dark mode styles */
html.dark .forInfluencer-wrapper section:last-child {
  background-color: #2d3748 !important; /* Dark background for the bottom section */
}

html.dark
  .forInfluencer-wrapper
  section:last-child
  [style*="background-color:#f3fbf1"] {
  background-color: #2d3748 !important; /* Dark background for the section container */
}

/* Dark mode styles for the inner content div in bottom section */
html.dark .forInfluencer-wrapper section:last-child .bg-\[#d7f3cc\] {
  background-color: #4a5568 !important; /* Blue-grey background for inner content div */
}

html.dark .forInfluencer-wrapper section:last-child .scale-up-on-scroll {
  background-color: #4a5568 !important; /* Blue-grey background for the inner card */
}

/* Alternative selector for the inner div */
html.dark
  .forInfluencer-wrapper
  .w-11\/12.self-center.flex.items-center.justify-center.bg-\[#d7f3cc\].rounded-xl.scale-up-on-scroll {
  background-color: #4a5568 !important; /* Blue-grey background for inner content div */
}

/* About Us page section 3 large card containers dark mode styles */
html.dark .aboutUs-wrapper .about-section-4 .bg-\[#F5FAFA\] {
  background-color: #3a4a5a !important; /* Slightly darker blue-grey for large card container */
}

html.dark .aboutUs-wrapper .about-section-5 .bg-\[#F5FAFA\] {
  background-color: #3a4a5a !important; /* Slightly darker blue-grey for large card container */
}

/* Target the mission section specifically */
html.dark .aboutUs-wrapper .about-section-3 > div:first-child {
  background-color: #3a4a5a !important; /* Slightly darker blue-grey for mission card container */
}

html.dark
  .aboutUs-wrapper
  .about-section-3
  > div:first-child[style*="background-color:#b4cd93"] {
  background-color: #3a4a5a !important; /* Slightly darker blue-grey for mission card container */
}

/* Alternative selectors for the large card containers */
html.dark .aboutUs-wrapper section.about-section-3 .bg-\[#F5FAFA\] {
  background-color: #3a4a5a !important; /* Slightly darker blue-grey for large card containers */
}

html.dark .aboutUs-wrapper .about-section-4,
html.dark .aboutUs-wrapper .about-section-5 {
  background-color: #3a4a5a !important; /* Slightly darker blue-grey for large card containers */
}

/* Hover effects for cards in About Us page section 3 */
.aboutUs-wrapper .about-section-4 .bg-white,
.aboutUs-wrapper .about-section-5 .bg-white {
  transform: translateY(0);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Dark mode hover effects for cards */
html.dark .aboutUs-wrapper .about-section-4 .bg-white,
html.dark .aboutUs-wrapper .about-section-5 .bg-white {
  transform: translateY(0);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

/* Consistent padding for all sections across the website */
section {
  padding: 2rem 1.5rem !important; /* Consistent padding for all sections */
}

/* Specific section padding adjustments */
.Home-Page-wrapper section,
.findInfluencer-wrapper section,
.profileAnalysis-wrapper section,
.manageInfluencer-wrapper section,
.aboutUs-wrapper section,
.forInfluencer-wrapper section {
  padding: 2.5rem 2rem !important; /* Slightly more padding for main sections */
}

/* Responsive padding */
@media (max-width: 768px) {
  section {
    padding: 1.5rem 1rem !important; /* Reduced padding on mobile */
  }

  .Home-Page-wrapper section,
  .findInfluencer-wrapper section,
  .profileAnalysis-wrapper section,
  .manageInfluencer-wrapper section,
  .aboutUs-wrapper section,
  .forInfluencer-wrapper section {
    padding: 2rem 1.5rem !important; /* Adjusted padding for mobile */
  }
}

/* Ensure consistent spacing between sections */
section + section {
  margin-top: 2rem !important; /* Consistent spacing between sections */
}

/* Footer section specific padding */
.footer-bar-hover {
  padding: 3rem 2rem !important; /* Slightly more padding for footer */
}

/* SUPER STRONG SELECTORS TO REMOVE NESTED CARD EFFECT IN FOOTER */
.footer-bar-hover .bg-\[#D7F3CC\],
.footer-bar-hover div[class*="bg-[#D7F3CC]"],
.footer-bar-hover div[class*="D7F3CC"],
.footer-bar-hover .rounded-3xl,
.footer-bar-hover > div:nth-child(2) {
  background-color: transparent !important; /* Remove ALL inner card backgrounds */
  background: transparent !important; /* Force remove backgrounds */
}

/* Make footer look like single card */
.footer-bar-hover {
  background-color: #d7f3cc !important; /* Light green background for entire footer */
  background: #d7f3cc !important; /* Force light green background */
  border-radius: 1rem !important; /* Consistent border radius */
}

/* Dark mode - single card */
html.dark .footer-bar-hover {
  background-color: #2d3748 !important; /* Single dark background for footer */
  background: #2d3748 !important; /* Force dark background */
  border-radius: 1rem !important; /* Consistent border radius */
}

html.dark .footer-bar-hover .bg-\[#D7F3CC\],
html.dark .footer-bar-hover div[class*="bg-[#D7F3CC]"],
html.dark .footer-bar-hover div[class*="D7F3CC"],
html.dark .footer-bar-hover .rounded-3xl,
html.dark .footer-bar-hover > div:nth-child(2) {
  background-color: transparent !important; /* Remove ALL inner card backgrounds in dark mode */
  background: transparent !important; /* Force remove backgrounds */
}

/* EXTRA STRONG DARK MODE SELECTORS FOR FOOTER */
html.dark .footer-bar-hover * {
  background-color: transparent !important; /* Make ALL elements inside footer transparent */
}

html.dark .footer-bar-hover div {
  background-color: transparent !important; /* Force all divs transparent */
  background: transparent !important;
}

html.dark
  .footer-bar-hover
  .w-full.max-\[900px\]:w-full.flex.max-\[900px\]:flex-col.text-black.items-center.p-6.rounded-3xl.bg-\[#D7F3CC\].mt-12 {
  background-color: transparent !important; /* Target the exact element */
  background: transparent !important;
}

/* Override any existing dark mode footer styles */
html.dark .footer-bar-hover {
  background-color: #2d3748 !important; /* Single dark background */
  background: #2d3748 !important; /* Force single background */
  border-radius: 1rem !important;
}

/* Change footer to light blue-grey in dark mode */
html.dark .footer-bar-hover {
  background-color: #4a5568 !important; /* Light blue-grey background for entire footer */
  background: #4a5568 !important; /* Force light blue-grey background */
  border-radius: 1rem !important;
}

/* Ensure footer is light blue-grey by default in dark mode (not just hover) */
html.dark .footer-bar-hover {
  background-color: #4a5568 !important; /* Light blue-grey background by default */
  background: #4a5568 !important; /* Force light blue-grey background */
}

/* Remove any conflicting styles */
html.dark .footer-bar-hover .bg-\[#D7F3CC\],
html.dark .footer-bar-hover [class*="bg-"],
html.dark .footer-bar-hover [style*="background"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* Remove nested card effect in top influencer page table */
.findInfluencer-wrapper section.bg-gray-200 {
  background-color: transparent !important; /* Remove outer card background */
  background: transparent !important; /* Force remove background */
}

/* Light mode - remove outer card background */
.findInfluencer-wrapper section.bg-gray-200 {
  background-color: transparent !important; /* Remove light gray background */
  background: transparent !important; /* Force remove background */
}

/* Dark mode - remove outer card background */
html.dark .findInfluencer-wrapper section.bg-gray-200 {
  background-color: transparent !important; /* Remove dark gray background */
  background: transparent !important; /* Force remove background */
}

/* Ensure the inner table container looks like a single card */
.findInfluencer-wrapper section.bg-gray-200 .bg-white {
  border-radius: 0.75rem !important; /* Consistent border radius */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; /* Add shadow for single card appearance */
}

/* Remove nested card effect in top influencer page table - CORRECT SELECTOR */
section.bg-gray-200 {
  background-color: transparent !important; /* Remove outer card background */
  background: transparent !important; /* Force remove background */
}

/* Light mode - remove outer card background */
section.bg-gray-200 {
  background-color: transparent !important; /* Remove light gray background */
  background: transparent !important; /* Force remove background */
}

/* Dark mode - remove outer card background */
html.dark section.bg-gray-200 {
  background-color: transparent !important; /* Remove dark gray background */
  background: transparent !important; /* Force remove background */
}

/* Ensure the inner table container looks like a single card */
section.bg-gray-200 .bg-white {
  border-radius: 0.75rem !important; /* Consistent border radius */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; /* Add shadow for single card appearance */
}

/* Dark mode - change text colors on hover */
html.dark
  section.bg-gray-200
  .bg-white
  table
  tbody
  tr:hover
  .dark\\:text-white {
  color: #000000 !important; /* White text becomes black on hover */
  font-weight: bold !important; /* Make text bold on hover */
}

/* Fix table height and prevent footer overlap */
section.bg-gray-200 .bg-white {
  height: auto !important; /* Let table height adjust to content */
  min-height: fit-content !important; /* Minimum height to fit content */
  margin-bottom: 3rem !important; /* Add bottom margin to prevent footer overlap */
}

/* Table container adjustments */
section.bg-gray-200 .bg-white .overflow-auto {
  height: auto !important; /* Let overflow container adjust to content */
  max-height: none !important; /* Remove max-height restrictions */
}

/* Table adjustments */
section.bg-gray-200 .bg-white table {
  height: auto !important; /* Let table height adjust to content */
  min-height: fit-content !important; /* Minimum height to fit content */
}

/* Ensure proper spacing before footer */
section.bg-gray-200 {
  margin-bottom: 4rem !important; /* Extra margin to prevent footer overlap */
  padding-bottom: 2rem !important; /* Bottom padding for extra space */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  section.bg-gray-200 .bg-white {
    margin-bottom: 2rem !important; /* Less margin on mobile */
  }

  section.bg-gray-200 {
    margin-bottom: 3rem !important; /* Less margin on mobile */
    padding-bottom: 1rem !important; /* Less padding on mobile */
  }
}

/* Fix footer overlap for top influencer YouTube page */
section.bg-gray-200 {
  margin-bottom: 6rem !important; /* Extra margin to prevent footer overlap */
  padding-bottom: 3rem !important; /* Extra padding for space */
}

section.bg-gray-200 .bg-white {
  margin-bottom: 4rem !important; /* Extra margin for table container */
}

/* Ensure footer doesn't overlap in any top influencer page */
section.bg-gray-200 {
  padding-bottom: 5rem !important; /* Extra padding at bottom of wrapper */
  margin-bottom: 3rem !important; /* Extra margin at bottom */
}

/* Specific fix for YouTube page table */
section.bg-gray-200 {
  margin-bottom: 8rem !important; /* Large margin to prevent footer overlap */
  padding-bottom: 4rem !important; /* Large padding for extra space */
}

/* Responsive adjustments for YouTube page */
@media (max-width: 768px) {
  section.bg-gray-200 {
    margin-bottom: 4rem !important; /* Less margin on mobile */
    padding-bottom: 2rem !important; /* Less padding on mobile */
  }

  section.bg-gray-200 {
    margin-bottom: 6rem !important; /* Less margin on mobile */
    padding-bottom: 3rem !important; /* Less padding on mobile */
  }
}

/* STRONG FIX FOR TOP INFLUENCER PAGE FOOTER OVERLAP */
section.bg-gray-200 {
  margin-bottom: 10rem !important; /* Very large margin to prevent footer overlap */
  padding-bottom: 5rem !important; /* Large padding for extra space */
  position: relative !important; /* Ensure proper positioning */
  z-index: 1 !important; /* Ensure table stays above footer */
}

/* Table container specific fix */
section.bg-gray-200 .bg-white {
  margin-bottom: 8rem !important; /* Large margin for table container */
  position: relative !important;
  z-index: 2 !important; /* Higher z-index than footer */
}

/* Ensure footer stays below table */
.footer-bar-hover {
  position: relative !important;
  z-index: 0 !important; /* Lower z-index than table */
  margin-top: 5rem !important; /* Extra margin from top */
}

/* Additional spacing for the entire page */

/* Mobile responsive fix */
@media (max-width: 768px) {
  section.bg-gray-200 {
    margin-bottom: 8rem !important; /* Large margin on mobile */
    padding-bottom: 4rem !important; /* Large padding on mobile */
  }

  section.bg-gray-200 .bg-white {
    margin-bottom: 6rem !important; /* Large margin for table container on mobile */
  }

  .footer-bar-hover {
    margin-top: 3rem !important; /* Less margin on mobile */
  }
}

/* Push footer bar down to prevent table overlap */
.footer-bar-hover {
  margin-top: 15rem !important; /* Push footer way down */
  position: relative !important;
  top: 10rem !important; /* Move footer down by 10rem */
  z-index: 0 !important; /* Keep footer below table */
}

/* Ensure table stays in place */
section.bg-gray-200 {
  position: relative !important;
  z-index: 10 !important; /* Keep table above footer */
  margin-bottom: 20rem !important; /* Very large margin to push footer down */
}

/* Force footer to stay at bottom */
.footer-bar-hover {
  clear: both !important; /* Clear any floating elements */
  display: block !important; /* Ensure block display */
  width: 100% !important; /* Full width */
}

/* Mobile adjustments for footer positioning */
@media (max-width: 768px) {
  .footer-bar-hover {
    margin-top: 10rem !important; /* Less push on mobile */
    top: 5rem !important; /* Less top offset on mobile */
  }

  section.bg-gray-200 {
    margin-bottom: 15rem !important; /* Less margin on mobile */
  }
}

/* Fix background card overlap with footer */
section.bg-gray-200 {
  background-color: transparent !important; /* Remove background card */
  background: transparent !important; /* Force remove background */
  margin-bottom: 25rem !important; /* Extra large margin to prevent overlap */
  padding-bottom: 10rem !important; /* Large padding to prevent overlap */
  position: relative !important;
  z-index: 1 !important; /* Lower z-index than footer */
}

/* Ensure table container doesn't overlap */
section.bg-gray-200 .bg-white {
  margin-bottom: 20rem !important; /* Large margin for table container */
  position: relative !important;
  z-index: 2 !important; /* Higher than background but lower than footer */
}

/* Push footer even higher */
.footer-bar-hover {
  position: relative !important;
  z-index: 10 !important; /* Higher z-index than table background */
  /* margin-top: 20rem !important; Very large margin to push footer up */
  top: 0 !important; /* Reset top position */
  clear: both !important;
  display: block !important;
  width: 100% !important;
}

/* Remove any background that might cause overlap */
section.bg-gray-200,
section.bg-gray-200 * {
  background-color: transparent !important; /* Remove all backgrounds */
}

/* Ensure proper page structure */
.findInfluencer-wrapper {
  position: relative !important;
  z-index: 0 !important; /* Base z-index */
  /* padding-bottom: 30rem !important; Very large padding */
}

/* PUSH FOOTER BAR DOWN - A BIT MORE */
.footer-bar-hover {
  position: relative !important;
  z-index: 10 !important; /* Higher z-index than table background */
  margin-top: 45rem !important; /* A bit more margin to prevent overlap */
  top: 0 !important; /* Reset top position */
  clear: both !important;
  display: block !important;
  width: 100% !important;
  transform: none !important; /* Remove transform */
}

/* A bit more spacing for table section */
section.bg-gray-200 {
  margin-bottom: 45rem !important; /* A bit more margin to prevent overlap */
  padding-bottom: 25rem !important; /* A bit more padding */
}

/* Table container a bit more spacing */
section.bg-gray-200 .bg-white {
  margin-bottom: 35rem !important; /* A bit more margin */
}

/* Page wrapper a bit more padding */
.findInfluencer-wrapper {
  padding-bottom: 5rem !important; /* Much less padding to minimize gap */
  /* min-height: auto !important; Let content determine height */
}

/* Remove background card behind table */
section.bg-gray-200 {
  background-color: transparent !important; /* Remove background card */
  background: transparent !important; /* Force remove background */
  height: auto !important; /* Auto height based on content */
  max-height: calc(100% + 2px) !important; /* Only 2px more than table height */
  overflow: hidden !important; /* Hide any overflow */
  padding: 2px !important; /* Just 2px padding */
  margin: 0 !important; /* No margin */
}

/* Remove any background from table container */
section.bg-gray-200 .bg-white {
  background-color: transparent !important; /* Remove white background */
  background: transparent !important; /* Force remove background */
  height: auto !important; /* Auto height */
  max-height: 100% !important; /* Don't exceed parent height */
}

/* Remove all backgrounds from table section */
section.bg-gray-200 * {
  background-color: transparent !important; /* Remove all child element backgrounds */
  height: auto !important; /* Auto height for all elements */
}

/* Ensure table looks clean without background card */
section.bg-gray-200 .overflow-auto {
  background-color: transparent !important; /* Remove overflow container background */
  height: auto !important; /* Auto height */
  max-height: calc(100% - 4px) !important; /* Slightly less than parent */
}

/* Remove any inline background styles */
section.bg-gray-200[style*="background"] {
  background-color: transparent !important; /* Override any inline background styles */
  height: auto !important; /* Auto height */
  max-height: calc(100% + 2px) !important; /* Only 2px more */
}

/* STRONGER REMOVAL OF BACKGROUND CARD */
section.bg-gray-200 {
  background: none !important; /* Remove all backgrounds */
  background-color: transparent !important; /* Force transparent */
  background-image: none !important; /* Remove any background images */
}

/* Remove background from all elements in table section */
section.bg-gray-200,
section.bg-gray-200 *,
section.bg-gray-200 div,
section.bg-gray-200 section {
  background: none !important; /* Remove all backgrounds */
  background-color: transparent !important; /* Force transparent */
  background-image: none !important; /* Remove any background images */
}

/* Specific removal for table elements */
section.bg-gray-200 .bg-white,
section.bg-gray-200 .overflow-auto,
section.bg-gray-200 table,
section.bg-gray-200 .max-w-7xl {
  background: none !important; /* Remove all backgrounds */
  background-color: transparent !important; /* Force transparent */
}

/* Force remove any remaining backgrounds */
section.bg-gray-200[class*="bg-"] {
  background: none !important; /* Remove any background classes */
  background-color: transparent !important; /* Force transparent */
}

/* Override any Tailwind background classes */
section.bg-gray-200.bg-gray-200 {
  background: none !important; /* Remove the specific gray background */
  background-color: transparent !important; /* Force transparent */
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .footer-bar-hover {
    margin-top: 30rem !important; /* Less push on mobile but still large */
    top: 15rem !important; /* Less top offset on mobile */
    transform: translateY(10rem) !important; /* Less transform on mobile */
  }

  section.bg-gray-200 {
    margin-bottom: 25rem !important; /* Less margin on mobile */
    padding-bottom: 15rem !important; /* Less padding on mobile */
  }

  .findInfluencer-wrapper {
    padding-bottom: 40rem !important; /* Less padding on mobile */
  }
}

/* ABOUT US PAGE - MOVE FOOTER BAR UP */
.about-section-3 {
  margin-bottom: 2rem !important; /* Reduce bottom margin */
  padding-bottom: 1rem !important; /* Reduce bottom padding */
}

.about-section-2 {
  margin-bottom: 2rem !important; /* Reduce bottom margin */
  padding-bottom: 1rem !important; /* Reduce bottom padding */
}

.about-section-1 {
  margin-bottom: 2rem !important; /* Reduce bottom margin */
  padding-bottom: 1rem !important; /* Reduce bottom padding */
}

/* About page wrapper - reduce bottom spacing */
body:has(.about-section-1) .footer-bar-hover {
  margin-top: 2rem !important; /* Reduce top margin of footer on about page */
}

/* Alternative selector for about page */
.about-section-1 ~ .footer-bar-hover,
.about-section-2 ~ .footer-bar-hover,
.about-section-3 ~ .footer-bar-hover {
  margin-top: 2rem !important; /* Reduce top margin */
}

/* TOP INFLUENCER PAGE - MOVE FOOTER BAR UP */
section.bg-gray-200 {
  margin-bottom: 2rem !important; /* Reduce bottom margin */
  padding-bottom: 1rem !important; /* Reduce bottom padding */
}

/* Override the inline style specifically */
section.bg-gray-200[style*="margin-bottom:200px"] {
  margin-bottom: 2rem !important; /* Override inline style */
}

/* Top influencer page wrapper - reduce bottom spacing */
.findInfluencer-wrapper {
  margin-bottom: 2rem !important; /* Reduce bottom margin */
  padding-bottom: 1rem !important; /* Reduce bottom padding */
}

/* Footer bar on top influencer page - reduce top margin */
.findInfluencer-wrapper + .footer-bar-hover,
section.bg-gray-200 + .footer-bar-hover {
  margin-top: 2rem !important; /* Reduce top margin of footer */
}

/* Alternative selector for top influencer page */
body:has(section.bg-gray-200) .footer-bar-hover {
  margin-top: 2rem !important; /* Reduce top margin */
}

/* Force override any inline styles */
section.bg-gray-200[style] {
  margin-bottom: 2rem !important; /* Override any inline margin-bottom */
}

/* PROFILE ANALYTICS PAGE - SAME PADDING/MARGIN AS FIND INFLUENCER */
.profileAnalysis-wrapper section {
  padding: 2rem 1.5rem !important; /* Same as find influencer sections */
  margin-bottom: 2rem !important; /* Same bottom margin */
}

/* Profile analytics page wrapper - same spacing as find influencer */
.profileAnalysis-wrapper {
  padding: 2rem 1.5rem !important; /* Same padding as find influencer wrapper */
  margin-bottom: 2rem !important; /* Same bottom margin */
}

/* Profile analytics sections - same spacing as find influencer sections */
.profileAnalysis-wrapper > section {
  padding: 2.5rem 2rem !important; /* Same as find influencer main sections */
  margin-bottom: 2rem !important; /* Same bottom margin */
}

/* Profile analytics cards - same spacing as find influencer cards */
.profileAnalysis-wrapper .bg-white,
.profileAnalysis-wrapper [class*="bg-[#F5FAFA]"],
.profileAnalysis-wrapper [class*="bg-[#F5F7FA]"] {
  margin-bottom: 2rem !important; /* Same card margin */
  padding: 2rem 1.5rem !important; /* Same card padding */
}

/* Mobile responsive for profile analytics */
@media (max-width: 768px) {
  .profileAnalysis-wrapper section {
    padding: 1.5rem 1rem !important; /* Same mobile padding as find influencer */
  }

  .profileAnalysis-wrapper > section {
    padding: 2rem 1.5rem !important; /* Same mobile padding as find influencer */
  }

  .profileAnalysis-wrapper .bg-white,
  .profileAnalysis-wrapper div[class*="bg-"] {
    padding: 1.5rem 1rem !important; /* Same mobile card padding */
  }
}

/* MOVE FOOTER BAR BACK UP - FIND INFLUENCER, MANAGE INFLUENCER, PROFILE ANALYTICS */
.findInfluencer-wrapper,
.manageInfluencer-wrapper,
.profileAnalysis-wrapper {
  margin-bottom: 1rem !important; /* Reduce bottom margin */
  padding-bottom: 1rem !important; /* Reduce bottom padding */
}

/* Reduce section spacing on these pages */
.findInfluencer-wrapper section,
.manageInfluencer-wrapper section,
.profileAnalysis-wrapper section {
  margin-bottom: 1rem !important; /* Reduce bottom margin */
  padding-bottom: 1rem !important; /* Reduce bottom padding */
}

/* Move footer bar up on these pages */
.findInfluencer-wrapper + .footer-bar-hover,
.manageInfluencer-wrapper + .footer-bar-hover,
.profileAnalysis-wrapper + .footer-bar-hover {
  margin-top: 1rem !important; /* Reduce top margin of footer */
}

/* Alternative selectors for footer positioning */
body:has(.findInfluencer-wrapper) .footer-bar-hover,
body:has(.manageInfluencer-wrapper) .footer-bar-hover,
body:has(.profileAnalysis-wrapper) .footer-bar-hover {
  margin-top: 1rem !important; /* Reduce top margin */
}

/* Remove any excessive spacing */
.findInfluencer-wrapper section:last-child,
.manageInfluencer-wrapper section:last-child,
.profileAnalysis-wrapper section:last-child {
  margin-bottom: 1rem !important; /* Minimal bottom margin for last section */
  padding-bottom: 1rem !important; /* Minimal bottom padding for last section */
}

/* Override any existing large margins */
.findInfluencer-wrapper,
.manageInfluencer-wrapper,
.profileAnalysis-wrapper {
  margin-bottom: 1rem !important; /* Override any large bottom margins */
}

/* Ensure footer stays close to content */
.footer-bar-hover {
  margin-top: 1rem !important; /* Keep footer close to content */
}

/* Custom styles for index page */
.hero-gradient {
  background: linear-gradient(135deg, #f3fbf1 0%, #e6f5d6 100%);
}

.feature-card {
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.stats-card {
  transition: all 0.3s ease;
}

.stats-card:hover {
  transform: scale(1.05);
}

.btn-primary {
  background-color: #7ed957;
  border-color: #7ed957;
}

.btn-primary:hover {
  background-color: #6bc44a;
  border-color: #6bc44a;
}

.btn-secondary {
  background-color: white;
  border-color: #7ed957;
  color: #7ed957;
}

.btn-secondary:hover {
  background-color: #f8f8f8;
}

/* Custom styles for FindInfluencer page */
.tab-button {
  transition: all 0.3s ease;
}

.tab-content {
  transition: opacity 0.3s ease;
}