/* --------------------------------------------------------------
# Custom Site‑Wide Background & Glass‑Morphism
-------------------------------------------------------------- */

/* Fonts */
:root {
  --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Jost", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --brand-primary: #80cc28;
  /* leaf green */
  --background-panels: #2C3E50;
  /* background for panels */
  --body-background: #F8F9FA;
  /* Color for headings, subheadings and title throughout the website */
  --text-color: #1B263B;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --mascott-crow: #0A0A0A;
  /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --mascott-highlight: #95A5A6;
  /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --growth-accent: #734F96;
}

/* Heading size variables */
:root {
  --h1-size: 2rem;
  --h2-size: 1.5rem;
  --h3-size: 1.25rem;
  --h4-size: 1rem;
  --h5-size: 0.875rem;
  --h6-size: 0.75rem;
}

/* Apply heading sizes */
h1 { font-size: var(--h1-size) !important; }
h2 { font-size: var(--h2-size) !important; text-align: center; padding: 20px;}
h3 { font-size: var(--h3-size) !important; }
h4 { font-size: var(--h4-size) !important; }
h5 { font-size: var(--h5-size) !important; }
h6 { font-size: var(--h6-size) !important; }

h1 .subtitle {
  font-size: 1rem;
}

/* Site‑wide vaporwave background */
body {
  background: url("../img/backgrounds/background10.png") no-repeat center center fixed;
  background-size: cover;
}

a {
  color: var(--brand-primary);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--brand-primary), transparent 25%);
  text-decoration: none;
}

/* Make all major sections transparent and remove borders */
section,
.hero,
.services,
.team,
.contact,
.why-us,
.why-us-new,
.pricing,
.testimonials,
.faq-2,
.subscribe,
.portfolio,
.portfolio-details,
.blog-posts,
.blog-details,
.error-404,
.widgets_container,
.recent-blog-postst,
.recent-podcasts .post-item .post-img,
.recent-podcasts .post-item .post-content {
  background: transparent !important;
  border: none !important;
  padding: 20px;
  align-items: center;
}

/* Black Box section background – make it stand out */
#black-box {
  background: #000 !important;
}

.scroll-top,
.footer {
  padding: 20px;
  background-color: antiquewhite;
  color: black;
}

/* Call-to-Action section will have a solid background (handled later) */
/* Podcast episode cards will be styled later, so we keep their inner elements transparent only */

/* Ensure Call-to-Action section has a clear solid background and hide its background image */
.call-to-action {
  background: var(--background-color) !important;
}
.call-to-action img {
  display: none !important;
}

/* Glass‑morphism card */
.glass-card {
  background: rgba(255, 255, 255, 0);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--brand-primary);
  padding: 1.5rem;
  color: #fff;
  /* Green glow matching brand color */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), 0 0 8px var(--brand-primary);
}

/* Ensure text inside glass cards remains left‑aligned */
.glass-card {
  text-align: left;
}

/* Ensure text inside glass cards is readable */
.glass-card a {
  color: var(--brand-primary);
}

/* Optional: reduce blur on small screens for performance */

/* Ensure cards and panels size dynamically to their content */
.service-item,
.team-member .member-info,
.faq-content,
.glass-card {
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  width: auto;
  max-width: 100%;
  overflow: visible;
}

/* Apply glass‑morphism styling to existing panel containers */
.service-item,
.team-member .member-info,
.faq-content {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--brand-primary);
  padding: 1.5rem;
  color: #fff;
  /* Green glow matching brand color */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), 0 0 8px var(--brand-primary);
}

/* Optional: reduce blur on small screens for performance */

/* Ensure hero section can host overlay text */
.hero {
  width: 100%;
  min-height: 80vh;
  position: relative;
  padding: 120px 0 60px 0;
  display: flex;
  align-items: center;
  font-size: 1.5rem;
}

/* Ensure hero overlay and its content are left-aligned and positioned closer to center on web */
.hero-overlay {
  text-align: left;
  margin: 0 auto; /* center the overlay horizontally */
  max-width: 45%; /* bring text closer to the center of the page */
}

.hero-overlay h1,
.hero-overlay p {
  text-align: left;
}

