/* Customizations required to extend uSkinned template to meet the needs of the Rolling Insights 
*
*
*/
div.base-text ul {
    list-style: none; /* Remove default bullets */
  }
  
  div.base-text ul li::before {
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #70CDE5; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
  }
  
  
  
  /*Apply black text to the navigation for a white background 
  .navigation nav.main ul li span a{
      color: black;
  }*/
  
  /* 
  * Rolling Insights - Sports Data API Landing Page Styles
  * Version: 2.0 - Simplified
  */
  
  /* 
  ===== Base Styles =====
  */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  /* 
  Add this to prevent horizontal overflow on the entire page
  */
  html,
  body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }

	.hero.scroll-lock,
   footer.site-footer.scroll-lock {
    position: fixed;
   width: 100%;
   overflow: hidden;
  }
  
  
  /* 
  ===== Variables =====
  */
  :root {
    /* 
    Primary Colors
    */
    --primary-nav: #017798;
    --primary-blue: #1C75C9;
    --primary-blue-light: #70CDE5;
    --primary-blue-lighter: #FAFEFF;
  
    /* 
    Accent Colors
    */
    --accent-orange: #FFA939;
    --accent-orange-dark: #CC7400;
    --accent-orange-light: #FFE9CC;
  
    /* 
    Secondary Colors
    */
    --secondary-blue: #1C75C9;
    --secondary-blue-light: #4C9CE6;
    --secondary-blue-lighter: #E9F3FC;
  
    /* 
    Neutral Colors
    */
    --neutral-white: #FFFFFF;
    --neutral-light: #F6F8FA;
    --neutral-border: #E4E4E5;
    --neutral-text-light: #6D737F;
    --neutral-text-dark: #171B25;
  
    /* 
    Typography
    */
    --font-family: 'Roboto', sans-serif;
  
    /* 
    Spacing
    */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 5rem;
  
    /* 
    Border Radius
    */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
  
    /* 
    Shadows
    */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* 
  ===== Typography =====
  */
  html {
    font-size: 1rem;
    font-family: var(--font-family);
    line-height: 1.5;
  }
  
  body {
    color: var(--neutral-text-dark);
    background-color: var(--neutral-white);
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 1rem;
    line-height: 1.2;
    font-weight: 700;
  }
  
  h1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #1a4e8a 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
  }
  
  h2 {
    font-size: 2.5rem;
    margin-bottom: 1.25rem;
    color: #1a4e8a;
    text-align: left;
  }
  
  h3 {
    font-size: 1.25rem;
    color: #1a4e8a;
    text-align: left;
  }
  
  h4 {
    font-size: 1.25rem;
    color: #1a4e8a;
    margin-bottom: 0.75rem;
    text-align: left;
  }
  
  p {
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--neutral-text-light);
    max-width: 65ch;
    text-align: left;
  }
  
  a {
    color: var(--secondary-blue);
    text-decoration: none;
  }
  
  ul,
  ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    color: var(--neutral-text-light);
  }
  
 
  /* 
  ===== Layout =====
  */
  .container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 8%;
    box-sizing: border-box;
  
    /* 
    Ensure padding is included in width calculation
    */
  }
  
 
  
  /* 
  Match .container for use-case sections
  */
  .use-case-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 8%;
    box-sizing: border-box;
  }

  
  section {
    width: 100%;
    overflow: visible;
   /* padding: var(--spacing-lg) 0; */ 
   /* connect header w/page */ 
  }
  
  /* 
  Section background wrapper to limit colored backgrounds
  */
  .section-bg-wrapper {
    position: relative;
    width: 100%;
    background-color: var(--neutral-white);
    overflow: visible;
  
    /* 
    Changed from hidden to visible to prevent SVG cutoff
    */
    padding: var(--spacing-lg) 0;
  
    /* 
    Match standard section padding for consistency
    */
  }
  
  .section-bg-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1440px;
    height: 100%;
    z-index: 0;
  }
  
  /* 
  Make sure section content is above the background
  */
  .section-bg-wrapper > section {
    position: relative;
    z-index: 1;
    overflow: visible;
  
    /* 
    Ensure SVGs aren't cut off
    */
  }
  
  /* 
  Special case for coverage and pricing which are divs, not sections
  */
  .section-bg-wrapper > .container {
    position: relative;
    z-index: 2;
  
    /* 
    Increased z-index to ensure visibility
    */
  }
  
  .section-bg-wrapper > .container > .coverage,
  .section-bg-wrapper > .container > .pricing {
    position: relative;
    z-index: 2;
  
    /* 
    Ensure content is above background
    */
  }
  
  /* 
  Apply this to sections with backgrounds other than white
  */
  .features-bg-wrapper::before {
    background: linear-gradient(to bottom, white 0%, white 25%, var(--primary-blue-lighter) 65%, var(--primary-blue-lighter) 100%);
  }
  
  .industry-leading-bg-wrapper::before {
    background-color: var(--primary-blue-lighter);
    z-index: 0;
  }
  
  .coverage-pricing-bg-wrapper::before {
    background-color: var(--primary-blue-lighter);
    z-index: 0;
  }
  
  /* 
  ===== Components =====
  */
  .stats-heading {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.095em;
    text-transform: uppercase;
    color: var(--neutral-text-light);
    margin-bottom: var(--spacing-sm);
  }
  
  /* 
  Buttons
  */
  .btn {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0.75rem 1.5rem;
    min-width: 11.25rem;
    min-height: 3rem;
    border-radius: 12px;
    flex: none;
    order: 0;
    flex-grow: 0;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    box-sizing: border-box;
  }
  
  .btn-primary {
    background-color: var(--accent-orange);
    color: white;
  }
  
  .btn-primary:hover {
    background-color: var(--accent-orange-dark);
    transform: translateY(-2px);
  }
  
  .btn-secondary {
    background-color: var(--secondary-blue-lighter);
    color: var(--secondary-blue);
    border: 1px solid var(--secondary-blue);
  }
  
  .btn-secondary:hover {
    background-color: var(--secondary-blue-light);
    color: white;
    transform: translateY(-2px);
  }
  
  .btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    width: auto;
    height: auto;
  }
  
  .cta-buttons {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
  }
  
  /* 
  Image Placeholders
  */
  .image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--neutral-light);
    border-radius: var(--border-radius-md);
    color: var(--neutral-text-light);
    font-size: var(--font-size-sm);
    text-align: center;
    padding: var(--spacing-sm);
    position: relative;
    z-index: 2;
  
    /* 
    Ensure visibility
    */
    width: 100%;
    min-height: 300px;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--neutral-light);
    border-radius: 20%;
    width: 60px;
    height: 60px;
    margin-bottom: 25px;
  }
  
  /* 
  ===== Hero Section =====
  */
  .hero {
    background-color: var(--primary-blue-lighter);
    padding: var(--spacing-xl) 0;
    width: 100%;
  }
  
  .hero .container {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: 0 8%;
  
    /* 
    Use consistent padding with other containers
    */
  }
  
  .hero-content,
  .hero-image {
    flex: 1;
    width: 100%;
  
    /* 
    Ensure content doesn't overflow
    */
  }
  
  .hero-image img {
    max-width: 100%;
    height: auto;
    display: block;
  
    /* 
    Prevent inline image spacing issues
    */
  }
  
  .hero-svg {
    max-width: 100%;
    height: auto;
    display: block;
    transform: scale(1.20);
  
    /* 
    Make the hero image 50% larger
    */
  
    /* 
    Prevent inline image spacing issues
    */
  }
  
  
  /* 
  ===== Sports Icons Section =====
  */
  .sports-icons {
    padding: var(--spacing-lg) 0;
  
  }
  
  .icon-grid {
    display: flex;
    justify-content: space-evenly;
  
    /* 
    Changed from space-between to space-evenly for better distribution
    */
    flex-wrap: wrap;
  
    /* 
    Changed from nowrap to wrap to allow multiple rows
    */
    width: 100%;
    gap: 10px;
  
    /* 
    Add consistent gap between items
    */
    overflow-x: visible;
  
    /* 
    Remove horizontal scrolling since we're wrapping
    */
    scrollbar-width: none;
  
    /* 
    Hide scrollbar in Firefox
    */
    -ms-overflow-style: none;
  
    /* 
    Hide scrollbar in IE/Edge
    */
  }
  
  /* 
  Hide scrollbar in Chrome/Safari
  */
  .icon-grid::-webkit-scrollbar {
    display: none;
  }
  
  .sport-icon {
    padding: 15px 10px;
  
    /* 
    Reduced padding
    */
    white-space: nowrap;
  
    /* 
    Prevent text wrapping
    */
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--neutral-text-light);
    cursor: pointer;
    transition: color 0.3s ease;
    text-align: center;
    padding: 10px 12px;
  
    /* 
    Center text
    */
    flex: 0 1 auto;
  
    /* 
    Changed from flex: 1 to allow natural sizing without stretching
    */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
  
    /* 
    Ensure consistent height
    */
    min-width: 70px;
  
    /* 
    Ensure minimum width for better touch targets
    */
  }
  
  .sport-icon:hover {
    color: var(--accent-orange);
  }
  
  /* 
  Style for sport icons when used as images
  */
 
  
 
  
  /* 
  ===== Features Section =====
  */
  .features {
    position: relative;
    padding: var(--spacing-lg) 0;
    background-image: url('/media/1539/background-grid.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1000px;
  }

  
  .features::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 1;
  }
  
  .features .container {
    position: relative;
    z-index: 2;
  }
  
  
  .features h2,
  .features p.subtitle {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
    position: relative;
    z-index: 2;
  }
  
  .feature-card {
    background: #f8fafc;
    border: 2px solid #f1f5f9;
    border-radius: var(--border-radius-md);
    padding: 2rem;
    transition: all 0.3s ease;
    text-align: center;
  }
  
  .feature-card:hover {
    background: #fafbfc;
  }
  
  .feature-card h3 {
    margin-top: var(--spacing-sm, 10px);
    color: var(--primary-blue, #1F7FB7);
  }
  
  .testimonial-grid {
    background: #f8fafc;
    border: 2px solid #f1f5f9;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1 1 300px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  
  .testimonial-content {
    flex: 1;
  }
  
  .testimonial-author {
    display: flex;
    font-weight: 600;
    align-items: center;
    gap: var(--spacing-sm, 10px);
    margin-top: var(--spacing-md, 20px);
  } 
  
  .author-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .author-info h4,
  .author-info p {
    margin: 0;
  }
 
  
  .testimonials-slider {
    display: flex;
    gap: var(--spacing-md, 20px);
    overflow-x: auto;
    padding: var(--spacing-md, 20px) 0;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    justify-content: center;
    margin: 0 auto;
  }
  
  
  /* 
  ===== Use Cases Section =====
  */
  .use-cases {
    padding: var(--spacing-xl) 0;
  }
   
  .use-case-card {
    display: flex;
    flex: 1 1 280px;
    flex-direction: column;
    align-items: flex-start;
    min-width: 260px;
    background: #f8fafc;
    border: 2px solid #f1f5f9;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    padding: 24px 20px;
    gap: var(--spacing-sm, 16px);
    min-height: 0;
    margin-bottom: 20px;
    overflow: visible;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
  }
 


  .use-case-card-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    position: relative;
  }
  
  .use-case-card-content h3 {
    margin: 0;
    color: #1a4e8a;
    font-size: 1.25rem;
  }
  
  .use-case-card-content p {
    margin: 0;
    color: var(--text-color, #333);
    font-size: 0.95rem;
    line-height: 1.5;
  }
  
  .use-case-card-content .btn-small {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #1a4e8a;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  
  .use-case-card-content .btn-small:hover {
    color: #2563eb;
  }
  
  .use-case-card-content .btn-small::after {
    content: '→';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }
  
  .use-case-card:hover .btn-small::after {
    transform: translate(5px, -50%);
  }
  
  .use-case-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    width: 64px;
    height: 64px;
    background-color: var(--primary-blue);
    background: #FFFFFF;
    border: 1px solid #D2E6F9;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    position: relative;
    overflow: hidden;
  }
  
  .use-case-icon img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 2;
  }
  
  .use-cases .container {
    display: block;
  }
  
  .use-cases .section-content {
    max-width: 60%;
  }
  
  .use-cases .cta-buttons {
    margin-left: auto;
  }
  

  
  .use-cases-grid,
  .features-grid,
  .sw-features-grid,
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1440px;
  }

  .features-grid.swfeatures-grid {
    grid-template-columns: repeat(4, 1fr);
  }
 
  

  
  .use-case-card:hover {
    background: #fafbfc;
    transform: translateY(-2px);
  
    /* 
    Subtle lift effect
    */
    box-shadow: var(--shadow-md);
  
    /* 
    Slightly increased shadow
    */
  }
  
  .use-case-card .btn-small {
    margin-top: auto;
    position: relative;
    padding-right: 24px;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
    color: var(--accent-orange);
  }
  
  .use-case-card .btn-small:hover {
    color: var(--accent-orange-dark);
  }
  
  /* 
  Keep the arrow animation on hover for subtle interactivity
  */
  .use-case-card .btn-small::after {
    content: '→';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }
  
  .use-case-card:hover .btn-small::after {
    transform: translate(5px, -50%);
  }
  
  /* 
  ===== Trusted By Section =====
  */
  .trusted-by {
    padding: var(--spacing-xl) 0;
  }
  
  .testimonial-card {
    min-width: 280px;
  
    /* 
    Reduced from 380px
    */
    flex: 0 0 280px;
  
    /* 
    Reduced from 380px
    */
    background-color: white;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: 32px;
    display: flex;
    flex-direction: column;
  }
  
 
  
  
  .stat-card {
    text-align: center;
    background: #f8fafc;
    border: 2px solid #f1f5f9;
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
  }
  
  .stat-card:hover {
    background: #fafbfc;
  }
  
  .stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--neutral-text-dark);
    margin: var(--spacing-xs) 0;
    text-align: center;
    display: block;
    width: 100%;
  }
  
  /* 
  ===== Coverage & Support Section =====
  */
  .coverage,
  .support,
  .pricing,
  .developer-resources,
  .industry-leading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-lg);
    padding: 0;
  
    /* 
    Remove padding since wrapper provides spacing
    */
    overflow: visible;
  
    /* 
    Ensure SVGs aren't cut off
    */
    position: relative;
  
    /* 
    Ensure proper stacking context
    */
    z-index: 1;
  
    /* 
    Ensure content is above background
    */
  }
   /* 
  Remove background styling for support and developer-resources
  */
  .support,
  .developer-resources {
    position: relative;
    z-index: 1;
  
    /* 
    No background color - keep white background
    */
  }
  .coverage-content,
  .support-content,
  .pricing-content,
  .developer-content,
  .industry-content,
  .industry-image {
    flex: 1;
    min-width: 300px;
    position: relative;
  
    /* 
    Ensure proper stacking context
    */
    z-index: 1;
  
    /* 
    Ensure content is above background
    */
  }
  
  .coverage-image,
  .support-image,
  .pricing-image,
  .developer-image {
    flex: 1;
    min-width: 300px;
    position: relative;
    overflow: visible;
  
    /* 
    Ensure SVGs aren't cut off
    */
    z-index: 1;
  
    /* 
    Ensure content is above background
    */
  }
  
  
  /* 
  ===== Industry Section =====
  */
  .industry-section {
    padding: var(--spacing-lg) 0;
  }
  
  /* 
  ===== Industry Leading Section =====
 
 
  
  .industry-leading h3,
  .industry-leading p {
    color: var(--neutral-text-dark);
  }
  
  /* 
  ===== Get Started Section =====
  */
  .get-started-card {
    background-color: #015065;
    color: white;
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    box-shadow: var(--shadow-md);
    position: relative;
  
    /* 
    Changed to relative for proper positioning of pseudo-element
    */
    overflow: hidden;
  }
  
  .get-started-content {
    flex: 1;
  
    /* 
    Ensure content takes up available space
    */
    max-width: 50%;
  
    /* 
    Prevent content from getting too wide
    */
    position: relative;
  
    /* 
    Ensure content is above the gradient
    */
    z-index: 1;
  }
  
  .get-started-image {
    flex: 1;
  
    /* 
    Ensure image container takes up available space
    */
    display: flex;
    justify-content: center;
  
    /* 
    Center the image horizontally
    */
    align-items: center;
  
    /* 
    Center the image vertically
    */
    position: relative;
  
    /* 
    Ensure image is above the gradient
    */
    z-index: 1;
  }
  
  .get-started-svg {
    width: 100%;
  
    /* 
    Changed from fixed 600px
    */
    max-width: 600px;
  
    /* 
    Added max-width
    */
    height: auto;
  
    /* 
    Changed from fixed 400px
    */
    object-fit: contain;
  }
  
  .get-started-content h2 {
    color: white;
    font-size: clamp(1.5rem, 6vw, 2.5rem);
  
    /* 
    Responsive font sizing
    */
    margin-bottom: 1.25rem;
    line-height: 1.2;
  }
  
  .get-started-content p {
    color: white;
    margin-bottom: 1.5rem;
    line-height: 1.5;
  }
  
  /* 
  Button styles for get-started section
  */
  .btn-free-trial,
  .btn-learn-more {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
  
    /* 
    Match the standard button border-radius
    */
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 3rem;
  
    /* 
    Match standard button height
    */
    min-width: 11.25rem;
  
    /* 
    Match standard button width
    */
    box-sizing: border-box;
  }
  
  .btn-free-trial {
    background-color: var(--accent-orange);
    color: white;
    margin-right: 1rem;
  }
  
  .btn-free-trial:hover {
    background-color: var(--accent-orange-dark);
    transform: translateY(-2px);
  }
  
  .btn-learn-more {
    background-color: var(--accent-orange-light);
    color: var(--accent-orange-dark);
    border: 1px solid var(--accent-orange-dark);
  }
  
  .btn-learn-more:hover {
    background-color: var(--accent-orange);
    color: white;
    transform: translateY(-2px);
  }
  
  
  /* 
  ===== FAQ Section =====
  */
  .faq-list {
    max-width: 800px;
    margin: var(--spacing-lg) auto 0;
  }
  
  .faq-item {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--neutral-border);
  }
  
  .faq-item:last-child {
    border-bottom: none;
  }
  
 
  .faq-question {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: var(--spacing-sm, 1rem) 0;
    transition: color 0.3s ease;
    font-size: 1.25rem;
    font-weight: 600;
  }
  
 
  
  .faq-question::after {
    content: '+';
    font-size: 1.5rem;
    font-weight: 700;
    transition: transform 0.3s ease;
    color: #FF8C00;
  
  }


  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    opacity: 0;
    padding: 0;
  }
  
 
  
  .faq-question:hover {
    color: var(--primary-blue, #1a4e8a);
  }
  

  
  .faq-question.active::after {
    content: '−';
    color: var(--accent-orange, #FF8C00);
  }
  
 
  
  .faq-answer.active {
    max-height: 500px;
    opacity: 1;
    padding: 1rem 0;
  }
  
  .faq-answer p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--neutral-text-light, #6D737F);
    margin-bottom: 0.75rem;
  }
  
  .feature-icon {
    width: 64px;
    height: 64px;
    background-color: var(--primary-blue);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spacing-sm);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }


  
  .feature-icon img {
    display: block;
    object-fit: contain;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 2;
    filter: brightness(0) invert(1);  
  }


 /* 
  ===== Blog Styles =====
  */

	.spc.image {
	 display: flex;
	 flex-direction: column;
	 justify-content: center;
	 align-items: center;
	}

   .right-col.col-lg-3.col-md-4.col-xs-12.pull-right {
    display: none;
	}

  .newslettercta {
	  display: none;
  }


  
  /* 
  ===== Footer Styles =====
  */
  .site-footer {
    background-color: var(--neutral-text-dark);
    color: var(--neutral-white);
    padding: var(--spacing-xl) 0 var(--spacing-lg);
  }
  
  .footer-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
  }
  
  .footer-nav-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
  }
  
  .footer-nav-column h3 {
    color: var(--neutral-white);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
  }
  
  .footer-nav-column nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-nav-column nav ul li {
    margin-bottom: var(--spacing-xs);
  }
  
  .footer-nav-column nav ul li a {
    color: var(--neutral-text-light);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s ease;
  }
  
  .footer-nav-column nav ul li a:hover {
    color: var(--neutral-white);
  }
  
  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: var(--spacing-xl);
  }
  
  .footer-logo {
    width: 180px;
    height: auto;
    margin-bottom: var(--spacing-md);
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  .footer-brand .location {
    color: var(--neutral-text-light);
    margin-bottom: var(--spacing-sm);
    text-align: center;
    width: 100%;
  }
  
  .footer-brand .contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: center;
  }
  
  .footer-brand .contact a {
    color: var(--neutral-text-light);
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .footer-brand .contact a:hover {
    color: var(--neutral-white);
  }
  
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .legal-links {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
  }
  
  .legal-links span,
  .legal-links a {
    color: var(--neutral-text-light);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s ease;
  }
  
  .legal-links a:hover {
    color: var(--neutral-white);
  }
  
  .social-links {
    display: flex;
    gap: var(--spacing-sm);
  }
  
  .social-links a {
    color: var(--neutral-text-light);
    font-size: 1.25rem;
    transition: color 0.2s ease;
  }
  
  .social-links a:hover {
    color: var(--neutral-white);
  }
  
  

  
  /* 
  Add the holographic effect
  */
  .feature-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      0deg, 
      transparent, 
      transparent 30%, 
      rgba(255, 255, 255, 0.3)
    );
    transform: rotate(-45deg);
    transition: all 0.5s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
  
  .feature-card:hover .feature-icon::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(100%);
  }
  

  
  /* 
  Benefits Section Flex Layout
  */
  .benefits-container {
    display: flex;
    align-items: center;
    gap: 4rem;
  }
  
  .benefits-content {
    flex: 1;
  }
  
  .benefits-image {
    flex: 1;
  }

  
  /* 
  Large feature icon for pricing/features section
  */
  .feature-icon--large {
    width: 220px;
    height: 220px;
    background: var(--primary-blue-lighter, #f6f8fa);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    box-shadow: none;
    padding: 0;
  }
  
  .feature-icon--large img {
    filter: none;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    display: block;
    margin: 0;
  }
  
  .centered-content {
    text-align: center;
  }
  
  .article-content h2,
  .article-content p {
    text-align: left;
  }
  
  .stats-section {
    text-align: center;
  }
  
  .stats-section .stats-grid {
    justify-content: center;
  }
  
  .stats-section .stat-card p {
    text-align: center;
    margin: 0 auto;
    max-width: none;
  }
  
  .stats-section .stat-value {
    margin-left: auto;
    margin-right: auto;
  }
  
  .use-case-grid {
    text-align: left;
  }
  
  /* 
  Specific styling for coverage-support section heading
  */
  .coverage-support > .container:first-child {
    text-align: center;
    margin-bottom: 0;
    padding-bottom: 0;
    padding: var(--spacing-lg) 8%;
  }
  
  .coverage-support > .container:first-child h2 {
    margin-bottom: 1rem;
  }
  
  .coverage-support > .container:first-child p {
    max-width: 800px;
    margin: 0 auto 2rem auto;
    text-align: center;
  }
  
  /* 
  Add spacing for the first section-bg-wrapper after the header
  */
  .coverage-support > .section-bg-wrapper:first-of-type {
    margin-top: var(--spacing-lg);
  }
  
  /* 
  Add spacing only for standalone containers (support and developer-resources)
  */
  .coverage-support .support,
  .coverage-support .developer-resources {
    padding: var(--spacing-lg) 0;
  }
 
  
  /* 
  ===== Support & Content Section Features Lists =====
  */
  .support-content .features-list,
  .pricing-content .features-list,
  .developer-content .features-list,
  .coverage-content .features-list {
    list-style-type: none;
    padding: 0;
    margin: var(--spacing-md) 0;
  }
  
  .support-content .features-list li,
  .pricing-content .features-list li,
  .developer-content .features-list li,
  .coverage-content .features-list li {
    padding: var(--spacing-xs) 0;
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: var(--spacing-xs);
    color: var(--neutral-text-light);
    line-height: 1.6;
  }
  
  .support-content .features-list li::before,
  .pricing-content .features-list li::before,
  .developer-content .features-list li::before,
  .coverage-content .features-list li::before {
    content: "✓";
    color: var(--primary-blue);
    position: absolute;
    left: 0;
    top: calc(var(--spacing-xs) + 0.1em);
    font-weight: 600;
  }
  
  /* 
  Feature title styling for enhanced readability
  */
  .feature-title {
    font-weight: 600;
    color: #1a4e8a;
    font-size: 1rem;
  }
  
  /* 
  ===== SportWise Overview Page Specific Styles =====
  */
  

    
  /* 
  Sports coverage grid
  */
  .sports-coverage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
  }
 
  /* 
  Center text for section headers
  */
  .coverage .container > h2,
  .coverage .container > p {
    text-align: center !important;
  }
  
  /* 
  Override max-width constraint on paragraphs
  */
  p {
    max-width: none !important;
  }
  
  .sport-coverage-card {
    background: #f8fafc;
    border: 2px solid #f1f5f9;
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    height: 100%;
  
    /* 
    Ensure all cards have the same height
    */
    width: 100%;
  
    /* 
    Ensure cards take full width of their grid cell
    */
  }
  
  /* 
  Add hover effect for elevation
  */
  .sport-coverage-card:hover {
    background: #fafbfc;
  }
  
  .sport-icon-container {
    box-sizing: border-box;
    position: relative;
    width: 64px;
    height: 64px;
    margin-bottom: var(--spacing-sm);
    background-color: var(--primary-blue);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
  }
  
  .sport-icon-container::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
      0deg, 
      transparent, 
      transparent 30%, 
      rgba(255, 255, 255, 0.3)
    );
    transform: rotate(-45deg);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
  }
  
  .sport-icon-img {
    width: 40px;
    height: 40px;
    position: relative;
    padding: 0;
    transition: transform 0.3s ease;
    z-index: 2;
    filter: brightness(0) invert(1);
  }

  
  .sport-coverage-card h3 {
    margin-top: var(--spacing-sm, 10px);
    color: var(--primary-blue, #1F7FB7);
  }
  
  /* 
  Pricing section
  */
  .pricing-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
  }
  
  .pricing-card {
    background-color: white;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
  
    /* 
    Ensure all cards have the same height
    */
  }
  
  .pricing-card.featured {
    border: 2px solid var(--accent-orange);
    transform: scale(1.05);
  }
  
  .pricing-card .price {
    font-size: 2.5rem;
    font-weight: 700;
    margin: var(--spacing-sm) 0;
  }
  
  .pricing-card .price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--neutral-text-light);
  }
  
  .pricing-card .features-list {
    list-style-type: none;
    padding: 0;
    margin: var(--spacing-md) 0;
    flex-grow: 1;
  
    /* 
    Allow the list to grow and push the button to the bottom
    */
  }
  
  .pricing-card .features-list li {
    padding: var(--spacing-xs) 0;
    position: relative;
    padding-left: 1.5rem;
  }
  
  .pricing-card .features-list li::before {
    content: "✓";
    color: var(--primary-blue);
    position: absolute;
    left: 0;
    top: calc(var(--spacing-xs) + 0.1em);
  }
  
  /* 
  Add styles for the button at the bottom
  */
  .pricing-card .btn,
  .pricing-card .btn-primary,
  .pricing-card .btn-secondary {
    margin-top: auto;
  
    /* 
    Push button to the bottom
    */
    align-self: center;
  
    /* 
    Center the button horizontally
    */
    width: 100%;
  
    /* 
    Make button full width
    */
  }
  
  /* 
  Featured configurations section
  */
  .configurations-grid {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    overflow-x: auto;
    padding-bottom: var(--spacing-md);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-blue) var(--neutral-light);
  }
  
  .configurations-grid::-webkit-scrollbar {
    height: 8px;
  }
  
  .configurations-grid::-webkit-scrollbar-track {
    background: var(--neutral-light);
    border-radius: 4px;
  }
  
  .configurations-grid::-webkit-scrollbar-thumb {
    background-color: var(--primary-blue);
    border-radius: 4px;
  }
  
  .configuration-card {
    background-color: white;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-width: 280px;
    flex: 0 0 calc(25% - var(--spacing-md));
  }
  
  .configuration-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
  }
  
  .configuration-image {
    width: 100%;
    height: 160px;
    background-color: var(--neutral-light);
    position: relative;
  }
  
  .configuration-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .configuration-content {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
  }
  
  .configuration-card h3 {
    color: var(--primary-blue);
    margin: 0;
    font-size: 1.25rem;
  }
  
  .configuration-card p {
    color: var(--neutral-text-light);
    margin: 0.5rem 0;
    font-size: 0.9rem;
  }
  
  .configuration-card .features-list {
    list-style-type: none;
    padding: 0;
    margin: 0.5rem 0;
  }
  
  .configuration-card .features-list li {
    padding: var(--spacing-xs) 0;
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.9rem;
    color: var(--neutral-text-light);
  }
  
  .configuration-card .features-list li::before {
    content: "✓";
    color: var(--primary-blue);
    position: absolute;
    left: 0;
    top: calc(var(--spacing-xs) + 0.1em);
  }
  
  .configuration-card .btn-small {
    margin-top: auto;
    position: relative;
    padding-right: 24px;
    color: var(--accent-orange);
    text-decoration: none;
    font-weight: 500;
    align-self: flex-start;
  }
  
  .configuration-card .btn-small::after {
    content: '→';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }
  
  .configuration-card .btn-small:hover {
    color: var(--accent-orange-dark);
  }
  
  .configuration-card .btn-small:hover::after {
    transform: translate(5px, -50%);
  }
  
 
  
  .testimonial-item {
    background: #f8fafc;
    border: 2px solid #f1f5f9;
    border-radius: var(--border-radius-md);
    padding: 2rem;
    transition: all 0.3s ease;
  }
  
  .testimonial-item:hover {
    background: #fafbfc;
  }
  
  .testimonial-text {
    font-style: italic;
    margin-bottom: var(--spacing-sm);
	height: 200px;
  }
  
 
  

  
  /* 
  Who Uses SportWise section
  */
  .who-uses-header {
    padding: var(--spacing-lg) 0;
    text-align: center;
  }
  
  .who-uses-header h2,
  .who-uses-header p {
    text-align: center;
  }
  
  /* 
  Pricing section styles
  */
  .pricing-section {
    padding: var(--spacing-lg) 0;
    text-align: center;
  }
  
  .pricing-section h2,
  .pricing-section p {
    text-align: center;
  }
  
  /* 
  Featured configurations section
  */
  .featured-configurations {
    padding: var(--spacing-lg) 0;
    text-align: center;
  }
  
  .featured-configurations h2,
  .featured-configurations p {
    text-align: left;
  }
  
  .swcardtxt {
    text-align: left;
  }
  
  /* 
  Testimonials section
  */
  .testimonials {
    padding: var(--spacing-lg) 0;
    text-align: center;
  }
  
  .testimonials h2 {
    text-align: center;
  }
  
  /* 
  Get Started section backgrounds
  */
  .get-started-bg-wrapper::before {
    background-color: var(--primary-blue-lighter);
    z-index: 0;
  }
  
  /* 
  Sports coverage section
  */
  .sports-coverage {
    padding: var(--spacing-lg) 0;
    text-align: center;
  }
  
  .sports-coverage h2 {
    text-align: center;
  }
  
  
  /* 
  Ensure all h2, h3, h4 headers are left-aligned regardless of parent section alignment
  */
  .stats-heading h2,
  .stats-heading h3,
  .stats-heading h4,
  .stat-card h2,
  .stat-card h3,
  .stat-card h4,
  [class*="section"] h2,
  [class*="section"] h3,
  [class*="section"] h4,
  .subtitle {
    text-align: left !important;
  }
  
 
  
  /* 
  Coverage SVG Container
  */
  .coverage-svg-container {
    position: relative;
    width: 100%;
  
    /* 
    Changed from fixed 800px
    */
    max-width: 600px;
  
    /* 
    Added max-width
    */
    height: auto;
  
    /* 
    Changed from 4/3 to 1/1 for a perfect circle
    */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
  
    /* 
    Changed from hidden to visible to prevent cutting off
    */
    margin: 0 auto;
  
    /* 
    Center the container
    */
    padding: 5% 0;
  
    /* 
    Add padding to prevent cutting off at top and bottom
    */
  }
  
  .outer-rings-svg {
    position: absolute;
    width: 100%;
  
    /* 
    Changed from 90% to 100%
    */
    height: 100%;
  
    /* 
    Changed from 90% to 100%
    */
    object-fit: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .datafeeds-icons-svg {
    position: absolute;
    width: 70%;
    height: 70%;
    object-fit: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  
    /* 
    Ensures this appears on top of the rings
    */
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
  }
  
  /* 
  Support SVG Container
  */
  .support-svg-container {
    position: relative;
    width: 100%;
  
    /* 
    Changed from fixed 800px
    */
    max-width: 600px;
  
    /* 
    Added max-width
    */
    height: auto;
  
    /* 
    Changed from fixed 600px
    */
    aspect-ratio: 1/1;
  
    /* 
    Changed from 4/3 to 1/1 for a perfect circle
    */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
  
    /* 
    Changed from hidden to visible to prevent cutting off
    */
    margin: 0 auto;
  
    /* 
    Center the container
    */
    padding: 5% 0;
  
    /* 
    Add padding to prevent cutting off at top and bottom
    */
  }
  
  .customer-support-svg {
    position: absolute;
    width: 90%;
    height: 90%;
    object-fit: contain;
    top: 53%;
    left: 52%;
    transform: translate(-52%, -55%) rotate(10deg);
    z-index: 1;
  
    /* 
    Ensures this appears on top of the rings
    */
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
  }
  
  .influencer-svg {
    position: absolute;
    width: 70%;
    height: 90%;
    object-fit: contain;
    top: 53%;
    left: 52%;
    transform: translate(-52%, -55%) rotate(10deg);
    z-index: 1;
  
    /* 
    Ensures this appears on top of the rings
    */
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
  }
   

  /* 
  Pricing SVG Container
  */
  .pricing-svg-container {
    position: relative;
    width: 100%;
  
    /* 
    Changed from fixed 800px
    */
    max-width: 600px;
  
    /* 
    Added max-width
    */
    height: auto;
  
    /* 
    Changed from fixed 600px
    */
    aspect-ratio: 1/1;
  
    /* 
    Changed from 4/3 to 1/1 for a perfect circle
    */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
  
    /* 
    Changed from hidden to visible to prevent cutting off
    */
    margin: 0 auto;
  
    /* 
    Center the container
    */
    padding: 5% 0;
  
    /* 
    Add padding to prevent cutting off at top and bottom
    */
  }
  
  .pricing-svg {
    position: absolute;
    width: 90%;
    height: 90%;
    object-fit: contain;
    top: 45%;
    left: 52%;
    transform: translate(-50%, -45%) rotate(-5deg);
    z-index: 1;
  
    /* 
    Ensures this appears on top of the rings
    */
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
  }
  
  .enth-svg {
    position: absolute;
    width: 70%;
    height: 90%;
    object-fit: contain;
    top: 45%;
    left: 52%;
    transform: translate(-50%, -45%) rotate(-5deg);
    z-index: 1;
  
    /* 
    Ensures this appears on top of the rings
    */
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
  }
  
  /* 
  Developer SVG Container
  */
  .developer-svg-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: auto;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    margin: 0 auto;
    padding: 5% 0;
  }
  
  .developer-svg {
    position: absolute;
    width: 70%;
    height: 90%;
    object-fit: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    z-index: 1;
  }
  
  /* 
  Industry SVG Container
  */
  .industry-svg-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: auto;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    margin: 0 auto;
    padding: 5% 0;
  }
  
  .industry-rocket-svg {
    position: absolute;
    width: 70%;
    height: 90%;
    object-fit: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
  }
  

  
  /* 
  Ensure all images are responsive
  */
  img {
    max-width: 100%;
    height: auto;   
  }
  
  
  
  /* 
  Modifier for lighter blue background
  */
  .feature-icon--light {
    background-color: var(--primary-blue-light);
  }
  
 
  
  
  
  .sw-features-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
  }

  
  /* 
  Analytical section (duplicated from pricing styles)
  */
  .analytical,
  .analytical-content,
  .analytical-image {
    /* 
    Matches .pricing, .pricing-content, .pricing-image
    */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-lg);
    padding: 0;
    overflow: visible;
    position: relative;
    z-index: 1;
  }
  
  .analytical-content {
    flex: 1;
    min-width: 300px;
    position: relative;
    z-index: 1;
  }
  
  .analytical-image {
    flex: 1;
    min-width: 300px;
    position: relative;
    overflow: visible;
    z-index: 1;
  }
  
  .analytical-svg-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    height: auto;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    margin: 0 auto;
    padding: 5% 0;
  }
  
  .analytical-svg {
    position: absolute;
    width: 70%;
    height: 90%;
    object-fit: contain;
    top: 53%;
    left: 52%;
    transform: translate(-52%, -55%) rotate(10deg);
    z-index: 1;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.2));
  }
  
  .analytical-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
  }
  
  .analytical-card {
    background-color: white;
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
  }
  
  .analytical-card.featured {
    border: 2px solid var(--accent-orange);
    transform: scale(1.05);
  }
  
  .analytical-card .price {
    font-size: 2.5rem;
    font-weight: 700;
    margin: var(--spacing-sm) 0;
  }
  
  .analytical-card .price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--neutral-text-light);
  }
  
  .analytical-card .features-list {
    list-style-type: none;
    padding: 0;
    margin: var(--spacing-md) 0;
    flex-grow: 1;
  }
  
  .analytical-card .features-list li {
    padding: var(--spacing-xs) 0;
    position: relative;
    padding-left: 1.5rem;
  }
  
  .analytical-card .features-list li::before {
    content: "✓";
    color: var(--primary-blue);
    position: absolute;
    left: 0;
    top: calc(var(--spacing-xs) + 0.1em);
  }
  
  .analytical-card .btn,
  .analytical-card .btn-primary,
  .analytical-card .btn-secondary {
    margin-top: auto;
    align-self: center;
    width: 100%;
  }
  
  
  
  
 
  
  /* From mainLP body styling */
  
          /* Additional styles specific to this landing page */
          .main-header {
              position: fixed;
              top: 0;
              left: 0;
              right: 0;
              background-color: var(--neutral-white);
              box-shadow: var(--shadow-sm);
              z-index: 1000;
          }
          
          .main-nav {
              height: 80px;
              display: flex;
              align-items: center;
              background: white;
          }
          
          .nav-container {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 100%;
              padding: 0 var(--spacing-md);
          }
          
          .nav-logo {
              text-decoration: none;
              display: flex;
              align-items: center;
              height: 50px;
          }
          
          .nav-logo img {
              height: 100%;
              width: auto;
              object-fit: contain;
          }
          
          .nav-menu {
              display: flex;
              gap: var(--spacing-md);
              list-style: none;
              margin: 0;
              padding: 0;
          }
          
          .nav-item {
              position: relative;
          }
          
          .nav-link {
              color: var(--neutral-text-dark);
              text-decoration: none;
              font-weight: 500;
              padding: var(--spacing-xs) var(--spacing-sm);
              display: flex;
              align-items: center;
              gap: 4px;
              transition: color 0.2s ease;
          }
          
          .nav-link:hover {
              color: var(--primary-nav);
          }
          
          .nav-link i {
              font-size: 12px;
              transition: transform 0.2s ease;
          }
          
          .dropdown-menu {
              position: absolute;
              top: 100%;
              left: 0;
              background-color: var(--neutral-white);
              min-width: 450px;
              border-radius: var(--border-radius-sm);
              opacity: 0;
              visibility: hidden;
              transform: translateY(-10px);
              transition: all 0.2s ease;
              padding: var(--spacing-sm);
              z-index: 1001;
              list-style: none;
          }
          
          .dropdown-menu li {
              list-style: none;
          }
          
          .nav-item:hover .dropdown-menu {
              opacity: 1;
              visibility: visible;
              transform: translateY(0);
          }
          
          .nav-item:hover .nav-link i {
              transform: rotate(180deg);
          }
          
          .dropdown-item {
              display: flex;
              align-items: flex-start;
              gap: var(--spacing-sm);
              padding: var(--spacing-sm);
              text-decoration: none;
              color: var(--neutral-text-dark);
              transition: background-color 0.2s ease;
          }
          
          .dropdown-item:hover {
              background-color: var(--neutral-light);
          }
          
          .dropdown-item-icon {
              width: 24px;
              height: 24px;
              flex-shrink: 0;
          }
          
          .dropdown-item-content {
              display: flex;
              flex-direction: column;
              gap: 4px;
          }
          
          .dropdown-item-title {
              color: var(--neutral-text-dark);
              font-weight: 500;
          }
          
          .dropdown-item:hover .dropdown-item-title {
              color: var(--primary-nav);
          }
          
          .dropdown-item-description {
              color: var(--neutral-text-light);
              font-size: 0.875rem;
              line-height: 1.4;
          }
          
          /* Mobile Menu */
          .mobile-menu-toggle {
              display: none;
              background: none;
              border: none;
              cursor: pointer;
              padding: var(--spacing-xs);
          }
          

          
          /* Add margin to the main content to prevent overlap with fixed nav */
          main {
              margin-top: 0;
          }
          
          /* Live Scores styles */
          .live-scores-container {
              width: 100%;
              height: 40px; /* Match height defined in scroller.css */
			  margin-top: 80px;
          }
          
  
          
          /* Footer iframe styles */
          .footer-iframe {
              width: 100%;
              height: 600px; /* Increased height to accommodate all content */
              border: none;
              margin-top: 3rem;
              display: block;
          }
          
          /* Quick Tools Section Styles */
          .quick-tools-section {
              background-color: var(--secondary-blue-lighter);
              padding: 2rem 0;
          }
          
          /* NFL Ticker Styles */
          .nfl-ticker {
              background-color: var(--neutral-light);
              padding: 0.5rem 0;
              overflow: hidden;
              position: relative;
          }
          
          .ticker-container {
              display: flex;
              gap: 2rem;
              animation: ticker 30s linear infinite;
              white-space: nowrap;
          }
          
          @keyframes ticker {
              0% { transform: translateX(0); }
              100% { transform: translateX(-100%); }
          }
          
          .game-item {
              display: flex;
              flex-direction: column;
              background-color: white;
              border-radius: var(--border-radius-md);
              padding: 0.75rem;
              box-shadow: var(--shadow-sm);
              min-width: 200px;
          }
          
          .game-info {
              display: flex;
              justify-content: space-between;
              align-items: center;
          }
          
          .team-info {
              display: flex;
              align-items: center;
              min-width: 60px;
          }
          
          .team-name {
              font-weight: bold;
          }
          
          .team-score {
              font-size: 1.25rem;
              font-weight: bold;
          }
          
          .game-status {
              font-size: 0.875rem;
              color: var(--neutral-text-light);
          }
          
          .game-status.live {
              color: #e53935;
              font-weight: bold;
          }
          
          .game-status.final {
              font-weight: bold;
          }
          
          .weather-info {
              display: flex;
              justify-content: space-between;
              margin-top: 0.5rem;
              font-size: 0.75rem;
              color: var(--neutral-text-light);
          }
          
          .weather-item {
              display: flex;
              align-items: center;
              gap: 0.25rem;
          }
          
          .see-more-link {
              display: flex;
              align-items: center;
              background-color: white;
              border-radius: var(--border-radius-md);
              padding: 0.75rem 1rem;
              box-shadow: var(--shadow-sm);
              color: var(--primary-blue);
              font-weight: 500;
              text-decoration: none;
              gap: 0.5rem;
              height: 100%;
              align-self: center;
          }
          
          /* Content Grid Layout */
          .content-grid {
              display: grid;
              grid-template-columns: 1fr 2fr 1fr;
              gap: 2rem;
              margin: 2rem 0;
              align-items: start; /* Allow grid items to size naturally */
          }
          
          .sidebar {
              background-color: white;
              border-radius: var(--border-radius-md);
              padding: 1.5rem;
              box-shadow: var(--shadow-sm);
              display: flex;
              flex-direction: column;
              /* height: 100%; - Removed to allow natural sizing */
          }
          
          .quick-links {
              flex: 1; /* Make quick-links expand to fill available space */
              display: flex;
              flex-direction: column;
          }
          
          .quick-links h3 {
              margin-bottom: 1rem;
              font-size: 1.25rem;
          }
          
          .quick-links ul {
              list-style: none;
              padding: 0;
              margin: 0;
              flex: 1; /* Allow the list to expand */
              display: flex;
              flex-direction: column;
          }
          
          .quick-links li {
              margin-bottom: 0;
              border-bottom: 1px solid var(--neutral-border);
          }
          
          .quick-links a {
              display: flex;
              align-items: center;
              gap: 0.75rem;
              color: var(--neutral-text-dark);
              text-decoration: none;
              transition: color 0.3s ease;
              padding: 1rem 0;
          }
          
          .quick-links a:hover {
              color: var(--primary-blue);
          }
          
          .quick-links i {
              color: var(--primary-blue);
              width: 20px;
              text-align: center;
          }
          
          .right-sidebar .quick-links a {
              display: flex;
              justify-content: space-between;
              padding: 1rem 0;
              background-color: transparent;
              margin-bottom: 0;
              border-radius: 0;
          }
          
          .right-sidebar .quick-links a:hover {
              color: var(--primary-blue);
          }
          
          /* Enhanced See More Button */
          .see-more-btn {
              display: inline-block;
              color: var(--accent-orange) !important;
              font-weight: 600;
              margin-top: 1rem;
              text-decoration: none;
              padding: 0;
              transition: all 0.3s ease;
              text-align: center;
              background-color: transparent;
              border: none;
              box-shadow: none;
          }
          
          .see-more-btn:hover {
              color: var(--accent-orange-dark);
              
          }
          
          .see-more-btn::after {
              content: " →";
              display: inline-block;
              transition: transform 0.3s ease;
          }
          
          .see-more-btn:hover::after {
              transform: translateX(3px);
          }
          
          /* Add some spacing for the see-more button in right sidebar */
          .right-sidebar .see-more-btn {
              margin-top: auto;
              padding-top: 0.5rem;
          }

          
          /* Featured Carousel - Updated Styling */
          .featured-carousel {
              position: relative;
              border-radius: var(--border-radius-md);
              overflow: hidden;
              box-shadow: var(--shadow-md);
              margin-bottom: 2rem;
              background-color: white;
              height: 100%; /* Make carousel take full height */
          }
     
          
          /* Featured Article Consistency Improvements */
          .featured-article {
              display: none;
			  position: relative;
              width: 100%;
              display: none;
              padding: 0 0 2.5rem 0; /* Adjust padding to accommodate navigation dots */
              background-color: white;
              border-radius: var(--border-radius-md);
              overflow: hidden;
          }

			.featured-carousel .featured-article {
				display: none;
			}


          .featured-carousel .featured-article.active {
              display: block;
          }
          
          /* Improved video embedding for featured-media */
          .featured-media {
              height: 329px;
              position: relative;
              overflow: hidden;
              margin: 0 auto;
              flex: none;
              border-bottom: 1px solid var(--neutral-border);
              background-color: #f0f0f0; /* Light background for images */
          }
          
          /* For images */
          .featured-media img {
              width: 100%;
              height: 100%;
              object-fit: cover;
          }
          
          /* For videos/iframes */
          .featured-media iframe {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border: 0;
              background-color: black; /* Standard background for videos */
          }
          
          .article-content {
              background-color: white;
              padding: 1.5rem;
              position: relative;
              max-width: 584px;
              margin: 0 auto;
              min-height: 150px; /* Ensure consistent height */
          }
          
          .article-content h2 {
              font-size: 1.5rem;
              line-height: 1.3;
              margin-bottom: 0.75rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              height: 2.6em; /* Consistent height for titles */
          }
          
          .article-content p {
              font-size: 0.875rem;
              line-height: 1.5;
              color: var(--neutral-text-light);
              display: -webkit-box;
              -webkit-box-orient: vertical;
              overflow: hidden;
              height: 4.5em; /* Consistent height for descriptions */
          }
          
          .category {
              display: inline-block;
              background-color: #e6f0fb; /* Light blue background */
              color: var(--primary-blue); /* Dark blue text */
              padding: 0.3rem 1rem;
              border-radius: 1.25rem; /* Fully rounded corners */
              font-size: 0.875rem;
              font-weight: 600; /* Slightly bolder text */
              margin-bottom: 0.75rem;
              text-transform: uppercase; /* Make text uppercase */
              letter-spacing: 0.02em; /* Slight letter spacing */
          }
          
          /* Enhanced Carousel Navigation */

		  .carousel-nav {
			  text-align: center;
		  }
			
          .carousel-dot {
              width: 10px;
              height: 10px;
              border-radius: 50%;
              background-color: rgba(0, 0, 0, 0.2);
              border: none;
              cursor: pointer;
              padding: 0;
              transition: all 0.3s ease;
          }
          
          .carousel-dot:hover {
              background-color: rgba(0, 0, 0, 0.4);
              transform: scale(1.2);
          }

		
          
          .carousel-dot.active {
              background-color: var(--accent-orange);
              transform: scale(1.2);
              box-shadow: 0 0 6px rgba(255, 169, 57, 0.5);
          }
          
          /* Latest Updates Section */
          .latest-updates {
              margin: 3rem 0;
          }
          
          .section-title {
              margin-bottom: 1.5rem;
              position: relative;
              display: flex;
              align-items: center;
              justify-content: space-between;
          }
          
          .section-title::after {
              content: '';
              flex: 1;
              height: 1px;
              background-color: var(--neutral-border);
              margin-left: 1rem;
          }
          
          .news-grid-container {
              position: relative;
              min-height: 100px; /* Ensure enough height for arrows at bottom */
          }
          
          .news-grid {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: 1.5rem;
              grid-auto-rows: minmax(min-content, max-content);
          }
          
          .news-card {
              background-color: white;
              border-radius: var(--border-radius-md);
              overflow: hidden;
              box-shadow: var(--shadow-sm);
              transition: transform 0.3s ease, box-shadow 0.3s ease;
          }
          
          .news-card:hover {
              transform: translateY(-5px);
              box-shadow: var(--shadow-md);
          }
          
          .news-card img {
              width: 100%;
              height: 180px;
              object-fit: cover;
          }
          
          .news-content {
              padding: 1.25rem;
          }
          
          .news-content h3 {
              font-size: 1.125rem;
              margin: 0.5rem 0;
          }
          
          .news-content p {
              font-size: 0.875rem;
              color: var(--neutral-text-light);
              margin-bottom: 0.75rem;
          }
          
          .date {
              font-size: 0.75rem;
              color: var(--neutral-text-light);
          }
          
          /* Enhanced News Navigation Arrows */
			.nav-arrows {
			  display: flex;
			  justify-content: flex-start;
			  align-items: center;
			  margin: 1rem 0;
			}

			.news-nav-arrows {
			  font-size: 1.5rem;
			  background: none;
			  border: none;
			  color: #333;
			  cursor: pointer;
			}
          .news-nav-arrow {
              bottom: -50px;
              background-color: rgba(255, 255, 255, 0.8);
              color: var(--neutral-text-dark);
              border: none;
              width: 36px;
              height: 36px;
			  margin: 10px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              z-index: 2;
              box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
              transition: all 0.3s ease;
          }
          
          .news-nav-arrow:hover:not([disabled]) {
              background-color: white;
              transform: scale(1.1);
          }
          
          .news-nav-arrow:disabled {
              background-color: #c0c0c0;
              cursor: not-allowed;
          }
          
          .news-nav-arrow.prev {
              right: 50px;
          }
          
          .news-nav-arrow.next {
              right: 0;
          }
          
          .news-nav-arrow.next,
          .news-nav-arrow.prev {
              margin-bottom: 0;
          }
          
          /* Enhanced Sport Tabs */
          .sport-tabs {
              display: flex;
              gap: 0;
              margin-bottom: 1.5rem;
              background-color: #f0f4f9;
              border-radius: 30px;
              padding: 0.4rem;
              width: fit-content;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          }
          
          .sport-tab {
              padding: 0.6rem 1.25rem;
              border-radius: 25px;
              background-color: transparent;
              font-size: 0.875rem;
              font-weight: 500;
              cursor: pointer;
              border: none;
              color: #5a6a85;
              transition: all 0.3s ease;
              position: relative;
              overflow: hidden;
          }
          
          /* Special styling for social media icon tabs */
          .sport-tab i.fab {
              font-size: 1rem;
          }
          
          .sport-tab[data-content-type="tiktok"],
          .sport-tab[data-content-type="youtube"] {
              padding: 0.6rem 1rem;
          }
          
          .sport-tab[data-content-type="tiktok"].active,
          .sport-tab[data-content-type="youtube"].active {
              background-color: var(--accent-orange);
          }
          
          .sport-tab:before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.3));
              transform: translateX(-100%);
              transition: transform 0.6s ease;
          }
          
          .sport-tab:hover:before {
              transform: translateX(100%);
          }
          
          .sport-tab:hover {
              color: var(--neutral-text-dark);
          }
          
          .sport-tab.active {
              background-color: var(--accent-orange);
              color: white;
              font-weight: 600;
              box-shadow: 0 3px 10px rgba(255, 169, 57, 0.25);
          }
          
          /* Market Sentiment Section */
          .market-sentiment {
              margin: 3rem 0;
          }
          
          .market-grid {
              display: grid;
              grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
              gap: 1.5rem;
          }
          
          .market-card {
              background-color: white;
              border-radius: var(--border-radius-md);
              overflow: hidden;
              box-shadow: var(--shadow-sm);
              padding: 1rem;
          }
          
          
          /* Iframe Overlay System - Complete redesign to prevent overlap with nav */
          .iframe-overlay {
              position: fixed;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-color: rgba(0, 0, 0, 0.8);
              z-index: 9000;
              display: none;
              overflow: hidden;
          }
          
          .iframe-overlay.active {
              display: flex;
              align-items: center;
              justify-content: center;
          }
          
          .iframe-container {
              position: relative;
              width: 90%;
              height: 95%;
              background-color: white;
              border-radius: var(--border-radius-md, 8px);
              overflow: hidden;
              box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
              transition: all 0.3s ease;
              z-index: 9100;
          }
          
          .close-header {
              display: flex;
              justify-content: flex-end;
              padding: 0.5rem;
              background-color: var(--neutral-light);
              position: relative;
              z-index: 9200;
          }

          
		.close-iframe {	
		    border: 0;
		    font-size: 1.5rem;
		    color: orange;
		    background: none;
			cursor: pointer;
		}

	
          
                 
          .iframe-container iframe {
              width: 100%;
              height: calc(100% - 40px);
              border: none;
          }
          
          .main-style-nav {
              position: fixed;
              top: 0;
              left: 0;
              width: 250px;
              height: 100%;
              background-color: white;
              padding: 1.5rem;
              transform: translateX(-100%);
              transition: transform 0.3s ease;
              box-shadow: var(--shadow-md);
              z-index: 9500;
              overflow-y: auto;
          }
          
          .main-style-nav.active {
              transform: translateX(0);
          }
          
          
          .nav-wrapper {
              height: 100%;
              overflow-y: auto;
          }
          
          .nav-section {
              margin-bottom: 2rem;
          }
          
          .nav-section h3 {
              margin-bottom: 1rem;
              font-size: 1.25rem;
              font-weight: 600;
          }
          
          .nav-section ul {
              list-style: none;
              padding: 0;
              margin: 0;
          }
          
          /* Styling for featured-spaces and quick-tools in nav-wrapper to match main page */
          .nav-section.featured-spaces,
          .nav-section.quick-tools {
              display: flex;
              flex-direction: column;
          }
          
          .nav-section.featured-spaces h3,
          .nav-section.quick-tools h3 {
              margin-bottom: 1rem;
              font-size: 1.25rem;
              text-transform: uppercase;
              font-weight: 600;
          }
          
          .nav-section.featured-spaces ul,
          .nav-section.quick-tools ul {
              list-style: none;
              padding: 0;
              margin: 0;
              flex: 1;
              display: flex;
              flex-direction: column;
          }
          
          .nav-section.featured-spaces li,
          .nav-section.quick-tools li {
              margin-bottom: 0;
              border-bottom: 1px solid var(--neutral-border);
          }
          
          .nav-section.featured-spaces a,
          .nav-section.quick-tools a {
              display: flex;
              align-items: center;
              gap: 0.75rem;
              color: var(--neutral-text-dark);
              text-decoration: none;
              transition: color 0.3s ease;
              padding: 1rem 0;
          }
          
          .nav-section.featured-spaces a:hover,
          .nav-section.quick-tools a:hover {
              color: var(--primary-blue);
          }
          
          .nav-section.featured-spaces i,
          .nav-section.quick-tools i {
              color: var(--primary-blue);
              width: 20px;
              text-align: center;
          }
          
          /* Special styling for featured-spaces to match right sidebar */
          .nav-section.featured-spaces a {
              display: flex;
              justify-content: space-between;
              padding: 1rem 0;
              background-color: transparent;
              margin-bottom: 0;
              border-radius: 0;
          }
          
          /* Sport tabs for quick-tools */
          .nav-section.quick-tools .sport-tabs {
              display: flex;
              gap: 0;
              margin-bottom: 1.5rem;
              background-color: #f0f4f9;
              border-radius: 30px;
              padding: 0.4rem;
              width: fit-content;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          }
          
          /* See more button for featured-spaces */
          .nav-section.featured-spaces .see-more-btn {
              display: inline-block;
              color: var(--accent-orange) !important;
              font-weight: 500;
              margin-top: 1rem;
              text-decoration: none;
              padding: 0;
              transition: all 0.3s ease;
              background-color: transparent;
              border: none;
              box-shadow: none;
          }
          
          .nav-section.featured-spaces .see-more-btn:hover {
              color: var(--accent-orange-dark);
              
          }
          
          .nav-section.featured-spaces .see-more-btn::after {
              content: " →";
              display: inline-block;
              transition: transform 0.3s ease;
          }
          
          .nav-section.featured-spaces .see-more-btn:hover::after {
              transform: translateX(3px);
          }
          
          /* Hide inactive content sections */
          .content-grid-section {
              display: none;
          }
          
          .content-grid-section.active {
              display: block;
          }
          
          /* Explicitly ensure social feed containers are hidden unless activated */
          .social-feed-container.content-grid-section {
              display: none;
          }
          
          .social-feed-container.content-grid-section.active {
              display: block;
          }
          
          /* News grid should display as grid when active */
          .news-grid.content-grid-section.active {
              display: grid;
          }
          
          /* Social Feed Styling */
          .social-feed-container {
              background-color: white;
              padding: 1rem;
              border-radius: var(--border-radius-md);
              box-shadow: var(--shadow-sm);
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
          }
          /* YouTube Section Styling */
          .youtube-section {
              background-color: white;
              padding: 1rem;
              border-radius: var(--border-radius-md);
              box-shadow: none; /* Remove box-shadow */
              width: 100%;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              transition: transform 0.3s ease, box-shadow 0.3s ease;
          }
          .youtube-section:hover {
              transform: translateY(-2px);
              box-shadow: var(--shadow-md);
          }
          /* YouTube icon style for loading placeholder */
          .youtube-section .fab.fa-youtube {
              background: var(--primary-blue);
              color: #fff !important;
              border-radius: 12px;
              width: 48px;
              height: 48px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 2rem;
              margin: 0 auto 1rem auto;
          }
          
          /* Styling for both social media embeds */
          .social-feed-container[data-content-type="tiktok"] .tiktok-embed,
          .social-feed-container[data-content-type="youtube"] .youtube-embed {
              width: 100% !important;
              margin: 0 auto !important;
          }
          
          /* Specific TikTok embed styling */
          .social-feed-container[data-content-type="tiktok"] .tiktok-embed {
              max-width: 100% !important;
              min-width: 320px !important;
          }
          
          /* Specific YouTube embed styling */
          .social-feed-container[data-content-type="youtube"] .youtube-embed {
              min-height: 600px !important;
          }
          
          /* Adjust TikTok embed video grid items */
          .social-feed-container[data-content-type="tiktok"] .tiktok-embed[data-feed-type="grid"] .tiktok-feed-item {
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
              border-radius: 10px !important;
              overflow: hidden !important;
              transition: transform 0.2s ease !important;
          }
          
          .social-feed-container[data-content-type="tiktok"] .tiktok-embed[data-feed-type="grid"] .tiktok-feed-item:hover {
              transform: translateY(-5px) !important;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
          }
          
  
          
          /* Style the podcast container separately for maximum width */
          .podcast-container {
              width: 100%;
              background-color: white;
              border-radius: 10px;
              box-shadow: 0 2px 8px rgba(0,0,0,0.1);
              padding: 1rem;
              transition: transform 0.3s ease, box-shadow 0.3s ease;
              margin-bottom: 1.5rem;
              text-align: center;
          }
          
          .podcast-container .section-header {
              padding-left: 1rem;
              padding-right: 1rem;
              text-align: left;
          }
          
          .podcast-container:hover {
              transform: translateY(-5px);
              box-shadow: 0 4px 12px rgba(0,0,0,0.15);
          }
          
          .podcast-video {
              width: 100%;
              max-width: 960px;
              margin: 0 auto;
              padding: 0;
          }
          
          .podcast-video iframe {
              width: 560px;
              height: 315px;
              border: none;
              display: inline-block;
              max-width: 100%;
          }
          

          
          /* Accordion Styles for Quick Links */
          .accordion-container {
              width: 100%;
          }
          
          .accordion-item {
              margin-bottom: 0.5rem;
              border-radius: 8px;
              overflow: hidden;
              
          }
          
          .accordion-header {
              width: 100%;
              padding: 0.8rem 1rem;
              background-color: #f0f4f9;
              color: #5a6a85;
              border: none;
              text-align: left;
              font-weight: 600;
              font-size: 0.95rem;
              cursor: pointer;
              display: flex;
              justify-content: space-between;
              align-items: center;
              transition: all 0.3s ease;
          }
          
          .accordion-header.active {
              background-color: var(--accent-orange);
              color: white;
          }
          
          .accordion-header i {
              transition: transform 0.3s ease;
          }
          
          .accordion-header.active i {
              transform: rotate(180deg);
          }
          
          .accordion-content {
              max-height: 0;
              overflow: hidden;
              transition: max-height 0.3s ease;
              background-color: white;
          }
          
          .accordion-content.active {
              max-height: 500px; /* Adjust based on content */
          }
          
          .accordion-content ul {
              padding: 0.5rem 0;
              margin: 0;
          }
          
          .accordion-content li {
              margin-bottom: 0;
          }
          
          .accordion-content li:last-child {
              border-bottom: none;
          }
  
          .tiktok-embed {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  
  /* Media Queries */
/* ==========================================================================
 RESPONSIVE BREAKPOINTS
 
 Mobile S    320px  - 480px   Small smartphones
 Mobile M    481px  - 768px   Large phones, small tablets
 Tablet      769px  - 1024px  Tablets, small laptops
 Desktop S   1025px - 1280px  Laptops, small desktops
 Desktop L   1281px - 1440px  Large desktops
 Desktop XL  1441px - ∞       Ultra-wide, 4K+ monitors
 ========================================================================== */

/* ==========================================================================
   Desktop XL (1441px and up)
   ========================================================================== */
@media (min-width: 1441px) {
  .container,
  .use-case-container,
  .coverage-support > .container:first-child {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 115px;
  }

  /* Features section */
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Sports coverage section */
  .sports-coverage-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Pricing section */
  .pricing-plans {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Configurations section */
  .configurations-grid {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

  .configuration-card {
    min-width: calc((1440px - (3 * var(--spacing-md)) - (2 * var(--spacing-md))) / 4);
  }

  /* SportWise Features Grid */
  .sw-features-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==========================================================================
   Desktop L (1281px - 1440px)
   ========================================================================== */
@media (min-width: 1281px) and (max-width: 1440px) {
  .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 80px;
  }

  .features-grid,
  .sw-features-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sports-coverage-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   Tablet and Smaller Desktop (769px - 1280px)
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1280px) {
  html {
    font-size: 0.875rem;
  }

  .features-grid,
  .sw-features-grid, .features-grid.swfeatures-grid,
  .sports-coverage-grid,
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
	
  .content-grid {
	grid-template-columns: 1fr;
  }
	
   .main-content {
    	order: -1; /* Display above other sections */
        }
    .overlay-quick-tools, .featured-spaces {
        order: 0;
        }
	

  .footer-nav-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
  }
  
  .news-grid {
	grid-template-columns: repeat(2, 1fr);
  }
	 .nav-menu.active {
    transform: translateX(0);
    z-index: 999;
  }
  
}

/* ==========================================================================
   Mobile and Tablet (Up to 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .hero .container {
    flex-direction: column-reverse;
  }
	.main-content {
    	order: -1; /* Display above other sections */
        }
    .overlay-quick-tools, .featured-spaces {
        order: 0;
        }

  .coverage,
  .pricing,
  .industry-leading,
  .analytical {
    flex-direction: column;
  }

  .support,
  .developer-resources {
    flex-direction: column-reverse;
  }

  .coverage-content, .support-content, .pricing-content, .developer-content, .analytical-content,
  .coverage-image, .support-image, .pricing-image, .developer-image, .analytical-image,
  .industry-content, .industry-image {
    width: 100%;
    max-width: 100%;
  }

  .get-started-card {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1rem;
    gap: 1.5rem;
  }
  
  .get-started-content {
    max-width: 100%;
    order: 2;
  }

  .get-started-image {
    order: 1;
    max-width: 5rem;
    margin: 0 auto;
  }

  .features-grid,
  .sw-features-grid, 
  .features-grid.swfeatures-grid,
  .sports-coverage-grid,
  .stats-grid,
  .pricing-plans,
  .analytical-plans,
  .testimonials-grid,
  .use-cases-grid,
  .eligibility-list,
  .news-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-nav-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .mobile-menu-toggle {
    display: block;
  }

  .nav-menu {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    background-color: var(--neutral-white);
    flex-direction: column;
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .nav-menu.active {
    transform: translateX(0);
    z-index: 999;
  }
  
  .orbiting-icons-container {
    display: none !important;
  }
  


  .carousel-nav {
    padding: 0.5rem 1rem !important;
    gap: 0.5rem !important;
	
  }
	
	.cta-buttons {
		flex-direction: column;
	}
}

/* ==========================================================================
   Smaller Mobile (Up to 548px)
   ========================================================================== */
@media (max-width: 548px) {
  .hero .container {
    padding: 0;
  }

  .hero-content {
    padding: 0 5%;
    margin-top: var(--spacing-md);
  }

  .hero-image {
    margin-left: 0;
    margin-right: 0;
    width: 100vw;
    max-width: 100vw;
  }
  
  .hero-svg {
    transform: scale(1);
  }

  .news-grid {
    grid-template-columns: 1fr;
  }

  .sport-tab {
    padding: 0rem 0.35rem;
  }
  
  .footer-nav-grid {
    grid-template-columns: 1fr;
  }
}
  
