/*
  Custom stylesheet for Dvitix Digital Studio

  This version embraces a fun, futuristic vibe inspired by neon colours and
  cosmic gradients. Dark backgrounds and luminous accents create contrast
  while generous spacing keeps content breathable. Subtle animations and
  hover effects add interactivity without sacrificing performance.
*/

* {
  box-sizing: border-box;
}

/* Colour palette variables for the new elegant theme */
:root {
  /*
    Spring-inspired colour palette

    We shift away from deep blues into light, nature‑inspired pastels for a
    fresh and optimistic feel. Darker text colours ensure legibility on the
    bright backgrounds while two accent hues bring subtle vibrancy.
  */
  /*
    Updated pastel palette inspired by the new banner. The tones are
    softer and include muted blues, light purples and warm neutrals.
  */
  /*
    Refined pastel palette for improved readability. The backgrounds are
    slightly darker to reduce brightness, while accents remain muted. Text
    colour is deepened for better contrast against light backgrounds.
  */
  /*
    Dark theme palette: deep blues and charcoals create a rich, low‑contrast
    backdrop. Vibrant yellow draws attention to key actions. Soft blue
    balances the yellow as a secondary accent. Light text ensures
    readability against dark surfaces.
  */
  /*
    Modern dark palette

    The site now adopts a sophisticated dark theme with rich navy and charcoal
    backgrounds that are easy on the eyes. Accents draw from muted blues and
    lavenders to provide subtle pops of colour without being overly bright.
    Text is rendered in a light grey for optimal contrast on dark surfaces.
  */
  /*
    Slightly lighter dark palette for improved readability. Deep blues and
    charcoals are lightened just enough to make content easier to read
    while retaining a modern, professional feel. Text colour is warmed
    slightly for contrast.
  */
  --primary: #102d49;         /* main page background – dark blue with more light */
  --secondary: #173a60;       /* secondary background – softened slate */
  --accent: #7a96b4;          /* primary accent – muted steel blue */
  --accent2: #b19ece;         /* secondary accent – soft lavender */
  --neutral-dark: #1e3a65;    /* dark surface for cards */
  --neutral-light: #e1e6ef;   /* primary text colour – very light blue */
  --accent-yellow: #4f678f;   /* tertiary accent – gentle blue */
}

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  background-color: var(--primary);
  color: var(--neutral-light);
  line-height: 1.6;
  overflow-x: hidden;
}

/*
  Use a futuristic display font for large headings. By isolating the typeface to
  titles only we maintain legibility in body copy while adding a distinctive
  sci‑fi vibe where it counts.
*/
/* Large headings use a heavier Poppins weight for character without being robotic */
.hero-title,
.section-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: 0.5px;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Header and navigation */
/* Header adopts a lighter background for spring while retaining a subtle
   shadow to separate it from the page content. */