/* Remove blinking cursor from typing animation */
.hero-overlay h1.typing {
  color: var(--brand-primary) !important; /* enforce brand primary green color */
}

.hero-overlay h1.typing::after {
  content: none !important; /* override any blinking cursor effect */
  border-right: none !important; /* remove any cursor border */
  animation: none !important; /* disable any cursor animation */
}


/* Remove the oversized mobile adjustments */
@media (max-width: 576px) {
  .hero {
    text-align: left;
  }
}

/* Center text for all sections after the hero */
section:not(#hero) {
  text-align: center;
}


/* Ensure hero section has enough height on mobile so overlay stays above following sections */
@media (max-width: 576px) {
  .hero {
    min-height: 100vh;      /* give ample height on mobile to prevent overlap */
    margin-bottom: 80vh;    /* push following sections further down */
  }
  .hero-overlay h1.typing {
    font-size: 1.5rem;      /* scale down font size for mobile */
    color: var(--brand-primary); /* ensure text color is brand primary green on mobile */
  }
}

/* --------------------------------------------------------------
# Header styling (gradient on scroll, reduced logo size)
-------------------------------------------------------------- */

/* Default header background (solid, no transparency) */
.header {
  background: rgb(250, 235, 215, 1);
  transition: background 0.3s ease;
  position: fixed;
  padding: 5px;
  z-index: 999;
}

/* Header background after scrolling (slate‑blue gradient from transparent top to opaque bottom) */
.header.scrolled {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--brand-primary);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), 0 0 8px var(--brand-primary);
}

/* Reduce logo size so it doesn’t dominate the header */
.header .logo img {
  max-height: 50px;
  padding: 5px;
}

/* Navigation layout – horizontal, right‑justified */
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
    color: var(--growth-accent);
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--growth-accent);
    padding: 18px 15px;
    font-size: 15px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    text-decoration: none !important;
  }

  .navmenu a:focus {
    color: var(--brand-primary);
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--growth-accent);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: antiquewhite;
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--body-background);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--brand-primary);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }

  .navmenu .megamenu {
    position: static;
  }

  .navmenu .megamenu ul {
    margin: 0;
    padding: 10px;
    background: var(--body-background);
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 130%;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    display: flex;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
  }

  .navmenu .megamenu ul li {
    flex: 1;
  }

  .navmenu .megamenu ul li a,
  .navmenu .megamenu ul li:hover>a {
    padding: 10px 20px;
    font-size: 15px;
    color: var(--background-panels);
  }

  .navmenu .megamenu ul li a:hover,
  .navmenu .megamenu ul li .active,
  .navmenu .megamenu ul li .active:hover {
    color: var(--background-panels);
  }

  .navmenu .megamenu:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dd-box-shadow {
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }
}

