/* -------------------------------------
   1. CSS VARIABLES & BASE STYLES
-------------------------------------- */
:root {
  --primary-colour: #157347; /* a darker green for better contrast */
  --primary-hover: #136f3d;
  --background-colour: #f5f5f5;
  --text-colour: #333;
  --light-bg: #ffffff;
  --box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  --transition-speed: 0.3s;
}

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

body {
  font-family: Arial, sans-serif;
  background: var(--background-colour);
  color: var(--text-colour);
  line-height: 1.5;
  padding-top: 90px; /* Reset to original, rely on header spacing */
  margin: 0; /* Ensure no default margins interfere */
}

/* New typography rules */
p {
  margin-bottom: 1.0rem;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
}

/* Custom Bullet Styles for All Unordered Lists */
ul {
  list-style: none; /* Remove default bullets */
  padding-left: 0; /* Reset default padding */
}

ul li {
  position: relative;
  padding-left: 38px; /* 28px image + 10px gap to prevent overlap */
  margin-bottom: 0.75rem; /* Consistent spacing between items */
}

ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-image: url("/images/bullet-tick.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* -------------------------------------
   2. HEADER & NAVIGATION
-------------------------------------- */
/* Main Header & Navigation */
.main-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: var(--light-bg); /* Solid white, no gradient */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Reduced shadow to avoid grey line */
  z-index: 999;
  padding-bottom: 10px; /* Extend white background below menu items */
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.5rem; /* Increased padding */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.logo {
  font-size: 1.8rem; /* Larger font */
  font-weight: 700; /* Bolder */
  color: var(--primary-colour);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Space between icon and text */
  transition: transform var(--transition-speed) ease;
}

.logo:hover {
  transform: scale(1.05); /* Slight scale on hover */
}

.logo-icon {
  fill: var(--primary-colour);
}

.navbar ul {
  list-style: none; /* Already set, kept for clarity */
  display: flex;
  gap: 2rem;
  padding: 0;
}

.navbar ul li {
  padding-left: 0; /* Override global padding */
  margin-bottom: 0; /* Override global margin */
}

.navbar ul li::before {
  content: none; /* Remove tick bullet */
}

.navbar a {
  text-decoration: none;
  color: var(--text-colour);
  font-weight: 600; /* Bolder */
  font-size: 1.1rem; /* Larger font */
  position: relative; /* For underline effect */
  transition: color var(--transition-speed), transform var(--transition-speed);
}

.navbar a:hover {
  color: var(--primary-colour);
  transform: translateY(-2px); /* Slight lift on hover */
}

.navbar a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--primary-colour);
  transition: width var(--transition-speed) ease;
}

.navbar a:hover::after {
  width: 100%; /* Underline animation */
}

/* Active link style */
.navbar a.active {
  color: var(--primary-colour);
  font-weight: 700;
}

/* -------------------------------------
   3. HERO SECTION
-------------------------------------- */
.hero-section {
  position: relative;
  height: 600px; /* Increased height for more impact */
  background-image: image-set(
    "images/hero-bg.avif" type("image/avif") 1x,
    "images/hero-bg.jpg" type("image/jpeg") 1x
  );
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Slightly darker overlay for better text contrast */
}

.hero-content {
  position: relative;
  max-width: 800px; /* Slightly wider for better text flow */
  margin: 0 1.5rem; /* Increased margin for spacing */
  color: #fff;
  text-align: left;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Enhanced text shadow for readability */
}

/* Mobile Overrides for Hero Section */
@media screen and (max-width: 768px) {
  .hero-section {
    height: auto; /* Flexible height for content */
    min-height: 500px; /* Minimum height for presence */
    padding: 3rem 1.5rem; /* More padding for mobile */
    background-position: center top;
  }
}

/* -------------------------------------
   4. SECTION & LAYOUT STYLES
-------------------------------------- */
.section {
  padding: 3rem 1rem;
  position: relative; /* Allow absolute positioning of background */
  margin-top: 90px; /* Matches body padding-top to clear header */
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative; /* Ensure content stays above background */
  z-index: 1; /* Keep content above the background layer */
}

.alt-bg {
  background: var(--light-bg);
}