.header {
  /* Glassy navigation bar with slight transparency and blur. The base
     colour is drawn from the secondary palette but rendered with
     opacity. A subtle shadow appears when the page is scrolled. */
  /* Dark navigation bar with transparency and blur. */
  /*
    A semi‑transparent dark bar with subtle blur creates a sleek
    floating navigation. When scrolled the bar becomes more opaque
    and gains a shadow for separation. The frosted effect adds
    depth without distracting from the content below.
  */
  background-color: rgba(13, 27, 42, 0.7);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* When the header gains the .scrolled class (via JS), it becomes more
   opaque and gains a slight shadow to distinguish it from the page
   content. */
.header.scrolled {
  /* Darker and more opaque when scrolled */
  background-color: rgba(13, 27, 42, 0.95);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Logo colour now uses the primary green accent to stand out on a light header. */
.logo a {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 32px;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Navigation links adopt the dark text colour by default. */
.nav-list a {
  position: relative;
  padding: 8px 4px;
  color: var(--neutral-light);
  padding: 10px 6px;
  border-radius: 6px;
  transition: color 0.3s ease, background-color 0.3s ease;
  font-weight: 500;
}

/* Highlight current/hovered navigation links with a translucent accent background */
/* Highlight current/hovered navigation links with a gentle pastel wash and
   change text to the pink accent. */
/* Underline effect on hover and active state */
.nav-list a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: var(--accent2);
  transition: width 0.3s ease;
}

.nav-list a:hover::after,
.nav-list a.active::after {
  width: 100%;
}

/* Active link has a tinted background and uses the primary accent colour */
.nav-list a.active {
  color: var(--accent);
  background-color: rgba(255, 255, 255, 0.07);
}

.nav-list a:hover {
  color: var(--accent2);
  background-color: rgba(255, 255, 255, 0.05);
}

/* Hamburger menu button styling. Hidden on large screens. */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 4px;
  padding: 10px;
}
.hamburger span {
  width: 24px;
  height: 2px;
  background-color: var(--neutral-light);
  border-radius: 2px;
  transition: all 0.3s ease;
}

/* Responsive navigation for screens up to 768px */
@media (max-width: 768px) {
  /* Show the hamburger button */
  .hamburger {
    display: flex;
  }
  /* Position the nav off-screen by default */
  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 260px;
    background-color: rgba(13, 27, 42, 0.95);
    backdrop-filter: blur(12px);
    transition: right 0.4s ease;
    padding-top: 80px;
    z-index: 999;
  }
  /* Slide nav into view when .open class is added */
  .nav.open {
    right: 0;
  }
  /* Stack nav items vertically */
  .nav-list {
    flex-direction: column;
    gap: 20px;
    margin-left: 20px;
  }
  .nav-list li {
    width: 100%;
  }
  .nav-list a {
    display: block;
    padding: 12px 0;
  }
}

/* Generic containers and sections */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.section-title {
  text-align: center;
  font-size: 2.2rem;
  margin-bottom: 50px;
  color: var(--neutral-light);
  font-weight: 600;
}

.hero {
  position: relative;
  /* Unified dark gradient for hero sections on subpages */
  background-image: linear-gradient(160deg, var(--secondary) 0%, var(--primary) 100%);
  color: var(--neutral-light);
  padding: 140px 20px;
  text-align: center;
  overflow: hidden;
}

/* Starfield overlay for hero section */
.hero::before,
.hero::after {
  /* Disable starfield overlay for the spring theme by hiding pseudo-elements */
  content: none;
}

.hero::after {
  animation-duration: 120s;
  opacity: 0.4;
}

@keyframes hero-stars {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(50%, 50%);
  }
}

.hero .container {
  max-width: 1000px;
  margin: 0 auto;
}

/* Larger, bold hero title */
.hero-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
}

/* Slightly larger subtitle with reduced opacity */
.hero-subtitle {
  font-size: 1.3rem;
  margin-bottom: 40px;
  opacity: 0.9;
}

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 600;
  transition: background-color 0.2s ease;
}

/* Gradient buttons with neon accent */
.btn-primary {
  background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: var(--neutral-light);
  border: none;
  font-weight: 600;
}

.btn-primary:hover {
  background-image: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%);
  color: var(--neutral-light);
}