/* Mobile Navigation */
@media (max-width: 1200px) {
  .mobile-nav-toggle {
    color: var(--growth-accent);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
    display: block !important;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: antiquewhite;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--growth-accent);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a:focus {
    color: var(--brand-primary);
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: antiquewhite;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: var(--growth-accent);
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
  }

  .mobile-nav-active .navmenu {
    display: block !important;
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/* Header h2 font size
.header h2 {
  font-size: 1.5rem;
} */

/* Ensure page content is not hidden behind the fixed header */
body {
  padding-top: 80px; /* space to keep content below the navbar */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden; /* prevent horizontal overflow on mobile */
}
.main {
  flex: 1;
}

/* Preserve the existing media query */
@media (max-width: 576px) {
  .glass-card {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}

/* Small podcast RSS card – minimal size */
.small-podcast-card {
  padding: 0.15rem !important;
  max-width: 200px;
  font-size: 0.65rem;
  line-height: 1.0;
  color: white;
}

/* Reduce padding and font size for episode cards inside the small RSS container */
.small-podcast-card .post-item {
  padding: 0.2rem !important;
  font-size: 0.65rem;
  max-width: 120px;
}

/* Ensure images inside the small episode card scale appropriately */
.small-podcast-card .post-item .post-img img {
  width: 100%;
  height: auto;
}

/* Ensure the small podcast card expands to full width on mobile so the RSS feed loads correctly */
@media (max-width: 576px) {
  /* Reduce padding on the small podcast card for tighter fit */
  .small-podcast-card {
    padding: 0.1rem !important;
    display: block !important;
    overflow: visible !important;
  }
  /* Ensure the inner post-item takes full width without extra margins */
  .small-podcast-card .post-item {
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Ensure the container for episodes expands correctly */
  #homepage-podcast-container {
    width: 100% !important;
    flex-wrap: wrap !important;
  }
  /* Ensure the row inside the small podcast card does not introduce negative margins on mobile */
  .small-podcast-card .row {
    margin: 0 !important;
  }
  /* Force the episode cards to occupy full width on mobile */
  .small-podcast-card .post-item {
    width: 100% !important;
    max-width: 100% !important;
  } 
}


/* --------------------------------------------------------------
# Section Cards (each major section as its own card)
-------------------------------------------------------------- */

/* Section card styling removed – sections are no longer rendered as cards. */

/* --------------------------------------------------------------
# Call‑to‑Action Section – clear background
-------------------------------------------------------------- */
.call-to-action {
  background: var(--background-color);
}

/* --------------------------------------------------------------
# Podcast Episodes – each episode in its own card
-------------------------------------------------------------- */
.recent-podcasts .post-item {
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid var(--brand-primary);
  border-radius: 12px;
  padding: 1rem;
  color: #fff;
}

/* Global text color for non‑card sections */
section:not(.glass-card) h1,
section:not(.glass-card) h2,
section:not(.glass-card) h3,
section:not(.glass-card) h4,
section:not(.glass-card) h5,
section:not(.glass-card) h6,
section:not(.glass-card) p,
section:not(.glass-card) li,
section:not(.glass-card) a {
  color: #fff;
}

/* Navbar brand colors */
.header .logo .sitename { color: var(--brand-primary); }
.header .logo .sitename .subtitle { color: var(--growth-accent); }

/* Scale logo text on mobile */
@media (max-width: 576px) {
  .header .logo .sitename {
    font-size: 1.2rem; /* adjust as needed */
  }
  .header .logo .sitename .subtitle {
    font-size: 0.9rem; /* adjust as needed */
  }
}

 

/* Center team member cards */
.team .row {
  justify-content: center !important;
}
.team .col-lg-6 {
  flex: 0 0 auto;
  width: 300px;
  margin: 0 auto;
}

/* Ensure the inner team‑member element is centered within the column */
.team .team-member {
  margin-left: auto;
  margin-right: auto;
}

/* Ensure nav menu links are visible on desktop */
@media (min-width: 1201px) {
  .header .navmenu ul {
    display: flex !important;
  }
}

/* Podcast episode titles */
.podcast-title {
  color: #fff !important;
}

/* Capabilities page background */
.capabilities-page {
  background: url("../img/backgrounds/background7.png") no-repeat center center fixed;
  background-size: cover;
}

/* Work with us page background */
.work-with-us-page {
  background: url("../img/backgrounds/background8.png") no-repeat center center fixed;
  background-size: cover;
}

/* Podcast page background */
.podcast-page {
  background: url("../img/backgrounds/background11.png") no-repeat center center fixed;
  background-size: cover;
}

/* Client swiper styling */
#clients .swiper {
  height: 80px !important;
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid var(--brand-primary);
  border-radius: 12px;
  overflow: hidden;
}

#clients .swiper::before,
#clients .swiper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  z-index: 2;
  pointer-events: none;
}

#clients .swiper::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.15), transparent);
}

#clients .swiper::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
}

#clients .swiper-wrapper {
  height: 100%;
  align-items: center;
}

#clients .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#clients .swiper-slide img {
  max-height: 60px;
  max-width: 120px;
  object-fit: contain;
}

/* Uniform service item sizing and centering */
.service-item {
  height: 280px !important; /* Fixed height for uniform tiles */
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important; /* Center content vertically */
  align-items: center !important; /* Center content horizontally */
  text-align: center !important; /* Center text */
}

.service-item .icon {
  margin-bottom: 1rem;
}

.service-item h4 {
  margin-bottom: 0.5rem;
  text-align: center;
}

.service-item p {
  text-align: center;
  margin-bottom: 0;
}