.two-column {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.column-text, .column-image {
  flex: 1 1 50%;
  min-width: 300px;
}

.column-image img {
  max-width: 100%;
  border-radius: 8px;
}

.styled-list {
  margin-bottom: 1rem; /* Keep bottom margin, remove list-style and left margin */
}

/* Introduction Section Specific Styles */
#introduction {
  position: relative;
  padding: 3rem 0;
  background-image: url('/images/robot-background.webp');
  background-size: 2560px 600px;
  background-position: left bottom;
  background-repeat: no-repeat;
  min-height: 600px;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
}

#introduction .section-inner {
  max-width: 1200px;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  position: relative;
  z-index: 1;
  margin: 0 auto; /* Center without fixed offsets */
  width: 100%; /* Ensure full width */
  box-sizing: border-box; /* Include padding in width */
  overflow-wrap: break-word; /* Prevent text overflow */
}

/* Extend background to cover larger screens */
@media screen and (min-width: 2560px) {
  #introduction {
    background-size: cover;
    background-position: left bottom;
  }
}

/* Mobile Overrides (below 768px) */
@media screen and (max-width: 768px) {
  #introduction,
  #conclusion {
    padding: 2rem 0;
    background-image: none;
    background-color: var(--light-bg);
    min-height: auto;
    display: block;
  }

  #introduction .section-inner,
  #conclusion .section-inner {
    max-width: 100%; /* Full width on mobile */
    margin: 0;
    padding: 1.5rem;
    background: var(--light-bg);
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
  }

  /* Ensure text wraps and stays within bounds */
  #introduction p,
  #conclusion p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
  }
}

/* Adjust for narrower desktop screens */
@media screen and (max-width: 1280px) {
  #introduction .section-inner {
    max-width: 700px;
    margin: 0 auto;
  }
  #conclusion .section-inner {
    max-width: 700px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 1024px) {
  #introduction .section-inner {
    max-width: 600px;
    margin: 0 auto;
  }
  #conclusion .section-inner {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* -------------------------------------
   5. BUTTON STYLES
-------------------------------------- */
.btn-cta,
.btn-primary,
.btn-cta-large {
  background: var(--primary-colour);
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: background var(--transition-speed);
}

.btn-cta,
.btn-primary {
  padding: 0.75rem 1.25rem;
}

.btn-cta-large {
  padding: 1rem 2rem;
  font-size: 1.2rem;
  display: inline-block;
  text-align: center;
}

.btn-cta:hover,
.btn-primary:hover,
.btn-cta-large:hover {
  background: var(--primary-hover);
}

/* -------------------------------------
   6. INFO BOXES
-------------------------------------- */
.info-box-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.5rem 0;
}

.info-box {
  flex: 1 1 calc(33.333% - 1rem);
  background: #f9f9f9;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: var(--box-shadow);
  min-width: 250px;
}

.info-box h3 {
  margin-bottom: 0.5rem;
}

/* -------------------------------------
   7. SUCCESS STORIES
-------------------------------------- */
.story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}

.story-box {
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: var(--box-shadow);
  padding: 1rem;
  text-align: left;
}

.story-box img {
  max-width: 100%;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.success-summary {
  margin-top: 2rem;
  font-weight: 500;
}

/* -------------------------------------
   8. FAQ ACCORDION
-------------------------------------- */
.faq-item {
  margin-bottom: 1rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 1rem;
}

.faq-question {
  width: 100%;
  background: var(--primary-colour);
  color: #fff;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  text-align: left;
  transition: background var(--transition-speed);
}

.faq-question:hover {
  background: var(--primary-hover);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
  background: #f9f9f9;
  padding: 0 1rem;
}

/* -------------------------------------
   9. CONCLUSION SECTION
-------------------------------------- */
#conclusion {
  position: relative;
  padding: 3rem 0;
  background-image: url('/images/robot-background.webp');
  background-size: 2560px 600px;
  background-position: left bottom;
  background-repeat: no-repeat;
  min-height: 600px;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
}

#conclusion .section-inner {
  max-width: 900px;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  position: relative;
  z-index: 1;
  margin: 0 auto; /* Center without fixed offsets */
  width: 100%; /* Ensure full width */
  box-sizing: border-box; /* Include padding in width */
  overflow-wrap: break-word; /* Prevent text overflow */
}

/* Extend background to cover larger screens */
@media screen and (min-width: 2560px) {
  #conclusion {
    background-size: cover;
    background-position: left bottom;
  }
}

.final-cta {
  margin-top: 2rem;
  text-align: center;
}