/* Grid layouts */
.features-grid,
.steps-grid,
.packages-grid,
.projects-grid,
.services-section .service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* Card styles */
.feature-card,
.step-card,
.package-card,
.project-item,
.services-section .service-card {
  background-color: var(--neutral-dark);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Improve readability inside services cards by ensuring the text remains light
   and the headings pop with an accent colour */
.services-section .service-card {
  color: var(--neutral-light);
}

.services-section .service-card h3 {
  color: var(--accent);
  margin-bottom: 10px;
  font-weight: 600;
}

.feature-card:hover,
.step-card:hover,
.package-card:hover,
.project-item:hover,
.services-section .service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Icons use neon accent colours */
/* Use the green accent for icons to match the spring palette */
.feature-icon,
.step-icon,
.services-section .service-card i {
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: var(--accent);
}


/* Project cards */
.project-item img {
  width: 100%;
  height: auto;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.project-overlay {
  padding: 15px;
  color: var(--neutral-light);
}

/* Package cards */
/* Icon styling inside package cards */
.package-card i {
  font-size: 2.2rem;
  margin-bottom: 10px;
  color: var(--accent);
}

.package-card ul {
  list-style: none;
  padding: 0;
  margin: 15px 0;
}

.package-card li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

/* Custom check icon used in package lists. We replace Font Awesome icons with a simple
   tick mark but retain accent colours and sizing so that the lists remain elegant. */
.package-card li .check-icon {
  color: var(--accent2);
  font-size: 1.3rem;
}

.price {
  font-weight: 600;
  margin-top: 10px;
  color: var(--accent2);
}

/* CTA section with gradient background */
.cta {
  background-image: linear-gradient(135deg, var(--secondary) 0%, var(--accent2) 100%);
  color: var(--neutral-light);
  text-align: center;
  padding: 80px 20px;
}

.cta-content h2 {
  margin-bottom: 12px;
  font-size: 2rem;
}

.cta-content p {
  margin-bottom: 24px;
  font-size: 1.1rem;
}

/* Footer */
.footer {
  /* Slightly lighter footer gradient to improve visibility while staying cohesive */
  background-image: linear-gradient(180deg, var(--secondary) 0%, var(--neutral-dark) 100%);
  color: var(--neutral-light);
  padding: 0; /* padding handled by CTA and grid sections */
}

/*
  Layout for the main footer grid. We increase the minimum column width so
  that the grid comfortably fits four distinct sections (About, Links,
  Contact and Social) on larger screens. On narrow screens the grid
  collapses gracefully thanks to auto-fit and minmax.
*/
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  padding: 60px 20px;
}

.footer h3,
  .footer h4 {
  margin-bottom: 12px;
  color: var(--accent);
  font-weight: 600;
}

/* Link styling defined in the .footer-links section below */

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
  font-size: 0.85rem;
  /* Use a semi‑transparent neutral light for the copyright text */
  color: rgba(225, 230, 239, 0.6);
  padding: 20px;
}

/* ------------------------------------------------------------------ */
/* Enhanced footer components                                       */
/* ------------------------------------------------------------------ */

/* Call-to-action strip above the footer grid */
.footer-cta {
  text-align: center;
  padding: 60px 20px;
  /* Use the secondary colour as a base for the CTA strip to lighten it
     against the darker footer below */
  background-color: var(--secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-cta-title {
  font-size: 1.8rem;
  margin-bottom: 20px;
  font-family: 'Poppins', sans-serif;
  color: var(--neutral-light);
}
.footer-cta .btn {
  margin-top: 10px;
}

/* Footer links list styling */
.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-bottom: 8px;
}
.footer-links li a {
  color: var(--neutral-light);
  display: inline-block;
  transition: color 0.2s ease;
  position: relative;
  padding-left: 18px;
}
.footer-links li a::before {
  /* Use a simple coloured dot instead of an external icon */
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--accent);
  border-radius: 50%;
}
.footer-links li a:hover {
  color: var(--accent2);
}

/* Contact details list styling */
.footer-contact ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-contact li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: var(--neutral-light);
  font-size: 0.95rem;
}
.footer-contact li i {
  margin-right: 8px;
  color: var(--accent2);
  font-size: 1.1rem;
}
.footer-contact li a {
  color: var(--neutral-light);
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-contact li a:hover {
  color: var(--accent2);
}

/* Inline SVG icons for contact and social sections */
.footer-contact img,
/* Contact and social icons inherit their natural colour in the light footer */
.footer-contact img,
.footer-social .social-icons img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  filter: none;
}

