commit 03ff911288b1cd039214d775eeb29f8ff80a0f5e Author: ectasy663 Date: Thu May 22 11:56:08 2025 +0530 Initial commit diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..45c511c --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": [] +} \ No newline at end of file diff --git a/Education/corporate-trainings.html b/Education/corporate-trainings.html new file mode 100644 index 0000000..c3cdb8a --- /dev/null +++ b/Education/corporate-trainings.html @@ -0,0 +1,2 @@ +
  • Marketing Icon
    MarketingPersonalizing campaigns, predicting consumer behavior, and optimizing marketing spend using AI.
    • +
  • Media & Entertainment Icon
    Media & EntertainmentCreating engaging content, personalizing recommendations, and optimizing content delivery with AI.
    • \ No newline at end of file diff --git a/Education/individual-trainings.html b/Education/individual-trainings.html new file mode 100644 index 0000000..c3cdb8a --- /dev/null +++ b/Education/individual-trainings.html @@ -0,0 +1,2 @@ +
  • Marketing Icon
    MarketingPersonalizing campaigns, predicting consumer behavior, and optimizing marketing spend using AI.
    • +
  • Media & Entertainment Icon
    Media & EntertainmentCreating engaging content, personalizing recommendations, and optimizing content delivery with AI.
    • \ No newline at end of file diff --git a/Industries/case-studies.html b/Industries/case-studies.html new file mode 100644 index 0000000..5197634 --- /dev/null +++ b/Industries/case-studies.html @@ -0,0 +1,136 @@ + + + + + + Case Studies - Gyannetra + + + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    +

    CASE STUDIES

    +

    Explore our proven track record of delivering impactful AI solutions across various industries, tailored to meet specific business needs.

    +
    +
    + +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + +
    +
    +
    +
    + +

    Enhancing Customer Experience with AI

    +

    Developed personalized recommendation systems to increase user engagement

    + Read Case Study +
    +
    + +

    AI-Driven Diagnostics for Improved Patient Outcomes

    +

    Implemented advanced diagnostic algorithms to assist in early disease detection

    + Read Case Study +
    +
    + +

    Optimizing Supply Chains with Machine Learning

    +

    Utilized ML models to enhance demand forecasting and inventory management

    + Read Case Study +
    +
    + +

    Generating Creative Content with AI

    +

    Applied generative adversarial networks (GANs) to produce unique, engaging content

    + Read Case Study +
    +
    +
    +
    + + +
    +
    +

    Ready to discuss your project?

    + Contact Us +
    +
    +
    + + + + + + + + \ No newline at end of file diff --git a/Industries/finance.html b/Industries/finance.html new file mode 100644 index 0000000..1d8086b --- /dev/null +++ b/Industries/finance.html @@ -0,0 +1,342 @@ + + + + + + AI in Finance - Gyannetra + + + + + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +

    AI IN FINANCE

    +

    Transforming the finance industry with innovative AI solutions

    +

    We leverage cutting-edge artificial intelligence to drive efficiency, accuracy, and financial services, helping institutions stay ahead in a rapidly evolving landscape.

    +
    + +
    +

    OUR AI SOLUTIONS FOR FINANCE

    +
    +
    + Fraud Detection Icon +

    Fraud Detection

    +
    +
    + Algorithmic Trading Icon +

    Algorithmic Trading

    +
    +
    + Risk Management Icon +

    Risk Management

    +
    +
    + Customer Service Automation Icon +

    Customer Service Automation

    +
    +
    +
    + +
    +

    BENEFITS OF AI FOR FINANCE WITH GYANNETRA

    +
    +
      +
    • Increased Efficiency
      • +
    • Enhanced Security
      • +
    +
      +
    • Improved Accuracy
      • +
    • Better Customer Experience
      • +
    +
    +
    + +
    +

    BLOGS & CASE STUDIES

    +
    + Future of AI in Finance +

    The Future of AI in Finance

    +

    Exploring key trends and innovations shaping the financial sector

    + Read more +
    +
    + Algorithmic Trading Success +

    Case Study: Algorithmic Trading Success

    +

    Read more

    + Read more +
    +
    + Enhancing Fraud Detection with AI +

    Enhancing Fraud Detection with AI

    +

    Exploring customer-efficiency

    + Read More +
    +
    +
    +
    + + + + + + \ No newline at end of file diff --git a/Industries/healthcare.html b/Industries/healthcare.html new file mode 100644 index 0000000..f7e49a4 --- /dev/null +++ b/Industries/healthcare.html @@ -0,0 +1,159 @@ + + + + + + Healthcare - Gyannetra + + + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + + +
    +
    +
    +

    HEALTHCARE

    +

    AI is revolutionizing healthcare, and Gyannetra is at the forefront of this transformation, delivering advanced AI solutions for better patient care.

    +
    +
    + + + + + + + + + + + + + + + + + +
    +
    +
    + + +
    +

    AI SOLUTIONS FOR HEALTHCARE

    +
    +
    + Diagnostics Icon +

    Diagnostics

    +
    +
    + Drug Discovery Icon +

    Drug Discovery

    +
    +
    + Personalized Medicine Icon +

    Personalized Medicine

    +
    +
    + Patient Care Automation Icon +

    Patient Care Automation

    +
    +
    +
    + + +
    +

    BENEFITS OF AI FOR HEALTHCARE WITH GYANNETRA

    + +
    + + +
    +

    BLOGS & CASE STUDIES

    +
    +

    AI-Driven Innovations in Diagnostics

    +

    How AI is transforming the way we diagnose and treat diseases

    + Read More +
    +
    +

    Case Study: Enhancing Patient Care

    +

    Our work with hospitals to improve patient outcomes through AI

    + Read More +
    +
    +

    AI in Healthcare: Ethical Considerations

    +

    Navigating the ethical challenges of AI applications in healthcare

    + Read More +
    +
    +
    + + + + + + + + \ No newline at end of file diff --git a/Industries/manufacturing.html b/Industries/manufacturing.html new file mode 100644 index 0000000..7b7a332 --- /dev/null +++ b/Industries/manufacturing.html @@ -0,0 +1,143 @@ + + + + + + AI in Manufacturing - Gyannetra + + + + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + + +
    +

    AI IN MANUFACTURING

    +

    AI is optimizing manufacturing processes, enhancing productivity, and reducing costs. Gyannetra brings deep expertise in developing AI-driven solutions tailored for the manufacturing sector.

    +
    + + +
    +
    +
    + Predictive Maintenance +

    Predictive Maintenance

    +
    +
    + Quality Control +

    Quality Control

    +
    +
    + Supply Chain Optimization +

    Supply Chain Optimization

    +
    +
    + Robotic Automation +

    Robotic Automation

    +
    +
    +
    + + +
    +

    Benefits of AI for Manufacturing with Gyannetra

    +
    +
      +
    • Increased efficiency
      • +
    • Improved quality
      • +
    +
      +
    • Reduced downtime
      • +
    • Optimized production
      • +
    +
    +
    + + +
    +

    Blogs & Case Studies

    +
    +

    How AI is Transforming Manufacturing

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.

    + Read More +
    +
    +

    Case Study: Predictive Maintenance

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.

    + Read Case Study +
    +
    +

    Enhancing Quality Control with AI

    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed.

    + Read More +
    +
    +
    + + +
    + EXPLORE OUR MANUFACTURING AI SOLUTIONS +
    + + + + + + + + \ No newline at end of file diff --git a/Industries/marketing.html b/Industries/marketing.html new file mode 100644 index 0000000..e5a1c75 --- /dev/null +++ b/Industries/marketing.html @@ -0,0 +1,250 @@ + + + + + + Marketing - Gyannetra + + + + + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    +

    MARKETING

    +

    Transforming marketing with AI for enhanced personalization, predictive analytics, and optimized customer journeys

    +
    +
    + AI in Marketing Graphic + +
    +
    +
    + + +
    +
    +

    AI SOLUTIONS FOR MARKETING

    +
    +
    +
    AI Personalization
    +

    AI-Powered Personalization

    +

    Deliver tailored content and experiences by leveraging AI to analyze customer data and predict preferences

    +
    +
    +
    Predictive Segmentation
    +

    Predictive Customer Segmentation

    +

    Utilize predictive analytics to segment customers based on behavior, enhancing strategies

    +
    +
    +
    Automated Content Generation
    +

    Automated Content Generation

    +

    Accelerate content creation with AI that generates relevant marketing copy and visuals

    +
    +
    +
    AI Campaign Optimization
    +

    AI-Driven Campaign Optimization

    +

    Optimize marketing campaigns in real-time using AI insights to maximize performance

    +
    +
    +
    +
    + + +
    +
    +

    THE GYANNETRA ADVANTAGE IN MARKETING AI

    +
      +
    • Deep-expertise in marketing analytics
      • +
    • Custom AI models tailored to marketing
      • +
    • Focus on measurable-campaign ROI
      • +
    • Ethical AI implementation in customer communication
    +
    +
    + + +
    +
    +

    Blogs & Case Studies

    +
    +

    Harnessing AI for Marketing Success

    +

    Discover how AI is revolutionizing marketing strategies and boosting conversion rates.

    + Read Marketing Insights +
    +
    +

    AI Driven Campaign Optimization

    +

    Case study on improving marketing ROI with AI-powered solutions and analytics.

    + View Marketing Case Study +
    +
    +

    Customer Journey Personalization

    +

    How AI creates tailored experiences for higher conversion rates and customer loyalty.

    + Read Case Study +
    +
    +
    +
    +
    +
    + EXPLORE OUR MARKETING AI SOLUTIONS +
    +
    +
    + + + + + + + \ No newline at end of file diff --git a/Industries/media-entertainment.html b/Industries/media-entertainment.html new file mode 100644 index 0000000..546bdf3 --- /dev/null +++ b/Industries/media-entertainment.html @@ -0,0 +1,411 @@ + + + + + + AI in Media & Entertainment - Gyannetra + + + + + +
    + +
    + +
    +
    +
    +

    AI in Media & Entertainment

    +

    Revolutionizing content creation, distribution, and consumption with intelligent AI solutions.

    +
    +
    + +
    +
    +

    Our AI Solutions for Media & Entertainment

    +
    +
    +
    Content Creation Icon
    +

    AI-Powered Content Creation

    +

    Generate scripts, music, visuals, and more, accelerating production workflows.

    +
    +
    +
    Personalization Icon
    +

    Personalized Recommendations

    +

    Deliver tailored content suggestions to viewers, increasing engagement and retention.

    +
    +
    +
    Audience Analytics Icon
    +

    Audience Analytics & Insights

    +

    Understand viewer behavior and preferences to optimize content strategy and delivery.

    +
    +
    +
    Monetization Icon
    +

    Optimized Monetization

    +

    Enhance ad targeting, subscription models, and revenue streams with AI-driven strategies.

    +
    +
    +
    +
    + +
    +
    +

    Benefits of AI in Media & Entertainment

    +
    +
      +
    • Increased efficiency in content production
      • +
    • Enhanced viewer engagement and personalization
      • +
    • Improved content discovery and accessibility
      • +
    • Optimized advertising and revenue generation
      • +
    +
      +
    • Better understanding of audience trends
      • +
    • Reduced costs through automation
      • +
    • Faster time-to-market for new content
      • +
    • Competitive advantage in a dynamic market
      • +
    +
    +
    +
    + +
    +
    +

    Blogs & Case Studies

    +
    +
    Blog Image
    +

    The Future of Storytelling with Generative AI

    +

    Explore how AI is transforming narrative creation and interactive experiences.

    + Read More +
    +
    +
    Blog Image
    +

    Personalizing the Viewer Experience: An AI Approach

    +

    Learn how AI algorithms are used to deliver highly personalized content recommendations.

    + Read More +
    +
    +
    Blog Image
    +

    Case Study: Boosting Engagement with AI Analytics

    +

    Discover how a major streaming service used AI analytics to increase viewer retention.

    + Read More +
    +
    +
    +
    + +
    +
    + Explore Our Solutions +
    +
    +
    + + + + + \ No newline at end of file diff --git a/Industries/retail.html b/Industries/retail.html new file mode 100644 index 0000000..2412dc6 --- /dev/null +++ b/Industries/retail.html @@ -0,0 +1,151 @@ + + + + + + Retail - Gyannetra + + + + +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + +
    + + +
    +
    +
    +

    GYANNETRA PVT LTD

    +

    AI SOLUTIONS FOR RETAIL

    +

    AI is reshaping the retail industry by enhancing personalized shopping, optimizing inventory, and driving data-driven decisions. At Gyannetra, we provide innovative AI solutions to transform the retail experience.

    + +
    +
    + + +
    +

    AI SOLUTIONS FOR RETAIL

    +
    +
    + Personalized Product Recommendations Icon +

    Personalized Product Recommendations

    +

    Deliver tailored shopping suggestions

    +
    +
    + AI-Powered Inventory Optimization Icon +

    AI-Powered Inventory Optimization

    +

    Manage stock levels efficiently

    +
    +
    + Chatbots for Customer Service Icon +

    Chatbots for Customer Service

    +

    Enhance shopper interactions

    +
    +
    + Predictive Analytics for Demand Forecasting Icon +

    Predictive Analytics for Demand Forecasting

    +

    Gain insights into future sales

    +
    +
    +
    + + +
    +

    THE GYANNETRA ADVANTAGE

    +
    +
      +
    • Deep Retail Industry Knowledge
      • +
    • Drive Sales and Loyalty
      • +
    +
      +
    • Seamless System Integration
      • +
    • Drive Sales and Lactay
      • +
    +
    +
    + + +
    +

    INDUSTRY INSIGHTS & SUCCESS STORIES

    +
    +
    + +

    Leveraging AI for Retail-Success

    +

    Explore how AI is transforming the retail.

    READ OUR RETAIL BLOG +
    +
    + +

    Case Study: AI-Powered Personalization

    +

    Discover how we improved customer engagement.

    + VIEW RETAIL CASE STUDY +
    +
    + +

    Optimizing Inventory with AI

    +

    Learn about our approach to smart inventory management.

    + READ CASE STUDY +
    +
    +
    + + + + + + + + \ No newline at end of file diff --git a/Industries/travel.html b/Industries/travel.html new file mode 100644 index 0000000..1b3c674 --- /dev/null +++ b/Industries/travel.html @@ -0,0 +1,138 @@ + + + + + + Travel - Gyannetra + + + + +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + +
    + + +
    +
    +
    +

    TRAVEL

    +

    AI is transforming the travel industry by enhancing customer journeys and streamlining operations. We deliver innovative AI solutions to create personalized travel experiences and improve efficiency.

    + +
    +
    + + +
    +

    TAILORED AI SOLUTIONS FOR TRAVEL

    +
    +
    + Personalized Travel Recommendations +

    Personalized Travel Recommendations

    +

    Deliver customized recommendations, based on user-preferences and behavior

    +
    +
    + Dynamic Pricing Optimization +

    Dynamic Pricing Optimization

    +

    Adjust prices in time based on market trends a demand

    +
    +
    + AI-Powered Customer Support +

    AI-Powered Customer Support

    +

    Provide instant, n-round cook assistance through AI chat

    +
    +
    + Predictive Travel Demand Analysis +

    Predictive Travel Demand Analysis

    +

    Forecast travel trends, to optimize inventory and resource allocation

    +
    +
    +
    + + +
    +

    THE GYANNETRA ADVANTAGE FOR TRAVEL

    + +
    + + +
    +

    INSIGHTS & SUCCESS STORIES

    +
    + Insight Story 1 +

    Feb 19, 2024

    +

    The Role of AI in Modernizing Travel

    + Read More → +
    +
    + Insight Story 2 +

    Case Study

    + Read More → +
    +
    +
    + + + + + + + + \ No newline at end of file diff --git a/Services/agentic-ai.html b/Services/agentic-ai.html new file mode 100644 index 0000000..441a8de --- /dev/null +++ b/Services/agentic-ai.html @@ -0,0 +1,143 @@ + + + + + + Agentic AI - Gyannetra + + + + +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + +
    + + +
    +
    +

    AGENTIC AI

    +

    We develop autonomous AI agents with capabilities for perception, reasoning, and action. Our agents are tailored for a range of applications, driving intelligent outcomes in dynamic environments.

    +
    + +
    +

    KEY OFFERINGS

    +
    +
    + Intelligent Automation Icon +

    Intelligent Automation

    +

    Automated complex tasks with adaptive AI agents

    +
    +
    + Autonomous Decision-Making Icon +

    Autonomous Decision-Making

    +

    AI agents that make decisions independently

    +
    +
    + AI-Powered Assistants Icon +

    AI-Powered Assistants

    +

    Intelligent virtual assistants for various domains

    +
    +
    +
    + +
    +

    BENEFITS OF CHOOSING GYANNETRA FOR AGENTIC AI

    +
      +
    • Increased efficiency through autonomous operations
      • +
    • Enhanced autonomy in decision-making processes
      • +
    • Ability to tackle complex problem-solving tasks
      • +
    +
    + +
    +

    BLOGS & CASE STUDIES

    +
    +

    Building Robust Autonomous Agents

    +

    Insights into developing through autonomous operations

    + Read More +
    +
    +

    Case Study: AI in Supply Chain Management

    +

    Agents. AI solutians transforming logistics

    + Read More +
    +
    +

    Advancements InAI Autonomy

    +

    Exploring the latest trends in autonomous AI

    + View Case Study +
    +
    +

    Case Study: VirtualAssistants in Healthcare

    +

    Enhancing patient care with Ai powered agents

    + Read More +
    +
    +
    + +
    + +
    + +
    + + + + + + + \ No newline at end of file diff --git a/Services/automation-flows.html b/Services/automation-flows.html new file mode 100644 index 0000000..a8ffa68 --- /dev/null +++ b/Services/automation-flows.html @@ -0,0 +1,126 @@ + + + + + Automation Flows - Gyannetra + + + + + +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + +
    +
    +
    +

    AUTOMATION FLOWS

    +

    Harnessing the power of AI to streamline and optimize complex business processes

    +
    +
    +

    The Gyannetra Advantage in Automation

    +
      +
    • Custom AI Model Integration
      • +
    • Focus on ROI and Scalability
      • +
    • Seamless System Connectivity
      • +
    +
    + +
    +

    BLOGS & CASE STUDIES

    +
    +

    Case Study

    +

    Boosting Efficiency with AI Automation

    +

    Learn how we transformed a client's operations by implementing intelligent automation.

    + Read Case Study +
    +
    +

    Blog Post

    +

    AI and the Future of Business Processes

    +

    Discover the latest trends and advancements in AI-driven automation for enterprises.

    Explore Blog +
    +
    + +
    + Explore Our Automation Solutions +
    +
    + +
    + + + + + + \ No newline at end of file diff --git a/Services/data-analysis.html b/Services/data-analysis.html new file mode 100644 index 0000000..0204e26 --- /dev/null +++ b/Services/data-analysis.html @@ -0,0 +1,138 @@ + + + + + Data Analysis - Gyannetra + + + + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +

    DATA ANALYSIS

    +

    DATA ANALYST

    +

    Data analysis services offers a wide range of analyses, such as predictive, diagnostic, descriptive, and prescriptive, uncovering patterns, and insights to address business performance to improve performance.

    + Explore Our Data Analysis Solutions +
    +
    +

    KEY OFFERINGS

    +
    +
    + Data Visualization Icon +

    Data Visualization

    +

    Presenting complex data in clear, understandable visual formats.

    +
    +
    + Statistical Modeling Icon +

    Statistical Modeling

    +

    Building models to understand relationships and make predictions.

    +
    +
    + Data Mining Icon +

    Data Mining

    +

    Discovering patterns and insights from large datasets.

    +
    +
    + Reporting Icon +

    Reporting

    +

    Creating comprehensive reports to communicate findings and recommendations.

    +
    +
    + +
    +

    BENEFITS OF CHOOSING
    GYANNETRA FOR DATA ANALYSIS

    +
      +
    • Experienced Analysts
      • +
    • Advanced Tools
      • +
    • Actionable Recommendations
    +
    + +
    +

    BLOGS & CASE STUDIES

    +
    + Descriptive Analytics Image +

    The Power of
    Descriptive Analytics

    +

    Understanding business data through descriptive analysis.

    + Read More +
    +
    + Predictive Modeling Image +

    Predictive Modeling
    Techniques

    +

    Exploring methods for forecasting future trends.

    + Read More +
    +
    + Data Mining Sales Image +

    Improving Sales
    with Data Mining

    +

    Case study on boosting revenue through data mining.

    Read More +
    +
    + +
    + Explore Our Data Analysis Capabilities +
    +
    +
    + + + + + + \ No newline at end of file diff --git a/Services/generative-ai.html b/Services/generative-ai.html new file mode 100644 index 0000000..a805f06 --- /dev/null +++ b/Services/generative-ai.html @@ -0,0 +1,137 @@ + + + + + + Generative AI - Gyannetra + + + +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + +
    + + +
    +
    +

    GENERATIVE AI

    +

    Harness the power of generative models for groundbreaking applications

    +

    Use GANs, VAEs, and Transformers to create advanced Generative AI solutions for content creation, design, and data augmentation.

    +
    + +
    +
    + Content Creation Icon +

    Content Creation

    +

    Content content content creation in stream

    +
    +
    + Synthetic Data Generation Icon +

    Synthetic Data Generation

    +

    Interfraned ai ageneraso

    +
    +
    + AI-Driven Design Icon +

    AI-Driven Design

    +

    Eficientoly procressive content generation

    +
    +
    + +
    +

    WHY CHOOSE GYANNETRA?

    +
    +

    Creative Innovation

    +

    Data Augmentation

    +

    Unique Content

    +
    +
    + +
    +

    BLOGS & CASE STUDIES

    +
    + Blog Image 1 +

    Expoiring the Art of Generative Models

    + Read More +
    +
    + Blog Image 2 +

    Case Study: Innovative Product Design with AI

    + Read More +
    +
    + Blog Image 3 +

    Ethical Considerations in Generative AI

    + Read More +
    +
    + Blog Image 4 +

    Enhancing Creativity Using GANS

    + Read More +
    +
    +
    + Explore Our Generative AI Capabilities +
    + +
    + + + + + + + \ No newline at end of file diff --git a/Services/machine-learning.html b/Services/machine-learning.html new file mode 100644 index 0000000..a6e33c9 --- /dev/null +++ b/Services/machine-learning.html @@ -0,0 +1,133 @@ + + + + + + Machine Learning - Gyannetra + + + + + +
    +
    +
    +
    +
    +
    +
    +
    + + +
    + +
    + +
    +
    +

    MACHINE LEARNING

    +

    Empowering you business with advanced ML solutions

    +
    + +
    +

    OVERVIEW OF MACHINE LEARNING SERVICES

    +

    Leveraging the power of machine learning to deliver custom solutions to predictive analytics, natural language processing and computer vision

    +
    + +
    +

    KEY OFFERINGS

    +
    +
    + Predictive Modelling Icon +

    Predictive Modelling

    +

    Developing models to forecast future trends and outcomes

    +
    +
    + Natural Language Processing Icon +

    Natural Language Processing

    +

    Enabling machines to understand and interpret human language

    +
    +
    + Computer Vision Icon +

    Computer Vision Development

    +

    Creating systems to analyze and interpret visual information

    +
    +
    +
    + +
    +

    BENEFITS OF CHOOSING GYANNETRA FOR MACHINE LEARNING

    +
      +
    • Experienced team of ML experts
      • +
    • Tailored solutions to meet your unique needs
      • +
    • Strong focus on ethical AI practices
      • +
    +
    + +
    +

    RELATED BLOGS & CASE STUDIES

    +
    +

    How Machine Learning Transforms Industries

    +

    Explore the impact of ML experts

    + Read More +
    +
    +

    Case Study: Predictive Analytics Success

    +

    A eceeses sory to impercecting raclitoe orelyxes

    + Read More +
    +
    + Explore Our Machine Learning Solutions +
    +
    + + + + + + + \ No newline at end of file diff --git a/about.html b/about.html new file mode 100644 index 0000000..a6a9178 --- /dev/null +++ b/about.html @@ -0,0 +1,112 @@ + + + + + + About Us - Gyannetra + + + + + +
    + +
    + +
    +
    +
    +
    +
    +
    +
    +
    + +
    +
    +

    ABOUT US

    + +
    +

    WHO WE ARE

    +

    Gyannetra Put Ltd, as a leading provider of bespoke AI solutions. Asa focus on innovation, integrity, and excellence, we decvo to harnessing AI power to solve complex challenges and drive progress for clients.

    +
    + Team Member 1 + Team Member 2 + Team Member 3 +
    + +
    + +
    +
    +

    OUR MISSION

    +

    Empowering businesses and transforming industries through cutting-edge AI technologies.

    + +
    +
    +

    OUR VISION

    +

    A future where AI amplifies human potential and fosters a smarter, more connected world. We focus on our role in shaping this future thio innovative and ethical AI solutions.

    +
    +
    + +
    +

    OUR JOURNEY

    +

    Gyannetra was founded in fim 2026. Enrvicing our expertise expansion. it expands strong telationships across partners and built with our parthers.

    + +
    +
    +
    + + + + + + + \ No newline at end of file diff --git a/assets/3293677.jpg b/assets/3293677.jpg new file mode 100644 index 0000000..049b3d9 Binary files /dev/null and b/assets/3293677.jpg differ diff --git a/assets/Finance Ind.png b/assets/Finance Ind.png new file mode 100644 index 0000000..7a6e3a7 Binary files /dev/null and b/assets/Finance Ind.png differ diff --git a/assets/ai agent.png b/assets/ai agent.png new file mode 100644 index 0000000..455a05b Binary files /dev/null and b/assets/ai agent.png differ diff --git a/assets/ai-customer-support.svg b/assets/ai-customer-support.svg new file mode 100644 index 0000000..5bfc8b0 --- /dev/null +++ b/assets/ai-customer-support.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/ai-powered-inventory-optimization.svg b/assets/ai-powered-inventory-optimization.svg new file mode 100644 index 0000000..314dded --- /dev/null +++ b/assets/ai-powered-inventory-optimization.svg @@ -0,0 +1,15 @@ + + + + + + + + + + \ No newline at end of file diff --git a/assets/algorithmic_trading_icon.svg b/assets/algorithmic_trading_icon.svg new file mode 100644 index 0000000..6339948 --- /dev/null +++ b/assets/algorithmic_trading_icon.svg @@ -0,0 +1,17 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/analytics (1).png b/assets/analytics (1).png new file mode 100644 index 0000000..a0bfdbf Binary files /dev/null and b/assets/analytics (1).png differ diff --git a/assets/automation flows.png b/assets/automation flows.png new file mode 100644 index 0000000..e19c4c2 Binary files /dev/null and b/assets/automation flows.png differ diff --git a/assets/automation.png b/assets/automation.png new file mode 100644 index 0000000..bd220b7 Binary files /dev/null and b/assets/automation.png differ diff --git a/assets/case study ind.png b/assets/case study ind.png new file mode 100644 index 0000000..dc7de49 Binary files /dev/null and b/assets/case study ind.png differ diff --git a/assets/chatbots-customer-service.svg b/assets/chatbots-customer-service.svg new file mode 100644 index 0000000..8668b8d --- /dev/null +++ b/assets/chatbots-customer-service.svg @@ -0,0 +1,12 @@ + + + + + + + \ No newline at end of file diff --git a/assets/corpo training.png b/assets/corpo training.png new file mode 100644 index 0000000..f47c179 Binary files /dev/null and b/assets/corpo training.png differ diff --git a/assets/customer_service_automation_icon.svg b/assets/customer_service_automation_icon.svg new file mode 100644 index 0000000..86bea5c --- /dev/null +++ b/assets/customer_service_automation_icon.svg @@ -0,0 +1,19 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/data analytics.png b/assets/data analytics.png new file mode 100644 index 0000000..35a128e Binary files /dev/null and b/assets/data analytics.png differ diff --git a/assets/diagnostics_icon.svg b/assets/diagnostics_icon.svg new file mode 100644 index 0000000..bf029b9 --- /dev/null +++ b/assets/diagnostics_icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/drug_discovery_icon.svg b/assets/drug_discovery_icon.svg new file mode 100644 index 0000000..622ade9 --- /dev/null +++ b/assets/drug_discovery_icon.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/dynamic-pricing.svg b/assets/dynamic-pricing.svg new file mode 100644 index 0000000..0befe85 --- /dev/null +++ b/assets/dynamic-pricing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/fraud_detection_icon.svg b/assets/fraud_detection_icon.svg new file mode 100644 index 0000000..c85d879 --- /dev/null +++ b/assets/fraud_detection_icon.svg @@ -0,0 +1,16 @@ + + + + + + + + \ No newline at end of file diff --git a/assets/gen ai.png b/assets/gen ai.png new file mode 100644 index 0000000..109f7bd Binary files /dev/null and b/assets/gen ai.png differ diff --git a/assets/healthcare ind.png b/assets/healthcare ind.png new file mode 100644 index 0000000..8357f64 Binary files /dev/null and b/assets/healthcare ind.png differ diff --git a/assets/hero-bg.jpeg b/assets/hero-bg.jpeg new file mode 100644 index 0000000..8428ca3 Binary files /dev/null and b/assets/hero-bg.jpeg differ diff --git a/assets/hero-bg.png b/assets/hero-bg.png new file mode 100644 index 0000000..23dfa4d Binary files /dev/null and b/assets/hero-bg.png differ diff --git a/assets/hero-bg1.jpeg b/assets/hero-bg1.jpeg new file mode 100644 index 0000000..f4908ac Binary files /dev/null and b/assets/hero-bg1.jpeg differ diff --git a/assets/icon-cv.png b/assets/icon-cv.png new file mode 100644 index 0000000..1bdc28c Binary files /dev/null and b/assets/icon-cv.png differ diff --git a/assets/icon-dl.png b/assets/icon-dl.png new file mode 100644 index 0000000..17d1c9b Binary files /dev/null and b/assets/icon-dl.png differ diff --git a/assets/icon-ml.png b/assets/icon-ml.png new file mode 100644 index 0000000..2445fdb Binary files /dev/null and b/assets/icon-ml.png differ diff --git a/assets/icon-nlp.png b/assets/icon-nlp.png new file mode 100644 index 0000000..dbfa6a6 Binary files /dev/null and b/assets/icon-nlp.png differ diff --git a/assets/indi training.png b/assets/indi training.png new file mode 100644 index 0000000..f8fea70 Binary files /dev/null and b/assets/indi training.png differ diff --git a/assets/insights-placeholder-1.svg b/assets/insights-placeholder-1.svg new file mode 100644 index 0000000..52fc70c --- /dev/null +++ b/assets/insights-placeholder-1.svg @@ -0,0 +1 @@ +Insight/Story 1 \ No newline at end of file diff --git a/assets/insights-placeholder-2.svg b/assets/insights-placeholder-2.svg new file mode 100644 index 0000000..fe5c4d2 --- /dev/null +++ b/assets/insights-placeholder-2.svg @@ -0,0 +1 @@ +Insight/Story 2 \ No newline at end of file diff --git a/assets/manufacturing ind.png b/assets/manufacturing ind.png new file mode 100644 index 0000000..2c7a386 Binary files /dev/null and b/assets/manufacturing ind.png differ diff --git a/assets/marketing ind.png b/assets/marketing ind.png new file mode 100644 index 0000000..f97da9e Binary files /dev/null and b/assets/marketing ind.png differ diff --git a/assets/marketing_hero_graphic.svg b/assets/marketing_hero_graphic.svg new file mode 100644 index 0000000..dda7923 --- /dev/null +++ b/assets/marketing_hero_graphic.svg @@ -0,0 +1,7 @@ + + + + + + Marketing Hero Graphic + \ No newline at end of file diff --git a/assets/marketing_icon_campaign_opt.svg b/assets/marketing_icon_campaign_opt.svg new file mode 100644 index 0000000..c8802dd --- /dev/null +++ b/assets/marketing_icon_campaign_opt.svg @@ -0,0 +1,10 @@ + + + + + + + + + Campaign Opt. + \ No newline at end of file diff --git a/assets/marketing_icon_content_gen.svg b/assets/marketing_icon_content_gen.svg new file mode 100644 index 0000000..daae9f2 --- /dev/null +++ b/assets/marketing_icon_content_gen.svg @@ -0,0 +1,10 @@ + + + + + + + + + Content Gen + \ No newline at end of file diff --git a/assets/marketing_icon_personalization.svg b/assets/marketing_icon_personalization.svg new file mode 100644 index 0000000..7272e5e --- /dev/null +++ b/assets/marketing_icon_personalization.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + Personalization + \ No newline at end of file diff --git a/assets/marketing_icon_segmentation.svg b/assets/marketing_icon_segmentation.svg new file mode 100644 index 0000000..af26527 --- /dev/null +++ b/assets/marketing_icon_segmentation.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + Segmentation + \ No newline at end of file diff --git a/assets/marketing_insight_harnessing.svg b/assets/marketing_insight_harnessing.svg new file mode 100644 index 0000000..52f324e --- /dev/null +++ b/assets/marketing_insight_harnessing.svg @@ -0,0 +1,7 @@ + + + + + + Harnessing AI Insights + \ No newline at end of file diff --git a/assets/marketing_insight_optimization.svg b/assets/marketing_insight_optimization.svg new file mode 100644 index 0000000..62a419e --- /dev/null +++ b/assets/marketing_insight_optimization.svg @@ -0,0 +1,7 @@ + + + + + + Campaign Optimization + \ No newline at end of file diff --git a/assets/media and entertainment ind.png b/assets/media and entertainment ind.png new file mode 100644 index 0000000..10aea66 Binary files /dev/null and b/assets/media and entertainment ind.png differ diff --git a/assets/mlng.png b/assets/mlng.png new file mode 100644 index 0000000..4766afe Binary files /dev/null and b/assets/mlng.png differ diff --git a/assets/patient_care_automation_icon.svg b/assets/patient_care_automation_icon.svg new file mode 100644 index 0000000..5830c61 --- /dev/null +++ b/assets/patient_care_automation_icon.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/personalized-product-recommendations.svg b/assets/personalized-product-recommendations.svg new file mode 100644 index 0000000..b0b6bb8 --- /dev/null +++ b/assets/personalized-product-recommendations.svg @@ -0,0 +1,14 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/personalized-recommendations.svg b/assets/personalized-recommendations.svg new file mode 100644 index 0000000..55e7cb5 --- /dev/null +++ b/assets/personalized-recommendations.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/personalized_medicine_icon.svg b/assets/personalized_medicine_icon.svg new file mode 100644 index 0000000..f7cae31 --- /dev/null +++ b/assets/personalized_medicine_icon.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/predictive-analytics-demand-forecasting.svg b/assets/predictive-analytics-demand-forecasting.svg new file mode 100644 index 0000000..7163534 --- /dev/null +++ b/assets/predictive-analytics-demand-forecasting.svg @@ -0,0 +1,15 @@ + + + + + + + + + + \ No newline at end of file diff --git a/assets/predictive-demand-analysis.svg b/assets/predictive-demand-analysis.svg new file mode 100644 index 0000000..cca8128 --- /dev/null +++ b/assets/predictive-demand-analysis.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/predictive.png b/assets/predictive.png new file mode 100644 index 0000000..564e17d Binary files /dev/null and b/assets/predictive.png differ diff --git a/assets/predictive_maintenance_icon.svg b/assets/predictive_maintenance_icon.svg new file mode 100644 index 0000000..e04787f --- /dev/null +++ b/assets/predictive_maintenance_icon.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/assets/quality_control_icon.svg b/assets/quality_control_icon.svg new file mode 100644 index 0000000..bd37844 --- /dev/null +++ b/assets/quality_control_icon.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/assets/retail ind.png b/assets/retail ind.png new file mode 100644 index 0000000..cb1d1c8 Binary files /dev/null and b/assets/retail ind.png differ diff --git a/assets/risk_management_icon.svg b/assets/risk_management_icon.svg new file mode 100644 index 0000000..ec12b1b --- /dev/null +++ b/assets/risk_management_icon.svg @@ -0,0 +1,18 @@ + + + + + + + \ No newline at end of file diff --git a/assets/robotic_automation_icon.svg b/assets/robotic_automation_icon.svg new file mode 100644 index 0000000..658b655 --- /dev/null +++ b/assets/robotic_automation_icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/solution_icon_content_analysis.svg b/assets/solution_icon_content_analysis.svg new file mode 100644 index 0000000..ab959ff --- /dev/null +++ b/assets/solution_icon_content_analysis.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/solution_icon_content_generation.svg b/assets/solution_icon_content_generation.svg new file mode 100644 index 0000000..fc80012 --- /dev/null +++ b/assets/solution_icon_content_generation.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/solution_icon_personalization.svg b/assets/solution_icon_personalization.svg new file mode 100644 index 0000000..8c5e748 --- /dev/null +++ b/assets/solution_icon_personalization.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/solution_icon_recommendation_systems.svg b/assets/solution_icon_recommendation_systems.svg new file mode 100644 index 0000000..649f253 --- /dev/null +++ b/assets/solution_icon_recommendation_systems.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/supply_chain_icon.svg b/assets/supply_chain_icon.svg new file mode 100644 index 0000000..c866f9e --- /dev/null +++ b/assets/supply_chain_icon.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/assets/technology.png b/assets/technology.png new file mode 100644 index 0000000..d7a0743 Binary files /dev/null and b/assets/technology.png differ diff --git a/assets/travel ind.png b/assets/travel ind.png new file mode 100644 index 0000000..f3050f8 Binary files /dev/null and b/assets/travel ind.png differ diff --git a/assets/workshops.png b/assets/workshops.png new file mode 100644 index 0000000..c6d229d Binary files /dev/null and b/assets/workshops.png differ diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..508d172 --- /dev/null +++ b/contact.html @@ -0,0 +1,129 @@ + + + + + + Contact Us - Gyannetra + + + + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    + +
    +
    +
    +

    CONTACT US

    +

    Reach out to our team for inquiries, consultations, or partnership opportunities.

    +
    +
    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    +
    +
    +

    CONTACT INFORMATION

    +
      +
    • info@gyannetra.com
      • +
    • +91 89491-35299
      • +
    • Pune, Maharashtra, India
      • +
    +
    +

    Need Expert Advice?

    +

    Schedule a free 30-minute consultation with our AI specialists

    + Book Consultation +
    +
    +
    + +
    +
    + + + + + + \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..856f6a3 --- /dev/null +++ b/css/style.css @@ -0,0 +1,28875 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap'); + +/* VARIABLES & RESET */ +:root { + --fg: #ececec; + --btn-bg: rgba(20,20,40,0.8); + --btn-hover: rgba(20,20,40,1); + --gap: 3rem; + --max-w: 1200px; +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +html { + height: 100%; + scroll-behavior: smooth; +} + +body { + background: url('../assets/3293677.jpg') no-repeat center center fixed; + background-size: cover; + color: var(--fg); + font-family: 'Inter', sans-serif; + line-height: 1.5; + margin: 0; + padding: 0; + min-height: 100vh; + overflow-x: hidden; +} + +/* UTILITY CLASSES */ +.container { + width: 92%; + max-width: var(--max-w); + margin: 0 auto; + padding: 2rem 0; +} + +.navbar.container { + width: 100%; + max-width: 1400px; + padding: 0.5rem 2.0rem; +} + +.tech-description, +.exp-description { + font-size: 0.9rem; + color: rgba(255, 255, 255, 0.8); + margin-top: 0.5rem; + line-height: 1.4; +} + + +/* Text Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.hero-content h1, +.hero-content p, +.section-heading, +.tech-item, +.exp-item { + animation: fadeInUp 0.8s ease forwards; +} + +.hero-content h1 { + animation-delay: 0.2s; +} + +.hero-content p { + animation-delay: 0.4s; +} + +.section-heading { + animation-delay: 0.6s; +} + +.tech-item { + animation-delay: 0.8s; +} + +.exp-item { + animation-delay: 1s; +} + + + + +#technologies, #expertise { + padding-top: 7rem; + padding-bottom: 4rem; + position: relative; +} + + +/* GENERATIVE AI SECTION */ +#generative-ai { + padding: 6rem 0; /* Increased vertical padding for sections */ +} + +/* DATA ANALYSIS SECTION */ + +/* Agentic AI Page Styles */ +#agentic-ai { + padding: 80px 0; +} + +.agentic-ai-header { + text-align: center; + margin-bottom: 60px; +} + +.agentic-ai-header h1 { + font-size: 3em; + margin-bottom: 20px; + color: var(--primary-color); +} + +.agentic-ai-header p { + font-size: 1.2em; + color: var(--text-color-secondary); + max-width: 800px; + margin: 0 auto 15px auto; +} + +.key-offerings, +.benefits, +.blogs-case-studies { + margin-bottom: 60px; +} + +.key-offerings h2, +.benefits h2, +.blogs-case-studies h2 { + text-align: center; + font-size: 2em; + margin-bottom: 40px; + color: var(--primary-color); +} + +.offerings-cards { + display: flex; + justify-content: center; + gap: 30px; + flex-wrap: wrap; +} + +.offering-card { + background-color: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: 10px; + padding: 30px; + text-align: center; + max-width: 300px; + transition: transform 0.3s ease; +} + +.offering-card:hover { + transform: translateY(-10px); +} + +.offering-card img { + width: 60px; + height: 60px; + margin-bottom: 20px; +} + +.offering-card h3 { + font-size: 1.5em; + margin-bottom: 15px; + color: var(--text-color-primary); +} + +.offering-card p { + color: var(--text-color-secondary); +} + +.benefits ul { + list-style: disc; + padding-left: 20px; + max-width: 800px; + margin: 0 auto; +} + +.benefits li { + margin-bottom: 15px; + font-size: 1.1em; + color: var(--text-color-secondary); +} + +.blogs-case-studies .blog-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 30px; +} + +.blogs-case-studies .blog-card { + background-color: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: 10px; + padding: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.blogs-case-studies .blog-card img { + width: 100%; + height: auto; + border-radius: 8px; + margin-bottom: 15px; +} + +.blogs-case-studies .blog-card h3 { + font-size: 1.2em; + margin-bottom: 10px; + color: var(--text-color-primary); +} + +.blogs-case-studies .blog-card p { + font-size: 0.9em; + color: var(--text-color-secondary); +} + +.explore-capabilities { + text-align: center; + margin-top: 40px; +} +#data-analysis { + padding: 6rem 0; /* Increased vertical padding for sections */ +} + + +/* NAVBAR */ +.site-header { + position: fixed; + top: 0; + width: 100%; + z-index: 100; + padding: 0.5rem 2.5rem; +} +.navbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.3rem 2.5rem; /* Adjusted vertical padding for shorter height */ + background: rgba(20, 20, 40, 0.25); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + border-radius: 16px; + max-width: 100%; + margin: 0 auto; +} + +.logo { + font-size: 1.6rem; + font-weight: bold; + text-decoration: none; + letter-spacing: 1.5px; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 50%, #ffffff 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + padding: 0.5rem 0.8rem; + border: 2px solid rgba(90, 107, 255, 0.3); + border-radius: 8px; + transition: all 0.3s ease; + text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); +} + +.logo:hover { + border-color: rgba(140, 154, 255, 0.6); + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(140, 154, 255, 0.2); +} +.nav-links { + list-style: none; + display: flex; + gap: 2rem; /* Slightly reduced gap */ + margin-right: 1rem; +} +.nav-link { + color: var(--fg); + text-decoration: none; + font-size: 1rem; + display: flex; + align-items: center; + padding: 0.7rem 1.2rem; /* Adjusted padding for better feel */ + border-radius: 8px; + transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* More specific transitions */ + position: relative; + letter-spacing: 0.5px; + font-weight: 500; +} +.nav-link:hover { + background: rgba(255, 255, 255, 0.15); + color: #ffffff; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + transform: translateY(-2px); + text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); +} +.nav-link:after { + content: ''; + position: absolute; + bottom: -2px; + left: 50%; + width: 0; + height: 3px; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 70%, #ffffff 100%); + transition: width 0.3s ease-out, left 0.3s ease-out; + border-radius: 3px; +} +.nav-link:hover:after { + width: 85%; + left: 7.5%; +} + +/* MACHINE LEARNING PAGE STYLES */ + +.hero-section { + padding-top: 12rem; /* Increased top padding */ + padding-bottom: 6rem; /* Increased bottom padding */ + text-align: center; +} + +.hero-section h1 { + font-size: 3.5rem; + margin-bottom: 1rem; + /* The gradient styling has been moved to the global h1-h6 style */ +} + +.hero-section p { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.8); +} + +.overview-section, +.key-offerings-section, +.benefits-section, +.related-content-section { + padding: 6rem 0; /* Increased vertical padding for sections */ +} + +.overview-section h2, +.key-offerings-section h2, +.benefits-section h2, +.related-content-section h2 { + font-size: 2rem; + margin-bottom: 2rem; + text-align: center; + /* Removed color property to allow gradient to take effect */ +} + +.overview-section p { + font-size: 1.1rem; + text-align: center; + max-width: 800px; + margin: 0 auto; + color: rgba(255, 255, 255, 0.7); +} + +.offerings-grid, +.related-content-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 3rem; /* Increased gap between grid items */ + margin-top: 3rem; /* Increased top margin */ +} + +.offering-item, +.related-content-item { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 2.5rem; /* Increased padding within items */ + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.offering-item:hover, +.related-content-item:hover { + transform: translateY(-10px); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); +} + +.offering-icon { + width: 60px; + height: 60px; + margin-bottom: 1.5rem; + filter: drop-shadow(0 0 8px rgba(140, 154, 255, 0.5)); +} + +.offering-item h3, +.related-content-item h3 { + font-size: 1.4rem; + margin-bottom: 0.8rem; + /* Color property removed to allow gradient to work */ + text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7); /* Enhanced text shadow for better readability */ +} + +.offering-item p, +.related-content-item p { + font-size: 1rem; + color: rgba(255, 255, 255, 0.7); +} + +.benefits-section ul { + list-style: none; + padding: 0; + max-width: 700px; /* Slightly increased max-width */ + margin: 3rem auto; /* Increased top/bottom margin */ +} + +.benefits-section li { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + padding: 1.2rem 1.8rem; /* Increased padding */ + margin-bottom: 1.2rem; /* Increased bottom margin */ + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.9); + position: relative; + padding-left: 3rem; /* Adjusted left padding for bullet */ +} + +.benefits-section li::before { + content: '•'; + position: absolute; + left: 1rem; + color: #a2abff; + font-size: 1.5rem; + line-height: 1; +} + + +.read-more { + display: inline-block; + margin-top: 1rem; + color: #a2abff; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; +} + +.read-more:hover { + color: #ffffff; + text-decoration: underline; +} + +/* HERO SECTION */ +#hero { + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; + padding-top: 8rem; + width: 100%; + margin: 0; + overflow: hidden; + height: 100vh; + background: none; +} + +.hero-content { + position: relative; + z-index: 1; + width: 100%; +} +.hero-content h1 { + font-size: 4rem; + line-height: 1.1; + /* color property removed to let the global gradient take effect */ + margin-bottom: 1.5rem; +} +.hero-content p { + margin: 1.5rem 0; + font-size: 1.3rem; + opacity: 1; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); + max-width: 600px; + color: var(--fg); + font-weight: 500; +} + + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-menu { + display: grid; + position: absolute; + background-color: #100732; + border-radius: 8px; + padding: 1rem; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); + z-index: 1; + top: 100%; + left: 0; + margin-top: 0.5rem; + opacity: 0; + visibility: hidden; + transform: translateY(10px); + transition: opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease, visibility 0s linear 0.3s; +} + +.industries-dropdown { + grid-template-columns: repeat(3, 1fr); + min-width: 600px; +} + +.services-dropdown { + grid-template-columns: repeat(2, 1fr); + min-width: 450px; +} + +.education-dropdown { + grid-template-columns: 1fr; + min-width: 320px; +} + +.dropdown:hover .industries-dropdown, +.dropdown:hover .services-dropdown, +.dropdown:hover .education-dropdown { + opacity: 1; + visibility: visible; + transform: translateY(0); + margin-top: 0; + transition: opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease, visibility 0s linear 0s; +} + +.dropdown-menu { + padding-top: 0.8rem; +} + +.dropdown-menu::before { + content: ''; + position: absolute; + top: -0.5rem; + left: 0; + width: 100%; + height: 0.5rem; +} + +.dropdown-menu li { + list-style: none; +} + +.dropdown-menu a { + text-decoration: none; + color: var(--fg); + display: block; + padding: 0.5rem; + border-radius: 4px; + transition: background-color 0.3s ease; +} + +.dropdown-menu a:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +.dropdown-item-content { + display: flex; + align-items: center; +} + +.dropdown-icon { + width: 24px; + height: 24px; + margin-right: 0.8rem; + flex-shrink: 0; +} + +.text-content { + display: flex; + flex-direction: column; +} + +.item-title { + font-weight: bold; + font-size: 0.95rem; +} + +.item-description { + font-size: 0.8rem; + opacity: 0.8; +} + +/* SECTION HEADINGS */ +.section-heading { + font-size: 2.5rem; + font-weight: 600; + text-align: center; + margin: var(--gap) 0; + letter-spacing: 0.5px; + /* Using the global gradient instead of a specific one */ + position: relative; + display: inline-block; + width: 100%; + /* The text shadow is already set in the global heading style */ +} + +/* Apply gradient text to all headings for consistency */ +h1, h2, h3, h4, h5, h6 { + font-family: 'Space Grotesk', sans-serif; + background: linear-gradient(90deg, #8A9FFF 0%, #C0CFFF 40%, #FFFFFF 70%); /* Updated gradient for better visibility */ + -webkit-background-clip: text; + background-clip: text; + color: transparent; + text-shadow: 0px 4px 10px rgba(124, 137, 255, 0.8), 0px 2px 5px rgba(0, 0, 0, 0.5); + letter-spacing: 0.7px; + font-weight: 700; +} + +/* Exceptions for headings in special contexts */ +.dropdown-menu h1, .dropdown-menu h2, .dropdown-menu h3, +.dropdown-menu h4, .dropdown-menu h5, .dropdown-menu h6, +.item-title, .item-description { + background: none; + -webkit-background-clip: initial; + background-clip: initial; + color: var(--fg); /* Restore original color */ + text-shadow: none; +} + +.section-heading::after { + content: ''; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 3px; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 70%, #ffffff 100%); +} + +/* TECHNOLOGIES GRID */ +.tech-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: var(--gap); + justify-items: center; +} +.tech-item { + background: rgba(0, 0, 0, 0.3); + border-radius: 12px; + padding: 1.5rem; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + transition: transform 0.3s, background 0.3s; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.tech-item:hover { + transform: translateY(-5px); + background: rgba(0, 0, 0, 0.65); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); +} +.tech-item img { + width: 100px; + height: 100px; + object-fit: contain; +} +.tech-item p { + margin-top: 0.75rem; + font-size: 1rem; + text-align: center; + color: var(--fg); + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); +} + +/* EXPERTISE GRID */ +.exp-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: var(--gap); + justify-items: center; +} +.exp-item { + background: rgba(0, 0, 0, 0.3); + border-radius: 15px; + padding: 1.5rem; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + transition: transform 0.3s, background 0.3s; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.exp-item:hover { + transform: translateY(-5px); + background: rgba(0, 0, 0, 0.65); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); +} +.exp-item img { + width: 180px; + height: auto; +} +.exp-item p { + margin-top: 0.75rem; + font-size: 1.1rem; + text-align: center; + font-weight: 500; + color: var(--fg); + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); +} + +.about-section { + margin-bottom: var(--gap); /* Use consistent gap variable */ + padding-top: 9rem; /* Adjusted spacing below navbar */ + padding-bottom: 4rem; /* Consistent spacing between sections */ +} + +.about-section h2 { + font-size: 2em; + margin-bottom: 20px; + /* color property removed to let the global gradient take effect */ +} + +.about-section p { + font-size: 1.1em; + line-height: 1.6; + color: #cccccc; +} + +.team-images { + display: flex; + gap: 20px; + margin: 30px 0; +} + +.team-images img { + width: 150px; + height: 150px; + object-fit: cover; + border-radius: 8px; +} + +.mission-vision { + display: flex; + gap: 40px; + margin: 40px 0; +} + +.mission, .vision { + flex: 1; +} + +.mission h2, .vision h2 { + font-size: 1.8em; + margin-bottom: 15px; +} + +.mission p, .vision p { + font-size: 1em; + line-height: 1.5; +} + +.btn { + background: linear-gradient(90deg, #5a6bff, #a2b0ff); + color: white; + padding: 15px 30px; + border: none; + border-radius: 50px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; + display: inline-block; + text-align: center; + width: auto; +} + +.btn:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(74, 0, 224, 0.4); +} + +.btn-primary { + background: linear-gradient(90deg, #5a6bff, #a2b0ff); + color: white; + padding: 15px 30px; + border: none; + border-radius: 50px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; + display: inline-block; + text-align: center; + width: auto; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(74, 0, 224, 0.4); +} + +/* CONTACT PAGE */ +.contact-page-container { + padding-top: 9rem; /* Adjusted spacing below navbar */ + padding-bottom: 4rem; /* Consistent spacing between sections */ + color: #fff; +} + +#contact-us-section .contact-header { + text-align: center; + margin-bottom: 40px; /* Slightly reduced bottom margin */ +} + +#contact-us-section .contact-header h1 { + /* Ensure this inherits the global h1 style by commenting out conflicting properties */ + font-size: 4rem; /* Increased font size */ + /* color: #ffffff; */ /* Assuming this was the original color */ + /* text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5), 0px 2px 5px rgba(0, 0, 0, 0.3); */ + margin-bottom: 20px; /* Adjusted margin */ +} + +#contact-us-section .contact-header p { + font-size: 1.1rem; + color: #ccc; + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +.contact-content { + display: flex; + gap: 2rem; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; +} + +.contact-form-container, +.contact-info-container { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 16px; + padding: 2rem; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + border: 1px solid rgba(255, 255, 255, 0.18); +} + +.contact-form-container { + flex: 2; + min-width: 300px; + max-width: 600px; +} + +.contact-info-container { + flex: 1; + min-width: 250px; + max-width: 400px; + padding: 2rem; +} + +.contact-details { + list-style: none; + padding: 0; + margin-bottom: 2rem; +} + +.contact-details li { + margin-bottom: 1rem; /* Adjusted margin */ + display: flex; + align-items: center; + padding: 1.2rem; /* Adjusted padding */ + background: rgba(255, 255, 255, 0.05); + border-radius: 8px; +} + +.contact-details li i { + margin-right: 1rem; + color: #5a6bff; + font-size: 1.2rem; +} + +.expert-advice-card { + background: rgba(20, 20, 40, 0.7); + border-radius: 12px; + padding: 2rem; + text-align: center; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.expert-advice-card h3 { + margin-top: 0; + color: #a2b0ff; +} + +.expert-advice-card p { + font-size: 1rem; + margin-bottom: 1.5rem; /* Adjusted margin */ + color: rgba(255, 255, 255, 0.8); +} + +.btn-book-consultation { + display: inline-block; + padding: 0.8rem 2rem; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%); + border: none; + border-radius: 8px; + color: white; + text-decoration: none; + font-size: 1rem; + transition: all 0.3s ease; + cursor: pointer; +} + +.btn-book-consultation:hover { + opacity: 0.9; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(90, 107, 255, 0.3); +} + +/* Form group styling */ +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: bold; + color: #a2b0ff; +} + +.form-group input[type="text"], +.form-group input[type="email"], +.form-group select, +.form-group textarea { + width: 100%; + padding: 0.8rem; + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 8px; + background: rgba(255, 255, 255, 0.1); + color: var(--fg); + font-size: 1rem; + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +.form-group input[type="text"]::placeholder, +.form-group input[type="email"]::placeholder, +.form-group textarea::placeholder { + color: rgba(255, 255, 255, 0.6); +} + +.form-group input[type="text"]:focus, +.form-group input[type="email"]:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: #5a6bff; + box-shadow: 0 0 8px rgba(90, 107, 255, 0.5); +} + +.form-group select { + appearance: none; + -webkit-appearance: none; + background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ececec%22%20d%3D%22M287%2C197.9L159.3%2C69.2c-3.7-3.7-9.7-3.7-13.5%2C0L5.4%2C197.9c-3.7%2C3.7-3.7%2C9.7%2C0%2C13.5l13.5%2C13.5c3.7%2C3.7%2C9.7%2C3.7%2C13.5%2C0l118.3-118.3l118.3%2C118.3c3.7%2C3.7%2C9.7%2C3.7%2C13.5%2C0l13.5-13.5C290.7%2C207.6%2C290.7%2C201.6%2C287%2C197.9z%22%2F%3E%3C%2Fsvg%3E'); + background-repeat: no-repeat; + background-position: right 0.8rem top 50%; + background-size: 12px auto; + padding-right: 2.5rem; +} + +.btn-send-message { + display: block; + width: 100%; + padding: 1rem; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%); + border: none; + border-radius: 8px; + color: white; + font-size: 1.1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-send-message:hover { + opacity: 0.9; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(90, 107, 255, 0.3); +} + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 992px) { + .contact-content { + flex-direction: column; + padding: 0; + } + .contact-form-container, + .contact-info-container { + max-width: 100%; + padding-left: 30px; + padding-right: 30px; + } + /* Removed margin-top as margin-bottom on cards handles spacing */ + .contact-info-container { + margin-top: 0; + } + .contact-form-container, .contact-info-container { + flex-basis: 100%; /* Full width on smaller screens */ + max-width: 100%; + } +} + +@media (max-width: 768px) { + #contact-us-section .contact-header h1 { + /* Font size adjusted, other styles inherit */ + font-size: 2.8rem; + } + #contact-us-section .contact-header p { + font-size: 1rem; + } + .contact-form-container input[type="text"], + .contact-form-container input[type="email"], + .contact-form-container select, + .contact-form-container textarea { + padding: 0.6rem; + font-size: 0.9rem; + } + .btn-send-message { + padding: 0.8rem; + font-size: 1rem; + } +} + + + +/* Active Nav Link Style */ +.nav-links .nav-link.active { + color: #ffffff; /* Brighter white for active state */ + font-weight: bold; + /* The underline is now handled by the ::after pseudo-element for consistency */ +} + +.nav-links .nav-link.active::after { + content: ''; + position: absolute; + bottom: -2px; /* Positioned just below the link, adjust if nav-link padding changes */ + left: 7.5%; /* Aligned with the hover underline's final state */ + width: 85%; /* Matches the hover underline's final width */ + height: 3px; /* Matches the hover underline's height */ + background: linear-gradient(90deg, #6e7adf 0%, #a2abff 100%); /* Consistent gradient */ + border-radius: 3px; /* Consistent border radius */ + /* No transition, as it's always visible for the active link */ +} + + +/* Responsive adjustments for contact page */ +@media (max-width: 992px) { + .contact-content { + flex-direction: column; + padding: 0; + } + .contact-form-container, + .contact-info-container { + max-width: 100%; + padding-left: 30px; + padding-right: 30px; + } + /* Removed margin-top as margin-bottom on cards handles spacing */ + .contact-info-container { + margin-top: 0; + } + .contact-form-container, .contact-info-container { + flex-basis: 100%; /* Full width on smaller screens */ + max-width: 100%; + } +} + +@media (max-width: 768px) { + #contact-us-section .contact-header h1 { + /* Font size adjusted, other styles inherit */ + font-size: 2.8rem; + } + #contact-us-section .contact-header p { + font-size: 1rem; + } + .contact-form-container input[type="text"], + .form-group input[type="email"], + .form-group select, + .form-group textarea { + padding: 12px; + font-size: 0.9rem; + } + .btn-send-message { + padding: 12px 25px; + font-size: 0.9rem; + } + .contact-info-container .contact-details li { + font-size: 0.9rem; + margin-bottom: 15px; /* Add spacing between list items */ + } +} + +/* DATA ANALYSIS PAGE STYLES */ + +.hero-section { + padding-top: 12rem; /* Increased top padding */ + padding-bottom: 6rem; /* Increased bottom padding */ + text-align: center; +} + +.hero-section h1 { + font-size: 3.5rem; + margin-bottom: 1rem; +} + +.hero-section p { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.8); +} + +.overview-section, +.key-offerings-section, +.benefits-section, +.related-content-section { + padding: 6rem 0; /* Increased vertical padding for sections */ +} + +.overview-section h2, +.key-offerings-section h2, +.benefits-section h2, +.related-content-section h2 { + font-size: 2rem; + margin-bottom: 2rem; + text-align: center; +} + +.overview-section p { + font-size: 1.1rem; + text-align: center; + max-width: 800px; + margin: 0 auto; + color: rgba(255, 255, 255, 0.7); +} + +.offerings-grid, +.related-content-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 3rem; /* Increased gap between grid items */ + margin-top: 3rem; /* Increased top margin */ +} + +.offering-item, +.related-content-item { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 2.5rem; /* Increased padding within items */ + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.offering-item:hover, +.related-content-item:hover { + transform: translateY(-10px); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); +} + +.offering-icon { + width: 60px; + height: 60px; + margin-bottom: 1.5rem; + filter: drop-shadow(0 0 8px rgba(140, 154, 255, 0.5)); +} + +.offering-item h3, +.related-content-item h3 { + font-size: 1.4rem; + margin-bottom: 0.8rem; + text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7); +} + +.offering-item p, +.related-content-item p { + font-size: 1rem; + color: rgba(255, 255, 255, 0.7); +} + +.benefits-section ul { + list-style: none; + padding: 0; + max-width: 700px; /* Slightly increased max-width */ + margin: 3rem auto; /* Increased top/bottom margin */ +} + +.benefits-section li { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + padding: 1.2rem 1.8rem; /* Increased padding */ + margin-bottom: 1.2rem; /* Increased bottom margin */ + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.9); + position: relative; + padding-left: 3rem; /* Adjusted left padding for bullet */ +} + +.benefits-section li::before { + content: '•'; + position: absolute; + left: 1rem; + color: #a2abff; + font-size: 1.5rem; + line-height: 1; +} + +.read-more { + display: inline-block; + margin-top: 1rem; + color: #a2abff; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; +} + +.read-more:hover { + color: #ffffff; + text-decoration: underline; + padding: 15px; /* Increased padding for list items */ + background-color: rgba(255, 255, 255, 0.08); /* Slightly less subtle background for list items */ + border-radius: 8px; /* Rounded corners for list items */ + border: 1px solid rgba(255, 255, 255, 0.15); /* Slightly stronger border for list items */ + display: flex; /* Use flexbox for icon and text */ + align-items: center; /* Align icon and text vertically */ + transition: background-color 0.3s ease, border-color 0.3s ease; + } + .contact-info-container .contact-details li:last-child { + margin-bottom: 0; + } + .contact-info-container .contact-details li:hover { + background-color: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.25); + } + .contact-info-container .contact-details li i { + font-size: 1.3rem; /* Slightly larger icon */ + margin-right: 12px; /* Increased space between icon and text */ + color: #a2abff; /* Icon color */ + } + + +/* Generative AI Page Styles */ +#generative-ai { + padding-top: 9rem; + padding-bottom: 4rem; + text-align: center; +} + +.generative-ai-header h1 { + font-size: 3em; + margin-bottom: 20px; + /* color property removed to let the global gradient take effect */ +} + +.generative-ai-header p { + font-size: 1.2em; + color: #ccc; + margin-bottom: 10px; +} + +.generative-ai-features { + display: flex; + justify-content: center; + gap: 30px; + margin-top: 50px; + flex-wrap: wrap; +} + +.feature-card { + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + padding: 30px; + width: 280px; + text-align: center; + backdrop-filter: blur(10px); + transition: transform 0.3s ease-in-out; +} + +.feature-card:hover { + transform: translateY(-10px); +} + +.feature-card img { + width: 60px; + height: 60px; + margin-bottom: 20px; +} + +.feature-card h3 { + font-size: 1.5em; + /* color property removed to let the global gradient take effect */ + margin-bottom: 10px; +} + +.feature-card p { + font-size: 1em; + color: #ccc; +} + +.why-choose-gyannetra { + margin-top: 80px; +} + +.why-choose-gyannetra h2 { + font-size: 2.5em; + margin-bottom: 30px; + /* color property removed to let the global gradient take effect */ +} + +.why-choose-items { + display: flex; + justify-content: center; + gap: 50px; + flex-wrap: wrap; +} + +.why-choose-items p { + font-size: 1.2em; + color: #ccc; +} + +.blogs-case-studies { + margin-top: 80px; +} + +.blogs-case-studies h2 { + font-size: 2.5em; + margin-bottom: 30px; + /* color property removed to let the global gradient take effect */ +} + +.blog-cards { + display: flex; + justify-content: center; + gap: 30px; + flex-wrap: wrap; +} + +.blog-card { + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + width: 280px; + overflow: hidden; + text-align: left; + backdrop-filter: blur(10px); + transition: transform 0.3s ease-in-out; +} + +.blog-card:hover { + transform: translateY(-10px); +} + +.blog-card img { + width: 100%; + height: 180px; + object-fit: cover; +} + +.blog-card h3 { + font-size: 1.2em; + color: #fff; + margin: 15px; +} + +.blog-card p { + font-size: 0.9em; + color: #ccc; + margin: 0 15px 15px; +} + +.explore-capabilities { + margin-top: 50px; +} + + +/* INDUSTRY PAGE SPECIFIC STYLES */ +.industry-hero { + padding: 80px 0; + text-align: left; + background: linear-gradient(135deg, rgba(13, 26, 46, 0.8), rgba(18, 36, 64, 0.95)); /* Dark blue gradient */ + position: relative; + overflow: hidden; +} + +.industry-hero-content { + display: flex; + align-items: center; + justify-content: space-between; + gap: 40px; +} + +.industry-hero .hero-text { + max-width: 60%; +} + +.industry-hero h1 { + font-family: 'Space Grotesk', sans-serif; + font-size: 4rem; /* Larger heading */ + font-weight: 700; + color: #ffffff; + margin-bottom: 20px; + line-height: 1.2; +} + +.industry-hero p { + font-family: 'Inter', sans-serif; + font-size: 1.2rem; /* Slightly larger paragraph text */ + color: #e0e0e0; /* Lighter text for contrast */ + line-height: 1.6; + margin-bottom: 30px; +} + +.hero-image-container { + width: 200px; /* Adjust as needed */ + height: 200px; /* Adjust as needed */ +} + +.hero-icon { + width: 100%; + height: 100%; +} + +.industry-solutions, +.industry-benefits, +.industry-blogs { + padding: 60px 0; + text-align: left; +} + +.industry-solutions .section-heading, +.industry-benefits .section-heading, +.industry-blogs .section-heading { + font-family: 'Space Grotesk', sans-serif; + font-size: 2.5rem; + color: #ffffff; + margin-bottom: 40px; + text-align: left; + padding-left: 15px; /* Align with container padding */ +} + +.solutions-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 30px; + text-align: center; +} + +.solution-item { + background-color: rgba(255, 255, 255, 0.05); /* Subtle background */ + padding: 30px 20px; + border-radius: 8px; + border: 1px solid rgba(0, 198, 255, 0.3); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.solution-item:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 123, 255, 0.2); +} + +.solution-item img { + width: 80px; /* Adjust icon size */ + height: 80px; + margin-bottom: 20px; +} + +.solution-item h3 { + font-family: 'Space Grotesk', sans-serif; + font-size: 1.5rem; + color: #00c6ff; /* Accent color for headings */ + margin-bottom: 10px; +} + +.industry-benefits ul { + list-style: none; + padding-left: 20px; +} + +.industry-benefits li { + font-family: 'Inter', sans-serif; + font-size: 1.1rem; + color: #e0e0e0; + margin-bottom: 15px; + padding-left: 25px; + position: relative; +} + +.industry-benefits li::before { + content: '•'; /* Bullet point */ + color: #00c6ff; /* Accent color for bullets */ + font-size: 1.5rem; + position: absolute; + left: 0; + top: -2px; +} + +.blogs-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; +} + +.blog-item { + background-color: rgba(13, 39, 77, 0.7); /* Darker, slightly transparent blue */ + padding: 25px; + border-radius: 8px; + border: 1px solid rgba(0, 123, 255, 0.5); + display: flex; + flex-direction: column; + justify-content: space-between; + transition: background-color 0.3s ease; +} + +.blog-item:hover { + background-color: rgba(18, 52, 100, 0.9); +} + +.blog-item h3 { + font-family: 'Space Grotesk', sans-serif; + font-size: 1.6rem; + color: #ffffff; + margin-bottom: 15px; +} + +.blog-item p { + font-family: 'Inter', sans-serif; + font-size: 1rem; + color: #c0c0c0; /* Lighter grey for paragraph */ + line-height: 1.6; + margin-bottom: 20px; + flex-grow: 1; +} + +.blog-item .read-more { + font-family: 'Inter', sans-serif; + font-weight: 500; + color: #00c6ff; + text-decoration: none; + align-self: flex-start; + transition: color 0.3s ease; +} + +.blog-item .read-more:hover { + color: #ffffff; + text-decoration: underline; +} + + +/* FOOTER */ +.footer { + display: flex; + justify-content: space-between; + padding: var(--gap) 0; + border-top: none; + background: none; + backdrop-filter: none; +} +.footer-col { + flex: 1; +} +.footer-col h3 { + /* Styles inherit from global h3, color property removed */ + margin-bottom: 1rem; + font-size: 1.25rem; + /* color: #ffffff; */ /* Removed to inherit global h3 gradient */ +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } + +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* Apply gradient text to all headings for consistency */ +h1, h2, h3, h4, h5, h6 { + font-family: 'Space Grotesk', sans-serif; + background: linear-gradient(90deg, #8A9FFF 0%, #C0CFFF 40%, #FFFFFF 70%); /* Updated gradient for better visibility */ + -webkit-background-clip: text; + background-clip: text; + color: transparent; + text-shadow: 0px 4px 10px rgba(124, 137, 255, 0.8), 0px 2px 5px rgba(0, 0, 0, 0.5); + letter-spacing: 0.7px; + font-weight: 700; +} + +/* Exceptions for headings in special contexts */ +.dropdown-menu h1, .dropdown-menu h2, .dropdown-menu h3, +.dropdown-menu h4, .dropdown-menu h5, .dropdown-menu h6, +.item-title, .item-description { + background: none; + -webkit-background-clip: initial; + background-clip: initial; + color: var(--fg); /* Restore original color */ + text-shadow: none; +} + +.section-heading::after { + content: ''; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 3px; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 70%, #ffffff 100%); +} + +/* Basic styling for manufacturing page - can be moved to style.css */ +.hero-manufacturing { + text-align: center; + padding: 80px 20px; + color: #fff; + background-color: #0a0a23; /* Dark background similar to image */ +} +.hero-manufacturing h1 { + font-size: 3.5rem; + font-family: 'Space Grotesk', sans-serif; + margin-bottom: 20px; +} +.hero-manufacturing p { + font-size: 1.2rem; + max-width: 800px; + margin: 0 auto 40px auto; + line-height: 1.6; +} +.features-grid, .benefits-section, .blogs-section { + padding: 60px 20px; + max-width: 1200px; + margin: 0 auto; + color: #fff; +} +.features-grid h2, .benefits-section h2, .blogs-section h2 { + text-align: center; + font-size: 2.5rem; + font-family: 'Space Grotesk', sans-serif; + margin-bottom: 40px; + color: #fff; +} +.feature-items-container { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + gap: 30px; +} +.feature-item { + background-color: #1c1c3c; /* Darker card background */ + padding: 30px; + border-radius: 10px; + text-align: center; + width: 250px; /* Fixed width for items */ + box-shadow: 0 4px 15px rgba(0,0,0,0.2); +} +.feature-item img { + width: 60px; + height: 60px; + margin-bottom: 15px; +} +.feature-item p { + font-size: 1.1rem; + font-family: 'Inter', sans-serif; + color: #A7BFFF; +} +.benefits-list { + display: flex; + justify-content: space-around; + list-style: none; + padding: 0; + font-size: 1.1rem; + font-family: 'Inter', sans-serif; +} +.benefits-list ul { + list-style: disc; + padding-left: 20px; +} +.benefits-list li { + margin-bottom: 10px; +} +.blog-items-container { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + gap: 30px; +} +.blog-item { + background-color: #1c1c3c; + padding: 30px; + border-radius: 10px; + width: 300px; /* Fixed width for blog items */ + box-shadow: 0 4px 15px rgba(0,0,0,0.2); +} +.blog-item h3 { + font-size: 1.5rem; + font-family: 'Space Grotesk', sans-serif; + margin-bottom: 10px; + color: #fff; +} +.blog-item p { + font-size: 1rem; + font-family: 'Inter', sans-serif; + color: #ccc; + margin-bottom: 20px; +} +.blog-item a { + color: #A7BFFF; + text-decoration: none; + font-weight: 500; +} +.explore-button-container { + text-align: center; + padding: 40px 20px; +} +.explore-button { + background-color: #A7BFFF; + color: #0a0a23; + padding: 15px 30px; + border: none; + border-radius: 5px; + font-size: 1.2rem; + font-family: 'Space Grotesk', sans-serif; + cursor: pointer; + transition: background-color 0.3s ease; +} +.explore-button:hover { + background-color: #8e9fdb; +} + +/* TECHNOLOGIES GRID */ +.tech-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: var(--gap); + justify-items: center; +} +.tech-item { + background: rgba(0, 0, 0, 0.3); + border-radius: 12px; + padding: 1.5rem; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + transition: transform 0.3s, background 0.3s; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.tech-item:hover { + transform: translateY(-5px); + background: rgba(0, 0, 0, 0.65); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); +} +.tech-item img { + width: 100px; + height: 100px; + object-fit: contain; +} +.tech-item p { + margin-top: 0.75rem; + font-size: 1rem; + text-align: center; + color: var(--fg); + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); +} + +/* EXPERTISE GRID */ +.exp-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: var(--gap); + justify-items: center; +} +.exp-item { + background: rgba(0, 0, 0, 0.3); + border-radius: 15px; + padding: 1.5rem; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + transition: transform 0.3s, background 0.3s; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.exp-item:hover { + transform: translateY(-5px); + background: rgba(0, 0, 0, 0.65); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); +} +.exp-item img { + width: 180px; + height: auto; +} +.exp-item p { + margin-top: 0.75rem; + font-size: 1.1rem; + text-align: center; + font-weight: 500; + color: var(--fg); + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); +} + +.about-section { + margin-bottom: var(--gap); /* Use consistent gap variable */ + padding-top: 9rem; /* Adjusted spacing below navbar */ + padding-bottom: 4rem; /* Consistent spacing between sections */ +} + +.about-section h2 { + font-size: 2em; + margin-bottom: 20px; + /* color property removed to let the global gradient take effect */ +} + +.about-section p { + font-size: 1.1em; + line-height: 1.6; + color: #cccccc; +} + +.team-images { + display: flex; + gap: 20px; + margin: 30px 0; +} + +.team-images img { + width: 150px; + height: 150px; + object-fit: cover; + border-radius: 8px; +} + +.mission-vision { + display: flex; + gap: 40px; + margin: 40px 0; +} + +.mission, .vision { + flex: 1; +} + +.mission h2, .vision h2 { + font-size: 1.8em; + margin-bottom: 15px; +} + +.mission p, .vision p { + font-size: 1em; + line-height: 1.5; +} + +.btn { + background: linear-gradient(90deg, #5a6bff, #a2b0ff); + color: white; + padding: 15px 30px; + border: none; + border-radius: 50px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; + display: inline-block; + text-align: center; + width: auto; +} + +.btn:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(74, 0, 224, 0.4); +} + +.btn-primary { + background: linear-gradient(90deg, #5a6bff, #a2b0ff); + color: white; + padding: 15px 30px; + border: none; + border-radius: 50px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; + display: inline-block; + text-align: center; + width: auto; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(74, 0, 224, 0.4); +} + +/* CONTACT PAGE */ +.contact-page-container { + padding-top: 9rem; /* Adjusted spacing below navbar */ + padding-bottom: 4rem; /* Consistent spacing between sections */ + color: #fff; +} + +#contact-us-section .contact-header { + text-align: center; + margin-bottom: 40px; /* Slightly reduced bottom margin */ +} + +#contact-us-section .contact-header h1 { + /* Ensure this inherits the global h1 style by commenting out conflicting properties */ + font-size: 4rem; /* Increased font size */ + /* color: #ffffff; */ /* Assuming this was the original color */ + /* text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5), 0px 2px 5px rgba(0, 0, 0, 0.3); */ + margin-bottom: 20px; /* Adjusted margin */ +} + +#contact-us-section .contact-header p { + font-size: 1.1rem; + color: #ccc; + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +.contact-content { + display: flex; + gap: 2rem; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; +} + +.contact-form-container, +.contact-info-container { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 16px; + padding: 2rem; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + border: 1px solid rgba(255, 255, 255, 0.18); +} + +.contact-form-container { + flex: 2; + min-width: 300px; + max-width: 600px; +} + +.contact-info-container { + flex: 1; + min-width: 250px; + max-width: 400px; + padding: 2rem; +} + +.contact-details { + list-style: none; + padding: 0; + margin-bottom: 2rem; +} + +.contact-details li { + margin-bottom: 1rem; /* Adjusted margin */ + display: flex; + align-items: center; + padding: 1.2rem; /* Adjusted padding */ + background: rgba(255, 255, 255, 0.05); + border-radius: 8px; +} + +.contact-details li i { + margin-right: 1rem; + color: #5a6bff; + font-size: 1.2rem; +} + +.expert-advice-card { + background: rgba(20, 20, 40, 0.7); + border-radius: 12px; + padding: 2rem; + text-align: center; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.expert-advice-card h3 { + margin-top: 0; + color: #a2b0ff; +} + +.expert-advice-card p { + font-size: 1rem; + margin-bottom: 1.5rem; /* Adjusted margin */ + color: rgba(255, 255, 255, 0.8); +} + +.btn-book-consultation { + display: inline-block; + padding: 0.8rem 2rem; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%); + border: none; + border-radius: 8px; + color: white; + text-decoration: none; + font-size: 1rem; + transition: all 0.3s ease; + cursor: pointer; +} + +.btn-book-consultation:hover { + opacity: 0.9; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(90, 107, 255, 0.3); +} + +/* Form group styling */ +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: bold; + color: #a2b0ff; +} + +.form-group input[type="text"], +.form-group input[type="email"], +.form-group select, +.form-group textarea { + width: 100%; + padding: 0.8rem; + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 8px; + background: rgba(255, 255, 255, 0.1); + color: var(--fg); + font-size: 1rem; + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +.form-group input[type="text"]::placeholder, +.form-group input[type="email"]::placeholder, +.form-group textarea::placeholder { + color: rgba(255, 255, 255, 0.6); +} + +.form-group input[type="text"]:focus, +.form-group input[type="email"]:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: #5a6bff; + box-shadow: 0 0 8px rgba(90, 107, 255, 0.5); +} + +.form-group select { + appearance: none; + -webkit-appearance: none; + background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ececec%22%20d%3D%22M287%2C197.9L159.3%2C69.2c-3.7-3.7-9.7-3.7-13.5%2C0L5.4%2C197.9c-3.7%2C3.7-3.7%2C9.7%2C0%2C13.5l13.5%2C13.5c3.7%2C3.7%2C9.7%2C3.7%2C13.5%2C0l118.3-118.3l118.3%2C118.3c3.7%2C3.7%2C9.7%2C3.7%2C13.5%2C0l13.5-13.5C290.7%2C207.6%2C290.7%2C201.6%2C287%2C197.9z%22%2F%3E%3C%2Fsvg%3E'); + background-repeat: no-repeat; + background-position: right 0.8rem top 50%; + background-size: 12px auto; + padding-right: 2.5rem; +} + +.btn-send-message { + display: block; + width: 100%; + padding: 1rem; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%); + border: none; + border-radius: 8px; + color: white; + font-size: 1.1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-send-message:hover { + opacity: 0.9; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(90, 107, 255, 0.3); +} + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 992px) { + .contact-content { + flex-direction: column; + padding: 0; + } + .contact-form-container, + .contact-info-container { + max-width: 100%; + padding-left: 30px; + padding-right: 30px; + } + /* Removed margin-top as margin-bottom on cards handles spacing */ + .contact-info-container { + margin-top: 0; + } + .contact-form-container, .contact-info-container { + flex-basis: 100%; /* Full width on smaller screens */ + max-width: 100%; + } +} + +@media (max-width: 768px) { + #contact-us-section .contact-header h1 { + /* Font size adjusted, other styles inherit */ + font-size: 2.8rem; + } + #contact-us-section .contact-header p { + font-size: 1rem; + } + .contact-form-container input[type="text"], + .contact-form-container input[type="email"], + .contact-form-container select, + .contact-form-container textarea { + padding: 0.6rem; + font-size: 0.9rem; + } + .btn-send-message { + padding: 0.8rem; + font-size: 1rem; + } +} + + + +/* Active Nav Link Style */ +.nav-links .nav-link.active { + color: #ffffff; /* Brighter white for active state */ + font-weight: bold; + /* The underline is now handled by the ::after pseudo-element for consistency */ +} + +.nav-links .nav-link.active::after { + content: ''; + position: absolute; + bottom: -2px; /* Positioned just below the link, adjust if nav-link padding changes */ + left: 7.5%; /* Aligned with the hover underline's final state */ + width: 85%; /* Matches the hover underline's final width */ + height: 3px; /* Matches the hover underline's height */ + background: linear-gradient(90deg, #6e7adf 0%, #a2abff 100%); /* Consistent gradient */ + border-radius: 3px; /* Consistent border radius */ + /* No transition, as it's always visible for the active link */ +} + + +/* Responsive adjustments for contact page */ +@media (max-width: 992px) { + .contact-content { + flex-direction: column; + padding: 0; + } + .contact-form-container, + .contact-info-container { + max-width: 100%; + padding-left: 30px; + padding-right: 30px; + } + /* Removed margin-top as margin-bottom on cards handles spacing */ + .contact-info-container { + margin-top: 0; + } + .contact-form-container, .contact-info-container { + flex-basis: 100%; /* Full width on smaller screens */ + max-width: 100%; + } +} + +@media (max-width: 768px) { + #contact-us-section .contact-header h1 { + /* Font size adjusted, other styles inherit */ + font-size: 2.8rem; + } + #contact-us-section .contact-header p { + font-size: 1rem; + } + .contact-form-container input[type="text"], + .form-group input[type="email"], + .form-group select, + .form-group textarea { + padding: 12px; + font-size: 0.9rem; + } + .btn-send-message { + padding: 12px 25px; + font-size: 0.9rem; + } + .contact-info-container .contact-details li { + font-size: 0.9rem; + margin-bottom: 15px; /* Add spacing between list items */ + } +} + +/* DATA ANALYSIS PAGE STYLES */ + +.hero-section { + padding-top: 12rem; /* Increased top padding */ + padding-bottom: 6rem; /* Increased bottom padding */ + text-align: center; +} + +.hero-section h1 { + font-size: 3.5rem; + margin-bottom: 1rem; +} + +.hero-section p { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.8); +} + +.overview-section, +.key-offerings-section, +.benefits-section, +.related-content-section { + padding: 6rem 0; /* Increased vertical padding for sections */ +} + +.overview-section h2, +.key-offerings-section h2, +.benefits-section h2, +.related-content-section h2 { + font-size: 2rem; + margin-bottom: 2rem; + text-align: center; +} + +.overview-section p { + font-size: 1.1rem; + text-align: center; + max-width: 800px; + margin: 0 auto; + color: rgba(255, 255, 255, 0.7); +} + +.offerings-grid, +.related-content-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 3rem; /* Increased gap between grid items */ + margin-top: 3rem; /* Increased top margin */ +} + +.offering-item, +.related-content-item { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 2.5rem; /* Increased padding within items */ + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.offering-item:hover, +.related-content-item:hover { + transform: translateY(-10px); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); +} + +.offering-icon { + width: 60px; + height: 60px; + margin-bottom: 1.5rem; + filter: drop-shadow(0 0 8px rgba(140, 154, 255, 0.5)); +} + +.offering-item h3, +.related-content-item h3 { + font-size: 1.4rem; + margin-bottom: 0.8rem; + text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7); +} + +.offering-item p, +.related-content-item p { + font-size: 1rem; + color: rgba(255, 255, 255, 0.7); +} + +.benefits-section ul { + list-style: none; + padding: 0; + max-width: 700px; /* Slightly increased max-width */ + margin: 3rem auto; /* Increased top/bottom margin */ +} + +.benefits-section li { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + padding: 1.2rem 1.8rem; /* Increased padding */ + margin-bottom: 1.2rem; /* Increased bottom margin */ + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.9); + position: relative; + padding-left: 3rem; /* Adjusted left padding for bullet */ +} + +.benefits-section li::before { + content: '•'; + position: absolute; + left: 1rem; + color: #a2abff; + font-size: 1.5rem; + line-height: 1; +} + +.read-more { + display: inline-block; + margin-top: 1rem; + color: #a2abff; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; +} + +.read-more:hover { + color: #ffffff; + text-decoration: underline; + padding: 15px; /* Increased padding for list items */ + background-color: rgba(255, 255, 255, 0.08); /* Slightly less subtle background for list items */ + border-radius: 8px; /* Rounded corners for list items */ + border: 1px solid rgba(255, 255, 255, 0.15); /* Slightly stronger border for list items */ + display: flex; /* Use flexbox for icon and text */ + align-items: center; /* Align icon and text vertically */ + transition: background-color 0.3s ease, border-color 0.3s ease; + } + .contact-info-container .contact-details li:last-child { + margin-bottom: 0; + } + .contact-info-container .contact-details li:hover { + background-color: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.25); + } + .contact-info-container .contact-details li i { + font-size: 1.3rem; /* Slightly larger icon */ + margin-right: 12px; /* Increased space between icon and text */ + color: #a2abff; /* Icon color */ + } + + +/* Generative AI Page Styles */ +#generative-ai { + padding-top: 9rem; + padding-bottom: 4rem; + text-align: center; +} + +.generative-ai-header h1 { + font-size: 3em; + margin-bottom: 20px; + /* color property removed to let the global gradient take effect */ +} + +.generative-ai-header p { + font-size: 1.2em; + color: #ccc; + margin-bottom: 10px; +} + +.generative-ai-features { + display: flex; + justify-content: center; + gap: 30px; + margin-top: 50px; + flex-wrap: wrap; +} + +.feature-card { + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + padding: 30px; + width: 280px; + text-align: center; + backdrop-filter: blur(10px); + transition: transform 0.3s ease-in-out; +} + +.feature-card:hover { + transform: translateY(-10px); +} + +.feature-card img { + width: 60px; + height: 60px; + margin-bottom: 20px; +} + +.feature-card h3 { + font-size: 1.5em; + /* color property removed to let the global gradient take effect */ + margin-bottom: 10px; +} + +.feature-card p { + font-size: 1em; + color: #ccc; +} + +.why-choose-gyannetra { + margin-top: 80px; +} + +.why-choose-gyannetra h2 { + font-size: 2.5em; + margin-bottom: 30px; + /* color property removed to let the global gradient take effect */ +} + +.why-choose-items { + display: flex; + justify-content: center; + gap: 50px; + flex-wrap: wrap; +} + +.why-choose-items p { + font-size: 1.2em; + color: #ccc; +} + +.blogs-case-studies { + margin-top: 80px; +} + +.blogs-case-studies h2 { + font-size: 2.5em; + margin-bottom: 30px; + /* color property removed to let the global gradient take effect */ +} + +.blog-cards { + display: flex; + justify-content: center; + gap: 30px; + flex-wrap: wrap; +} + +.blog-card { + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + width: 280px; + overflow: hidden; + text-align: left; + backdrop-filter: blur(10px); + transition: transform 0.3s ease-in-out; +} + +.blog-card:hover { + transform: translateY(-10px); +} + +.blog-card img { + width: 100%; + height: 180px; + object-fit: cover; +} + +.blog-card h3 { + font-size: 1.2em; + color: #fff; + margin: 15px; +} + +.blog-card p { + font-size: 0.9em; + color: #ccc; + margin: 0 15px 15px; +} + +.explore-capabilities { + margin-top: 50px; +} + + +/* INDUSTRY PAGE SPECIFIC STYLES */ +.industry-hero { + padding: 80px 0; + text-align: left; + background: linear-gradient(135deg, rgba(13, 26, 46, 0.8), rgba(18, 36, 64, 0.95)); /* Dark blue gradient */ + position: relative; + overflow: hidden; +} + +.industry-hero-content { + display: flex; + align-items: center; + justify-content: space-between; + gap: 40px; +} + +.industry-hero .hero-text { + max-width: 60%; +} + +.industry-hero h1 { + font-family: 'Space Grotesk', sans-serif; + font-size: 4rem; /* Larger heading */ + font-weight: 700; + color: #ffffff; + margin-bottom: 20px; + line-height: 1.2; +} + +.industry-hero p { + font-family: 'Inter', sans-serif; + font-size: 1.2rem; /* Slightly larger paragraph text */ + color: #e0e0e0; /* Lighter text for contrast */ + line-height: 1.6; + margin-bottom: 30px; +} + +.hero-image-container { + width: 200px; /* Adjust as needed */ + height: 200px; /* Adjust as needed */ +} + +.hero-icon { + width: 100%; + height: 100%; +} + +.industry-solutions, +.industry-benefits, +.industry-blogs { + padding: 60px 0; + text-align: left; +} + +.industry-solutions .section-heading, +.industry-benefits .section-heading, +.industry-blogs .section-heading { + font-family: 'Space Grotesk', sans-serif; + font-size: 2.5rem; + color: #ffffff; + margin-bottom: 40px; + text-align: left; + padding-left: 15px; /* Align with container padding */ +} + +.solutions-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 30px; + text-align: center; +} + +.solution-item { + background-color: rgba(255, 255, 255, 0.05); /* Subtle background */ + padding: 30px 20px; + border-radius: 8px; + border: 1px solid rgba(0, 198, 255, 0.3); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.solution-item:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 123, 255, 0.2); +} + +.solution-item img { + width: 80px; /* Adjust icon size */ + height: 80px; + margin-bottom: 20px; +} + +.solution-item h3 { + font-family: 'Space Grotesk', sans-serif; + font-size: 1.5rem; + color: #00c6ff; /* Accent color for headings */ + margin-bottom: 10px; +} + +.industry-benefits ul { + list-style: none; + padding-left: 20px; +} + +.industry-benefits li { + font-family: 'Inter', sans-serif; + font-size: 1.1rem; + color: #e0e0e0; + margin-bottom: 15px; + padding-left: 25px; + position: relative; +} + +.industry-benefits li::before { + content: '•'; /* Bullet point */ + color: #00c6ff; /* Accent color for bullets */ + font-size: 1.5rem; + position: absolute; + left: 0; + top: -2px; +} + +.blogs-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; +} + +.blog-item { + background-color: rgba(13, 39, 77, 0.7); /* Darker, slightly transparent blue */ + padding: 25px; + border-radius: 8px; + border: 1px solid rgba(0, 123, 255, 0.5); + display: flex; + flex-direction: column; + justify-content: space-between; + transition: background-color 0.3s ease; +} + +.blog-item:hover { + background-color: rgba(18, 52, 100, 0.9); +} + +.blog-item h3 { + font-family: 'Space Grotesk', sans-serif; + font-size: 1.6rem; + color: #ffffff; + margin-bottom: 15px; +} + +.blog-item p { + font-family: 'Inter', sans-serif; + font-size: 1rem; + color: #c0c0c0; /* Lighter grey for paragraph */ + line-height: 1.6; + margin-bottom: 20px; + flex-grow: 1; +} + +.blog-item .read-more { + font-family: 'Inter', sans-serif; + font-weight: 500; + color: #00c6ff; + text-decoration: none; + align-self: flex-start; + transition: color 0.3s ease; +} + +.blog-item .read-more:hover { + color: #ffffff; + text-decoration: underline; +} + + +/* FOOTER */ +.footer { + display: flex; + justify-content: space-between; + padding: var(--gap) 0; + border-top: none; + background: none; + backdrop-filter: none; +} +.footer-col { + flex: 1; +} +.footer-col h3 { + /* Styles inherit from global h3, color property removed */ + margin-bottom: 1rem; + font-size: 1.25rem; + /* color: #ffffff; */ /* Removed to inherit global h3 gradient */ +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem } + +/* Automation Flows Page Styles */ +#automation-flows-hero { + padding-top: 12rem; /* Increased top padding */ + padding-bottom: 6rem; /* Increased bottom padding */ + text-align: center; +} + +#automation-flows-hero h1 { + font-size: 3.5rem; + margin-bottom: 1rem; + /* Inherits global h1 gradient */ +} + +#automation-flows-hero p { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.8); +} + +#featured-solutions, #gyannetra-advantage, #related-content { + padding: 6rem 0; /* Increased vertical padding for sections */ +} + +#featured-solutions h2, #gyannetra-advantage h2, #related-content h2 { + font-size: 2rem; + margin-bottom: 2rem; + text-align: center; + /* Inherits global h2 gradient */ +} + +.offerings-grid, .related-content-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 3rem; /* Increased gap between grid items */ + margin-top: 3rem; /* Increased top margin */ +} + +.offering-item, .related-content-item { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 2.5rem; /* Increased padding within items */ + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.offering-item:hover, .related-content-item:hover { + transform: translateY(-10px); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); +} + +.offering-icon { + width: 60px; + height: 60px; + margin-bottom: 1.5rem; + filter: drop-shadow(0 0 8px rgba(140, 154, 255, 0.5)); +} + +.offering-item h3, .related-content-item h3 { + font-size: 1.4rem; + margin-bottom: 0.8rem; + /* Inherits global h3 gradient */ + text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7); /* Enhanced text shadow for better readability */ +} + +.offering-item p, .related-content-item p { + font-size: 1rem; + color: rgba(255, 255, 255, 0.7); +} + +#gyannetra-advantage ul { + list-style: none; + padding: 0; + max-width: 700px; /* Slightly increased max-width */ + margin: 3rem auto; /* Increased top/bottom margin */ +} + +#gyannetra-advantage li { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + padding: 1.2rem 1.8rem; /* Increased padding */ + margin-bottom: 1.2rem; /* Increased bottom margin */ + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.9); + position: relative; + padding-left: 3rem; /* Adjusted left padding for bullet */ +} + +#gyannetra-advantage li::before { + content: '•'; + position: absolute; + left: 1rem; + color: #a2abff; + font-size: 1.5rem; + line-height: 1; +} + +.related-content-item h4 { + font-size: 1.2rem; + margin-bottom: 0.5rem; + /* Inherits global h4 gradient */ +} + +.btn-book-consultation { + display: inline-block; + padding: 0.8rem 2rem; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%); + border: none; + border-radius: 8px; + color: white; + text-decoration: none; + font-size: 1rem; + transition: all 0.3s ease; + cursor: pointer; +} + +.btn-book-consultation:hover { + opacity: 0.9; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(90, 107, 255, 0.3); +} +/* TRAVEL PAGE STYLES */ +#travel-hero { + background-image: url('../assets/travel-hero-bg.jpg'); /* Placeholder: User should replace with actual image */ + background-size: cover; + background-position: center center; + color: #fff; + text-align: left; + padding: 10rem 0 8rem; + } + +#travel-hero .hero-content h1 { + font-size: 3.5rem; + margin-bottom: 1rem; + text-shadow: 2px 2px 8px rgba(0,0,0,0.7); +} + +#travel-hero .hero-content p { + font-size: 1.2rem; + max-width: 700px; + margin-bottom: 2rem; + text-shadow: 1px 1px 6px rgba(0,0,0,0.6); +} + +#tailored-solutions .solutions-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +#tailored-solutions .solution-item { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 2rem; + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +#tailored-solutions .solution-item:hover { + transform: translateY(-8px); + box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25); +} + +#tailored-solutions .solution-item img { + width: 50px; + height: 50px; + margin-bottom: 1rem; + filter: drop-shadow(0 0 6px rgba(140, 154, 255, 0.4)); +} + +#tailored-solutions .solution-item h3 { + font-size: 1.3rem; + margin-bottom: 0.75rem; + color: #e0e0e0; +} + +#tailored-solutions .solution-item p { + font-size: 0.95rem; + color: rgba(255, 255, 255, 0.75); + line-height: 1.6; +} + +#gyannetra-advantage { + padding: 4rem 0; +} + +#gyannetra-advantage ul { + list-style: none; + padding: 0; + max-width: 800px; + margin: 2rem auto 0; +} + +#gyannetra-advantage li { + background: rgba(20, 20, 40, 0.4); + backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 8px; + padding: 1rem 1.5rem; + margin-bottom: 1rem; + font-size: 1.05rem; + color: rgba(255, 255, 255, 0.85); + position: relative; + padding-left: 2.5rem; +} + +#gyannetra-advantage li::before { + content: ''''; + position: absolute; + left: 1rem; + color: #8c9aff; + font-size: 1.2rem; + font-weight: bold; +} + +#insights-stories .insights-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2.5rem; + margin-top: 3rem; +} + +#insights-stories .insight-item { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 1.5rem; + display: flex; + flex-direction: column; +} + +#insights-stories .insight-item img { + width: 100%; + height: auto; + max-height: 200px; + object-fit: cover; + border-radius: 8px; + margin-bottom: 1rem; +} + +#insights-stories .insight-item .date { + font-size: 0.85rem; + color: rgba(255, 255, 255, 0.6); + margin-bottom: 0.5rem; +} + +#insights-stories .insight-item h4 { + font-size: 1.25rem; + margin-bottom: 0.75rem; + color: #e0e0e0; + flex-grow: 1; +} + +#insights-stories .insight-item .read-more { + display: inline-block; + margin-top: auto; + color: #a2abff; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; + align-self: flex-start; +} + +#insights-stories .insight-item .read-more:hover { + color: #ffffff; + text-decoration: underline; +} + +.industry-hero { + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; + padding-top: 8rem; + width: 100%; + margin: 0; + overflow: hidden; + min-height: 60vh; + background-size: cover; + background-position: center; +} + +.industry-hero .hero-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 0; +} + +.industry-hero .hero-content { + position: relative; + z-index: 1; +} + +.industry-hero .hero-content h1 { + font-size: 3.5rem; + line-height: 1.2; + color: #ffffff; + margin-bottom: 1rem; + text-shadow: 2px 2px 8px rgba(0,0,0,0.7); +} + +.industry-hero .hero-content p { + font-size: 1.2rem; + color: #f0f0f0; + margin-bottom: 2rem; + max-width: 650px; + text-shadow: 1px 1px 6px rgba(0,0,0,0.6); +} + +.industry-hero .btn-primary { + padding: 0.8rem 1.8rem; + font-size: 1rem; +} +/* Retail Page Specific Styles */ + +/* Hero Section */ +.industry-hero .hero-company-name { + font-size: 0.9rem; + font-weight: 500; + color: rgba(236, 236, 236, 0.8); + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 0.5rem; + text-align: left; +} + +#retail-hero .hero-content h1 { + text-align: left; + font-size: 3.5rem; /* Adjust as needed */ +} + +#retail-hero .hero-content p { + text-align: left; + max-width: 100%; +} + +#retail-hero .hero-content .btn-primary { + display: inline-block; + margin-top: 1.5rem; +} + +#retail-hero .hero-content { + display: flex; + flex-direction: column; + align-items: flex-start; +} + + +/* Common Section Padding */ +.section-padding { + padding-top: 4rem; + padding-bottom: 4rem; +} + +/* AI Solutions for Retail Section */ +#ai-solutions-retail .section-heading { + text-align: center; + margin-bottom: 3rem; +} + +.solutions-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + text-align: center; +} + +.solution-item { + padding: 1.5rem; +} + +.solution-item img { + width: 60px; + height: 60px; + margin-bottom: 1rem; + filter: drop-shadow(0 0 8px rgba(52, 152, 219, 0.5)); +} + +.solution-item h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--fg); +} + +.solution-item p { + font-size: 0.9rem; + color: rgba(236, 236, 236, 0.8); +} + +/* The Gyannetra Advantage Section */ +#gyannetra-advantage-retail .section-heading { + text-align: center; + margin-bottom: 3rem; +} + +.gyannetra-advantage-section .advantage-columns { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; /* Gap between the two columns */ + margin-top: 2rem; + justify-content: center; /* Center the columns if they don't fill the width */ +} + +.gyannetra-advantage-section .advantage-list { + list-style: none; + padding-left: 0; /* Remove default padding */ + margin: 0 auto; /* Center the list within its column if needed */ + max-width: 400px; /* Max width for each list if needed */ +} + +.gyannetra-advantage-section .advantage-list li { + font-size: 1.1rem; + color: var(--fg); + padding: 0.5rem 0; + position: relative; + padding-left: 1.7em; /* Space for custom bullet */ + line-height: 1.4; +} + +.gyannetra-advantage-section .advantage-list li::before { + content: "•"; + color: #3498db; + font-size: 1.8em; /* Slightly larger bullet */ + position: absolute; + left: 0; + top: 0.65em; /* Adjust vertical alignment */ + transform: translateY(-50%); + line-height: 1; +} + + +/* Industry Insights & Success Stories Section */ +#insights-stories-retail .section-heading { + text-align: center; + margin-bottom: 3rem; +} + +.insights-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.insight-item { + background: rgba(20, 20, 40, 0.6); + backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + text-align: left; /* Align text to left as per image */ +} + +.insight-item h4 { + font-size: 1.2rem; + font-weight: 600; + margin-bottom: 0.75rem; + color: var(--fg); +} + +.insight-item p { + font-size: 0.9rem; + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; /* Increased space before link */ + flex-grow: 1; +} + +.insight-item .read-more { + display: inline-block; + font-size: 0.9rem; + font-weight: bold; + color: #a2abff; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.5px; + align-self: flex-start; +} + +.insight-item .read-more:hover { + color: #ffffff; + text-decoration: underline; +} diff --git a/css/style.css.bak b/css/style.css.bak new file mode 100644 index 0000000..856f6a3 --- /dev/null +++ b/css/style.css.bak @@ -0,0 +1,28875 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap'); + +/* VARIABLES & RESET */ +:root { + --fg: #ececec; + --btn-bg: rgba(20,20,40,0.8); + --btn-hover: rgba(20,20,40,1); + --gap: 3rem; + --max-w: 1200px; +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +html { + height: 100%; + scroll-behavior: smooth; +} + +body { + background: url('../assets/3293677.jpg') no-repeat center center fixed; + background-size: cover; + color: var(--fg); + font-family: 'Inter', sans-serif; + line-height: 1.5; + margin: 0; + padding: 0; + min-height: 100vh; + overflow-x: hidden; +} + +/* UTILITY CLASSES */ +.container { + width: 92%; + max-width: var(--max-w); + margin: 0 auto; + padding: 2rem 0; +} + +.navbar.container { + width: 100%; + max-width: 1400px; + padding: 0.5rem 2.0rem; +} + +.tech-description, +.exp-description { + font-size: 0.9rem; + color: rgba(255, 255, 255, 0.8); + margin-top: 0.5rem; + line-height: 1.4; +} + + +/* Text Animations */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.hero-content h1, +.hero-content p, +.section-heading, +.tech-item, +.exp-item { + animation: fadeInUp 0.8s ease forwards; +} + +.hero-content h1 { + animation-delay: 0.2s; +} + +.hero-content p { + animation-delay: 0.4s; +} + +.section-heading { + animation-delay: 0.6s; +} + +.tech-item { + animation-delay: 0.8s; +} + +.exp-item { + animation-delay: 1s; +} + + + + +#technologies, #expertise { + padding-top: 7rem; + padding-bottom: 4rem; + position: relative; +} + + +/* GENERATIVE AI SECTION */ +#generative-ai { + padding: 6rem 0; /* Increased vertical padding for sections */ +} + +/* DATA ANALYSIS SECTION */ + +/* Agentic AI Page Styles */ +#agentic-ai { + padding: 80px 0; +} + +.agentic-ai-header { + text-align: center; + margin-bottom: 60px; +} + +.agentic-ai-header h1 { + font-size: 3em; + margin-bottom: 20px; + color: var(--primary-color); +} + +.agentic-ai-header p { + font-size: 1.2em; + color: var(--text-color-secondary); + max-width: 800px; + margin: 0 auto 15px auto; +} + +.key-offerings, +.benefits, +.blogs-case-studies { + margin-bottom: 60px; +} + +.key-offerings h2, +.benefits h2, +.blogs-case-studies h2 { + text-align: center; + font-size: 2em; + margin-bottom: 40px; + color: var(--primary-color); +} + +.offerings-cards { + display: flex; + justify-content: center; + gap: 30px; + flex-wrap: wrap; +} + +.offering-card { + background-color: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: 10px; + padding: 30px; + text-align: center; + max-width: 300px; + transition: transform 0.3s ease; +} + +.offering-card:hover { + transform: translateY(-10px); +} + +.offering-card img { + width: 60px; + height: 60px; + margin-bottom: 20px; +} + +.offering-card h3 { + font-size: 1.5em; + margin-bottom: 15px; + color: var(--text-color-primary); +} + +.offering-card p { + color: var(--text-color-secondary); +} + +.benefits ul { + list-style: disc; + padding-left: 20px; + max-width: 800px; + margin: 0 auto; +} + +.benefits li { + margin-bottom: 15px; + font-size: 1.1em; + color: var(--text-color-secondary); +} + +.blogs-case-studies .blog-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 30px; +} + +.blogs-case-studies .blog-card { + background-color: var(--card-bg); + border: 1px solid var(--border-color); + border-radius: 10px; + padding: 20px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.blogs-case-studies .blog-card img { + width: 100%; + height: auto; + border-radius: 8px; + margin-bottom: 15px; +} + +.blogs-case-studies .blog-card h3 { + font-size: 1.2em; + margin-bottom: 10px; + color: var(--text-color-primary); +} + +.blogs-case-studies .blog-card p { + font-size: 0.9em; + color: var(--text-color-secondary); +} + +.explore-capabilities { + text-align: center; + margin-top: 40px; +} +#data-analysis { + padding: 6rem 0; /* Increased vertical padding for sections */ +} + + +/* NAVBAR */ +.site-header { + position: fixed; + top: 0; + width: 100%; + z-index: 100; + padding: 0.5rem 2.5rem; +} +.navbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.3rem 2.5rem; /* Adjusted vertical padding for shorter height */ + background: rgba(20, 20, 40, 0.25); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); + border-radius: 16px; + max-width: 100%; + margin: 0 auto; +} + +.logo { + font-size: 1.6rem; + font-weight: bold; + text-decoration: none; + letter-spacing: 1.5px; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 50%, #ffffff 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + padding: 0.5rem 0.8rem; + border: 2px solid rgba(90, 107, 255, 0.3); + border-radius: 8px; + transition: all 0.3s ease; + text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); +} + +.logo:hover { + border-color: rgba(140, 154, 255, 0.6); + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(140, 154, 255, 0.2); +} +.nav-links { + list-style: none; + display: flex; + gap: 2rem; /* Slightly reduced gap */ + margin-right: 1rem; +} +.nav-link { + color: var(--fg); + text-decoration: none; + font-size: 1rem; + display: flex; + align-items: center; + padding: 0.7rem 1.2rem; /* Adjusted padding for better feel */ + border-radius: 8px; + transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* More specific transitions */ + position: relative; + letter-spacing: 0.5px; + font-weight: 500; +} +.nav-link:hover { + background: rgba(255, 255, 255, 0.15); + color: #ffffff; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + transform: translateY(-2px); + text-shadow: 0 0 5px rgba(255, 255, 255, 0.3); +} +.nav-link:after { + content: ''; + position: absolute; + bottom: -2px; + left: 50%; + width: 0; + height: 3px; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 70%, #ffffff 100%); + transition: width 0.3s ease-out, left 0.3s ease-out; + border-radius: 3px; +} +.nav-link:hover:after { + width: 85%; + left: 7.5%; +} + +/* MACHINE LEARNING PAGE STYLES */ + +.hero-section { + padding-top: 12rem; /* Increased top padding */ + padding-bottom: 6rem; /* Increased bottom padding */ + text-align: center; +} + +.hero-section h1 { + font-size: 3.5rem; + margin-bottom: 1rem; + /* The gradient styling has been moved to the global h1-h6 style */ +} + +.hero-section p { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.8); +} + +.overview-section, +.key-offerings-section, +.benefits-section, +.related-content-section { + padding: 6rem 0; /* Increased vertical padding for sections */ +} + +.overview-section h2, +.key-offerings-section h2, +.benefits-section h2, +.related-content-section h2 { + font-size: 2rem; + margin-bottom: 2rem; + text-align: center; + /* Removed color property to allow gradient to take effect */ +} + +.overview-section p { + font-size: 1.1rem; + text-align: center; + max-width: 800px; + margin: 0 auto; + color: rgba(255, 255, 255, 0.7); +} + +.offerings-grid, +.related-content-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 3rem; /* Increased gap between grid items */ + margin-top: 3rem; /* Increased top margin */ +} + +.offering-item, +.related-content-item { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 2.5rem; /* Increased padding within items */ + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.offering-item:hover, +.related-content-item:hover { + transform: translateY(-10px); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); +} + +.offering-icon { + width: 60px; + height: 60px; + margin-bottom: 1.5rem; + filter: drop-shadow(0 0 8px rgba(140, 154, 255, 0.5)); +} + +.offering-item h3, +.related-content-item h3 { + font-size: 1.4rem; + margin-bottom: 0.8rem; + /* Color property removed to allow gradient to work */ + text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7); /* Enhanced text shadow for better readability */ +} + +.offering-item p, +.related-content-item p { + font-size: 1rem; + color: rgba(255, 255, 255, 0.7); +} + +.benefits-section ul { + list-style: none; + padding: 0; + max-width: 700px; /* Slightly increased max-width */ + margin: 3rem auto; /* Increased top/bottom margin */ +} + +.benefits-section li { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + padding: 1.2rem 1.8rem; /* Increased padding */ + margin-bottom: 1.2rem; /* Increased bottom margin */ + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.9); + position: relative; + padding-left: 3rem; /* Adjusted left padding for bullet */ +} + +.benefits-section li::before { + content: '•'; + position: absolute; + left: 1rem; + color: #a2abff; + font-size: 1.5rem; + line-height: 1; +} + + +.read-more { + display: inline-block; + margin-top: 1rem; + color: #a2abff; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; +} + +.read-more:hover { + color: #ffffff; + text-decoration: underline; +} + +/* HERO SECTION */ +#hero { + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; + padding-top: 8rem; + width: 100%; + margin: 0; + overflow: hidden; + height: 100vh; + background: none; +} + +.hero-content { + position: relative; + z-index: 1; + width: 100%; +} +.hero-content h1 { + font-size: 4rem; + line-height: 1.1; + /* color property removed to let the global gradient take effect */ + margin-bottom: 1.5rem; +} +.hero-content p { + margin: 1.5rem 0; + font-size: 1.3rem; + opacity: 1; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); + max-width: 600px; + color: var(--fg); + font-weight: 500; +} + + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-menu { + display: grid; + position: absolute; + background-color: #100732; + border-radius: 8px; + padding: 1rem; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); + z-index: 1; + top: 100%; + left: 0; + margin-top: 0.5rem; + opacity: 0; + visibility: hidden; + transform: translateY(10px); + transition: opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease, visibility 0s linear 0.3s; +} + +.industries-dropdown { + grid-template-columns: repeat(3, 1fr); + min-width: 600px; +} + +.services-dropdown { + grid-template-columns: repeat(2, 1fr); + min-width: 450px; +} + +.education-dropdown { + grid-template-columns: 1fr; + min-width: 320px; +} + +.dropdown:hover .industries-dropdown, +.dropdown:hover .services-dropdown, +.dropdown:hover .education-dropdown { + opacity: 1; + visibility: visible; + transform: translateY(0); + margin-top: 0; + transition: opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease, visibility 0s linear 0s; +} + +.dropdown-menu { + padding-top: 0.8rem; +} + +.dropdown-menu::before { + content: ''; + position: absolute; + top: -0.5rem; + left: 0; + width: 100%; + height: 0.5rem; +} + +.dropdown-menu li { + list-style: none; +} + +.dropdown-menu a { + text-decoration: none; + color: var(--fg); + display: block; + padding: 0.5rem; + border-radius: 4px; + transition: background-color 0.3s ease; +} + +.dropdown-menu a:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +.dropdown-item-content { + display: flex; + align-items: center; +} + +.dropdown-icon { + width: 24px; + height: 24px; + margin-right: 0.8rem; + flex-shrink: 0; +} + +.text-content { + display: flex; + flex-direction: column; +} + +.item-title { + font-weight: bold; + font-size: 0.95rem; +} + +.item-description { + font-size: 0.8rem; + opacity: 0.8; +} + +/* SECTION HEADINGS */ +.section-heading { + font-size: 2.5rem; + font-weight: 600; + text-align: center; + margin: var(--gap) 0; + letter-spacing: 0.5px; + /* Using the global gradient instead of a specific one */ + position: relative; + display: inline-block; + width: 100%; + /* The text shadow is already set in the global heading style */ +} + +/* Apply gradient text to all headings for consistency */ +h1, h2, h3, h4, h5, h6 { + font-family: 'Space Grotesk', sans-serif; + background: linear-gradient(90deg, #8A9FFF 0%, #C0CFFF 40%, #FFFFFF 70%); /* Updated gradient for better visibility */ + -webkit-background-clip: text; + background-clip: text; + color: transparent; + text-shadow: 0px 4px 10px rgba(124, 137, 255, 0.8), 0px 2px 5px rgba(0, 0, 0, 0.5); + letter-spacing: 0.7px; + font-weight: 700; +} + +/* Exceptions for headings in special contexts */ +.dropdown-menu h1, .dropdown-menu h2, .dropdown-menu h3, +.dropdown-menu h4, .dropdown-menu h5, .dropdown-menu h6, +.item-title, .item-description { + background: none; + -webkit-background-clip: initial; + background-clip: initial; + color: var(--fg); /* Restore original color */ + text-shadow: none; +} + +.section-heading::after { + content: ''; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 3px; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 70%, #ffffff 100%); +} + +/* TECHNOLOGIES GRID */ +.tech-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: var(--gap); + justify-items: center; +} +.tech-item { + background: rgba(0, 0, 0, 0.3); + border-radius: 12px; + padding: 1.5rem; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + transition: transform 0.3s, background 0.3s; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.tech-item:hover { + transform: translateY(-5px); + background: rgba(0, 0, 0, 0.65); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); +} +.tech-item img { + width: 100px; + height: 100px; + object-fit: contain; +} +.tech-item p { + margin-top: 0.75rem; + font-size: 1rem; + text-align: center; + color: var(--fg); + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); +} + +/* EXPERTISE GRID */ +.exp-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: var(--gap); + justify-items: center; +} +.exp-item { + background: rgba(0, 0, 0, 0.3); + border-radius: 15px; + padding: 1.5rem; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + transition: transform 0.3s, background 0.3s; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.exp-item:hover { + transform: translateY(-5px); + background: rgba(0, 0, 0, 0.65); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); +} +.exp-item img { + width: 180px; + height: auto; +} +.exp-item p { + margin-top: 0.75rem; + font-size: 1.1rem; + text-align: center; + font-weight: 500; + color: var(--fg); + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); +} + +.about-section { + margin-bottom: var(--gap); /* Use consistent gap variable */ + padding-top: 9rem; /* Adjusted spacing below navbar */ + padding-bottom: 4rem; /* Consistent spacing between sections */ +} + +.about-section h2 { + font-size: 2em; + margin-bottom: 20px; + /* color property removed to let the global gradient take effect */ +} + +.about-section p { + font-size: 1.1em; + line-height: 1.6; + color: #cccccc; +} + +.team-images { + display: flex; + gap: 20px; + margin: 30px 0; +} + +.team-images img { + width: 150px; + height: 150px; + object-fit: cover; + border-radius: 8px; +} + +.mission-vision { + display: flex; + gap: 40px; + margin: 40px 0; +} + +.mission, .vision { + flex: 1; +} + +.mission h2, .vision h2 { + font-size: 1.8em; + margin-bottom: 15px; +} + +.mission p, .vision p { + font-size: 1em; + line-height: 1.5; +} + +.btn { + background: linear-gradient(90deg, #5a6bff, #a2b0ff); + color: white; + padding: 15px 30px; + border: none; + border-radius: 50px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; + display: inline-block; + text-align: center; + width: auto; +} + +.btn:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(74, 0, 224, 0.4); +} + +.btn-primary { + background: linear-gradient(90deg, #5a6bff, #a2b0ff); + color: white; + padding: 15px 30px; + border: none; + border-radius: 50px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; + display: inline-block; + text-align: center; + width: auto; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(74, 0, 224, 0.4); +} + +/* CONTACT PAGE */ +.contact-page-container { + padding-top: 9rem; /* Adjusted spacing below navbar */ + padding-bottom: 4rem; /* Consistent spacing between sections */ + color: #fff; +} + +#contact-us-section .contact-header { + text-align: center; + margin-bottom: 40px; /* Slightly reduced bottom margin */ +} + +#contact-us-section .contact-header h1 { + /* Ensure this inherits the global h1 style by commenting out conflicting properties */ + font-size: 4rem; /* Increased font size */ + /* color: #ffffff; */ /* Assuming this was the original color */ + /* text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5), 0px 2px 5px rgba(0, 0, 0, 0.3); */ + margin-bottom: 20px; /* Adjusted margin */ +} + +#contact-us-section .contact-header p { + font-size: 1.1rem; + color: #ccc; + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +.contact-content { + display: flex; + gap: 2rem; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; +} + +.contact-form-container, +.contact-info-container { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 16px; + padding: 2rem; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + border: 1px solid rgba(255, 255, 255, 0.18); +} + +.contact-form-container { + flex: 2; + min-width: 300px; + max-width: 600px; +} + +.contact-info-container { + flex: 1; + min-width: 250px; + max-width: 400px; + padding: 2rem; +} + +.contact-details { + list-style: none; + padding: 0; + margin-bottom: 2rem; +} + +.contact-details li { + margin-bottom: 1rem; /* Adjusted margin */ + display: flex; + align-items: center; + padding: 1.2rem; /* Adjusted padding */ + background: rgba(255, 255, 255, 0.05); + border-radius: 8px; +} + +.contact-details li i { + margin-right: 1rem; + color: #5a6bff; + font-size: 1.2rem; +} + +.expert-advice-card { + background: rgba(20, 20, 40, 0.7); + border-radius: 12px; + padding: 2rem; + text-align: center; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.expert-advice-card h3 { + margin-top: 0; + color: #a2b0ff; +} + +.expert-advice-card p { + font-size: 1rem; + margin-bottom: 1.5rem; /* Adjusted margin */ + color: rgba(255, 255, 255, 0.8); +} + +.btn-book-consultation { + display: inline-block; + padding: 0.8rem 2rem; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%); + border: none; + border-radius: 8px; + color: white; + text-decoration: none; + font-size: 1rem; + transition: all 0.3s ease; + cursor: pointer; +} + +.btn-book-consultation:hover { + opacity: 0.9; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(90, 107, 255, 0.3); +} + +/* Form group styling */ +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: bold; + color: #a2b0ff; +} + +.form-group input[type="text"], +.form-group input[type="email"], +.form-group select, +.form-group textarea { + width: 100%; + padding: 0.8rem; + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 8px; + background: rgba(255, 255, 255, 0.1); + color: var(--fg); + font-size: 1rem; + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +.form-group input[type="text"]::placeholder, +.form-group input[type="email"]::placeholder, +.form-group textarea::placeholder { + color: rgba(255, 255, 255, 0.6); +} + +.form-group input[type="text"]:focus, +.form-group input[type="email"]:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: #5a6bff; + box-shadow: 0 0 8px rgba(90, 107, 255, 0.5); +} + +.form-group select { + appearance: none; + -webkit-appearance: none; + background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ececec%22%20d%3D%22M287%2C197.9L159.3%2C69.2c-3.7-3.7-9.7-3.7-13.5%2C0L5.4%2C197.9c-3.7%2C3.7-3.7%2C9.7%2C0%2C13.5l13.5%2C13.5c3.7%2C3.7%2C9.7%2C3.7%2C13.5%2C0l118.3-118.3l118.3%2C118.3c3.7%2C3.7%2C9.7%2C3.7%2C13.5%2C0l13.5-13.5C290.7%2C207.6%2C290.7%2C201.6%2C287%2C197.9z%22%2F%3E%3C%2Fsvg%3E'); + background-repeat: no-repeat; + background-position: right 0.8rem top 50%; + background-size: 12px auto; + padding-right: 2.5rem; +} + +.btn-send-message { + display: block; + width: 100%; + padding: 1rem; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%); + border: none; + border-radius: 8px; + color: white; + font-size: 1.1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-send-message:hover { + opacity: 0.9; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(90, 107, 255, 0.3); +} + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 992px) { + .contact-content { + flex-direction: column; + padding: 0; + } + .contact-form-container, + .contact-info-container { + max-width: 100%; + padding-left: 30px; + padding-right: 30px; + } + /* Removed margin-top as margin-bottom on cards handles spacing */ + .contact-info-container { + margin-top: 0; + } + .contact-form-container, .contact-info-container { + flex-basis: 100%; /* Full width on smaller screens */ + max-width: 100%; + } +} + +@media (max-width: 768px) { + #contact-us-section .contact-header h1 { + /* Font size adjusted, other styles inherit */ + font-size: 2.8rem; + } + #contact-us-section .contact-header p { + font-size: 1rem; + } + .contact-form-container input[type="text"], + .contact-form-container input[type="email"], + .contact-form-container select, + .contact-form-container textarea { + padding: 0.6rem; + font-size: 0.9rem; + } + .btn-send-message { + padding: 0.8rem; + font-size: 1rem; + } +} + + + +/* Active Nav Link Style */ +.nav-links .nav-link.active { + color: #ffffff; /* Brighter white for active state */ + font-weight: bold; + /* The underline is now handled by the ::after pseudo-element for consistency */ +} + +.nav-links .nav-link.active::after { + content: ''; + position: absolute; + bottom: -2px; /* Positioned just below the link, adjust if nav-link padding changes */ + left: 7.5%; /* Aligned with the hover underline's final state */ + width: 85%; /* Matches the hover underline's final width */ + height: 3px; /* Matches the hover underline's height */ + background: linear-gradient(90deg, #6e7adf 0%, #a2abff 100%); /* Consistent gradient */ + border-radius: 3px; /* Consistent border radius */ + /* No transition, as it's always visible for the active link */ +} + + +/* Responsive adjustments for contact page */ +@media (max-width: 992px) { + .contact-content { + flex-direction: column; + padding: 0; + } + .contact-form-container, + .contact-info-container { + max-width: 100%; + padding-left: 30px; + padding-right: 30px; + } + /* Removed margin-top as margin-bottom on cards handles spacing */ + .contact-info-container { + margin-top: 0; + } + .contact-form-container, .contact-info-container { + flex-basis: 100%; /* Full width on smaller screens */ + max-width: 100%; + } +} + +@media (max-width: 768px) { + #contact-us-section .contact-header h1 { + /* Font size adjusted, other styles inherit */ + font-size: 2.8rem; + } + #contact-us-section .contact-header p { + font-size: 1rem; + } + .contact-form-container input[type="text"], + .form-group input[type="email"], + .form-group select, + .form-group textarea { + padding: 12px; + font-size: 0.9rem; + } + .btn-send-message { + padding: 12px 25px; + font-size: 0.9rem; + } + .contact-info-container .contact-details li { + font-size: 0.9rem; + margin-bottom: 15px; /* Add spacing between list items */ + } +} + +/* DATA ANALYSIS PAGE STYLES */ + +.hero-section { + padding-top: 12rem; /* Increased top padding */ + padding-bottom: 6rem; /* Increased bottom padding */ + text-align: center; +} + +.hero-section h1 { + font-size: 3.5rem; + margin-bottom: 1rem; +} + +.hero-section p { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.8); +} + +.overview-section, +.key-offerings-section, +.benefits-section, +.related-content-section { + padding: 6rem 0; /* Increased vertical padding for sections */ +} + +.overview-section h2, +.key-offerings-section h2, +.benefits-section h2, +.related-content-section h2 { + font-size: 2rem; + margin-bottom: 2rem; + text-align: center; +} + +.overview-section p { + font-size: 1.1rem; + text-align: center; + max-width: 800px; + margin: 0 auto; + color: rgba(255, 255, 255, 0.7); +} + +.offerings-grid, +.related-content-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 3rem; /* Increased gap between grid items */ + margin-top: 3rem; /* Increased top margin */ +} + +.offering-item, +.related-content-item { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 2.5rem; /* Increased padding within items */ + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.offering-item:hover, +.related-content-item:hover { + transform: translateY(-10px); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); +} + +.offering-icon { + width: 60px; + height: 60px; + margin-bottom: 1.5rem; + filter: drop-shadow(0 0 8px rgba(140, 154, 255, 0.5)); +} + +.offering-item h3, +.related-content-item h3 { + font-size: 1.4rem; + margin-bottom: 0.8rem; + text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7); +} + +.offering-item p, +.related-content-item p { + font-size: 1rem; + color: rgba(255, 255, 255, 0.7); +} + +.benefits-section ul { + list-style: none; + padding: 0; + max-width: 700px; /* Slightly increased max-width */ + margin: 3rem auto; /* Increased top/bottom margin */ +} + +.benefits-section li { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + padding: 1.2rem 1.8rem; /* Increased padding */ + margin-bottom: 1.2rem; /* Increased bottom margin */ + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.9); + position: relative; + padding-left: 3rem; /* Adjusted left padding for bullet */ +} + +.benefits-section li::before { + content: '•'; + position: absolute; + left: 1rem; + color: #a2abff; + font-size: 1.5rem; + line-height: 1; +} + +.read-more { + display: inline-block; + margin-top: 1rem; + color: #a2abff; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; +} + +.read-more:hover { + color: #ffffff; + text-decoration: underline; + padding: 15px; /* Increased padding for list items */ + background-color: rgba(255, 255, 255, 0.08); /* Slightly less subtle background for list items */ + border-radius: 8px; /* Rounded corners for list items */ + border: 1px solid rgba(255, 255, 255, 0.15); /* Slightly stronger border for list items */ + display: flex; /* Use flexbox for icon and text */ + align-items: center; /* Align icon and text vertically */ + transition: background-color 0.3s ease, border-color 0.3s ease; + } + .contact-info-container .contact-details li:last-child { + margin-bottom: 0; + } + .contact-info-container .contact-details li:hover { + background-color: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.25); + } + .contact-info-container .contact-details li i { + font-size: 1.3rem; /* Slightly larger icon */ + margin-right: 12px; /* Increased space between icon and text */ + color: #a2abff; /* Icon color */ + } + + +/* Generative AI Page Styles */ +#generative-ai { + padding-top: 9rem; + padding-bottom: 4rem; + text-align: center; +} + +.generative-ai-header h1 { + font-size: 3em; + margin-bottom: 20px; + /* color property removed to let the global gradient take effect */ +} + +.generative-ai-header p { + font-size: 1.2em; + color: #ccc; + margin-bottom: 10px; +} + +.generative-ai-features { + display: flex; + justify-content: center; + gap: 30px; + margin-top: 50px; + flex-wrap: wrap; +} + +.feature-card { + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + padding: 30px; + width: 280px; + text-align: center; + backdrop-filter: blur(10px); + transition: transform 0.3s ease-in-out; +} + +.feature-card:hover { + transform: translateY(-10px); +} + +.feature-card img { + width: 60px; + height: 60px; + margin-bottom: 20px; +} + +.feature-card h3 { + font-size: 1.5em; + /* color property removed to let the global gradient take effect */ + margin-bottom: 10px; +} + +.feature-card p { + font-size: 1em; + color: #ccc; +} + +.why-choose-gyannetra { + margin-top: 80px; +} + +.why-choose-gyannetra h2 { + font-size: 2.5em; + margin-bottom: 30px; + /* color property removed to let the global gradient take effect */ +} + +.why-choose-items { + display: flex; + justify-content: center; + gap: 50px; + flex-wrap: wrap; +} + +.why-choose-items p { + font-size: 1.2em; + color: #ccc; +} + +.blogs-case-studies { + margin-top: 80px; +} + +.blogs-case-studies h2 { + font-size: 2.5em; + margin-bottom: 30px; + /* color property removed to let the global gradient take effect */ +} + +.blog-cards { + display: flex; + justify-content: center; + gap: 30px; + flex-wrap: wrap; +} + +.blog-card { + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + width: 280px; + overflow: hidden; + text-align: left; + backdrop-filter: blur(10px); + transition: transform 0.3s ease-in-out; +} + +.blog-card:hover { + transform: translateY(-10px); +} + +.blog-card img { + width: 100%; + height: 180px; + object-fit: cover; +} + +.blog-card h3 { + font-size: 1.2em; + color: #fff; + margin: 15px; +} + +.blog-card p { + font-size: 0.9em; + color: #ccc; + margin: 0 15px 15px; +} + +.explore-capabilities { + margin-top: 50px; +} + + +/* INDUSTRY PAGE SPECIFIC STYLES */ +.industry-hero { + padding: 80px 0; + text-align: left; + background: linear-gradient(135deg, rgba(13, 26, 46, 0.8), rgba(18, 36, 64, 0.95)); /* Dark blue gradient */ + position: relative; + overflow: hidden; +} + +.industry-hero-content { + display: flex; + align-items: center; + justify-content: space-between; + gap: 40px; +} + +.industry-hero .hero-text { + max-width: 60%; +} + +.industry-hero h1 { + font-family: 'Space Grotesk', sans-serif; + font-size: 4rem; /* Larger heading */ + font-weight: 700; + color: #ffffff; + margin-bottom: 20px; + line-height: 1.2; +} + +.industry-hero p { + font-family: 'Inter', sans-serif; + font-size: 1.2rem; /* Slightly larger paragraph text */ + color: #e0e0e0; /* Lighter text for contrast */ + line-height: 1.6; + margin-bottom: 30px; +} + +.hero-image-container { + width: 200px; /* Adjust as needed */ + height: 200px; /* Adjust as needed */ +} + +.hero-icon { + width: 100%; + height: 100%; +} + +.industry-solutions, +.industry-benefits, +.industry-blogs { + padding: 60px 0; + text-align: left; +} + +.industry-solutions .section-heading, +.industry-benefits .section-heading, +.industry-blogs .section-heading { + font-family: 'Space Grotesk', sans-serif; + font-size: 2.5rem; + color: #ffffff; + margin-bottom: 40px; + text-align: left; + padding-left: 15px; /* Align with container padding */ +} + +.solutions-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 30px; + text-align: center; +} + +.solution-item { + background-color: rgba(255, 255, 255, 0.05); /* Subtle background */ + padding: 30px 20px; + border-radius: 8px; + border: 1px solid rgba(0, 198, 255, 0.3); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.solution-item:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 123, 255, 0.2); +} + +.solution-item img { + width: 80px; /* Adjust icon size */ + height: 80px; + margin-bottom: 20px; +} + +.solution-item h3 { + font-family: 'Space Grotesk', sans-serif; + font-size: 1.5rem; + color: #00c6ff; /* Accent color for headings */ + margin-bottom: 10px; +} + +.industry-benefits ul { + list-style: none; + padding-left: 20px; +} + +.industry-benefits li { + font-family: 'Inter', sans-serif; + font-size: 1.1rem; + color: #e0e0e0; + margin-bottom: 15px; + padding-left: 25px; + position: relative; +} + +.industry-benefits li::before { + content: '•'; /* Bullet point */ + color: #00c6ff; /* Accent color for bullets */ + font-size: 1.5rem; + position: absolute; + left: 0; + top: -2px; +} + +.blogs-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; +} + +.blog-item { + background-color: rgba(13, 39, 77, 0.7); /* Darker, slightly transparent blue */ + padding: 25px; + border-radius: 8px; + border: 1px solid rgba(0, 123, 255, 0.5); + display: flex; + flex-direction: column; + justify-content: space-between; + transition: background-color 0.3s ease; +} + +.blog-item:hover { + background-color: rgba(18, 52, 100, 0.9); +} + +.blog-item h3 { + font-family: 'Space Grotesk', sans-serif; + font-size: 1.6rem; + color: #ffffff; + margin-bottom: 15px; +} + +.blog-item p { + font-family: 'Inter', sans-serif; + font-size: 1rem; + color: #c0c0c0; /* Lighter grey for paragraph */ + line-height: 1.6; + margin-bottom: 20px; + flex-grow: 1; +} + +.blog-item .read-more { + font-family: 'Inter', sans-serif; + font-weight: 500; + color: #00c6ff; + text-decoration: none; + align-self: flex-start; + transition: color 0.3s ease; +} + +.blog-item .read-more:hover { + color: #ffffff; + text-decoration: underline; +} + + +/* FOOTER */ +.footer { + display: flex; + justify-content: space-between; + padding: var(--gap) 0; + border-top: none; + background: none; + backdrop-filter: none; +} +.footer-col { + flex: 1; +} +.footer-col h3 { + /* Styles inherit from global h3, color property removed */ + margin-bottom: 1rem; + font-size: 1.25rem; + /* color: #ffffff; */ /* Removed to inherit global h3 gradient */ +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } + +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* Apply gradient text to all headings for consistency */ +h1, h2, h3, h4, h5, h6 { + font-family: 'Space Grotesk', sans-serif; + background: linear-gradient(90deg, #8A9FFF 0%, #C0CFFF 40%, #FFFFFF 70%); /* Updated gradient for better visibility */ + -webkit-background-clip: text; + background-clip: text; + color: transparent; + text-shadow: 0px 4px 10px rgba(124, 137, 255, 0.8), 0px 2px 5px rgba(0, 0, 0, 0.5); + letter-spacing: 0.7px; + font-weight: 700; +} + +/* Exceptions for headings in special contexts */ +.dropdown-menu h1, .dropdown-menu h2, .dropdown-menu h3, +.dropdown-menu h4, .dropdown-menu h5, .dropdown-menu h6, +.item-title, .item-description { + background: none; + -webkit-background-clip: initial; + background-clip: initial; + color: var(--fg); /* Restore original color */ + text-shadow: none; +} + +.section-heading::after { + content: ''; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 80px; + height: 3px; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 70%, #ffffff 100%); +} + +/* Basic styling for manufacturing page - can be moved to style.css */ +.hero-manufacturing { + text-align: center; + padding: 80px 20px; + color: #fff; + background-color: #0a0a23; /* Dark background similar to image */ +} +.hero-manufacturing h1 { + font-size: 3.5rem; + font-family: 'Space Grotesk', sans-serif; + margin-bottom: 20px; +} +.hero-manufacturing p { + font-size: 1.2rem; + max-width: 800px; + margin: 0 auto 40px auto; + line-height: 1.6; +} +.features-grid, .benefits-section, .blogs-section { + padding: 60px 20px; + max-width: 1200px; + margin: 0 auto; + color: #fff; +} +.features-grid h2, .benefits-section h2, .blogs-section h2 { + text-align: center; + font-size: 2.5rem; + font-family: 'Space Grotesk', sans-serif; + margin-bottom: 40px; + color: #fff; +} +.feature-items-container { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + gap: 30px; +} +.feature-item { + background-color: #1c1c3c; /* Darker card background */ + padding: 30px; + border-radius: 10px; + text-align: center; + width: 250px; /* Fixed width for items */ + box-shadow: 0 4px 15px rgba(0,0,0,0.2); +} +.feature-item img { + width: 60px; + height: 60px; + margin-bottom: 15px; +} +.feature-item p { + font-size: 1.1rem; + font-family: 'Inter', sans-serif; + color: #A7BFFF; +} +.benefits-list { + display: flex; + justify-content: space-around; + list-style: none; + padding: 0; + font-size: 1.1rem; + font-family: 'Inter', sans-serif; +} +.benefits-list ul { + list-style: disc; + padding-left: 20px; +} +.benefits-list li { + margin-bottom: 10px; +} +.blog-items-container { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + gap: 30px; +} +.blog-item { + background-color: #1c1c3c; + padding: 30px; + border-radius: 10px; + width: 300px; /* Fixed width for blog items */ + box-shadow: 0 4px 15px rgba(0,0,0,0.2); +} +.blog-item h3 { + font-size: 1.5rem; + font-family: 'Space Grotesk', sans-serif; + margin-bottom: 10px; + color: #fff; +} +.blog-item p { + font-size: 1rem; + font-family: 'Inter', sans-serif; + color: #ccc; + margin-bottom: 20px; +} +.blog-item a { + color: #A7BFFF; + text-decoration: none; + font-weight: 500; +} +.explore-button-container { + text-align: center; + padding: 40px 20px; +} +.explore-button { + background-color: #A7BFFF; + color: #0a0a23; + padding: 15px 30px; + border: none; + border-radius: 5px; + font-size: 1.2rem; + font-family: 'Space Grotesk', sans-serif; + cursor: pointer; + transition: background-color 0.3s ease; +} +.explore-button:hover { + background-color: #8e9fdb; +} + +/* TECHNOLOGIES GRID */ +.tech-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + gap: var(--gap); + justify-items: center; +} +.tech-item { + background: rgba(0, 0, 0, 0.3); + border-radius: 12px; + padding: 1.5rem; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + transition: transform 0.3s, background 0.3s; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.tech-item:hover { + transform: translateY(-5px); + background: rgba(0, 0, 0, 0.65); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); +} +.tech-item img { + width: 100px; + height: 100px; + object-fit: contain; +} +.tech-item p { + margin-top: 0.75rem; + font-size: 1rem; + text-align: center; + color: var(--fg); + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); +} + +/* EXPERTISE GRID */ +.exp-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: var(--gap); + justify-items: center; +} +.exp-item { + background: rgba(0, 0, 0, 0.3); + border-radius: 15px; + padding: 1.5rem; + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + transition: transform 0.3s, background 0.3s; + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.exp-item:hover { + transform: translateY(-5px); + background: rgba(0, 0, 0, 0.65); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); +} +.exp-item img { + width: 180px; + height: auto; +} +.exp-item p { + margin-top: 0.75rem; + font-size: 1.1rem; + text-align: center; + font-weight: 500; + color: var(--fg); + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); +} + +.about-section { + margin-bottom: var(--gap); /* Use consistent gap variable */ + padding-top: 9rem; /* Adjusted spacing below navbar */ + padding-bottom: 4rem; /* Consistent spacing between sections */ +} + +.about-section h2 { + font-size: 2em; + margin-bottom: 20px; + /* color property removed to let the global gradient take effect */ +} + +.about-section p { + font-size: 1.1em; + line-height: 1.6; + color: #cccccc; +} + +.team-images { + display: flex; + gap: 20px; + margin: 30px 0; +} + +.team-images img { + width: 150px; + height: 150px; + object-fit: cover; + border-radius: 8px; +} + +.mission-vision { + display: flex; + gap: 40px; + margin: 40px 0; +} + +.mission, .vision { + flex: 1; +} + +.mission h2, .vision h2 { + font-size: 1.8em; + margin-bottom: 15px; +} + +.mission p, .vision p { + font-size: 1em; + line-height: 1.5; +} + +.btn { + background: linear-gradient(90deg, #5a6bff, #a2b0ff); + color: white; + padding: 15px 30px; + border: none; + border-radius: 50px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; + display: inline-block; + text-align: center; + width: auto; +} + +.btn:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(74, 0, 224, 0.4); +} + +.btn-primary { + background: linear-gradient(90deg, #5a6bff, #a2b0ff); + color: white; + padding: 15px 30px; + border: none; + border-radius: 50px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; + display: inline-block; + text-align: center; + width: auto; +} + +.btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 10px 20px rgba(74, 0, 224, 0.4); +} + +/* CONTACT PAGE */ +.contact-page-container { + padding-top: 9rem; /* Adjusted spacing below navbar */ + padding-bottom: 4rem; /* Consistent spacing between sections */ + color: #fff; +} + +#contact-us-section .contact-header { + text-align: center; + margin-bottom: 40px; /* Slightly reduced bottom margin */ +} + +#contact-us-section .contact-header h1 { + /* Ensure this inherits the global h1 style by commenting out conflicting properties */ + font-size: 4rem; /* Increased font size */ + /* color: #ffffff; */ /* Assuming this was the original color */ + /* text-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5), 0px 2px 5px rgba(0, 0, 0, 0.3); */ + margin-bottom: 20px; /* Adjusted margin */ +} + +#contact-us-section .contact-header p { + font-size: 1.1rem; + color: #ccc; + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +.contact-content { + display: flex; + gap: 2rem; + flex-wrap: wrap; + justify-content: center; + align-items: flex-start; +} + +.contact-form-container, +.contact-info-container { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + border-radius: 16px; + padding: 2rem; + box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); + border: 1px solid rgba(255, 255, 255, 0.18); +} + +.contact-form-container { + flex: 2; + min-width: 300px; + max-width: 600px; +} + +.contact-info-container { + flex: 1; + min-width: 250px; + max-width: 400px; + padding: 2rem; +} + +.contact-details { + list-style: none; + padding: 0; + margin-bottom: 2rem; +} + +.contact-details li { + margin-bottom: 1rem; /* Adjusted margin */ + display: flex; + align-items: center; + padding: 1.2rem; /* Adjusted padding */ + background: rgba(255, 255, 255, 0.05); + border-radius: 8px; +} + +.contact-details li i { + margin-right: 1rem; + color: #5a6bff; + font-size: 1.2rem; +} + +.expert-advice-card { + background: rgba(20, 20, 40, 0.7); + border-radius: 12px; + padding: 2rem; + text-align: center; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.expert-advice-card h3 { + margin-top: 0; + color: #a2b0ff; +} + +.expert-advice-card p { + font-size: 1rem; + margin-bottom: 1.5rem; /* Adjusted margin */ + color: rgba(255, 255, 255, 0.8); +} + +.btn-book-consultation { + display: inline-block; + padding: 0.8rem 2rem; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%); + border: none; + border-radius: 8px; + color: white; + text-decoration: none; + font-size: 1rem; + transition: all 0.3s ease; + cursor: pointer; +} + +.btn-book-consultation:hover { + opacity: 0.9; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(90, 107, 255, 0.3); +} + +/* Form group styling */ +.form-group { + margin-bottom: 1.5rem; +} + +.form-group label { + display: block; + margin-bottom: 0.5rem; + font-weight: bold; + color: #a2b0ff; +} + +.form-group input[type="text"], +.form-group input[type="email"], +.form-group select, +.form-group textarea { + width: 100%; + padding: 0.8rem; + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 8px; + background: rgba(255, 255, 255, 0.1); + color: var(--fg); + font-size: 1rem; + transition: border-color 0.3s ease, box-shadow 0.3s ease; +} + +.form-group input[type="text"]::placeholder, +.form-group input[type="email"]::placeholder, +.form-group textarea::placeholder { + color: rgba(255, 255, 255, 0.6); +} + +.form-group input[type="text"]:focus, +.form-group input[type="email"]:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: #5a6bff; + box-shadow: 0 0 8px rgba(90, 107, 255, 0.5); +} + +.form-group select { + appearance: none; + -webkit-appearance: none; + background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ececec%22%20d%3D%22M287%2C197.9L159.3%2C69.2c-3.7-3.7-9.7-3.7-13.5%2C0L5.4%2C197.9c-3.7%2C3.7-3.7%2C9.7%2C0%2C13.5l13.5%2C13.5c3.7%2C3.7%2C9.7%2C3.7%2C13.5%2C0l118.3-118.3l118.3%2C118.3c3.7%2C3.7%2C9.7%2C3.7%2C13.5%2C0l13.5-13.5C290.7%2C207.6%2C290.7%2C201.6%2C287%2C197.9z%22%2F%3E%3C%2Fsvg%3E'); + background-repeat: no-repeat; + background-position: right 0.8rem top 50%; + background-size: 12px auto; + padding-right: 2.5rem; +} + +.btn-send-message { + display: block; + width: 100%; + padding: 1rem; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%); + border: none; + border-radius: 8px; + color: white; + font-size: 1.1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-send-message:hover { + opacity: 0.9; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(90, 107, 255, 0.3); +} + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 992px) { + .contact-content { + flex-direction: column; + padding: 0; + } + .contact-form-container, + .contact-info-container { + max-width: 100%; + padding-left: 30px; + padding-right: 30px; + } + /* Removed margin-top as margin-bottom on cards handles spacing */ + .contact-info-container { + margin-top: 0; + } + .contact-form-container, .contact-info-container { + flex-basis: 100%; /* Full width on smaller screens */ + max-width: 100%; + } +} + +@media (max-width: 768px) { + #contact-us-section .contact-header h1 { + /* Font size adjusted, other styles inherit */ + font-size: 2.8rem; + } + #contact-us-section .contact-header p { + font-size: 1rem; + } + .contact-form-container input[type="text"], + .contact-form-container input[type="email"], + .contact-form-container select, + .contact-form-container textarea { + padding: 0.6rem; + font-size: 0.9rem; + } + .btn-send-message { + padding: 0.8rem; + font-size: 1rem; + } +} + + + +/* Active Nav Link Style */ +.nav-links .nav-link.active { + color: #ffffff; /* Brighter white for active state */ + font-weight: bold; + /* The underline is now handled by the ::after pseudo-element for consistency */ +} + +.nav-links .nav-link.active::after { + content: ''; + position: absolute; + bottom: -2px; /* Positioned just below the link, adjust if nav-link padding changes */ + left: 7.5%; /* Aligned with the hover underline's final state */ + width: 85%; /* Matches the hover underline's final width */ + height: 3px; /* Matches the hover underline's height */ + background: linear-gradient(90deg, #6e7adf 0%, #a2abff 100%); /* Consistent gradient */ + border-radius: 3px; /* Consistent border radius */ + /* No transition, as it's always visible for the active link */ +} + + +/* Responsive adjustments for contact page */ +@media (max-width: 992px) { + .contact-content { + flex-direction: column; + padding: 0; + } + .contact-form-container, + .contact-info-container { + max-width: 100%; + padding-left: 30px; + padding-right: 30px; + } + /* Removed margin-top as margin-bottom on cards handles spacing */ + .contact-info-container { + margin-top: 0; + } + .contact-form-container, .contact-info-container { + flex-basis: 100%; /* Full width on smaller screens */ + max-width: 100%; + } +} + +@media (max-width: 768px) { + #contact-us-section .contact-header h1 { + /* Font size adjusted, other styles inherit */ + font-size: 2.8rem; + } + #contact-us-section .contact-header p { + font-size: 1rem; + } + .contact-form-container input[type="text"], + .form-group input[type="email"], + .form-group select, + .form-group textarea { + padding: 12px; + font-size: 0.9rem; + } + .btn-send-message { + padding: 12px 25px; + font-size: 0.9rem; + } + .contact-info-container .contact-details li { + font-size: 0.9rem; + margin-bottom: 15px; /* Add spacing between list items */ + } +} + +/* DATA ANALYSIS PAGE STYLES */ + +.hero-section { + padding-top: 12rem; /* Increased top padding */ + padding-bottom: 6rem; /* Increased bottom padding */ + text-align: center; +} + +.hero-section h1 { + font-size: 3.5rem; + margin-bottom: 1rem; +} + +.hero-section p { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.8); +} + +.overview-section, +.key-offerings-section, +.benefits-section, +.related-content-section { + padding: 6rem 0; /* Increased vertical padding for sections */ +} + +.overview-section h2, +.key-offerings-section h2, +.benefits-section h2, +.related-content-section h2 { + font-size: 2rem; + margin-bottom: 2rem; + text-align: center; +} + +.overview-section p { + font-size: 1.1rem; + text-align: center; + max-width: 800px; + margin: 0 auto; + color: rgba(255, 255, 255, 0.7); +} + +.offerings-grid, +.related-content-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 3rem; /* Increased gap between grid items */ + margin-top: 3rem; /* Increased top margin */ +} + +.offering-item, +.related-content-item { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 2.5rem; /* Increased padding within items */ + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.offering-item:hover, +.related-content-item:hover { + transform: translateY(-10px); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); +} + +.offering-icon { + width: 60px; + height: 60px; + margin-bottom: 1.5rem; + filter: drop-shadow(0 0 8px rgba(140, 154, 255, 0.5)); +} + +.offering-item h3, +.related-content-item h3 { + font-size: 1.4rem; + margin-bottom: 0.8rem; + text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7); +} + +.offering-item p, +.related-content-item p { + font-size: 1rem; + color: rgba(255, 255, 255, 0.7); +} + +.benefits-section ul { + list-style: none; + padding: 0; + max-width: 700px; /* Slightly increased max-width */ + margin: 3rem auto; /* Increased top/bottom margin */ +} + +.benefits-section li { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + padding: 1.2rem 1.8rem; /* Increased padding */ + margin-bottom: 1.2rem; /* Increased bottom margin */ + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.9); + position: relative; + padding-left: 3rem; /* Adjusted left padding for bullet */ +} + +.benefits-section li::before { + content: '•'; + position: absolute; + left: 1rem; + color: #a2abff; + font-size: 1.5rem; + line-height: 1; +} + +.read-more { + display: inline-block; + margin-top: 1rem; + color: #a2abff; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; +} + +.read-more:hover { + color: #ffffff; + text-decoration: underline; + padding: 15px; /* Increased padding for list items */ + background-color: rgba(255, 255, 255, 0.08); /* Slightly less subtle background for list items */ + border-radius: 8px; /* Rounded corners for list items */ + border: 1px solid rgba(255, 255, 255, 0.15); /* Slightly stronger border for list items */ + display: flex; /* Use flexbox for icon and text */ + align-items: center; /* Align icon and text vertically */ + transition: background-color 0.3s ease, border-color 0.3s ease; + } + .contact-info-container .contact-details li:last-child { + margin-bottom: 0; + } + .contact-info-container .contact-details li:hover { + background-color: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.25); + } + .contact-info-container .contact-details li i { + font-size: 1.3rem; /* Slightly larger icon */ + margin-right: 12px; /* Increased space between icon and text */ + color: #a2abff; /* Icon color */ + } + + +/* Generative AI Page Styles */ +#generative-ai { + padding-top: 9rem; + padding-bottom: 4rem; + text-align: center; +} + +.generative-ai-header h1 { + font-size: 3em; + margin-bottom: 20px; + /* color property removed to let the global gradient take effect */ +} + +.generative-ai-header p { + font-size: 1.2em; + color: #ccc; + margin-bottom: 10px; +} + +.generative-ai-features { + display: flex; + justify-content: center; + gap: 30px; + margin-top: 50px; + flex-wrap: wrap; +} + +.feature-card { + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + padding: 30px; + width: 280px; + text-align: center; + backdrop-filter: blur(10px); + transition: transform 0.3s ease-in-out; +} + +.feature-card:hover { + transform: translateY(-10px); +} + +.feature-card img { + width: 60px; + height: 60px; + margin-bottom: 20px; +} + +.feature-card h3 { + font-size: 1.5em; + /* color property removed to let the global gradient take effect */ + margin-bottom: 10px; +} + +.feature-card p { + font-size: 1em; + color: #ccc; +} + +.why-choose-gyannetra { + margin-top: 80px; +} + +.why-choose-gyannetra h2 { + font-size: 2.5em; + margin-bottom: 30px; + /* color property removed to let the global gradient take effect */ +} + +.why-choose-items { + display: flex; + justify-content: center; + gap: 50px; + flex-wrap: wrap; +} + +.why-choose-items p { + font-size: 1.2em; + color: #ccc; +} + +.blogs-case-studies { + margin-top: 80px; +} + +.blogs-case-studies h2 { + font-size: 2.5em; + margin-bottom: 30px; + /* color property removed to let the global gradient take effect */ +} + +.blog-cards { + display: flex; + justify-content: center; + gap: 30px; + flex-wrap: wrap; +} + +.blog-card { + background-color: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + width: 280px; + overflow: hidden; + text-align: left; + backdrop-filter: blur(10px); + transition: transform 0.3s ease-in-out; +} + +.blog-card:hover { + transform: translateY(-10px); +} + +.blog-card img { + width: 100%; + height: 180px; + object-fit: cover; +} + +.blog-card h3 { + font-size: 1.2em; + color: #fff; + margin: 15px; +} + +.blog-card p { + font-size: 0.9em; + color: #ccc; + margin: 0 15px 15px; +} + +.explore-capabilities { + margin-top: 50px; +} + + +/* INDUSTRY PAGE SPECIFIC STYLES */ +.industry-hero { + padding: 80px 0; + text-align: left; + background: linear-gradient(135deg, rgba(13, 26, 46, 0.8), rgba(18, 36, 64, 0.95)); /* Dark blue gradient */ + position: relative; + overflow: hidden; +} + +.industry-hero-content { + display: flex; + align-items: center; + justify-content: space-between; + gap: 40px; +} + +.industry-hero .hero-text { + max-width: 60%; +} + +.industry-hero h1 { + font-family: 'Space Grotesk', sans-serif; + font-size: 4rem; /* Larger heading */ + font-weight: 700; + color: #ffffff; + margin-bottom: 20px; + line-height: 1.2; +} + +.industry-hero p { + font-family: 'Inter', sans-serif; + font-size: 1.2rem; /* Slightly larger paragraph text */ + color: #e0e0e0; /* Lighter text for contrast */ + line-height: 1.6; + margin-bottom: 30px; +} + +.hero-image-container { + width: 200px; /* Adjust as needed */ + height: 200px; /* Adjust as needed */ +} + +.hero-icon { + width: 100%; + height: 100%; +} + +.industry-solutions, +.industry-benefits, +.industry-blogs { + padding: 60px 0; + text-align: left; +} + +.industry-solutions .section-heading, +.industry-benefits .section-heading, +.industry-blogs .section-heading { + font-family: 'Space Grotesk', sans-serif; + font-size: 2.5rem; + color: #ffffff; + margin-bottom: 40px; + text-align: left; + padding-left: 15px; /* Align with container padding */ +} + +.solutions-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 30px; + text-align: center; +} + +.solution-item { + background-color: rgba(255, 255, 255, 0.05); /* Subtle background */ + padding: 30px 20px; + border-radius: 8px; + border: 1px solid rgba(0, 198, 255, 0.3); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.solution-item:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 123, 255, 0.2); +} + +.solution-item img { + width: 80px; /* Adjust icon size */ + height: 80px; + margin-bottom: 20px; +} + +.solution-item h3 { + font-family: 'Space Grotesk', sans-serif; + font-size: 1.5rem; + color: #00c6ff; /* Accent color for headings */ + margin-bottom: 10px; +} + +.industry-benefits ul { + list-style: none; + padding-left: 20px; +} + +.industry-benefits li { + font-family: 'Inter', sans-serif; + font-size: 1.1rem; + color: #e0e0e0; + margin-bottom: 15px; + padding-left: 25px; + position: relative; +} + +.industry-benefits li::before { + content: '•'; /* Bullet point */ + color: #00c6ff; /* Accent color for bullets */ + font-size: 1.5rem; + position: absolute; + left: 0; + top: -2px; +} + +.blogs-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; +} + +.blog-item { + background-color: rgba(13, 39, 77, 0.7); /* Darker, slightly transparent blue */ + padding: 25px; + border-radius: 8px; + border: 1px solid rgba(0, 123, 255, 0.5); + display: flex; + flex-direction: column; + justify-content: space-between; + transition: background-color 0.3s ease; +} + +.blog-item:hover { + background-color: rgba(18, 52, 100, 0.9); +} + +.blog-item h3 { + font-family: 'Space Grotesk', sans-serif; + font-size: 1.6rem; + color: #ffffff; + margin-bottom: 15px; +} + +.blog-item p { + font-family: 'Inter', sans-serif; + font-size: 1rem; + color: #c0c0c0; /* Lighter grey for paragraph */ + line-height: 1.6; + margin-bottom: 20px; + flex-grow: 1; +} + +.blog-item .read-more { + font-family: 'Inter', sans-serif; + font-weight: 500; + color: #00c6ff; + text-decoration: none; + align-self: flex-start; + transition: color 0.3s ease; +} + +.blog-item .read-more:hover { + color: #ffffff; + text-decoration: underline; +} + + +/* FOOTER */ +.footer { + display: flex; + justify-content: space-between; + padding: var(--gap) 0; + border-top: none; + background: none; + backdrop-filter: none; +} +.footer-col { + flex: 1; +} +.footer-col h3 { + /* Styles inherit from global h3, color property removed */ + margin-bottom: 1rem; + font-size: 1.25rem; + /* color: #ffffff; */ /* Removed to inherit global h3 gradient */ +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem 1rem; + border: none; + border-radius: 4px; + background: var(--btn-bg); + color: #ffffff; + cursor: pointer; +} + +/* Button styling */ +.btn-outline { + display: inline-block; + padding: 12px 25px; + border: 2px solid #4d94ff; + color: #fff; + background-color: transparent; + text-decoration: none; + font-weight: bold; + letter-spacing: 1px; + transition: all 0.3s; + border-radius: 4px; + margin-top: 10px; +} +.btn-outline:hover { + background-color: #4d94ff; + color: #000; + transform: translateY(-3px); + box-shadow: 0 5px 15px rgba(77, 148, 255, 0.4); +} + + +/* CASE STUDIES PAGE SPECIFIC STYLES */ +.case-studies-hero { + padding-top: 8rem; /* Adjusted for fixed navbar & image */ + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 2.8rem; /* Match image */ + margin-bottom: 1rem; + color: #ffffff; /* White text */ + text-shadow: none; /* Remove global shadow if not desired here */ + background: none; /* Remove global gradient if not desired here */ + -webkit-background-clip: unset; + background-clip: unset; + font-family: 'Space Grotesk', sans-serif; +} + +.case-studies-hero p { + font-size: 1.1rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; /* Adjusted from image */ + margin-bottom: 2rem; /* Added from image */ + line-height: 1.6; + font-family: 'Inter', sans-serif; +} + +.case-studies-filters { + padding: 1rem 0; /* Adjusted from image */ + background-color: transparent; /* Match image */ +} + +.case-studies-filters .container { + padding-top: 0; + padding-bottom: 0; +} + +.filter-controls { + display: flex; + /* justify-content: space-between; */ /* Removed to allow search to take available space */ + align-items: center; + gap: 1.5rem; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter { + background-color: #0D0D1A; /* Darker background from image */ + color: var(--fg); + padding: 0.75rem 1.5rem; + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + font-size: 0.9rem; /* Adjusted from image */ + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 180px; /* Adjusted from image */ +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.5rem; +} + +.search-filter { + display: flex; + align-items: center; + background-color: #0D0D1A; /* Darker background from image */ + padding-left: 1rem; /* Padding for icon */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 8px; + flex-grow: 1; + /* max-width: 400px; */ /* Removed to allow it to fill space */ +} + +.search-filter i { + margin-right: 0.5rem; /* Adjusted from image */ + color: var(--fg); /* Brighter icon from image */ + font-size: 0.9rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 0.9rem; /* Adjusted from image */ + width: 100%; + padding: 0.75rem 1rem; /* Added padding here */ + outline: none; +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.7); +} + +.search-filter input[type="text"]:focus { + outline: none; +} + +.case-studies-grid-section { + padding: 3rem 0; +} + +.case-studies-grid { + display: grid; + grid-template-columns: 1fr; /* Mobile default */ + gap: 2rem; +} + +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.case-study-card { + background-color: #0D0D1A; /* Solid dark background from image */ + border: 1px solid #2A2A40; /* Border from image */ + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + height: 100%; /* For consistent card height in a row */ + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.case-study-card:hover { + transform: translateY(-5px); + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); +} + +.case-study-logo { + height: 32px; /* Adjusted from image */ + width: auto; + max-width: 120px; /* Prevent oversized logos */ + object-fit: contain; + margin-bottom: 1.5rem; + align-self: flex-start; +} + +.case-study-card .health-plus-logo { + /* Specific styles if needed for the plus logo, e.g., size or color filter */ + filter: brightness(0) invert(1); /* Example to make it white if it's a dark SVG */ +} + +.case-study-card h3 { + font-size: 1.4rem; /* Adjusted from image */ + color: #ffffff; + margin-bottom: 0.75rem; + line-height: 1.3; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.case-study-card p { + font-size: 0.95rem; /* Adjusted from image */ + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; + flex-grow: 1; + line-height: 1.6; /* Added for consistency */ + font-family: 'Inter', sans-serif; +} + +.btn-read-case-study { + display: inline-block; + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.6rem 1.2rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + text-align: center; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease; + margin-top: auto; + align-self: flex-start; /* Align button to start */ + font-size: 0.9rem; /* Adjusted font size */ +} + +.btn-read-case-study:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ +} + +.discuss-project-cta { + background-color: #0A0A14; /* Dark band background from image */ + padding: 3rem 0; + margin-top: 4rem; /* Increased margin from image */ + /* Removed border-radius for full-width band appearance */ +} + +.discuss-project-cta .container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 1rem; + /* Ensure this container also respects the global max-width if needed */ + /* max-width: var(--max-w); */ /* Already handled by .container global */ + /* margin: 0 auto; */ /* Already handled by .container global */ +} + +.discuss-project-cta h2 { + font-size: 1.8rem; /* Adjusted from image */ + color: #ffffff; + margin: 0; + background: none; + -webkit-background-clip: unset; + background-clip: unset; + text-shadow: none; + font-family: 'Space Grotesk', sans-serif; +} + +.btn-discuss-project { + background-color: #1E1E2F; /* Button color from image */ + color: var(--fg); + padding: 0.7rem 1.5rem; /* Adjusted padding from image */ + border: 1px solid #3A3A5A; /* Button border from image */ + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; /* Hover color from image */ + border-color: #4F4F6A; /* Hover border from image */ + transform: translateY(-2px); +} + +/* Responsive adjustments for Case Studies Page */ +@media (max-width: 768px) { + .case-studies-hero h1 { + font-size: 2.2rem; /* Adjusted for mobile */ + } + .case-studies-hero p { + font-size: 1rem; /* Adjusted for mobile */ + } + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + .search-filter { + max-width: none; + } + /* .case-studies-grid is already 1fr by default, media query for 2 columns is above */ + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + .discuss-project-cta h2 { + margin-bottom: 1.5rem; /* Increased margin for mobile */ + font-size: 1.6rem; /* Adjusted for mobile */ + } + .btn-discuss-project { + width: 100%; + text-align: center; + } +} + + +/* Responsive adjustments */ +@media (max-width: 768px) { + .grid-2 { + grid-template-columns: 1fr; + } + + .nav-links { + display: none; /* You'll need JavaScript to toggle this for mobile */ + } + + .section { + padding: 60px 0; + } + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 2.5rem; + } +} +.footer-col p { + font-size: 1rem; + color: #ffffff; +} +.footer-col h3 { + margin-bottom: 1rem; + font-size: 1.25rem; + color: #ffffff; +} +#subscribe-form { + display: flex; + gap: 0.5rem; +} +#email { + flex: 1; + padding: 0.5rem; + border: none; + border-radius: 4px; + font-size: 1rem; +} +#subscribe-form button { + padding: 0.5rem } + +/* Automation Flows Page Styles */ +#automation-flows-hero { + padding-top: 12rem; /* Increased top padding */ + padding-bottom: 6rem; /* Increased bottom padding */ + text-align: center; +} + +#automation-flows-hero h1 { + font-size: 3.5rem; + margin-bottom: 1rem; + /* Inherits global h1 gradient */ +} + +#automation-flows-hero p { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.8); +} + +#featured-solutions, #gyannetra-advantage, #related-content { + padding: 6rem 0; /* Increased vertical padding for sections */ +} + +#featured-solutions h2, #gyannetra-advantage h2, #related-content h2 { + font-size: 2rem; + margin-bottom: 2rem; + text-align: center; + /* Inherits global h2 gradient */ +} + +.offerings-grid, .related-content-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 3rem; /* Increased gap between grid items */ + margin-top: 3rem; /* Increased top margin */ +} + +.offering-item, .related-content-item { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 2.5rem; /* Increased padding within items */ + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.offering-item:hover, .related-content-item:hover { + transform: translateY(-10px); + box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); +} + +.offering-icon { + width: 60px; + height: 60px; + margin-bottom: 1.5rem; + filter: drop-shadow(0 0 8px rgba(140, 154, 255, 0.5)); +} + +.offering-item h3, .related-content-item h3 { + font-size: 1.4rem; + margin-bottom: 0.8rem; + /* Inherits global h3 gradient */ + text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7); /* Enhanced text shadow for better readability */ +} + +.offering-item p, .related-content-item p { + font-size: 1rem; + color: rgba(255, 255, 255, 0.7); +} + +#gyannetra-advantage ul { + list-style: none; + padding: 0; + max-width: 700px; /* Slightly increased max-width */ + margin: 3rem auto; /* Increased top/bottom margin */ +} + +#gyannetra-advantage li { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 8px; + padding: 1.2rem 1.8rem; /* Increased padding */ + margin-bottom: 1.2rem; /* Increased bottom margin */ + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.9); + position: relative; + padding-left: 3rem; /* Adjusted left padding for bullet */ +} + +#gyannetra-advantage li::before { + content: '•'; + position: absolute; + left: 1rem; + color: #a2abff; + font-size: 1.5rem; + line-height: 1; +} + +.related-content-item h4 { + font-size: 1.2rem; + margin-bottom: 0.5rem; + /* Inherits global h4 gradient */ +} + +.btn-book-consultation { + display: inline-block; + padding: 0.8rem 2rem; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%); + border: none; + border-radius: 8px; + color: white; + text-decoration: none; + font-size: 1rem; + transition: all 0.3s ease; + cursor: pointer; +} + +.btn-book-consultation:hover { + opacity: 0.9; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(90, 107, 255, 0.3); +} +/* TRAVEL PAGE STYLES */ +#travel-hero { + background-image: url('../assets/travel-hero-bg.jpg'); /* Placeholder: User should replace with actual image */ + background-size: cover; + background-position: center center; + color: #fff; + text-align: left; + padding: 10rem 0 8rem; + } + +#travel-hero .hero-content h1 { + font-size: 3.5rem; + margin-bottom: 1rem; + text-shadow: 2px 2px 8px rgba(0,0,0,0.7); +} + +#travel-hero .hero-content p { + font-size: 1.2rem; + max-width: 700px; + margin-bottom: 2rem; + text-shadow: 1px 1px 6px rgba(0,0,0,0.6); +} + +#tailored-solutions .solutions-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 2rem; + margin-top: 3rem; +} + +#tailored-solutions .solution-item { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 2rem; + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +#tailored-solutions .solution-item:hover { + transform: translateY(-8px); + box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25); +} + +#tailored-solutions .solution-item img { + width: 50px; + height: 50px; + margin-bottom: 1rem; + filter: drop-shadow(0 0 6px rgba(140, 154, 255, 0.4)); +} + +#tailored-solutions .solution-item h3 { + font-size: 1.3rem; + margin-bottom: 0.75rem; + color: #e0e0e0; +} + +#tailored-solutions .solution-item p { + font-size: 0.95rem; + color: rgba(255, 255, 255, 0.75); + line-height: 1.6; +} + +#gyannetra-advantage { + padding: 4rem 0; +} + +#gyannetra-advantage ul { + list-style: none; + padding: 0; + max-width: 800px; + margin: 2rem auto 0; +} + +#gyannetra-advantage li { + background: rgba(20, 20, 40, 0.4); + backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 8px; + padding: 1rem 1.5rem; + margin-bottom: 1rem; + font-size: 1.05rem; + color: rgba(255, 255, 255, 0.85); + position: relative; + padding-left: 2.5rem; +} + +#gyannetra-advantage li::before { + content: ''''; + position: absolute; + left: 1rem; + color: #8c9aff; + font-size: 1.2rem; + font-weight: bold; +} + +#insights-stories .insights-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2.5rem; + margin-top: 3rem; +} + +#insights-stories .insight-item { + background: rgba(20, 20, 40, 0.5); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 1.5rem; + display: flex; + flex-direction: column; +} + +#insights-stories .insight-item img { + width: 100%; + height: auto; + max-height: 200px; + object-fit: cover; + border-radius: 8px; + margin-bottom: 1rem; +} + +#insights-stories .insight-item .date { + font-size: 0.85rem; + color: rgba(255, 255, 255, 0.6); + margin-bottom: 0.5rem; +} + +#insights-stories .insight-item h4 { + font-size: 1.25rem; + margin-bottom: 0.75rem; + color: #e0e0e0; + flex-grow: 1; +} + +#insights-stories .insight-item .read-more { + display: inline-block; + margin-top: auto; + color: #a2abff; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; + align-self: flex-start; +} + +#insights-stories .insight-item .read-more:hover { + color: #ffffff; + text-decoration: underline; +} + +.industry-hero { + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; + padding-top: 8rem; + width: 100%; + margin: 0; + overflow: hidden; + min-height: 60vh; + background-size: cover; + background-position: center; +} + +.industry-hero .hero-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + z-index: 0; +} + +.industry-hero .hero-content { + position: relative; + z-index: 1; +} + +.industry-hero .hero-content h1 { + font-size: 3.5rem; + line-height: 1.2; + color: #ffffff; + margin-bottom: 1rem; + text-shadow: 2px 2px 8px rgba(0,0,0,0.7); +} + +.industry-hero .hero-content p { + font-size: 1.2rem; + color: #f0f0f0; + margin-bottom: 2rem; + max-width: 650px; + text-shadow: 1px 1px 6px rgba(0,0,0,0.6); +} + +.industry-hero .btn-primary { + padding: 0.8rem 1.8rem; + font-size: 1rem; +} +/* Retail Page Specific Styles */ + +/* Hero Section */ +.industry-hero .hero-company-name { + font-size: 0.9rem; + font-weight: 500; + color: rgba(236, 236, 236, 0.8); + text-transform: uppercase; + letter-spacing: 1px; + margin-bottom: 0.5rem; + text-align: left; +} + +#retail-hero .hero-content h1 { + text-align: left; + font-size: 3.5rem; /* Adjust as needed */ +} + +#retail-hero .hero-content p { + text-align: left; + max-width: 100%; +} + +#retail-hero .hero-content .btn-primary { + display: inline-block; + margin-top: 1.5rem; +} + +#retail-hero .hero-content { + display: flex; + flex-direction: column; + align-items: flex-start; +} + + +/* Common Section Padding */ +.section-padding { + padding-top: 4rem; + padding-bottom: 4rem; +} + +/* AI Solutions for Retail Section */ +#ai-solutions-retail .section-heading { + text-align: center; + margin-bottom: 3rem; +} + +.solutions-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + text-align: center; +} + +.solution-item { + padding: 1.5rem; +} + +.solution-item img { + width: 60px; + height: 60px; + margin-bottom: 1rem; + filter: drop-shadow(0 0 8px rgba(52, 152, 219, 0.5)); +} + +.solution-item h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + color: var(--fg); +} + +.solution-item p { + font-size: 0.9rem; + color: rgba(236, 236, 236, 0.8); +} + +/* The Gyannetra Advantage Section */ +#gyannetra-advantage-retail .section-heading { + text-align: center; + margin-bottom: 3rem; +} + +.gyannetra-advantage-section .advantage-columns { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; /* Gap between the two columns */ + margin-top: 2rem; + justify-content: center; /* Center the columns if they don't fill the width */ +} + +.gyannetra-advantage-section .advantage-list { + list-style: none; + padding-left: 0; /* Remove default padding */ + margin: 0 auto; /* Center the list within its column if needed */ + max-width: 400px; /* Max width for each list if needed */ +} + +.gyannetra-advantage-section .advantage-list li { + font-size: 1.1rem; + color: var(--fg); + padding: 0.5rem 0; + position: relative; + padding-left: 1.7em; /* Space for custom bullet */ + line-height: 1.4; +} + +.gyannetra-advantage-section .advantage-list li::before { + content: "•"; + color: #3498db; + font-size: 1.8em; /* Slightly larger bullet */ + position: absolute; + left: 0; + top: 0.65em; /* Adjust vertical alignment */ + transform: translateY(-50%); + line-height: 1; +} + + +/* Industry Insights & Success Stories Section */ +#insights-stories-retail .section-heading { + text-align: center; + margin-bottom: 3rem; +} + +.insights-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.insight-item { + background: rgba(20, 20, 40, 0.6); + backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 12px; + padding: 2rem; + display: flex; + flex-direction: column; + text-align: left; /* Align text to left as per image */ +} + +.insight-item h4 { + font-size: 1.2rem; + font-weight: 600; + margin-bottom: 0.75rem; + color: var(--fg); +} + +.insight-item p { + font-size: 0.9rem; + color: rgba(236, 236, 236, 0.8); + margin-bottom: 1.5rem; /* Increased space before link */ + flex-grow: 1; +} + +.insight-item .read-more { + display: inline-block; + font-size: 0.9rem; + font-weight: bold; + color: #a2abff; + text-decoration: none; + text-transform: uppercase; + letter-spacing: 0.5px; + align-self: flex-start; +} + +.insight-item .read-more:hover { + color: #ffffff; + text-decoration: underline; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..896d6b1 --- /dev/null +++ b/index.html @@ -0,0 +1,127 @@ + + + + + + Gyannetra — AI Services & Solutions + + + + +
    +
    +
    +
    +
    +
    +
    +
    + +
    + +
    +
    +
    +
    +

    AI SERVICES
    AND SOLUTIONS

    +

    Inventing the future, powered by intelligence: We unlock the infinite potential of artificial intelligence to create groundbreaking solutions that anticipate tomorrow's needs.

    + +
    +
    + + +
    +

    TECHNOLOGIES WE USE

    +
    +
    + Deep Learning +

    Deep Learning

    +

    Building complex neural networks for advanced pattern recognition and decision making.

    +
    +
    + Machine Learning +

    Machine Learning

    +

    Developing algorithms that learn from data to make predictions and improve performance.

    +
    +
    + Natural Language Processing +

    Natural Language
    Processing

    +

    Enabling computers to understand, interpret, and generate human language.

    +
    +
    + Computer Vision +

    Computer Vision

    +

    Allowing systems to interpret and make decisions based on visual data.

    +
    +
    +
    + + +
    +

    OUR EXPERTISE

    +
    + Predictive Analytics Icon +

    Predictive Analytics

    +

    Using statistical algorithms and machine learning techniques to forecast future outcomes.

    +
    + Automation Icon +

    Automation

    +

    Designing and implementing intelligent systems to streamline workflows and boost productivity.

    +
    + Data Analysis Icon +

    Data Analysis

    +

    Transforming raw data into actionable insights to inform strategic decisions.

    +
    +
    +
    + + + + + + + + diff --git a/js/dropdown.js b/js/dropdown.js new file mode 100644 index 0000000..ed0b90a --- /dev/null +++ b/js/dropdown.js @@ -0,0 +1,29 @@ +document.addEventListener('DOMContentLoaded', function() { + const dropdowns = document.querySelectorAll('.dropdown'); + + dropdowns.forEach(dropdown => { + const dropdownToggle = dropdown.querySelector('.nav-link'); + const dropdownMenu = dropdown.querySelector('.dropdown-menu'); + + dropdownToggle.addEventListener('click', function(e) { + e.preventDefault(); + // Close other open dropdowns + dropdowns.forEach(otherDropdown => { + if (otherDropdown !== dropdown) { + otherDropdown.querySelector('.dropdown-menu').classList.remove('show'); + } + }); + // Toggle the current dropdown + dropdownMenu.classList.toggle('show'); + }); + }); + + // Close dropdowns when clicking outside + document.addEventListener('click', function(e) { + if (!e.target.closest('.dropdown')) { + dropdowns.forEach(dropdown => { + dropdown.querySelector('.dropdown-menu').classList.remove('show'); + }); + } + }); +}); \ No newline at end of file diff --git a/js/form-subscribe.js b/js/form-subscribe.js new file mode 100644 index 0000000..e69de29 diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..e69de29 diff --git a/js/menu-dropdown.js b/js/menu-dropdown.js new file mode 100644 index 0000000..e69de29