/* -------------------------------------
   10. FOOTER
-------------------------------------- */
.main-footer {
  background: var(--primary-colour);
  color: #fff;
  text-align: center;
  padding: 1.5rem 0;
}

.back-to-top {
  color: #fff;
  text-decoration: underline;
  font-size: 0.9rem;
}

/* -------------------------------------
   11. RESPONSIVE DESIGN
-------------------------------------- */
@media screen and (max-width: 768px) {
  .hero-section {
    height: 350px;
  }
  .hero-content h1 {
    font-size: 2rem;
  }
  .two-column {
    flex-direction: column;
  }
  .info-box-wrapper {
    flex-direction: column;
  }
  .navbar ul {
    gap: 0.75rem;
  }
}

/* Mobile menu toggle button: hide by default */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.8rem; /* Larger hamburger */
  color: var(--text-colour);
  transition: transform var(--transition-speed);
}

.mobile-menu-toggle.active .hamburger::before {
  content: '✕'; /* X icon when active */
}

/* Mobile styles */
@media screen and (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }
  
  .navbar {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 300px;
    background: linear-gradient(135deg, #f5f7f5 0%, #ffffff 100%); /* Gradient */
    z-index: 998;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }
  
  .navbar.active {
    display: block;
    transform: translateX(0); /* Slide in */
  }
  
  .navbar ul {
    flex-direction: column;
    padding: 1.5rem;
    margin: 0;
  }
  
  .navbar ul li {
    margin-bottom: 1.5rem;
  }
  
  .navbar ul li::before {
  content: none; /* Remove tick bullet */
  }
  
  .navbar ul li a {
    padding-left: 0; /* Reset padding */
    font-size: 1.2rem;
  }
}

@media screen and (min-width: 769px) {
  /* For desktop, reset any mobile-specific overrides */
  .navbar {
    position: static; /* No absolute positioning on desktop */
    width: auto;      /* Let it size naturally */
    box-shadow: none; /* Remove mobile box-shadow if desired */
    display: block;   /* Use block display */
    text-align: center; /* Center the content inside the nav */
  }
  /* Make the menu list center as an inline element */
  .navbar ul {
    display: inline-flex; /* Shrink-wrap the ul and centre it */
    justify-content: center;
    gap: 2rem;          /* Retain your spacing */
    padding: 0;           /* Remove any default padding if needed */
  }
}

@media screen and (max-width: 768px) {
  /* Apply extra left padding to all ordered lists on mobile */
  ol {
    padding-left: 1.5rem;
  }
  
  /* Remove extra left padding for ordered lists within the navigation menu */
  .navbar ol {
    padding-left: 0;
  }
}

.infographic-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto; /* centers the image horizontally */
}

/* Fiverr Tips Icons */
.tip-feedback, .tip-relationship, .tip-review {
  position: relative;
  padding-left: 40px; /* Space for icon + gap */
  display: inline-block; /* Allow icons to sit inline with text */
}

.tip-feedback::before, .tip-relationship::before, .tip-review::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; /* Slightly smaller than bullet-tick.gif for balance */
  height: 24px;
  background-color: var(--primary-colour); /* Matches your theme */
}

/* Feedback Icon (Star Shape) */
.tip-feedback::before {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Relationship Icon (Handshake Shape) */
.tip-relationship::before {
  clip-path: polygon(20% 80%, 40% 80%, 40% 60%, 60% 60%, 60% 80%, 80% 80%, 80% 40%, 60% 40%, 60% 20%, 40% 20%, 40% 40%, 20% 40%);
}

/* Review Icon (Magnifying Glass Shape) */
.tip-review::before {
  clip-path: circle(40% at 30% 30%) /* Circle for lens */
           , polygon(60% 60%, 80% 80%, 100% 60%, 80% 40%); /* Handle */
}

/* Pro Services Enhancements */
#pro-services .info-box-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem; /* Slightly larger gap for better spacing */
  margin: 2rem 0; /* Increased vertical spacing */
}

#pro-services .info-box {
  flex: 1 1 calc(33.333% - 1rem);
  background: #f9f9f9;
  border-radius: 8px;
  padding: 1.5rem; /* Increased padding for readability */
  box-shadow: var(--box-shadow);
  min-width: 250px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#pro-services .info-box:hover {
  transform: translateY(-5px); /* Subtle lift on hover */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* Enhanced shadow */
}