/* Social icons adjustments */
.social-icons a {
  /* Circular social buttons with pastel border and subtle shadow on light footer */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 12px;
  color: var(--neutral-light);
  background-color: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--accent);
  border-radius: 50%;
  font-size: 1.4rem;
  transition: all 0.3s ease;
}
.social-icons a:last-child {
  margin-right: 0;
}
/* Glow and colour shift on hover */
.social-icons a:hover {
  color: var(--accent2);
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

/* Ensure the Font Awesome icons inside social links inherit the correct colour */
.footer-social .social-icons a i {
  color: inherit;
  /* Slightly reduce the font size relative to the container for a balanced look */
  font-size: 1.1rem;
}

/* Ensure social icons align horizontally with spacing */
.footer-social .social-icons {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* Contact page styles */
.contact-section .contact-form {
  background-color: var(--neutral-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 30px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 0 10px rgba(0, 230, 254, 0.1);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  background-color: var(--primary);
  color: var(--neutral-light);
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent2);
  box-shadow: 0 0 6px rgba(255, 110, 199, 0.5);
}

.contact-form button {
  width: 100%;
  padding: 14px;
  background-image: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: var(--primary);
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.contact-form button:hover {
  opacity: 0.9;
}

.contact-info {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.contact-info .info-item {
  background-color: var(--neutral-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  width: 250px;
  box-shadow: 0 0 10px rgba(0, 230, 254, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-info .info-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 15px rgba(255, 110, 199, 0.35);
}

/*
  Reveal animations

  Elements with the `reveal` class will be invisible and offset until they
  enter the viewport. When the `visible` class is added via JavaScript,
  they fade and slide into place. Variants such as `fade-in-left` and
  `fade-in-right` override the initial transform direction. A `scale-in`
  variant starts slightly smaller and grows to full size on reveal.
*/
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.fade-in-left {
  transform: translateX(-40px);
}

.reveal.fade-in-right {
  transform: translateX(40px);
}

.reveal.scale-in {
  transform: scale(0.9);
}

.reveal.visible {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

/* Contact info icons and text */
.info-item img {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  filter: invert(1);
}
.info-item h4 {
  margin-bottom: 5px;
  color: var(--accent2);
  font-weight: 600;
}
.info-item p {
  margin: 0;
  color: var(--neutral-light);
}

/* About page specific styles */
.about-content p {
  max-width: 800px;
  margin: 0 auto 20px auto;
  line-height: 1.7;
  font-size: 1rem;
  color: var(--neutral-light);
}

/* Services page specific */
.services-section .service-card h3 {
  margin-bottom: 10px;
  color: var(--accent);
}

.services-section .service-card p {
  margin-bottom: 0;
  color: var(--neutral-light);
}

/* ------------------------------------------------------------------ */
/* New elegant hero layout                                             */
/* ------------------------------------------------------------------ */

.elegant-hero {
  padding: 120px 20px;
  /* Soft gradient blending the secondary background with a pastel yellow and pink */
  background-image: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 50%, var(--neutral-dark) 100%);
}

.hero-row {
  /* Use a responsive grid for the hero layout to ensure the text and
     image align side by side on wide screens and stack gracefully on
     narrow screens. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-items: center;
  gap: 40px;
}

.hero-col-text {
  flex: 1 1 50%;
  min-width: 300px;
}

.hero-col-text h1 {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 20px;
  /* Use the primary accent colour for the main headline */
  color: var(--accent);
}

.hero-col-text p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 30px;
  max-width: 500px;
}

.hero-col-image {
  flex: 1 1 50%;
  min-width: 300px;
  max-width: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-banner-image {
  width: 100%;
  /* Allow the hero image to scale within its flex container */
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .hero-row {
    flex-direction: column;
    text-align: center;
  }
  .hero-col-text,
  .hero-col-image {
    flex-basis: 100%;
  }
  .hero-col-text h1 {
    font-size: 2.4rem;
  }
  .hero-col-text p {
    font-size: 1rem;
  }
}

/* ------------------------------------------------------------------ */
/* Blog listing styles for "What's New" page                          */
/* ------------------------------------------------------------------ */
.blog-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 40px 0;
}

.blog-card {
  background-color: var(--neutral-dark);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.blog-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.blog-card-content {
  padding: 20px;
  flex: 1;
}

.blog-card h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 1.3rem;
}

.blog-card p {
  margin-bottom: 20px;
  color: var(--neutral-light);
  font-size: 0.95rem;
  line-height: 1.5;
}

.blog-card a {
  color: var(--accent2);
  font-weight: 500;
  text-decoration: none;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
}

/* ------------------------------------------------------------------ */
/* Stats Section                                                      */
/* ------------------------------------------------------------------ */

/* Wrapper for the statistics cards. We space the section generously and
   centre the content to draw the eye. */
.stats {
  padding: 80px 20px;
  /* Light gradient backdrop for stats */
  background-image: linear-gradient(160deg, var(--secondary) 0%, var(--primary) 100%);
  color: var(--neutral-light);
  text-align: center;
  background-attachment: fixed; /* parallax effect */
}

/* Grid layout for statistic cards. Each card takes equal space and
   wraps responsively on smaller screens. */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
  max-width: 900px;
  margin: 0 auto;
}

/* Individual stat card styling. A soft border and subtle shadow create
   separation from the background. */
.stat-card {
  background-color: var(--neutral-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 40px 20px;
  box-shadow: 0 0 12px rgba(0, 230, 254, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Animate card lift and glow on hover to add interactivity. */
.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 20px rgba(255, 110, 199, 0.35);
}

/* Large number styling for stats. We use an accent gradient and
   background‑clip to create a shimmering neon effect. */
.stat-card h3 {
  font-size: 3rem;
  margin: 0 0 10px;
  font-weight: 700;
  background-image: linear-gradient(90deg, var(--accent) 0%, var(--accent2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-card p {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ------------------------------------------------------------------ */
/* Worked With Section                                                */
/* ------------------------------------------------------------------ */

/* Section wrapper with a dark backdrop similar to the hero gradient. */
.worked-with {
  padding: 80px 20px;
  background-image: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
  color: var(--neutral-light);
  text-align: center;
  background-attachment: fixed; /* parallax effect */
}

/* Grid to hold partner logos. We set a generous gap and a flexible
   minimum width so the logos wrap gracefully. */
.logos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px;
  max-width: 800px;
  margin: 40px auto 0;
}

/* Each logo item appears as a card with a soft glow. Rather than
   requiring image files, we insert partner names inside to act as
   placeholders. You can replace the text with <img> tags as needed. */
.logo-item {
  background-color: var(--neutral-dark);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  box-shadow: 0 0 10px rgba(0, 230, 254, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Add a luminous border and lift on hover to make the logos pop. */
.logo-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 20px rgba(255, 110, 199, 0.35);
}

.logo-item span {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--accent);
}

/* If you add logo images, constrain their size and maintain aspect ratio. */
.logo-item img {
  max-width: 100%;
  max-height: 70px;
}

/* ------------------------------------------------------------------ */
/* Flip Card Styles for Packages                                      */
/* ------------------------------------------------------------------ */

/* Container provides perspective so that 3D flip appears realistic. */
.flip-card {
  perspective: 1000px;
  /* Ensure the card maintains a reasonable height so content layers overlap properly */
  min-height: 360px;
}

/* Inner wrapper that will be rotated on hover. We set the transition
   and preserve-3d so child faces render correctly. */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Rotate the inner wrapper when hovering over the parent. */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Shared face styles. Cards are light with a subtle shadow and dark text. */
.flip-card-front,
.flip-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background-color: var(--neutral-dark);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  padding: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--neutral-light);
  text-align: center;
}

/* Front face adjustments – emphasise the icon and heading. */
.flip-card-front h3 {
  margin: 15px 0 10px;
  font-size: 1.3rem;
  color: var(--neutral-light);
}
.flip-card-front p {
  margin: 0;
  color: rgba(47, 72, 88, 0.8);
}

/* Back face rotated so it appears when flipped. */
.flip-card-back {
  transform: rotateY(180deg);
}

.flip-card-back h3 {
  margin-top: 0;
  font-size: 1.3rem;
  color: var(--neutral-light);
}

.flip-card-back ul {
  list-style: none;
  padding: 0;
  margin: 15px 0;
  text-align: left;
}
.flip-card-back li {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}
.flip-card-back .check-icon {
  color: var(--accent);
  margin-right: 6px;
  font-weight: bold;
}
.flip-card-back .price {
  font-weight: 600;
  margin-top: 10px;
  color: var(--accent2);
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* Testimonials Slider                                                */
/* ------------------------------------------------------------------ */

/* Section wrapper for testimonials. A gentle gradient and centred
   layout convey openness and friendliness. */
.testimonials {
  padding: 80px 20px;
  background-image: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 100%);
  color: var(--neutral-light);
  text-align: center;
}

/* Container holds the slides and dots. It constrains the width on
   larger screens and centres itself. */
.testimonial-container {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

/* Each testimonial slide is hidden by default and shown when the
   `active` class is applied via JavaScript. We use a soft card
   aesthetic consistent with other sections. */
.testimonial-slide {
  display: none;
  background-color: var(--neutral-dark);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 40px 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  min-height: 220px;
}
.testimonial-slide.active {
  display: block;
}

/* Quote styling emphasises the testimonial text. */
.testimonial-quote {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 20px;
  color: var(--neutral-light);
  font-style: italic;
}

/* Author styling uses the green accent to draw attention. */
.testimonial-author {
  font-weight: 600;
  color: var(--accent);
}

/* Dots navigation for testimonials. Each dot represents a slide.
   The active dot is filled with the accent colour. */
.testimonial-dots {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 12px;
}
.testimonial-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.testimonial-dot.active {
  background-color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Worked With Logo Marquee                                          */
/* ------------------------------------------------------------------ */

/* Convert the logos section into a scrolling marquee. The wrapper
   hides overflow and the inner content scrolls continuously from
   right to left. */
.logos-marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  max-width: 100%;
}

/* The content is an inline-block container that repeats the logos
   twice to create a seamless loop. It scrolls using keyframe
   animation defined below. */
.logos-marquee .marquee-content {
  display: inline-block;
  animation: marquee-scroll 20s linear infinite;
}

/* Individual logo items inside the marquee are inline-flex and have
   spacing. They reuse the existing .logo-item styling but remove
   the fixed height so they can align naturally. */
.logos-marquee .logo-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 40px;
  width: 160px;
  height: 100px;
}

@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Ensure the text inside logo items remains styled correctly when
   they are used within the marquee context. */
.logos-marquee .logo-item span {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--accent);
}

/* ------------------------------------------------------------------ */
/* Timeline Section                                                  */
/* ------------------------------------------------------------------ */

/* Wrapper for the timeline section, using a complementary gradient. */
.timeline-section {
  padding: 80px 20px;
  background-image: linear-gradient(160deg, var(--secondary) 0%, var(--primary) 100%);
  color: var(--neutral-light);
}

/* The timeline container holds items and the vertical line indicator. */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 40px auto;
  padding-left: 30px;
}

/* Draw the vertical line using a pseudo-element. */
.timeline::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--accent);
}

/* Each timeline entry has a marker and descriptive content. */
.timeline-item {
  position: relative;
  margin-bottom: 50px;
  padding-left: 40px;
}

/* The marker is represented by a circle. */
.timeline-item::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 4px;
  width: 18px;
  height: 18px;
  background-color: var(--accent2);
  border: 2px solid var(--accent);
  border-radius: 50%;
}

/* Timeline headings and descriptions follow our colour palette. */
.timeline-item h4 {
  margin: 0 0 8px;
  font-size: 1.3rem;
  color: var(--accent);
  font-weight: 600;
}
.timeline-item p {
  margin: 0;
  font-size: 1rem;
  color: var(--neutral-light);
  line-height: 1.5;
}