#pro-services .highlight {
  font-style: italic;
  color: var(--primary-colour);
  margin: 1.5rem 0;
  padding: 0.5rem 1rem;
  background: rgba(21, 115, 71, 0.1); /* Light green background */
  border-radius: 4px;
}

#pro-services .cta-wrapper {
  text-align: center;
  margin-top: 2rem;
}

/* Marketplace Gigs Enhancements */
#marketplace .two-column {
  gap: 2.5rem; /* Slightly larger gap for visual breathing room */
  align-items: flex-start; /* Align top for better flow */
}

#marketplace .column-text {
  flex: 1 1 60%; /* Slightly wider text column */
}

#marketplace .column-image {
  flex: 1 1 40%; /* Slightly narrower image column */
}

#marketplace .marketplace-image {
  max-width: 100%;
  border-radius: 8px;
  transition: transform 0.3s ease; /* Subtle zoom effect */
}

#marketplace .marketplace-image:hover {
  transform: scale(1.05); /* Zoom on hover */
}

#marketplace .tip-container {
  background: rgba(245, 245, 245, 0.8); /* Light grey background */
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin: 1rem 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

#marketplace .highlight {
  font-style: italic;
  color: var(--primary-colour);
  margin: 1.5rem 0;
  padding: 0.5rem 1rem;
  background: rgba(21, 115, 71, 0.1); /* Light green background */
  border-radius: 4px;
}

#marketplace .cta-wrapper {
  text-align: left;
  margin-top: 2rem;
}

/* Success Stories Enhancements */
#success-stories .story-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

#success-stories .story-box {
  background: #f9f9f9;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: var(--box-shadow);
  transition: transform 0.3s ease;
}

#success-stories .story-box:hover {
  transform: translateY(-5px); /* Subtle lift on hover */
}

#success-stories .story-box img {
  max-width: 100%;
  border-radius: 4px;
  margin-bottom: 1rem;
}

#success-stories .success-summary {
  font-style: italic;
  color: var(--primary-colour);
  margin-top: 2rem;
  padding: 0.5rem 1rem;
  background: rgba(21, 115, 71, 0.1);
}

/* Conclusion Enhancements */
#conclusion .section-inner {
  max-width: 900px; /* Narrower for focused reading */
  margin: 0 auto;
}

#conclusion .intro {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

#conclusion .key-takeaways {
  background: rgba(245, 245, 245, 0.8); /* Light grey for contrast */
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  margin: 1.5rem 0;
}

#conclusion .motivation {
  font-style: italic;
  color: var(--primary-colour);
  font-size: 1.1rem;
  margin: 1.5rem 0 2rem;
  padding: 0.5rem 1rem;
  background: rgba(21, 115, 71, 0.1); /* Light green highlight */
  border-radius: 4px;
}

#conclusion .final-cta {
  text-align: center;
}

#conclusion .btn-cta-large {
  display: inline-block;
  padding: 1rem 2rem;
  font-size: 1.2rem;
  background: var(--primary-colour);
  color: #fff;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease;
}

#conclusion .btn-cta-large:hover {
  background: var(--primary-hover);
  transform: scale(1.05); /* Subtle zoom on hover */
}

/* Mobile Overrides (below 768px) */
@media screen and (max-width: 768px) {
  #introduction,
  #conclusion {
    padding: 2rem 0;
    background-image: none;
    background-color: var(--light-bg);
    min-height: auto;
    display: block;
  }

  #introduction .section-inner,
  #conclusion .section-inner {
    max-width: 100%; /* Full width on mobile */
    margin: 0;
    padding: 1.5rem;
    background: var(--light-bg);
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
  }

  /* Ensure text wraps and stays within bounds */
  #introduction p,
  #conclusion p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
  }
}

/* Adjust for narrower desktop screens */
@media screen and (max-width: 1280px) {
  #introduction .section-inner {
    max-width: 700px;
    margin: 0 auto;
  }
  #conclusion .section-inner {
    max-width: 700px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 1024px) {
  #introduction .section-inner {
    max-width: 600px;
    margin: 0 auto;
  }
  #conclusion .section-inner {
    max-width: 600px;
    margin: 0 auto;
  }
}

/* Fiverr Tips Enhancements */
#fiverr-tips h3 {
  position: relative;
  padding-left: 40px; /* Space for icon */
  margin-bottom: 1rem;
}

#fiverr-tips h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: var(--primary-colour);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); /* Star shape */
}

#fiverr-tips p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}