From 46a0c20dcc881cd4b799618fb71656db3f098ba9 Mon Sep 17 00:00:00 2001 From: ectasy663 Date: Wed, 4 Jun 2025 00:59:41 +0530 Subject: [PATCH] Update website structure with new CSS organization and file improvements --- Education/corporate-trainings.html | 130 +- Education/individual-trainings.html | 512 +- Education/workshops.html | 62 +- Industries/case-studies.html | 36 +- Industries/finance.html | 35 +- Industries/healthcare.html | 78 +- Industries/manufacturing.html | 35 +- Industries/marketing.html | 37 +- Industries/media-entertainment.html | 35 +- Industries/retail.html | 35 +- Industries/travel.html | 35 +- Services/agentic-ai.html | 39 +- Services/automation-flows.html | 35 +- Services/data-analysis.html | 39 +- Services/generative-ai.html | 38 +- Services/machine-learning.html | 39 +- about.html | 76 +- contact.html | 46 +- css/01-base-variables.css | 324 + css/02-layout-components.css | 1830 +++++ css/03-navigation-header.css | 569 ++ css/04-hero-sections.css | 474 ++ css/05-technology-cards.css | 509 ++ css/06-forms-buttons.css | 609 ++ css/07-media-responsive.css | 825 ++ css/08-animations-effects.css | 620 ++ css/09-about-page.css | 297 + css/10-case-studies-enhanced.css | 529 ++ css/card-heading-divider.css | 71 + css/css new | 7442 ------------------ css/expertise-divider.css | 19 - css/expertise-fix.css | 37 + css/fix-subheading.css | 16 + css/style.css | 10439 +------------------------- css/style.css.backup | 1069 ++- css/testimonials.css | 416 + css/training-courses.css | 775 ++ css/webinar-video.css | 69 + index.html | 79 +- 39 files changed, 10010 insertions(+), 18350 deletions(-) create mode 100644 css/01-base-variables.css create mode 100644 css/02-layout-components.css create mode 100644 css/03-navigation-header.css create mode 100644 css/04-hero-sections.css create mode 100644 css/05-technology-cards.css create mode 100644 css/06-forms-buttons.css create mode 100644 css/07-media-responsive.css create mode 100644 css/08-animations-effects.css create mode 100644 css/09-about-page.css create mode 100644 css/10-case-studies-enhanced.css create mode 100644 css/card-heading-divider.css delete mode 100644 css/css new delete mode 100644 css/expertise-divider.css create mode 100644 css/expertise-fix.css create mode 100644 css/fix-subheading.css create mode 100644 css/testimonials.css create mode 100644 css/training-courses.css create mode 100644 css/webinar-video.css diff --git a/Education/corporate-trainings.html b/Education/corporate-trainings.html index 59f2647..a01ed5b 100644 --- a/Education/corporate-trainings.html +++ b/Education/corporate-trainings.html @@ -1,11 +1,21 @@ - - + Corporate Trainings - Gyannetra - - + + + + + + + + + + + + + @@ -70,46 +80,7 @@

AI-Powered Corporate Training

-

We offer customized AI training programs for businesses, designed to meet your specific needs and accelerate your team's AI expertise.

- Request a Training Proposal
+

We offer customized AI training programs for businesses, designed to meet your specific needs and accelerate your team's AI expertise.

Request a Training Proposal

CUSTOM TRAINING MODULES: TAILORED TO YOUR WORKFLOW

@@ -158,11 +129,11 @@
-

Analyse With Us

-

We conduct comprehensive analysis of your current workflows, team capabilities, and business objectives to identify specific training requirements and learning gaps.

- • Workflow mapping sessions - • Skill gap analysis - • Stakeholder interviews +

Innovate with us

+

We conduct comprehensive analysis of your current workflows, team capabilities, and business objectives to identify specific training requirements and learning gaps.

+ Workflow mapping sessions + Skill gap analysis + Stakeholder interviews
@@ -175,9 +146,9 @@

Content Curation & Customization

Our experts develop bespoke curriculum, real-world case studies, and practical examples directly relevant to your industry and operational context.

- • Industry-specific content - • Custom case studies - • Relevant datasets + Industry-specific content + Custom case studies + Relevant datasets
@@ -190,9 +161,9 @@

Module Development

We build comprehensive training materials including interactive presentations, hands-on exercises, and practical simulations that mirror your actual work environment.

- • Interactive presentations - • Practical exercises - • Simulation environments + Interactive presentations + Practical exercises + Simulation environments
@@ -205,9 +176,9 @@

Delivery & Feedback

Expert instructors deliver the training with continuous feedback collection and real-time adjustments to ensure maximum learning effectiveness and engagement.

- • Expert-led sessions - • Real-time feedback - • Continuous optimization + Expert-led sessions + Real-time feedback + Continuous optimization
@@ -220,16 +191,14 @@

Post-Training Support

We provide ongoing support including implementation guidance, troubleshooting assistance, and additional resources to ensure sustained learning impact.

- • Implementation support - • Follow-up sessions - • Resource library access + Implementation support + Follow-up sessions + Resource library access
-
- -
+

READY TO TRANSFORM YOUR TEAM'S AI CAPABILITIES?

@@ -264,16 +233,11 @@

ROI-Focused Training

Maximize your investment with training that delivers measurable business outcomes and practical implementation skills.

- - -
- - -
-
-
- Request a Custom Training Proposal - Get In Touch + +
+ Request a Custom Training Proposal + Get In Touch +
@@ -300,13 +264,6 @@
  • Contact Us
    • -

    Contact Us

    - -

    Follow Us

    Stay updated with our latest insights and news.

    +
    + +
    +

    Contact Us

    + +
    +
    diff --git a/Education/individual-trainings.html b/Education/individual-trainings.html index 455e5ac..773b44f 100644 --- a/Education/individual-trainings.html +++ b/Education/individual-trainings.html @@ -4,11 +4,22 @@ - - + Individual Training - Gyannetra - + + + + + + + + + + + + + + @@ -68,93 +79,47 @@

    Gyannetra's training programs are designed for career advancement, skill development, and personal enrichment. Achieve your learning goals with our comprehensive AI education programs.

    Enroll in a Program Today - - -
    -

    TRAINING PROGRAMS

    -
    -
    -
    - Machine Learning Icon + + @@ -190,9 +155,307 @@

    Hands-on Projects

    Apply your learning to real-world AI projects with personalized guidance, building a portfolio that demonstrates your practical skills to potential employers.

    -
    - Enroll in a Program Today +
    Enroll in a Program Today
    + + +
    +
    +
    +
    +

    What Our Students Say

    +

    Discover how our AI training programs have transformed careers and empowered professionals across industries

    +
    + +
    +
    + +
    + +
    +
    RS
    +
    +

    Rajesh Sharma

    +

    Senior Data Analyst

    +

    TechCorp Solutions

    +
    +
    +
    +
    + + + + + +
    +

    Gyannetra's AI Fundamentals course completely transformed my understanding of machine learning. The hands-on projects and expert mentorship helped me transition from traditional data analysis to advanced AI implementation. I got promoted within 3 months!

    + AI Fundamentals for Business Leaders +
    +
    + + +
    + +
    +
    AP
    +
    +

    Anita Patel

    +

    ML Engineer

    +

    InnovateAI Labs

    +
    +
    +
    +
    + + + + + +
    +

    The Practical AI Implementation course was exactly what I needed. The curriculum is cutting-edge, and the instructors bring real-world experience. I'm now leading AI projects at my company and feel confident in my abilities.

    + Practical AI Implementation +
    +
    + + +
    + +
    +
    MK
    +
    +

    Michael Kumar

    +

    Product Manager

    +

    FinTech Innovations

    +
    +
    +
    +
    + + + + + +
    +

    As a non-technical professional, I was hesitant about AI training. Gyannetra's approach made complex concepts accessible. I now effectively collaborate with technical teams and make informed decisions about AI implementations.

    + AI Strategy & Leadership +
    +
    + + +
    + +
    +
    SK
    +
    +

    Sakshi Khanna

    +

    Data Scientist

    +

    Healthcare Analytics Inc.

    +
    +
    +
    +
    + + + + + +
    +

    The personalized learning approach and one-on-one mentorship set Gyannetra apart. I gained practical skills in deep learning and neural networks that directly applied to my healthcare AI projects. Exceptional quality!

    + Advanced Deep Learning +
    +
    + + +
    + +
    +
    VG
    +
    +

    Vikram Gupta

    +

    AI Consultant

    +

    Strategic AI Solutions

    +
    +
    +
    +
    + + + + + +
    +

    Gyannetra's comprehensive curriculum and industry connections helped me transition from software development to AI consulting. The practical projects built my portfolio, and I'm now running my own AI consultancy firm.

    + AI Business Applications +
    +
    + + +
    + +
    +
    PM
    +
    +

    Priya Mehta

    +

    Research Scientist

    +

    National AI Research Lab

    +
    +
    +
    +
    + + + + + +
    +

    The depth of knowledge and research-oriented approach impressed me. The instructors are at the forefront of AI research, and the course content reflects the latest developments in the field. Highly recommend for serious AI practitioners.

    + AI Research Fundamentals +
    +
    + + +
    + +
    +
    RS
    +
    +

    Rajesh Sharma

    +

    Senior Data Analyst

    +

    TechCorp Solutions

    +
    +
    +
    +
    + + + + + +
    +

    Gyannetra's AI Fundamentals course completely transformed my understanding of machine learning. The hands-on projects and expert mentorship helped me transition from traditional data analysis to advanced AI implementation. I got promoted within 3 months!

    + AI Fundamentals for Business Leaders +
    +
    + +
    + +
    +
    AP
    +
    +

    Anita Patel

    +

    ML Engineer

    +

    InnovateAI Labs

    +
    +
    +
    +
    + + + + + +
    +

    The Practical AI Implementation course was exactly what I needed. The curriculum is cutting-edge, and the instructors bring real-world experience. I'm now leading AI projects at my company and feel confident in my abilities.

    + Practical AI Implementation +
    +
    + +
    + +
    +
    MK
    +
    +

    Michael Kumar

    +

    Product Manager

    +

    FinTech Innovations

    +
    +
    +
    +
    + + + + + +
    +

    As a non-technical professional, I was hesitant about AI training. Gyannetra's approach made complex concepts accessible. I now effectively collaborate with technical teams and make informed decisions about AI implementations.

    + AI Strategy & Leadership +
    +
    + +
    + +
    +
    SK
    +
    +

    Sakshi Khanna

    +

    Data Scientist

    +

    Healthcare Analytics Inc.

    +
    +
    +
    +
    + + + + + +
    +

    The personalized learning approach and one-on-one mentorship set Gyannetra apart. I gained practical skills in deep learning and neural networks that directly applied to my healthcare AI projects. Exceptional quality!

    + Advanced Deep Learning +
    +
    + +
    + +
    +
    VG
    +
    +

    Vikram Gupta

    +

    AI Consultant

    +

    Strategic AI Solutions

    +
    +
    +
    +
    + + + + + +
    +

    Gyannetra's comprehensive curriculum and industry connections helped me transition from software development to AI consulting. The practical projects built my portfolio, and I'm now running my own AI consultancy firm.

    + AI Business Applications +
    +
    + +
    + +
    +
    PM
    +
    +

    Priya Mehta

    +

    Research Scientist

    +

    National AI Research Lab

    +
    +
    +
    +
    + + + + + +
    +

    The depth of knowledge and research-oriented approach impressed me. The instructors are at the forefront of AI research, and the course content reflects the latest developments in the field. Highly recommend for serious AI practitioners.

    + AI Research Fundamentals +
    +
    +
    +
    +
    +
    +
    @@ -260,8 +523,7 @@

    Receive personalized notifications for new content, assignment deadlines, and important course updates.

    - -
    +
    @@ -270,6 +532,31 @@

    Download course materials for offline access, ensuring you can learn even without an internet connection.

    + + +
    +

    Download the GyanNetra App

    +
    + +
    + +
    +
    + Get it on + Google Play +
    +     + +
    + +
    +
    + Download on the + App Store +
    +     +
    +
    @@ -302,36 +589,13 @@ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> -
    +
    +

    GyanNetra App for iOS Apple Users

    Learn how to maximize your learning experience with the GyanNetra app on your iOS device. This tutorial covers all essential features and tips for iPhone and iPad users.

    - -
    -

    Download the GyanNetra App

    -
    - -
    - -
    -
    - Get it on - Google Play -
    - -
    - -
    -
    - Download on the - App Store -
    -     -
    -
    - @@ -360,13 +624,6 @@
  • Contact Us
    • -

    Contact Us

    - -

    Follow Us

    Stay updated with our latest insights and news.

    +
    + +
    +

    Contact Us

    + +
    +
    diff --git a/Education/workshops.html b/Education/workshops.html index c855978..0a9ea6d 100644 --- a/Education/workshops.html +++ b/Education/workshops.html @@ -1,10 +1,20 @@ - - + Webinars - Gyannetra - - + + + + + + + + + + + + + @@ -216,8 +226,7 @@

    Missed Our Live Sessions? Watch Now!

    Don't miss out on the AI insights that could transform your business — catch up with our knowledge-packed webinar recordings

    - -
    +
    -

    Advanced AI Technologies

    -

    Deep dive into cutting-edge AI technologies and their business applications

    - Live Session +

    Webinar 2

    - -
    +
    -

    Future of AI & Innovation

    -

    Exploring emerging AI trends and their impact on business transformation

    - Live Session +

    Webinar 4

    @@ -317,13 +315,6 @@
  • Contact Us
    • -

    Contact Us

    - -

    Follow Us

    Stay updated with our latest insights and news.

    + +
    +

    Contact Us

    + +

    © 2025 Gyannetra. All rights reserved. | Privacy Policy | Terms and Conditions

    diff --git a/Industries/case-studies.html b/Industries/case-studies.html index 3fea899..243c08b 100644 --- a/Industries/case-studies.html +++ b/Industries/case-studies.html @@ -1,10 +1,21 @@ - - Case Studies - Gyannetra - - + Case Studies - Gyannetra + + + + + + + + + + + + + + @@ -144,8 +155,7 @@ Gyannetra Logo

    Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.

    -
    -
    +

    Quick Links

    -
    -

    Contact Us

    -

    Follow Us

    Stay updated with our latest insights and news.

    +
    +

    Contact Us

    +

    © 2025 Gyannetra. All rights reserved. | Privacy Policy | Terms and Conditions

    diff --git a/Industries/finance.html b/Industries/finance.html index 8fa77bc..8cde9a2 100644 --- a/Industries/finance.html +++ b/Industries/finance.html @@ -1,11 +1,21 @@ - - + AI in Finance - Gyannetra - - + + + + + + + + + + + + + @@ -163,8 +173,7 @@ Gyannetra Logo

    Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.

    -
    -
    +

    Quick Links

    -
    -

    Contact Us

    -

    Follow Us

    Stay updated with our latest insights and news.

    +
    +

    Contact Us

    +

    © 2025 Gyannetra. All rights reserved. | Privacy Policy | Terms and Conditions

    diff --git a/Industries/healthcare.html b/Industries/healthcare.html index 9bba873..d0feb95 100644 --- a/Industries/healthcare.html +++ b/Industries/healthcare.html @@ -6,9 +6,20 @@ - Healthcare - Gyannetra - - + AI in Healthcare - Gyannetra + + + + + + + + + + + + + @@ -21,6 +32,7 @@
    +
    +

    AI-Powered Healthcare Solutions

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

    Transform Healthcare
    +

    AI SOLUTIONS FOR HEALTHCARE

    @@ -103,7 +116,8 @@
    -
    + +

    BENEFITS OF AI FOR HEALTHCARE WITH GYANNETRA

    @@ -136,6 +150,7 @@
    +

    BLOGS & CASE STUDIES

    @@ -158,7 +173,7 @@

    Navigating the complex ethical challenges of AI applications in healthcare while ensuring patient privacy and safety

    Read More - +
    @@ -169,13 +184,13 @@
    -
    + + + - + - - - - - - - - diff --git a/Industries/manufacturing.html b/Industries/manufacturing.html index 65c1623..89346a2 100644 --- a/Industries/manufacturing.html +++ b/Industries/manufacturing.html @@ -4,11 +4,21 @@ - - + AI in Manufacturing - Gyannetra - - + + + + + + + + + + + + + @@ -168,8 +178,7 @@ Gyannetra Logo

    Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.

    - -
    +

    Quick Links

    -
    -

    Contact Us

    -

    Follow Us

    Stay updated with our latest insights and news.

    +
    +

    Contact Us

    +

    © 2025 Gyannetra. All rights reserved. | Privacy Policy | Terms and Conditions

    diff --git a/Industries/marketing.html b/Industries/marketing.html index 5454cf3..b297eac 100644 --- a/Industries/marketing.html +++ b/Industries/marketing.html @@ -1,12 +1,22 @@ - - Marketing - Gyannetra - - + Marketing - Gyannetra + + + + - + + + + + + + + + + @@ -175,8 +185,7 @@ Gyannetra Logo

    Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.

    -
    -
    +

    Quick Links

    -
    -

    Contact Us

    -

    Follow Us

    Stay updated with our latest insights and news.

    +
    +

    Contact Us

    +
    diff --git a/Industries/media-entertainment.html b/Industries/media-entertainment.html index ca5d4b1..93b927a 100644 --- a/Industries/media-entertainment.html +++ b/Industries/media-entertainment.html @@ -1,10 +1,20 @@ - - AI in Media & Entertainment - Gyannetra - - + AI in Media & Entertainment - Gyannetra + + + + + + + + + + + + + @@ -167,8 +177,7 @@ Gyannetra Logo

    Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.

    -
    -
    +

    Quick Links

    -
    -

    Contact Us

    -

    Follow Us

    Stay updated with our latest insights and news.

    +
    +

    Contact Us

    +
    diff --git a/Industries/retail.html b/Industries/retail.html index 058292c..4dcc3a9 100644 --- a/Industries/retail.html +++ b/Industries/retail.html @@ -4,10 +4,20 @@ - - AI in Retail - Gyannetra - - + AI in Retail - Gyannetra + + + + + + + + + + + + + @@ -174,8 +184,7 @@ Gyannetra Logo

    Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.

    -
    -
    +

    Quick Links

    -
    -

    Contact Us

    -

    Follow Us

    Stay updated with our latest insights and news.

    +
    +

    Contact Us

    +
    diff --git a/Industries/travel.html b/Industries/travel.html index 2e0f451..a600871 100644 --- a/Industries/travel.html +++ b/Industries/travel.html @@ -4,10 +4,20 @@ - - AI in Travel - Gyannetra - - + AI in Travel - Gyannetra + + + + + + + + + + + + + @@ -176,8 +186,7 @@ Gyannetra Logo

    Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.

    -
    -
    +

    Quick Links

    -
    -

    Contact Us

    -

    Follow Us

    Stay updated with our latest insights and news.

    +
    +

    Contact Us

    +
    diff --git a/Services/agentic-ai.html b/Services/agentic-ai.html index 383ccdc..b4bf38c 100644 --- a/Services/agentic-ai.html +++ b/Services/agentic-ai.html @@ -66,10 +66,20 @@ visibility: visible; } - - - - + + + + + + + + + + + + + + @@ -315,15 +325,8 @@
  • Automation Flows
  • About Us
  • Contact Us
    • - -
    -

    Contact Us

    - -
    +
    +

    Follow Us

    Stay updated with our latest insights and news.

    - +
    + +
    +

    Contact Us

    +
    diff --git a/Services/automation-flows.html b/Services/automation-flows.html index e3e6f4c..24cf1db 100644 --- a/Services/automation-flows.html +++ b/Services/automation-flows.html @@ -66,10 +66,20 @@ visibility: visible; } - - - - + + + + + + + + + + + + + + @@ -303,8 +313,7 @@ Gyannetra Logo

    Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.

    -
    -
    +

    Quick Links

    -
    -

    Contact Us

    -

    Follow Us

    Stay updated with our latest insights and news.

    +
    +

    Contact Us

    +
    diff --git a/Services/data-analysis.html b/Services/data-analysis.html index 187e757..5921511 100644 --- a/Services/data-analysis.html +++ b/Services/data-analysis.html @@ -66,10 +66,20 @@ visibility: visible; } - - - - + + + + + + + + + + + + + + @@ -290,15 +300,8 @@
  • Automation Flows
  • About Us
  • Contact Us
    • - -
    -

    Contact Us

    - -
    +
    +

    Follow Us

    Stay updated with our latest insights and news.

    - +
    + +
    +

    Contact Us

    +
    diff --git a/Services/generative-ai.html b/Services/generative-ai.html index 9465355..bf0f8e5 100644 --- a/Services/generative-ai.html +++ b/Services/generative-ai.html @@ -66,10 +66,20 @@ visibility: visible; } - - - - + + + + + + + + + + + + + + @@ -314,15 +324,8 @@
  • Automation Flows
  • About Us
  • Contact Us
    • - -
    -

    Contact Us

    - -
    +
    +

    Follow Us

    Stay updated with our latest insights and news.

    + +
    +

    Contact Us

    + +

    © 2025 Gyannetra. All rights reserved. | Privacy Policy | Terms and Conditions

    diff --git a/Services/machine-learning.html b/Services/machine-learning.html index de5a3f1..e5a5181 100644 --- a/Services/machine-learning.html +++ b/Services/machine-learning.html @@ -66,10 +66,20 @@ visibility: visible; } - - - - + + + + + + + + + + + + + + @@ -311,15 +321,8 @@
  • Automation Flows
  • About Us
  • Contact Us
    • - -
    -

    Contact Us

    - -
    +
    +

    Follow Us

    Stay updated with our latest insights and news.

    - +
    + +
    +

    Contact Us

    +
    diff --git a/about.html b/about.html index dd0b35c..ef1a5fc 100644 --- a/about.html +++ b/about.html @@ -92,13 +92,23 @@ opacity: 0; pointer-events: none; } - - html.loaded { + html.loaded { visibility: visible; } - - + + + + + + + + + + + + + @@ -281,35 +291,26 @@
    -

    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.

    - -
    +

    ABOUT US

    +

    WHAT WE DO

    +

    At Gyannetra Pvt Ltd, we specialize in crafting intelligent, AI-powered solutions tailored to drive data-centric transformation across industries. Our core expertise lies in developing custom tools and models in Artificial Intelligence, Data Science, and Software Engineering — empowering businesses to unlock insights, automate processes, and accelerate innovation. Whether it's building large language model (LLM)-based applications, intelligent OCR systems, analytics dashboards, or workflow automations, we help organizations harness the full potential of modern AI and data 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.

    +

    To be a trusted global partner in AI-driven innovation — enabling businesses, governments, and educational institutions to evolve intelligently and sustainably. We envision a world where intelligent systems and human values work in harmony to solve real-world challenges, elevate decision-making, and create a better future for all.

    -
    - -
    +
    +

    OUR MISSION

    +

    Our mission is to deliver cutting-edge, purpose-built AI solutions that are not only technically robust but also aligned with each client's unique business context. We strive to:

    +
      +
    • Democratize access to AI through education, consultancy, and tools.
      • +
    • Transform businesses with tailored AI models, data science solutions, and smart automation.
      • +
    • Innovate with integrity, ensuring transparency, ethics, and long-term value creation.
      • +
    +
    +

    OUR JOURNEY

    -

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

    - +

    Gyannetra was founded in early 2024. Since our inception, we have focused on expanding our expertise and building strong relationships with partners across various industries.

    @@ -321,8 +322,7 @@ Gyannetra Logo

    Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.

    -
    -
    +

    Quick Links

    -
    -

    Contact Us

    -

    Follow Us

    Stay updated with our latest insights and news.

    +
    +

    Contact Us

    +
    diff --git a/contact.html b/contact.html index e097221..58cde1c 100644 --- a/contact.html +++ b/contact.html @@ -162,12 +162,24 @@ } .nav-links.active, - .nav-links.show { - left: 0 !important; + .nav-links.show { left: 0 !important; } } - - + + + + + + + + + + + + + + + @@ -263,9 +275,8 @@

    CONTACT US

    -

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

    -
    -
    +

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

    + +

    CONTACT INFORMATION

    • info@gyannetra.com
      • @@ -311,8 +322,7 @@ Gyannetra Logo

      Empowering businesses with intelligent AI solutions to drive innovation, efficiency, and growth in a data-centric world.

      -
    -
    +

    Quick Links

    -
    -

    Contact Us

    -

    Follow Us

    Stay updated with our latest insights and news.

    +
    +

    Contact Us

    +

    © 2025 Gyannetra. All rights reserved. | Privacy Policy | Terms and Conditions

    diff --git a/css/01-base-variables.css b/css/01-base-variables.css new file mode 100644 index 0000000..c4910d1 --- /dev/null +++ b/css/01-base-variables.css @@ -0,0 +1,324 @@ +/* ===== BASE VARIABLES AND IMPORTS ===== */ +@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=VT323&display=swap'); + +/* ===== CSS CUSTOM PROPERTIES ===== */ +:root { + /* Typography */ + --font-body: 'Space Grotesk', sans-serif; + --font-headings: 'VT323', monospace; + --font-mono: 'VT323', monospace; + + /* Base colors */ + --fg: #ececec; + --btn-bg: rgba(20, 20, 40, 0.8); + --btn-hover: rgba(20, 20, 40, 1); + --gap: 2rem; + --max-w: 1200px; + + /* Standardized card and text styles */ + --card-bg: rgba(25, 35, 55, 0.7); + --text-light: #e0e0e0; + --text-muted: #b0b0b0; + + /* Default primary color scheme (purple) */ + --primary-color: #6d28d9; + --primary-color-rgb: 109, 40, 217; + --primary-color-hover: #5b21b6; + --primary-color-glow: rgba(109, 40, 217, 0.5); + --accent: #a2abff; + --accent-rgb: 162, 171, 255; + + /* Industry-specific color schemes */ + /* Finance - Professional Blue */ + --finance-primary: #007bff; + --finance-primary-rgb: 0, 123, 255; + --finance-primary-hover: #0056b3; + + /* Healthcare - Medical Blue */ + --healthcare-primary: #00c6ff; + --healthcare-primary-rgb: 0, 198, 255; + --healthcare-primary-hover: #0099cc; + + /* Retail - Commercial Red */ + --retail-primary: #e74c3c; + --retail-primary-rgb: 231, 76, 60; + --retail-primary-hover: #c0392b; + + /* Manufacturing - Industrial Blue */ + --manufacturing-primary: #3498db; + --manufacturing-primary-rgb: 52, 152, 219; + --manufacturing-primary-hover: #2980b9; + + /* Marketing - Creative Pink */ + --marketing-primary: #ec4899; + --marketing-primary-rgb: 236, 72, 153; + --marketing-primary-hover: #db2777; + + /* Travel - Sky Blue */ + --travel-primary: #0ea5e9; + --travel-primary-rgb: 14, 165, 233; + --travel-primary-hover: #0284c7; + + /* Media & Entertainment - Purple */ + --media-primary: #9333ea; + --media-primary-rgb: 147, 51, 234; + --media-primary-hover: #7e22ce; + + /* Services color schemes */ + /* Machine Learning - Deep Blue */ + --machine-learning-primary: #2563eb; + --machine-learning-primary-rgb: 37, 99, 235; + --machine-learning-primary-hover: #1d4ed8; + + /* Generative AI - Emerald Green */ + --generative-ai-primary: #10b981; + --generative-ai-primary-rgb: 16, 185, 129; + --generative-ai-primary-hover: #059669; + + /* Data Analysis - Amber */ + --data-analysis-primary: #f59e0b; + --data-analysis-primary-rgb: 245, 158, 11; + --data-analysis-primary-hover: #d97706; + + /* Automation - Purple */ + --automation-primary: #8b5cf6; + --automation-primary-rgb: 139, 92, 246; + --automation-primary-hover: #7c3aed; + + /* Agentic AI - Pink */ + --agentic-ai-primary: #ec4899; + --agentic-ai-primary-rgb: 236, 72, 153; + --agentic-ai-primary-hover: #db2777; + + /* Spacing variables */ + --section-margin: 2rem; + --section-padding: 1.5rem; + --card-padding: 25px; + --grid-gap: 30px; +} + +/* ===== COLOR THEME UTILITY CLASSES ===== */ +.theme-finance { + --primary-color: var(--finance-primary); + --primary-color-rgb: var(--finance-primary-rgb); + --primary-color-hover: var(--finance-primary-hover); + --primary-color-glow: rgba(var(--finance-primary-rgb), 0.5); +} + +.theme-healthcare { + --primary-color: var(--healthcare-primary); + --primary-color-rgb: var(--healthcare-primary-rgb); + --primary-color-hover: var(--healthcare-primary-hover); + --primary-color-glow: rgba(var(--healthcare-primary-rgb), 0.5); +} + +.theme-retail { + --primary-color: var(--retail-primary); + --primary-color-rgb: var(--retail-primary-rgb); + --primary-color-hover: var(--retail-primary-hover); + --primary-color-glow: rgba(var(--retail-primary-rgb), 0.5); +} + +.theme-manufacturing { + --primary-color: var(--manufacturing-primary); + --primary-color-rgb: var(--manufacturing-primary-rgb); + --primary-color-hover: var(--manufacturing-primary-hover); + --primary-color-glow: rgba(var(--manufacturing-primary-rgb), 0.5); +} + +.theme-marketing { + --primary-color: var(--marketing-primary); + --primary-color-rgb: var(--marketing-primary-rgb); + --primary-color-hover: var(--marketing-primary-hover); + --primary-color-glow: rgba(var(--marketing-primary-rgb), 0.5); +} + +.theme-travel { + --primary-color: var(--travel-primary); + --primary-color-rgb: var(--travel-primary-rgb); + --primary-color-hover: var(--travel-primary-hover); + --primary-color-glow: rgba(var(--travel-primary-rgb), 0.5); +} + +.theme-media { + --primary-color: var(--media-primary); + --primary-color-rgb: var(--media-primary-rgb); + --primary-color-hover: var(--media-primary-hover); + --primary-color-glow: rgba(var(--media-primary-rgb), 0.5); +} + +.theme-machine-learning { + --primary-color: var(--machine-learning-primary); + --primary-color-rgb: var(--machine-learning-primary-rgb); + --primary-color-hover: var(--machine-learning-primary-hover); + --primary-color-glow: rgba(var(--machine-learning-primary-rgb), 0.5); +} + +.theme-generative-ai { + --primary-color: var(--generative-ai-primary); + --primary-color-rgb: var(--generative-ai-primary-rgb); + --primary-color-hover: var(--generative-ai-primary-hover); + --primary-color-glow: rgba(var(--generative-ai-primary-rgb), 0.5); +} + +.theme-data-analysis { + --primary-color: var(--data-analysis-primary); + --primary-color-rgb: var(--data-analysis-primary-rgb); + --primary-color-hover: var(--data-analysis-primary-hover); + --primary-color-glow: rgba(var(--data-analysis-primary-rgb), 0.5); +} + +.theme-automation { + --primary-color: var(--automation-primary); + --primary-color-rgb: var(--automation-primary-rgb); + --primary-color-hover: var(--automation-primary-hover); + --primary-color-glow: rgba(var(--automation-primary-rgb), 0.5); +} + +.theme-agentic-ai { + --primary-color: var(--agentic-ai-primary); + --primary-color-rgb: var(--agentic-ai-primary-rgb); + --primary-color-hover: var(--agentic-ai-primary-hover); + --primary-color-glow: rgba(var(--agentic-ai-primary-rgb), 0.5); +} + +/* ===== BASE RESET AND TYPOGRAPHY ===== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + height: 100%; + scroll-behavior: smooth; + visibility: visible !important; +} + +body { + background: url('../assets/3293677.png') no-repeat center center fixed; + background-size: cover; + color: var(--fg); + font-family: var(--font-body); + font-weight: 400; + font-style: normal; + font-size: 1.3rem; + line-height: 1.5; + margin: 0; + padding: 0; + min-height: 100vh; + overflow-x: hidden; + padding-top: 80px; +} + +/* ===== TYPOGRAPHY ===== */ +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-headings); + color: #52eef5; + letter-spacing: 0.7px; + font-size: 4.5rem; + font-weight: 100; +} + +/* Card heading size exceptions */ +.benefit-card h3, +.webinar-video-card .video-info h3, +.article-card h3, +.related-content-item h3 { + font-size: 2rem; + font-weight: 400; + line-height: 1.2; + margin-bottom: 10px; +} + +/* Card heading styles are now handled in webinar-video.css */ + +/* ===== FOUC PREVENTION ===== */ +.font-loading { + font-family: var(--font-mono), Consolas, 'Courier New', monospace; +} + +/* Page loading transitions */ +html.no-js { + visibility: hidden; +} + +body.loading { + opacity: 1; +} + +body.page-ready { + opacity: 1; + visibility: visible; +} + +.fouc-prevention { + visibility: hidden !important; +} + +.fouc-prevention .site-header, +.fouc-prevention #hero { + visibility: visible !important; +} + +html:not(.fouc-prevention) { + transition: opacity 0.3s ease-in; + opacity: 1; +} + +/* ===== PRELOADER STYLES ===== */ +#preloader { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #0a0a1a; + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; + transition: opacity 0.5s ease, visibility 0.5s ease; +} + +body.page-ready #preloader { + opacity: 0; + visibility: hidden; + pointer-events: none; +} + +.loader-container { + text-align: center; +} + +.loader-spinner { + width: 50px; + height: 50px; + border: 3px solid rgba(139, 92, 246, 0.2); + border-radius: 50%; + border-top-color: var(--primary-color); + margin: 0 auto 15px; + animation: spin 1s ease-in-out infinite; +} + +.loader-text { + color: var(--primary-color); + font-size: 1.2rem; + letter-spacing: 2px; + animation: pulse 1.5s ease-in-out infinite; +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 0.5; + } + 50% { + opacity: 1; + } +} \ No newline at end of file diff --git a/css/02-layout-components.css b/css/02-layout-components.css new file mode 100644 index 0000000..afb0250 --- /dev/null +++ b/css/02-layout-components.css @@ -0,0 +1,1830 @@ +/* ===== LAYOUT AND COMPONENTS ===== */ + +/* ===== BASE ELEMENTS ===== */ +body { + font-family: var(--font-body); + line-height: 1.6; +} + +p, ul, ol, li, a, span, div, td, th, input, textarea, button { + font-family: var(--font-body); +} + +h1, h2, h3, h4, h5, h6 { + font-family: var(--font-headings); +} + +/* Special elements that should use the VT323 font */ +.section-heading, .typewriter-text, .loader-text, .nav-links, .navbar { + font-family: var(--font-mono); +} + +/* ===== CONTAINERS AND WRAPPERS ===== */ +.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; +} + +.gn-responsive-container { + width: 92%; + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; +} + +/* ===== SECTIONS ===== */ +section { + margin: var(--section-margin) 0; + padding: var(--section-padding) 0; +} + +.section-heading, +section h2 { + font-size: 2.6rem; + margin-bottom: 30px; + color: #52eef5; + text-align: center; + text-transform: uppercase; + letter-spacing: 1px; +} + +.section-heading { + font-size: 3rem; + text-align: center; + margin: var(--gap) 0; + letter-spacing: 0.7px; + position: relative; + display: inline-block; + width: 100%; font-family: var(--font-mono); + color: #52eef5; +} + +.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%); +} + +.section-subheading { + font-size: 1.8rem; + color: var(--primary-color); + text-align: center; + margin-top: 1.5rem; + margin-bottom: 1rem; + letter-spacing: 1px; + text-transform: uppercase; +} + +.section-intro { + font-size: 1.2rem; + color: var(--text-light); + text-align: center; + max-width: 900px; + margin: 0 auto 2.5rem; + line-height: 1.6; +} + +/* ===== GRID LAYOUTS ===== */ +.articles-grid, +.solutions-grid, +.related-content-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: var(--grid-gap); + margin-top: 40px; +} + +.solutions-grid { + grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); +} + +.offerings-grid, +.related-content-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 3rem; + margin-top: 3rem; +} + +/* ===== STANDARDIZED CARDS ===== */ +.article-card, +.solution-item, +.related-content-item { + background-color: var(--card-bg); + border-radius: 12px; + padding: var(--card-padding); + text-align: left; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); + transition: transform 0.3s ease, box-shadow 0.3s ease; + display: flex; + flex-direction: column; + border: 1px solid rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); + height: 100%; +} + +.article-card:hover, +.solution-item:hover, +.related-content-item:hover { + transform: translateY(-8px); + box-shadow: 0 12px 25px rgba(var(--primary-color-rgb, 109, 40, 217), 0.4); +} + +.solution-item { + text-align: center; + align-items: center; +} + +.article-card h3, +.solution-item h3, +.related-content-item h3 { + font-size: 1.7rem; + color: #52eef5; + margin-bottom: 12px; +} + +.solution-item h3 { + font-size: 1.5rem; + color: #52eef5; +} + +.article-card p, +.solution-item p, +.related-content-item p { + color: var(--text-muted); + margin-bottom: 20px; + line-height: 1.6; +} + +.solution-item p { + font-size: 1.15rem; +} + +.article-card img { + width: 100%; + height: 180px; + object-fit: cover; + border-radius: 8px; + margin-bottom: 20px; +} + +.solution-icon { + width: 70px; + height: 70px; + margin-bottom: 20px; + object-fit: contain; +} + +/* ===== OFFERING AND FEATURE CARDS ===== */ +.offerings-cards, +.blog-cards { + display: flex; + justify-content: center; + gap: 30px; + flex-wrap: wrap; +} + +.offering-card, +.feature-card, +.blog-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, +.feature-card:hover, +.blog-card:hover { + transform: translateY(-10px); +} + +.offering-card img, +.feature-card img { + width: 60px; + height: 60px; + margin-bottom: 20px; +} + +.offering-card h3 { + font-size: 1.8em; + margin-bottom: 15px; + color: var(--text-color-primary); +} + +.offering-card p { + color: var(--text-color-secondary); +} + +/* ===== BENEFIT CARDS ===== */ +.benefits-cards-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 2rem; + margin: 2rem auto; + max-width: 1200px; + padding: 0 1rem; +} + +.benefit-card { + background-color: var(--card-bg); + border: 1px solid rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); + border-radius: 12px; + padding: 25px; + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; + box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); + height: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.benefit-card:hover { + transform: translateY(-8px); + box-shadow: 0 12px 25px rgba(var(--primary-color-rgb, 109, 40, 217), 0.4); + border-color: rgba(var(--primary-color-rgb, 109, 40, 217), 0.6); +} + +.benefit-card-icon { + width: 70px; + height: 70px; + margin-bottom: 18px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.1); + border-radius: 50%; + transition: transform 0.3s ease, background-color 0.3s ease; +} + +.benefit-card:hover .benefit-card-icon { + transform: scale(1.1); + background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.2); +} + +.benefit-card-icon i { + font-size: 2.2rem; + color: var(--primary-color); + transition: color 0.3s ease; +} + +.benefit-card-icon img { + width: 55px; + height: 55px; + object-fit: contain; +} + +/* Specific styling for buttons within benefit cards */ +.benefit-card .btn-primary { + margin-top: auto; + width: 100%; + max-width: 200px; + padding: 12px 24px; + font-size: 0.9rem; + border-radius: 6px; + align-self: center; + text-align: center; + white-space: nowrap; +} + +/* ===== SPECIALIZATION CARDS ===== */ +.specializations-cards-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; + margin-top: 40px; +} + +.specialization-card { + background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%); + border: 1px solid rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); + border-radius: 15px; + padding: 30px; + transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); + height: 100%; + display: flex; + flex-direction: column; + position: relative; + overflow: hidden; + backdrop-filter: blur(10px); +} + +.specialization-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, transparent, var(--primary-color), transparent); + opacity: 0; + transition: opacity 0.3s ease; +} + +.specialization-card:hover { + transform: translateY(-8px); + box-shadow: 0 15px 35px rgba(var(--primary-color-rgb, 109, 40, 217), 0.4); + border-color: rgba(var(--primary-color-rgb, 109, 40, 217), 0.6); +} + +.specialization-card:hover::before { + opacity: 1; + animation: shimmer 3s ease-in-out infinite; +} + +.specialization-card-icon { + width: 90px; + height: 90px; + margin-bottom: 20px; + margin-left: auto; + margin-right: auto; + display: flex; + align-items: center; + justify-content: center; + background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.15); + border-radius: 50%; + transition: transform 0.3s ease, background-color 0.3s ease; + box-shadow: 0 5px 15px rgba(var(--primary-color-rgb, 109, 40, 217), 0.2); +} + +.specialization-card:hover .specialization-card-icon { + transform: scale(1.1); + background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.25); + box-shadow: 0 8px 20px rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); +} + +.specialization-card-icon img { + width: 60px; + height: 60px; + object-fit: contain; + filter: drop-shadow(0 0 5px rgba(var(--primary-color-rgb, 109, 40, 217), 0.3)); +} + +.specialization-card h3 { + font-size: 1.8rem; + color: #52eef5; + margin-bottom: 15px; + text-align: center; +} + +.specialization-description { + color: var(--text-light); + line-height: 1.6; + font-size: 1.1rem; + margin-bottom: 20px; + flex-grow: 1; +} + +.specialization-highlights { + display: flex; + flex-wrap: wrap; + gap: 10px; + margin-bottom: 25px; + justify-content: center; +} + +.highlight-badge { + background: rgba(255, 255, 255, 0.1); + color: #ffffff; + padding: 6px 12px; + border-radius: 20px; + font-size: 0.9rem; + border: 1px solid rgba(255, 255, 255, 0.2); + transition: background 0.3s ease, transform 0.3s ease; +} + +.specialization-card:hover .highlight-badge { + background: rgba(255, 255, 255, 0.2); + transform: translateY(-2px); +} + +.specialization-btn { + align-self: center; + padding: 10px 25px; + margin-top: 5px; + font-size: 0.95rem; + border-radius: 8px; +} + +/* ===== WORKSHOP AND ADDITIONAL CARDS ===== */ +.workshop-card .card-footer { + margin-top: auto; + padding-top: 20px; + display: flex; + flex-direction: column; + gap: 15px; + align-items: center; +} + +.workshop-details { + font-size: 0.9rem; + color: var(--text-muted); + font-style: italic; +} + +.program-highlights { + display: flex; + gap: 15px; + margin-top: 15px; + flex-wrap: wrap; + justify-content: center; +} + +.highlight-item { + background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.1); + color: var(--primary-color); + padding: 5px 12px; + border-radius: 20px; + font-size: 0.9rem; + display: flex; + align-items: center; + gap: 5px; +} + +/* ===== READ MORE LINKS ===== */ +.read-more-link { + color: var(--primary-color); + text-decoration: none; + transition: color 0.3s ease, background-color 0.3s ease; + align-self: flex-start; + padding: 8px 15px; + border: 1px solid var(--primary-color); + border-radius: 5px; +} + +.read-more-link:hover { + background-color: var(--primary-color-hover); + color: #fff; + text-decoration: none; +} + +.read-more { + display: inline-block; + margin-top: 1rem; + color: #a2abff; + text-decoration: none; + transition: color 0.3s ease; +} + +.read-more:hover, +.blog-item .read-more:hover, +#insights-stories .insight-item .read-more:hover { + color: #ffffff; + text-decoration: underline; +} + +/* ===== FOOTER STYLES ===== */ +footer { + width: 100%; + position: relative; + z-index: 10; + margin-top: 3rem; +} + +.site-footer { + background-color: #0f172a; /* Dark blue-gray background */ + color: var(--text-muted); + padding: 50px 0; + font-size: 1.4rem; +} + +.footer-content { + margin-bottom: 30px; +} + +/* Structure the footer into three main columns with better spacing */ +.footer-content { + display: grid; + grid-template-columns: 2fr 1.5fr 1.5fr; + grid-template-areas: + "col1 col2 social" + "col1 col2 contact"; + gap: 40px; + align-items: start; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +/* Column assignments */ +.footer-col:nth-child(1) { + grid-area: col1; +} + +.footer-col:nth-child(2) { + grid-area: col2; + padding-left: 20px; /* Add left padding to shift content slightly right */ +} + +.footer-col:nth-child(3) { + grid-area: social; + margin-bottom: 5px; /* Further reduced space between social and contact */ +} + +.footer-col:nth-child(4) { + grid-area: contact; + margin-top: -20px; /* Increased negative margin to shift contact section further upward */ +} + +.footer-col { + width: 100%; + min-width: 220px; /* Ensures columns don't get too narrow */ +} + +.footer-col-logo .logo { + font-size: 2.2rem; + color: #fff; /* White logo text */ + margin-bottom: 20px; + display: inline-block; + /* Removed gradient for simpler, consistent look */ + background: none; + -webkit-background-clip: initial; + background-clip: initial; + text-shadow: none; /* Remove text shadow if not desired */ + border: none; + padding: 0; +} + +/* Footer logo description paragraph */ +.footer-col-logo p { + margin-top: 8px; + margin-bottom: 8px; + line-height: 1.5; + color: var(--text-muted); + max-width: 350px; + font-size: 1.3rem; +} + +/* Footer logo image styles */ +.footer-logo-img { + height: 180px; /* Reduced from 200px */ + width: auto; + max-width: 550px; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); + transition: all 0.3s ease; +} + +.footer-col-logo .logo:hover .footer-logo-img { + filter: drop-shadow(0 4px 8px rgba(90, 107, 255, 0.3)); + transform: scale(1.02); +} + +.footer-col h3 { + font-size: 1.8rem; + color: #52eef5; /* Cyan heading text */ + margin-bottom: 10px; /* Reduced from 20px to 10px */ + + /* Removed gradient for simpler, consistent look */ + background: none; + -webkit-background-clip: initial; + background-clip: initial; + text-shadow: none; /* Remove text shadow if not desired */ +} + +.footer-col ul { + list-style: none; + padding: 0; +} + +.footer-col ul li { + margin-bottom: 4px; +} + +.footer-col ul li p { + margin-bottom: 2px; + padding: 4px 0; + line-height: 1.3; +} + +.footer-col ul li a { + color: var(--text-muted); + text-decoration: none; + transition: color 0.3s ease; + font-size: 1.3rem; +} + +.footer-col ul li a:hover { + color: var(--primary-color); /* Use primary color for hover */ +} + +.footer-col p { + margin-bottom: 10px; + line-height: 1.7; + font-size: 1.3rem; +} + +/* Footer contact info with icons styling */ +.footer-col ul li p { + display: flex; + align-items: center; + margin-bottom: 2px; + padding: 4px 0; + font-size: 1.3rem; + line-height: 1.3; +} + +.footer-col ul li p i { + margin-right: 12px; + font-size: 1.5rem; + color: var(--primary-color); + min-width: 24px; + text-align: center; +} + +.footer-col p a { /* Styling for links within paragraphs, e.g., email */ + color: var(--text-muted); + text-decoration: none; +} + +.footer-col p a:hover { + color: var(--primary-color); + text-decoration: underline; +} + +.footer-col .social-links { + display: flex; + align-items: center; + gap: 15px; + margin-top: 12px; +} + +.footer-col .social-links a { + color: var(--text-muted); + font-size: 1.6rem; + text-decoration: none; /* Remove underlines from social media icons */ + transition: color 0.3s ease, transform 0.3s ease; + padding: 10px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + min-width: 45px; + min-height: 45px; +} + +.footer-col .social-links a:hover { + color: var(--primary-color); /* Use primary color for hover */ + transform: translateY(-2px); + background-color: rgba(var(--primary-color-rgb), 0.1); +} + +.footer-bottom { + text-align: center; + padding-top: 20px; + border-top: 1px solid rgba(255, 255, 255, 0.1); /* Light border */ + font-size: 1.25rem; +} + +.footer-bottom a { + color: #ffffff; /* White color for footer bottom links */ + text-decoration: none; /* Remove underline */ +} + +.footer-bottom a:hover { + color: #8b5cf6; + text-decoration: underline; +} + +/* Specific targeting for footer Contact Us section line spacing */ +.footer-col:has(h3:contains("Contact Us")) ul li, +.footer-col h3 + ul li { + margin-bottom: 4px; +} + +.footer-col:has(h3:contains("Contact Us")) ul li p, +.footer-col h3 + ul li p { + line-height: 1.3; +} + +/* Additional styling for Quick Links section */ +.footer-col:nth-child(2) ul { + margin-left: 5px; /* Slight indentation for better visual alignment */ +} + +.footer-col:nth-child(2) h3 { + margin-left: 5px; /* Align heading with the links */ +} + +/* ===== EXPERTISE CARDS ===== */ +.exp-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2.5rem; + justify-items: center; + max-width: 2000px; + margin: 0 auto; + padding: 0 2rem; +} + +.exp-item { + background: rgba(0, 0, 0, 0.45); + border-radius: 16px; + padding: 3rem; + backdrop-filter: blur(15px); + border: 1px solid rgba(255, 255, 255, 0.2); + transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + width: 100%; + max-width: 600px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + min-height: 440px; + text-align: center; + position: relative; + overflow: hidden; + cursor: pointer; +} + +.exp-item::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(82, 238, 245, 0.05) 0%, rgba(162, 171, 255, 0.03) 100%); + opacity: 0; + transition: opacity 0.4s ease; +} + +.exp-item:hover { + transform: translateY(-10px) scale(1.03); + background: rgba(0, 0, 0, 0.65); + border-color: rgba(82, 238, 245, 0.5); + box-shadow: + 0 20px 50px rgba(82, 238, 245, 0.3), + 0 8px 20px rgba(0, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.15), + 0 0 0 1px rgba(82, 238, 245, 0.2); +} + +.exp-item:hover::before { + opacity: 1; +} + +.exp-item img { + width: 110px; + height: auto; + margin-bottom: 1.5rem; + opacity: 0.95; + transition: all 0.4s ease; + filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); +} + +.exp-item:hover img { + opacity: 1; + transform: scale(1.05); + filter: drop-shadow(0 6px 12px rgba(82, 238, 245, 0.3)); +} + +.exp-item p:first-of-type { + margin-top: 0; + margin-bottom: 1.2rem; + font-size: 1.4rem; + text-align: center; + color: #ffffff; + text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9); + letter-spacing: 0.8px; + position: relative; + z-index: 2; + line-height: 1.3; +} + +.exp-item .exp-description { + margin-top: 0; + font-size: 1.1rem; + line-height: 1.5; + text-align: center; + color: rgba(255, 255, 255, 0.95); + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); + position: relative; + z-index: 2; + max-width: 100%; + opacity: 0.9; + transition: opacity 0.3s ease; +} + +.exp-item:hover .exp-description { + opacity: 1; + color: rgba(255, 255, 255, 1); +} + +/* Responsive design for expertise cards */ +@media (max-width: 1024px) { + .exp-grid { + gap: 2.2rem; + max-width: 100%; + padding: 0 2rem; + grid-template-columns: repeat(4, 1fr); + } + .exp-item { + padding: 2.5rem; + max-width: 500px; + min-height: 400px; + } + + .exp-item img { + width: 100px; + margin-bottom: 1.2rem; + } + + .exp-item p:first-of-type { + font-size: 1.25rem; + margin-bottom: 0.9rem; + line-height: 1.3; + } + + .exp-item .exp-description { + font-size: 1rem; + line-height: 1.4; + } +} + +@media (max-width: 768px) { + .exp-grid { + gap: 2rem; + padding: 0 1.5rem; + grid-template-columns: repeat(2, 1fr); + } + + .exp-item { + padding: 2.2rem; + max-width: 100%; + min-height: 380px; + } + + .exp-item img { + width: 90px; + margin-bottom: 1rem; + } + + .exp-item p:first-of-type { + font-size: 1.2rem; + margin-bottom: 0.8rem; + } + + .exp-item .exp-description { + font-size: 0.9rem; + line-height: 1.4; + margin-top: 0.5rem; + } +} + +@media (max-width: 480px) { + .exp-grid { + gap: 1.8rem; + padding: 0 1rem; + grid-template-columns: 1fr; + } + + .exp-item { + padding: 2rem; + max-width: 420px; + min-height: 340px; + margin: 0 auto; + } + + .exp-item img { + width: 80px; + margin-bottom: 1rem; + } + + .exp-item p:first-of-type { + font-size: 1.1rem; + margin-bottom: 0.7rem; + } + + .exp-item .exp-description { + font-size: 0.85rem; + line-height: 1.5; + margin-top: 0.5rem; + } +} + +/* ===== COURSE CARDS ===== */ + +/* ===== WEBINAR CARDS SYSTEM ===== */ + +/* Main Webinar Cards - Reduced padding for smaller height */ +.webinar-main-card { + background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%); + border-radius: 20px; + padding: 1.5rem; + margin: 0.25rem 0; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 50px rgba(var(--primary-color-rgb), 0.1); + border: 1px solid rgba(var(--primary-color-rgb), 0.2); + backdrop-filter: blur(10px); + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.webinar-main-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 3px; + background: linear-gradient(90deg, transparent, var(--primary-color), transparent); + z-index: 1; + border-radius: 20px 20px 0 0; + max-width: 100%; + overflow: hidden; +} + +.webinar-main-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); +} + +/* Webinar Card Headers - Reduced margins for compact layout */ +.webinar-card-header { + text-align: center; + margin-bottom: 1.5rem; + border-bottom: 2px solid rgba(var(--primary-color-rgb), 0.3); + padding-bottom: 1rem; +} + +.webinar-card-header h2 { + font-size: 2.5rem; + color: #52eef5; + margin-bottom: 0.8rem; + text-transform: uppercase; + letter-spacing: 1px; + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; +} + +.webinar-card-header h2 i { + color: var(--primary-color); + font-size: 2.2rem; + text-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.6); +} + +.webinar-card-header p { + font-size: 1.2rem; + color: var(--text-muted); + margin: 0; +} + +/* Upcoming Webinars Content */ +.upcoming-webinars-content { + display: flex; + flex-direction: column; + gap: 1.2rem; +} + +.upcoming-webinar-item { + background: rgba(20, 30, 50, 0.6); + border-radius: 15px; + padding: 1.2rem; + display: flex; + gap: 1.5rem; + align-items: flex-start; + border: 1px solid rgba(var(--primary-color-rgb), 0.2); + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.upcoming-webinar-item::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 3px; + background: linear-gradient(90deg, transparent, var(--primary-color), transparent); + animation: shimmer 3s ease-in-out infinite; + border-radius: 0 2px 2px 0; + z-index: 1; + max-width: 100%; + overflow: hidden; +} + +.upcoming-webinar-item:hover { + background: rgba(25, 35, 55, 0.9); + transform: translateY(-5px); + box-shadow: 0 5px 20px rgba(var(--primary-color-rgb), 0.2); +} + +/* Date Badge */ +.webinar-date-badge { + background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); + border-radius: 12px; + padding: 0.8rem; + text-align: center; + min-width: 80px; + box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3); + flex-shrink: 0; +} + +.webinar-date-badge .date { + display: block; + font-size: 1.8rem; + color: #fff; + line-height: 1; +} + +.webinar-date-badge .year { + display: block; + font-size: 1rem; + color: rgba(255, 255, 255, 0.9); + margin-top: 0.2rem; +} + +/* Webinar Details */ +.webinar-details { + flex: 1; +} + +.webinar-details h3 { + font-size: 1.8rem; + color: #52eef5; + margin-bottom: 1rem; +} + +.webinar-meta { + display: flex; + gap: 2rem; + margin-bottom: 1rem; + flex-wrap: wrap; +} + +.webinar-meta span { + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--text-muted); + font-size: 1rem; +} + +.webinar-meta i { + color: var(--primary-color); + font-size: 0.9rem; +} + +.webinar-description { + color: var(--text-light); + line-height: 1.6; + margin-bottom: 1.5rem; + font-size: 1.1rem; +} + +.webinar-takeaways { + margin-bottom: 2rem; +} + +.webinar-takeaways h4 { + color: #52eef5; + font-size: 1.3rem; + margin-bottom: 0.8rem; +} + +.webinar-takeaways ul { + list-style: none; + padding: 0; +} + +.webinar-takeaways li { + color: var(--text-light); + margin-bottom: 0.5rem; + padding-left: 1.5rem; + position: relative; + line-height: 1.5; +} + +.webinar-takeaways li::before { + content: '✓'; + position: absolute; + left: 0; + color: var(--primary-color); + font-size: 1.1rem; +} + +/* Webinar Actions */ +.webinar-actions { + display: flex; + gap: 1rem; + flex-wrap: wrap; +} + +.register-btn, .add-calendar-btn { + padding: 0.8rem 1.5rem; + border-radius: 8px; + text-decoration: none; + font-size: 1rem; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 0.5px; + display: inline-flex; + align-items: center; + gap: 0.5rem; +} + +.register-btn { + background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); + color: #fff; + border: none; + box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3); +} + +.register-btn:hover { + background: linear-gradient(135deg, var(--primary-color-hover), var(--primary-color)); + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.4); + color: #fff; +} + +.add-calendar-btn { + background: transparent; + color: var(--primary-color); + border: 2px solid var(--primary-color); +} + +.add-calendar-btn:hover { + background: var(--primary-color); + color: #fff; + transform: translateY(-2px); + box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3); +} + +/* ===== WEBINAR VIDEO CARDS ===== */ +.webinar-video-card { + background: rgba(20, 30, 50, 0.6); + border: 1px solid rgba(var(--primary-color-rgb), 0.2); + border-radius: 15px; + padding: 1.5rem; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.webinar-video-card .video-container { + position: relative; + width: 100%; + height: 0; + padding-bottom: 62%; /* Increased from standard 56.25% to cover more of the card */ + overflow: hidden; + border-radius: 8px; + margin-bottom: 1rem; + background: rgba(0, 0, 0, 0.3); +} + +.webinar-video-card .video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +.webinar-video-card .video-info { + padding: 0.5rem 0.25rem; + text-align: center; +} + +.webinar-video-card .video-info h3 { + margin-bottom: 0; /* Remove bottom margin since we removed the Live Session text */ +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .webinar-videos-grid { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1.5rem; + } + + .webinar-meta { + gap: 1rem; + } +} + +@media (max-width: 768px) { + .webinar-main-card { + padding: 1.5rem; + margin: 2rem 0 3rem 0; + } + + .already-done-webinars-card { + margin-top: 2rem !important; + } + + .webinar-card-header h2 { + font-size: 2rem; + flex-direction: column; + gap: 0.5rem; + } + + .upcoming-webinar-item { + flex-direction: column; + gap: 1.5rem; + padding: 1.5rem; + } + + .webinar-date-badge { + align-self: flex-start; + min-width: 80px; + } + + .webinar-meta { + flex-direction: column; + gap: 0.8rem; + } + + .webinar-actions { + flex-direction: column; + } + + .register-btn, .add-calendar-btn { + justify-content: center; + text-align: center; + } + + .webinar-videos-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .webinar-video-card { + padding: 1rem; + } + + .offerings-cards, + .blog-cards { + flex-direction: column; + align-items: center; + gap: 20px; + } + + .offering-card, + .feature-card, + .blog-card { + max-width: 100%; + width: 100%; + } +} + +@media (max-width: 480px) { + .webinar-main-card { + padding: 1rem; + margin: 1.5rem 0 2.5rem 0; + } + + .already-done-webinars-card { + margin-top: 1.5rem !important; + } + + .webinar-card-header { + margin-bottom: 1.5rem; + padding-bottom: 1rem; + } + + .webinar-card-header h2 { + font-size: 1.8rem; + } + + .upcoming-webinar-item { + padding: 1rem; + } + + .webinar-details h3 { + font-size: 1.5rem; + } + + .webinar-takeaways { + margin-bottom: 1.5rem; + } + + .gn-video-info h4 { + font-size: 1.2rem; + } + + .expert-advice-card { + padding: 1.5rem; + } + + .feature-card, + .blog-card { + width: 100%; + min-width: auto; + } +} + +/* ===== LEARN AI ON THE GO SECTION STYLES ===== */ + +.gyannetra-app-section-redesigned { + background: linear-gradient(135deg, rgba(15, 15, 35, 0.95) 0%, rgba(25, 25, 45, 0.98) 100%); + padding: 4rem 0; + position: relative; + overflow: hidden; +} + +.gyannetra-app-section-redesigned::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 20% 20%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%); + pointer-events: none; +} + +.gn-app-section-wrapper { + width: 92%; + max-width: 1300px; + margin: 0 auto; +} + +.gn-app-main-heading { + font-size: 2.8rem; + color: #52eef5; + text-align: center; + margin-bottom: 3rem; + text-transform: uppercase; + letter-spacing: 2px; + font-family: 'VT323', monospace; +} + +/* Dual Column Layout */ +.gn-app-dual-column-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: stretch; /* Make columns stretch to same height */ +} + +/* Left Column */ +.gn-app-left-column { + display: flex; + flex-direction: column; + gap: 2rem; + height: 100%; /* Ensure full height */ +} + +.gn-app-features-card { + background: rgba(20, 30, 50, 0.6); + border: 1px solid rgba(var(--primary-color-rgb), 0.2); + border-radius: 15px; + padding: 2rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); + backdrop-filter: blur(10px); + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + flex: 1; /* Allow card to grow and fill space */ +} + +.gn-app-features-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 3px; + background: linear-gradient(90deg, transparent, var(--primary-color), transparent); + z-index: 1; + border-radius: 20px 20px 0 0; +} + +.gn-app-intro-text { + margin-bottom: 2rem; +} + +.gn-app-intro-text p { + font-size: 1.1rem; + color: var(--text-light); + line-height: 1.6; +} + +.gn-app-features-list { + display: flex; + flex-direction: column; + gap: 1.5rem; + /* Remove flex: 1 since we don't need to push download section to bottom anymore */ +} + +.gn-feature-item { + display: flex; + gap: 1.2rem; + align-items: flex-start; +} + +.gn-feature-icon { + background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); + width: 50px; + height: 50px; + border-radius: 12px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + box-shadow: 0 5px 15px rgba(var(--primary-color-rgb), 0.3); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.gn-feature-icon i { + font-size: 1.6rem; + color: #ffffff; +} + +.gn-feature-item:hover .gn-feature-icon { + transform: translateY(-3px); + box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.4); +} + +.gn-feature-content h4 { + font-size: 1.4rem; + color: #52eef5; + margin-bottom: 0.5rem; +} + +.gn-feature-content p { + font-size: 1rem; + color: var(--text-muted); + line-height: 1.6; +} + +/* Right Column */ +.gn-app-right-column { + display: flex; + flex-direction: column; + gap: 2rem; + height: 100%; /* Ensure full height */ +} + +.gn-video-tutorial-card { + background: rgba(20, 30, 50, 0.6); + border: 1px solid rgba(var(--primary-color-rgb), 0.2); + border-radius: 15px; + padding: 1.5rem; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); + backdrop-filter: blur(10px); + transition: transform 0.3s ease, box-shadow 0.3s ease; + position: relative; + overflow: hidden; + flex: 1; /* Make videos take equal space */ + display: flex; + flex-direction: column; + height: calc(50% - 1rem); /* Make each card take approximately half the height, accounting for gap */ +} + +.gn-video-tutorial-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 3px; + background: linear-gradient(90deg, transparent, var(--primary-color), transparent); + z-index: 1; + border-radius: 20px 20px 0 0; +} + +.gn-video-tutorial-card:hover { + transform: translateY(-5px); + box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4); +} + +.gn-video-container { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; /* 16:9 aspect ratio */ + overflow: hidden; + border-radius: 10px; + margin-bottom: 1.5rem; + background: rgba(0, 0, 0, 0.3); +} + +.gn-video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; + border-radius: 10px; +} + +.gn-video-info { + display: flex; + flex-direction: column; + flex: 1; /* Allow this to grow and fill remaining space */ +} + +.gn-video-info h4 { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 1.3rem; + color: #52eef5; + margin-bottom: 0.8rem; +} + +.gn-video-info h4 i { + font-size: 1.1rem; + color: var(--primary-color); +} + +.gn-video-info p { + font-size: 1rem; + color: var(--text-muted); + line-height: 1.6; + margin: 0; +} + +/* App Download Section */ +.gn-app-download-section { + background: rgba(25, 35, 55, 0.8); + border: 1px solid rgba(var(--primary-color-rgb), 0.3); + border-radius: 15px; + padding: 1.8rem; + text-align: center; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); + backdrop-filter: blur(10px); + position: relative; + overflow: hidden; + margin-top: 2rem; /* Add some space between features and download section */ +} + +.gn-app-download-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 3px; + background: linear-gradient(90deg, transparent, var(--primary-color), transparent); + z-index: 1; + border-radius: 20px 20px 0 0; +} + +.gn-download-heading { + font-size: 1.6rem; + color: #52eef5; + margin-bottom: 1.5rem; +} + +.gn-download-links-container { + display: flex; + justify-content: center; + gap: 1.5rem; + flex-wrap: wrap; +} + +.gn-download-link { + display: flex; + align-items: center; + gap: 0.8rem; + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 12px; + padding: 0.8rem 1.2rem; + min-width: 180px; + transition: all 0.3s ease; + text-decoration: none; +} + +.gn-android-link { + background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(34, 197, 94, 0.2) 100%); + border-color: rgba(34, 197, 94, 0.5); +} + +.gn-android-link:hover { + background: linear-gradient(135deg, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.3) 100%); + transform: translateY(-3px); + box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4); + border-color: rgba(34, 197, 94, 0.7); +} + +.gn-ios-link { + background: linear-gradient(135deg, rgba(0, 122, 255, 0.2) 0%, rgba(0, 122, 255, 0.1) 100%); + border-color: rgba(0, 122, 255, 0.3); +} + +.gn-ios-link:hover { + background: linear-gradient(135deg, rgba(0, 122, 255, 0.3) 0%, rgba(0, 122, 255, 0.2) 100%); + transform: translateY(-3px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); +} + +.gn-download-icon { + font-size: 1.8rem; + display: flex; + align-items: center; + justify-content: center; + color: #ffffff; +} + +.gn-download-text { + display: flex; + flex-direction: column; + align-items: flex-start; +} + +.gn-download-title { + font-size: 0.8rem; + color: rgba(255, 255, 255, 0.8); +} + +.gn-download-store { + font-size: 1.2rem; + font-weight: 600; + color: #ffffff; +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .gn-app-dual-column-container { + gap: 2rem; + } + + .gn-app-features-card, + .gn-video-tutorial-card, + .gn-app-download-section { + padding: 1.5rem; + } + + .gn-feature-icon { + width: 45px; + height: 45px; + } + + .gn-feature-content h4 { + font-size: 1.3rem; + } +} + +@media (max-width: 768px) { + .gn-app-dual-column-container { + grid-template-columns: 1fr; + gap: 2rem; + } + + .gn-app-main-heading { + font-size: 2.5rem; + margin-bottom: 2rem; + } + + .gn-app-features-list { + gap: 1.2rem; + } + + .gn-feature-item { + gap: 1rem; + } + + .gn-download-links-container { + flex-direction: column; + align-items: center; + } + + .gn-download-link { + width: 100%; + max-width: 240px; + justify-content: center; + } +} + +@media (max-width: 480px) { + .gyannetra-app-section-redesigned { + padding: 3rem 0; + } + + .gn-app-main-heading { + font-size: 2.2rem; + margin-bottom: 1.5rem; + } + + .gn-app-features-card, + .gn-video-tutorial-card, + .gn-app-download-section { + padding: 1.2rem; + } + + .gn-feature-item { + flex-direction: column; + align-items: flex-start; + gap: 0.8rem; + } + + .gn-feature-icon { + width: 40px; + height: 40px; + } + + .gn-feature-content h4 { + font-size: 1.2rem; + } + + .gn-video-info h4 { + font-size: 1.15rem; + } + + .gn-download-heading { + font-size: 1.4rem; + } +} + +/* Footer responsive styles */ +@media (max-width: 992px) { + .footer-content { + grid-template-columns: 1fr 1fr; + grid-template-areas: + "col1 col2" + "social contact"; + gap: 30px; + } + + .footer-col:nth-child(2) { + padding-left: 15px; /* Reduce padding on tablets */ + } +} + +@media (max-width: 768px) { + .footer-content { + grid-template-columns: 1fr; + grid-template-areas: + "col1" + "col2" + "social" + "contact"; + gap: 30px; + padding: 0 15px; + } + + .footer-col:nth-child(2) { + padding-left: 0; /* Remove left padding on mobile */ + } +} + +/* Styling for Follow Us and Contact Us sections */ +.footer-col:nth-child(3), .footer-col:nth-child(4) { + padding-left: 10px; + /* Removed left border */ +} + +/* Specific spacing adjustments for Contact Us and Follow Us sections */ +.footer-col:nth-child(3) h3 { + margin-bottom: 8px; +} + +.footer-col:nth-child(4) h3 { + margin-bottom: 8px; + margin-top: 0; /* Remove any top margin for better alignment */ +} + +.footer-col:nth-child(3) ul, .footer-col:nth-child(4) ul { + margin-top: 0; +} + +.footer-col:nth-child(3) .social-links { + margin-top: 8px; +} + +/* Specific targeting for footer Contact Us section line spacing */ +.footer-col:has(h3:contains("Contact Us")) ul li, +.footer-col h3 + ul li { + margin-bottom: 4px; +} + +.footer-col:has(h3:contains("Contact Us")) ul li p, +.footer-col h3 + ul li p { + line-height: 1.3; +} + +/* Contact Us section positioning adjustment */ +.footer-col:nth-child(4) { + padding-top: 0; +} \ No newline at end of file diff --git a/css/03-navigation-header.css b/css/03-navigation-header.css new file mode 100644 index 0000000..83a4216 --- /dev/null +++ b/css/03-navigation-header.css @@ -0,0 +1,569 @@ +/* ===== NAVIGATION AND HEADER ===== */ + +/* ===== SITE HEADER ===== */ +.site-header { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 1000; + background: transparent !important; + backdrop-filter: blur(0px); + -webkit-backdrop-filter: blur(0px); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + border-bottom: 1px solid transparent; + box-shadow: none; + display: flex; + align-items: center; + width: 100%; + padding: 0.5rem 2.5rem; +} + +.site-header.scrolled { + background: transparent !important; + backdrop-filter: blur(30px); + -webkit-backdrop-filter: blur(30px); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); +} + +/* ===== NAVBAR ===== */ +.navbar { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.3rem 2.5rem; + 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; + font-family: var(--font-mono); +} + +/* Override any existing navbar container styles */ +.site-header .navbar, +.site-header .container, +.navbar .container { + background: transparent !important; + border: none !important; + box-shadow: none !important; + border-radius: 0 !important; + padding: 1rem 2rem; + max-width: none !important; + margin: 0 !important; + position: relative; + width: 100%; +} + +/* ===== LOGO ===== */ +.logo { + font-size: 1.9rem; + 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.3rem 1rem; + border-radius: 10px; + transition: all 0.3s ease; + text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 60px; +} + +.logo:hover { + transform: translateY(-2px); + box-shadow: 0 5px 15px rgba(140, 154, 255, 0.2); +} + +/* Logo image styles */ +.logo-img { + height: 50px; + width: auto; + max-width: 350px; + filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); + transition: all 0.3s ease; +} + +.logo:hover .logo-img { + filter: drop-shadow(0 4px 8px rgba(90, 107, 255, 0.4)); + transform: scale(1.05); +} + +/* ===== NAVIGATION LINKS ===== */ +.nav-links { + list-style: none; + display: flex; + gap: 2rem; + margin-right: 1rem; + position: static !important; + width: auto !important; + height: auto !important; + background: transparent !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; + flex-direction: row !important; + justify-content: flex-end !important; + align-items: center !important; + z-index: auto !important; + transition: none !important; + padding: 0 !important; + overflow: visible !important; + box-shadow: none !important; + left: auto !important; + font-family: var(--font-mono); +} + +.nav-link { + color: var(--fg); + text-decoration: none; + font-size: 1.5rem; + display: flex; + align-items: center; + padding: 0.7rem 1.2rem; + border-radius: 8px; + transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; + font-family: var(--font-mono); + position: relative; + letter-spacing: 0.5px; + width: auto !important; + background: transparent !important; + border: none !important; +} + +.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%; +} + +.nav-links .nav-link.active { + color: #ffffff; +} + +.nav-links .nav-link.active::after { + content: ''; + position: absolute; + bottom: -2px; + left: 7.5%; + width: 85%; + height: 3px; + background: linear-gradient(90deg, #6e7adf 0%, #a2abff 100%); + border-radius: 3px; +} + +/* ===== DROPDOWN MENUS ===== */ +.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; + padding-top: 0.8rem; +} + +.dropdown-menu::before { + content: ''; + position: absolute; + top: -0.5rem; + left: 0; + width: 100%; + height: 0.5rem; +} + +.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 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-size: 1.15rem; +} + +.item-description { + font-size: 0.95rem; + opacity: 0.8; +} + +.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); + text-shadow: none; +} + +/* ===== HAMBURGER MENU ===== */ +.hamburger-menu { + display: none; + flex-direction: column; + justify-content: space-around; + width: 30px; + height: 30px; + background: transparent; + border: none; + cursor: pointer; + padding: 10px; + z-index: 1010; + position: relative; +} + +.hamburger-line { + width: 100%; + height: 3px; + background: #ffffff; + border-radius: 2px; + transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); + transform-origin: center; + margin: 3px 0; + box-shadow: 0 0 3px rgba(255, 255, 255, 0.6); +} + +.hamburger-menu.active .hamburger-line:nth-child(1) { + transform: translateY(9px) rotate(45deg); + background: #52eef5; +} + +.hamburger-menu.active .hamburger-line:nth-child(2) { + opacity: 0; + transform: scale(0); +} + +.hamburger-menu.active .hamburger-line:nth-child(3) { + transform: translateY(-9px) rotate(-45deg); + background: #52eef5; +} + +/* ===== MOBILE NAVIGATION ===== */ +@media (max-width: 768px) { + .navbar { + display: flex !important; + justify-content: space-between !important; + align-items: center !important; + padding: 1rem 2rem !important; + position: relative; + } + + /* Hamburger menu mobile styling */ + .hamburger-menu { + display: flex !important; + visibility: visible !important; + opacity: 1 !important; + pointer-events: auto !important; + position: relative !important; + z-index: 9999 !important; + width: 50px !important; + height: 50px !important; + background: rgba(82, 238, 245, 0.4) !important; + border: 3px solid rgba(82, 238, 245, 0.8) !important; + border-radius: 8px !important; + cursor: pointer !important; + touch-action: manipulation !important; + flex-direction: column !important; + justify-content: center !important; + align-items: center !important; + -webkit-user-select: none !important; + -moz-user-select: none !important; + -ms-user-select: none !important; + user-select: none !important; + outline: none !important; + padding: 0 !important; + margin: 0 !important; + box-sizing: border-box !important; + } + + .hamburger-menu:hover { + background: rgba(82, 238, 245, 0.6) !important; + transform: scale(1.05) !important; + } + + .hamburger-menu:active { + transform: scale(0.95) !important; + background: rgba(82, 238, 245, 0.8) !important; + } + + .hamburger-line { + display: block !important; + visibility: visible !important; + opacity: 1 !important; + width: 70% !important; + height: 3px !important; + background: #ffffff !important; + margin: 2px 0 !important; + transition: all 0.3s ease !important; + border-radius: 2px !important; + } + + /* Mobile nav links */ + .nav-links { + position: fixed !important; + top: 0 !important; + left: -100% !important; + width: 100% !important; + height: 100vh !important; + background: rgba(15, 15, 30, 0.98) !important; + backdrop-filter: blur(25px) !important; + z-index: 8888 !important; + transition: left 0.4s ease !important; + display: flex !important; + flex-direction: column !important; + justify-content: flex-start !important; + align-items: center !important; + padding-top: 100px !important; + } + + .nav-links.active, + .nav-links.show { + left: 0 !important; + } + + .nav-links li { + width: 90%; + text-align: center; + margin-bottom: 0.5rem; + } + + .nav-link { + font-size: 1.4rem; + padding: 1.2rem 2rem; + width: 100%; + display: block; + border-radius: 12px; + background: rgba(255, 255, 255, 0.05); + border: 1px solid rgba(255, 255, 255, 0.1); + transition: all 0.3s ease; + color: #ffffff; + text-decoration: none; + } + + .nav-link:hover { + background: rgba(82, 238, 245, 0.2); + border-color: rgba(82, 238, 245, 0.3); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(82, 238, 245, 0.2); + } + + /* Mobile dropdown menus */ + .dropdown-menu { + position: static; + opacity: 1; + visibility: visible; + transform: none; + margin-top: 1rem; + background: rgba(30, 30, 50, 0.9); + border-radius: 12px; + max-height: 0; + overflow: hidden; + transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); + width: 95%; + max-width: 450px; + border: 1px solid rgba(82, 238, 245, 0.2); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); + } + + .dropdown-menu.show { + max-height: 600px; + } + + .dropdown-menu a { + display: flex !important; + padding: 1.5rem 2rem; + font-size: 1.1rem; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + transition: all 0.3s ease; + border-radius: 8px; + margin: 0.25rem; + align-items: center !important; + justify-content: flex-start !important; + width: 100% !important; + box-sizing: border-box !important; + } + + .dropdown-menu a:last-child { + border-bottom: none; + margin-bottom: 0.5rem; + } + + .dropdown-menu a:hover { + background: rgba(82, 238, 245, 0.15); + transform: translateX(5px); + } + + .dropdown-item-content { + display: flex !important; + flex-direction: row !important; + text-align: left !important; + gap: 1rem !important; + align-items: center !important; + padding: 0.5rem !important; + justify-content: flex-start !important; + width: 100% !important; + border-left: 2px solid rgba(82, 238, 245, 0.3) !important; + } + + .dropdown-icon { + width: 40px !important; + height: 40px !important; + margin-right: 0 !important; + margin-left: 0 !important; + flex-shrink: 0 !important; + filter: brightness(1.1); + display: block !important; + object-fit: contain !important; + } + + .text-content { + flex: 1 !important; + display: flex !important; + flex-direction: column !important; + justify-content: center !important; + align-items: flex-start !important; + min-width: 0 !important; + } + + .item-title { + font-size: 1.1rem !important; + color: #ffffff !important; + display: block !important; + margin-bottom: 0.25rem !important; + line-height: 1.2 !important; + white-space: nowrap !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + } + + .item-description { + font-size: 0.9rem !important; + color: rgba(255, 255, 255, 0.8) !important; + line-height: 1.3 !important; + display: -webkit-box !important; + -webkit-line-clamp: 2 !important; + line-clamp: 2 !important; + -webkit-box-orient: vertical !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + } +} + +/* Desktop media query - Reset mobile styles for larger screens */ +@media (min-width: 769px) { + .hamburger-menu { + display: none !important; + } + + .dropdown-menu { + position: absolute !important; + opacity: 0 !important; + visibility: hidden !important; + transform: translateY(10px) !important; + margin-top: 0.5rem !important; + background: #100732 !important; + } + + .dropdown:hover .dropdown-menu { + opacity: 1 !important; + visibility: visible !important; + transform: translateY(0) !important; + } +} \ No newline at end of file diff --git a/css/04-hero-sections.css b/css/04-hero-sections.css new file mode 100644 index 0000000..4207789 --- /dev/null +++ b/css/04-hero-sections.css @@ -0,0 +1,474 @@ +/* ===== HERO SECTIONS ===== */ + +/* ===== MAIN HERO SECTION ===== */ +#hero { + position: relative; + display: flex; + align-items: center; + justify-content: flex-start; + padding-top: 0 !important; + padding-bottom: 0 !important; + margin-top: 0 !important; + width: 100%; + margin: 0; + overflow: hidden; + min-height: calc(100vh - 80px); + height: calc(100vh - 80px); + background: none; + visibility: visible !important; + opacity: 1 !important; +} + +.hero-container { + display: flex; + width: 100%; + max-width: var(--max-w); + margin: 0 auto; + height: 100%; + min-height: inherit; + align-items: center; + justify-content: center; + padding: 2rem 4% 2rem 4%; + visibility: visible !important; +} + +.hero-content { + position: relative; + z-index: 20; + flex: 1; + max-width: 800px; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + opacity: 1 !important; + transform: none !important; + visibility: visible !important; + will-change: auto; +} + +.hero-content h1 { + font-size: 4.5rem; + line-height: 1.1; + margin-bottom: 1rem; + letter-spacing: 1.5px; + font-weight: 100; + position: relative; + color: #52eef5 !important; + text-shadow: none !important; + filter: none !important; + -webkit-box-reflect: none !important; + box-shadow: none !important; +} + +.hero-content h1.fallback { + background: none !important; + color: #52eef5 !important; + text-shadow: none !important; +} + +.hero-content p { + margin: 1.5rem auto; + font-size: 1.55rem; + opacity: 1; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); + max-width: 600px; + color: var(--fg); + animation: none !important; + animation-delay: 0s !important; +} + +/* ===== HERO TYPEWRITER SECTION ===== */ +.hero-typewriter-section { + margin: 0.2rem 0; +} + +.hero-subheading { + font-size: 1.4rem; + color: rgba(255, 255, 255, 0.9); + margin-bottom: 0.6rem; + font-weight: 100; + text-align: center; +} + +.typewriter-container { + font-size: 3rem; + color: #52eef5; + font-weight: 100; + text-align: center; + min-height: 3.8rem; + min-width: 90%; + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 0.4rem; + padding: 0.2rem 1rem; + line-height: 1.0; +} + +.hero-supporting-text { + font-size: 1.2rem; + color: rgba(255, 255, 255, 0.8); + line-height: 1.5; + margin: 1.5rem auto; + max-width: 600px; + text-align: center; +} + +/* ===== TYPEWRITER EFFECTS ===== */ +.typewriter-text { + display: inline-block; + position: relative; +} + +.cursor { + display: inline-block; + width: 3px; + height: 1em; + background-color: #52eef5; + margin-left: 2px; + animation: blink 1s infinite; + vertical-align: text-bottom; +} + +@keyframes blink { + 0%, 50% { opacity: 1; } + 51%, 100% { opacity: 0; } +} + +/* ===== HERO CTA BUTTONS ===== */ +.hero-cta-buttons { + display: flex; + gap: 1.2rem; + justify-content: center; + align-items: center; + margin-top: 1.8rem; + flex-wrap: wrap; +} + +.primary-cta { + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); + border: 2px solid rgba(255, 255, 255, 0.2); + color: #ffffff; + padding: 0.8rem 2rem; + font-size: 1.1rem; + border-radius: 10px; + text-decoration: none; + transition: all 0.3s ease; + position: relative; + overflow: hidden; + backdrop-filter: blur(8px); + box-shadow: + 0 6px 24px rgba(109, 40, 217, 0.4), + 0 3px 12px rgba(147, 51, 234, 0.3); +} + +.primary-cta:hover { + transform: translateY(-2px) scale(1.03); + background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%); + border-color: rgba(255, 255, 255, 0.5); + box-shadow: + 0 10px 32px rgba(109, 40, 217, 0.6), + 0 5px 16px rgba(147, 51, 234, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.3); + text-shadow: 0 0 6px rgba(255, 255, 255, 0.4); +} + +.secondary-cta { + background: transparent; + border: 2px solid #52eef5; + color: #52eef5; + padding: 0.8rem 2rem; + font-size: 1.1rem; + border-radius: 10px; + text-decoration: none; + transition: all 0.3s ease; + backdrop-filter: blur(8px); +} + +.secondary-cta:hover { + background: rgba(82, 238, 245, 0.1); + color: #ffffff; + border-color: #ffffff; + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(82, 238, 245, 0.3); +} + +/* ===== HERO BUTTON STYLING ===== */ +#hero .btn-primary, +.hero-section .btn-primary, +.industry-hero .btn-primary, +.travel-hero .btn-primary, +.finance-hero .btn-primary, +.manufacturing-hero .btn-primary, +.marketing-hero .btn-primary, +.media-hero .btn-primary { + background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%) !important; + border: 2px solid rgba(255, 255, 255, 0.3) !important; + box-shadow: + 0 8px 32px rgba(109, 40, 217, 0.4), + 0 4px 16px rgba(147, 51, 234, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; + padding: 18px 36px !important; + margin-top: 24px !important; + letter-spacing: 1.5px !important; + text-transform: uppercase !important; + font-size: 1.3rem !important; + border-radius: 12px !important; + color: #ffffff !important; + text-decoration: none !important; + display: inline-block !important; + position: relative !important; + overflow: hidden !important; + transition: all 0.3s ease !important; + cursor: pointer !important; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; + backdrop-filter: blur(8px) !important; + animation: heroButtonPulse 3s ease-in-out infinite !important; +} + +#hero .btn-primary:hover, +.hero-section .btn-primary:hover, +.industry-hero .btn-primary:hover, +.travel-hero .btn-primary:hover, +.finance-hero .btn-primary:hover, +.manufacturing-hero .btn-primary:hover, +.marketing-hero .btn-primary:hover, +.media-hero .btn-primary:hover { + transform: translateY(-3px) scale(1.05) !important; + background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important; + border-color: rgba(255, 255, 255, 0.5) !important; + box-shadow: + 0 12px 40px rgba(109, 40, 217, 0.6), + 0 6px 20px rgba(147, 51, 234, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.3), + 0 0 20px rgba(168, 85, 247, 0.5); + text-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important; +} + +#hero .btn-primary:active, +.hero-section .btn-primary:active, +.industry-hero .btn-primary:active, +.travel-hero .btn-primary:active, +.finance-hero .btn-primary:active, +.manufacturing-hero .btn-primary:active, +.marketing-hero .btn-primary:active, +.media-hero .btn-primary:active { + transform: translateY(-1px) scale(1.02) !important; + transition: all 0.1s ease !important; +} + +@keyframes heroButtonPulse { + 0%, 100% { + box-shadow: + 0 8px 32px rgba(109, 40, 217, 0.4), + 0 4px 16px rgba(147, 51, 234, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + } + 50% { + box-shadow: + 0 8px 32px rgba(109, 40, 217, 0.6), + 0 4px 16px rgba(147, 51, 234, 0.5), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + } +} + +/* ===== OTHER HERO SECTIONS ===== */ +.hero-section, +#automation-flows-hero { + padding-top: 8rem; + padding-bottom: 6rem; + text-align: center; +} + +.hero-section h1, +#automation-flows-hero h1 { + font-size: 4.2rem; + margin-bottom: 1rem; +} + +.hero-section p, +#automation-flows-hero p { + font-size: 1.45rem; + color: rgba(255, 255, 255, 0.8); +} + +.hero-section.gn-responsive-container { + width: 92%; + max-width: 1200px; + margin: 0 auto; + padding-left: 2rem; + padding-right: 2rem; +} + +/* ===== INDUSTRY HERO SECTIONS ===== */ +.industry-hero { + padding: 64px 0; + text-align: left; + position: relative; + overflow: hidden; + min-height: 60vh; + background-size: cover; + background-position: center; +} + +.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: 'VT323', monospace; + font-size: 4rem; + margin-bottom: 20px; + line-height: 1.2; +} + +.industry-hero p { + font-family: 'VT323', monospace; + font-size: 1.45rem; + color: #e0e0e0; + line-height: 1.6; + margin-bottom: 30px; +} + +.industry-hero .btn-primary { + margin-top: 20px; +} + +.hero-image-container { + width: 200px; + height: 200px; +} + +.hero-icon { + width: 100%; + height: 100%; +} + +/* ===== SPECIALIZED HERO SECTIONS ===== */ +.case-studies-hero { + padding-top: 8rem; + padding-bottom: 3rem; + text-align: left; +} + +.case-studies-hero h1 { + font-size: 3.35rem; + margin-bottom: 1rem; + font-family: 'VT323', monospace; +} + +.case-studies-hero p { + font-size: 1.3rem; + color: rgba(236, 236, 236, 0.8); + max-width: 700px; + margin-bottom: 2rem; + line-height: 1.6; + font-family: 'VT323', monospace; +} + +#generative-ai { + padding-top: 9rem; + padding-bottom: 4rem; + text-align: center; +} + +.generative-ai-header h1 { + font-size: 3.6em; + margin-bottom: 20px; +} + +.generative-ai-header p { + font-size: 1.45em; + color: #ccc; + margin-bottom: 10px; +} + +#agentic-ai { + padding: 80px 0; +} + +.agentic-ai-header { + text-align: center; + margin-bottom: 60px; +} + +.agentic-ai-header h1 { + font-size: 3.6em; + margin-bottom: 20px; +} + +.agentic-ai-header p { + font-size: 1.45em; + color: var(--text-color-secondary); + max-width: 800px; + margin: 0 auto 15px auto; +} + +/* ===== ANIMATIONS ===== */ +@keyframes pulseGlow { + 0% { + text-shadow: none; + filter: brightness(1.05); + } + 100% { + text-shadow: none; + filter: brightness(1.08); + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ===== HERO LAYOUT STABILIZATION ===== */ +#hero .hero-content h1, +#hero .hero-content p, +#hero .hero-content .btn-primary { + opacity: 1 !important; + transform: none !important; + visibility: visible !important; + transition: none !important; + text-align: center !important; + margin-left: auto !important; + margin-right: auto !important; +} + +#hero .hero-content.animate-on-scroll { + animation: none !important; + text-align: center !important; +} + +#hero .hero-content.animate-on-scroll.animated { + transform: none !important; + opacity: 1 !important; + text-align: center !important; +} + +#hero .hero-content { + text-align: center !important; + align-items: center !important; + justify-content: center !important; +} + +#hero * { + visibility: visible !important; + opacity: 1 !important; + transform: none !important; + transition: none !important; +} \ No newline at end of file diff --git a/css/05-technology-cards.css b/css/05-technology-cards.css new file mode 100644 index 0000000..c744157 --- /dev/null +++ b/css/05-technology-cards.css @@ -0,0 +1,509 @@ +/* ===== TECHNOLOGY CARDS AND ANIMATIONS ===== */ + +/* ===== TECHNOLOGY SECTION ===== */ +#technologies { + padding-top: 2rem; + padding-bottom: 2rem; + position: relative; + overflow: hidden; +} + +#technologies .section-heading { + margin-bottom: 20px; + position: relative; + overflow: hidden; +} + +#technologies .section-heading::before { + content: ""; + position: absolute; + width: 100%; + height: 3px; + background: linear-gradient(90deg, transparent, var(--primary-color), transparent); + bottom: -10px; + left: 0; + animation: glowLine 3s ease-in-out infinite; +} + +@keyframes glowLine { + 0%, 100% { + opacity: 0.5; + box-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.3); + } + 50% { + opacity: 1; + box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.7); + } +} + +/* ===== TECHNOLOGY CARDS CONTAINER ===== */ +.tech-cards-container { + position: relative; + width: 100%; + overflow: hidden; + padding: 30px 0; + background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.2)); + border-radius: 20px; + margin: 10px 0; + box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3); +} + +.tech-cards-track { + display: flex; + animation: techCardsFlow 75s linear infinite; + will-change: transform; + gap: 70px; +} + +.tech-cards-track:hover { + animation-play-state: paused; +} + +@keyframes techCardsFlow { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } +} + +/* ===== INDIVIDUAL TECH CARDS ===== */ +.tech-card { + flex: 0 0 auto; + width: 240px; + height: 220px; + position: relative; + cursor: pointer; + transition: all 0.3s ease; + transform-style: preserve-3d; + margin: 5px 0; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); +} + +.tech-card-inner { + position: relative; + width: 100%; + height: 100%; + background: rgba(20, 25, 45, 0.5); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 16px; + padding: 25px 15px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + backdrop-filter: blur(30px); + -webkit-backdrop-filter: blur(30px); + overflow: hidden; + transition: all 0.3s ease; + box-shadow: + 0 10px 20px rgba(0, 0, 0, 0.3), + 0 4px 8px rgba(0, 0, 0, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.tech-card-inner::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(45deg, + transparent 30%, + rgba(var(--primary-color-rgb), 0.2) 50%, + transparent 70%); + opacity: 0; + transition: opacity 0.3s ease; +} + +.tech-card:hover { + transform: translateY(-10px); + z-index: 10; +} + +.tech-card:hover .tech-card-inner { + background: linear-gradient(135deg, + rgba(var(--primary-color-rgb), 0.2) 0%, + rgba(255, 255, 255, 0.1) 50%, + rgba(var(--primary-color-rgb), 0.1) 100%); + backdrop-filter: blur(35px); + -webkit-backdrop-filter: blur(35px); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: + 0 4px 20px rgba(0, 0, 0, 0.1), + 0 0 30px rgba(var(--primary-color-rgb), 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.3); +} + +.tech-card:hover .tech-card-inner::before { + opacity: 1; +} + +/* ===== TECH ICON WRAPPER ===== */ +.tech-icon-wrapper { + position: relative; + width: 80px; + height: 80px; + margin-bottom: 20px; + display: flex; + align-items: center; + justify-content: center; + transition: all 0.3s ease; +} + +.tech-icon-wrapper::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.2) 0%, transparent 70%); + border-radius: 50%; + opacity: 0; + transition: opacity 0.3s ease; +} + +.tech-card:hover .tech-icon-wrapper { + transform: scale(1.1) rotateY(15deg); +} + +/* ===== TECH ICONS ===== */ +.tech-icon { + min-width: 40px; + min-height: 40px; + max-width: 100px; + max-height: 100px; + width: auto; + height: auto; + flex: 1; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + transition: transform 0.3s ease; + aspect-ratio: 1; + background-color: rgba(255, 255, 255, 0.8); + border-radius: 8px; + padding: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); + backdrop-filter: blur(10px); + position: relative; + background-blend-mode: normal; +} + +.tech-icon:hover { + background-color: rgba(255, 255, 255, 0.9) !important; + transform: scale(1.05); + box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.1); + filter: brightness(1.1) contrast(1.1); +} + +.tech-icon::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); + border-radius: 8px; + pointer-events: none; + opacity: 0; + transition: opacity 0.3s ease; +} + +.tech-icon:hover::before { + opacity: 1; +} + +/* ===== TECH CARD TEXT ===== */ +.tech-card h3 { + font-size: 1.45rem; + margin-bottom: 8px; + color: var(--fg); + transition: all 0.3s ease; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +} + +.tech-card:hover h3 { + color: #FFFFFF; + text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7); + transform: translateY(-2px); +} + +.tech-card p { + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.8); + transition: all 0.3s ease; + line-height: 1.4; +} + +.tech-card:hover p { + color: rgba(255, 255, 255, 0.95); + transform: translateY(-1px); +} + +/* ===== TECHNOLOGY ICON BACKGROUNDS ===== */ +/* Using direct image URLs from official sources */ +.tech-icon.ollama { + background-image: url('https://avatars.githubusercontent.com/u/151674099?s=200&v=4'); + background-color: rgba(255, 255, 255, 0.95); + border-radius: 50%; + filter: brightness(1.1) contrast(1.1); +} + +.tech-icon.langchain { + background-image: url('https://python.langchain.com/img/brand/wordmark.png'); + background-color: rgba(255, 255, 255, 0.9); +} + +.tech-icon.chroma { + background-image: url('../assets/tech-icons/Chroma.svg'); + background-color: rgba(255, 255, 255, 0.98); + filter: brightness(1.4) contrast(1.5) saturate(1.3); + border: 2px solid rgba(255, 255, 255, 0.5); + box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); +} + +.tech-icon.pinecone { + background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/markdown/markdown-original.svg'); + background-color: rgba(46, 160, 67, 0.9); + filter: brightness(1.4) contrast(1.5) hue-rotate(60deg); + border: 2px solid rgba(255, 255, 255, 0.5); + box-shadow: 0 0 20px rgba(46, 160, 67, 0.3); + position: relative; +} + +.tech-icon.pinecone::after { + content: '🌲'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 29px; + z-index: 2; +} + +.tech-icon.vectordb { + background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg'); + background-color: rgba(255, 255, 255, 0.98); + filter: brightness(1.3) contrast(1.4) hue-rotate(180deg); + border: 2px solid rgba(255, 255, 255, 0.4); + box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); +} + +.tech-icon.openai { + background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg'); + background-color: rgba(255, 255, 255, 0.98); + filter: brightness(1.2) contrast(1.3); + border: 2px solid rgba(255, 255, 255, 0.4); + box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); +} + +.tech-icon.huggingface { + background-image: url('https://huggingface.co/front/assets/huggingface_logo-noborder.svg'); + background-color: rgba(255, 255, 255, 0.95); + filter: brightness(1.1) contrast(1.1); +} + +.tech-icon.pytorch { + background-image: url('https://pytorch.org/assets/images/pytorch-logo.png'); + background-color: rgba(255, 255, 255, 0.9); +} + +.tech-icon.tensorflow { + background-image: url('https://www.tensorflow.org/images/tf_logo_social.png'); + background-color: rgba(255, 255, 255, 0.9); +} + +.tech-icon.weaviate { + background-image: url('https://avatars.githubusercontent.com/u/37794290?s=200&v=4'); + background-color: rgba(255, 255, 255, 0.95); + border-radius: 50%; + filter: brightness(1.1) contrast(1.1); +} + +.tech-icon.qdrant { + background-image: url('https://qdrant.tech/images/logo_with_text.png'); + background-color: rgba(255, 255, 255, 0.9); +} + +.tech-icon.haystack { + background-image: url('https://raw.githubusercontent.com/deepset-ai/haystack/main/docs/img/haystack_logo_colored.png'); + background-color: rgba(255, 255, 255, 0.98); + filter: brightness(1.3) contrast(1.4); + border: 2px solid rgba(255, 255, 255, 0.4); + box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); +} + +.tech-icon.mistral { + background-image: url('https://docs.mistral.ai/img/logo.svg'); + background-color: rgba(255, 255, 255, 0.9); +} + +.tech-icon.anthropic { + background-image: url('../assets/tech-icons/anthropic claude.png'); + background-color: rgba(255, 255, 255, 0.95); + filter: brightness(1.2) contrast(1.3); + border: 2px solid rgba(255, 255, 255, 0.3); +} + +.tech-icon.groq { + background-image: url('https://groq.com/wp-content/uploads/2024/03/PBG-mark1-color.svg'); + background-color: rgba(255, 255, 255, 0.95); + filter: brightness(1.1) contrast(1.1); +} + +.tech-icon.gemini { + background-image: url('https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg'); + background-color: rgba(255, 255, 255, 0.95); + filter: brightness(1.1) contrast(1.1); +} + +.tech-icon.llamaindex { + background-image: url('https://avatars.githubusercontent.com/u/130722866?s=200&v=4'); + background-color: rgba(255, 255, 255, 0.9); + border-radius: 50%; +} + +.tech-icon.vllm { + background-image: url('https://avatars.githubusercontent.com/u/132581166?s=200&v=4'); + background-color: rgba(255, 255, 255, 0.9); + border-radius: 50%; +} + +.tech-icon.rag { + background-image: url('https://img.icons8.com/color/96/artificial-intelligence.png'); + background-color: rgba(255, 255, 255, 0.95); + filter: brightness(1.1) contrast(1.1); +} + +.tech-icon.transformers { + background-image: url('https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.png'); + background-color: rgba(255, 255, 255, 0.95); + filter: brightness(1.1) contrast(1.1); +} + +.tech-icon.spacy { + background-image: url('https://raw.githubusercontent.com/explosion/spaCy/master/website/src/images/logo.svg'); + background-color: rgba(255, 255, 255, 0.98); + filter: brightness(1.3) contrast(1.4) hue-rotate(10deg); + border: 2px solid rgba(255, 255, 255, 0.4); + box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); +} + +.tech-icon.llama { + background-image: url('../assets/tech-icons/meta-color.svg'); + background-color: rgba(255, 255, 255, 0.98); + filter: brightness(1.3) contrast(1.4) hue-rotate(-10deg); + border: 2px solid rgba(255, 255, 255, 0.4); + box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); +} + +.tech-icon.milvus { + background-image: url('../assets/tech-icons/Milvus.svg'); + background-color: rgba(255, 255, 255, 0.98); + filter: brightness(1.3) contrast(1.4) saturate(1.2); + border: 2px solid rgba(255, 255, 255, 0.4); + box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); +} + +.tech-icon.docker { + background-image: url('../assets/tech-icons/docker.png'); + background-color: rgba(255, 255, 255, 0.98); + filter: brightness(1.3) contrast(1.4); + border: 2px solid rgba(255, 255, 255, 0.4); + box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); +} + +.tech-icon.faiss { + background-image: url('https://raw.githubusercontent.com/facebookresearch/faiss/main/docs/img/faiss.png'); + background-color: rgba(255, 255, 255, 0.98); + filter: brightness(1.3) contrast(1.4); + border: 2px solid rgba(255, 255, 255, 0.4); + box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); +} + +/* ===== SPECIAL ICON ADJUSTMENTS ===== */ +.tech-icon.openai, +.tech-icon.anthropic, +.tech-icon.mistral { + filter: brightness(1.1) contrast(1.2); +} + +.tech-icon.llamaindex, +.tech-icon.vllm, +.tech-icon.docker { + background-color: rgba(255, 255, 255, 0.98); + filter: brightness(1.3) contrast(1.4); + border: 2px solid rgba(255, 255, 255, 0.4); + box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); +} + +.tech-icon.faiss { + filter: brightness(1.1) saturate(1.1); +} + +.tech-icon.weaviate { + background-color: rgba(0, 0, 0, 0.7) !important; + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.tech-icon.langchain, +.tech-icon.qdrant, +.tech-icon.haystack { + background-size: 80% auto; + background-color: rgba(255, 255, 255, 0.95) !important; +} + +/* ===== TECH SHADOWS ===== */ +.tech-shadow { + position: absolute; + top: 0; + width: 150px; + height: 100%; + pointer-events: none; + z-index: 1; +} + +.tech-shadow-left { + left: 0; + background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent); +} + +.tech-shadow-right { + right: 0; + background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent); +} + +/* ===== ANIMATIONS ===== */ +@keyframes shimmer { + 0% { + transform: translateX(-100%) scaleX(1); + } + 49.9% { + transform: translateX(0%) scaleX(1); + } + 50% { + transform: translateX(0%) scaleX(1); + } + 100% { + transform: translateX(100%) scaleX(1); + } +} + +@keyframes float { + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(-5px); + } + 100% { + transform: translateY(0px); + } +} \ No newline at end of file diff --git a/css/06-forms-buttons.css b/css/06-forms-buttons.css new file mode 100644 index 0000000..f94ee12 --- /dev/null +++ b/css/06-forms-buttons.css @@ -0,0 +1,609 @@ +/* ===== FORMS AND BUTTONS ===== */ + +/* ===== GENERAL BUTTON STYLES ===== */ +.btn { + display: inline-block; + text-decoration: none; + padding: 14px 28px; + border-radius: 8px; + letter-spacing: 1px; + text-transform: uppercase; + position: relative; + overflow: hidden; + transition: all 0.3s ease; + cursor: pointer; + text-align: center; + color: #ffffff; + font-size: 1rem; + border: 2px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3); + background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); +} + +.btn-primary { + display: inline-block; + text-decoration: none; + padding: 14px 28px; + border-radius: 8px; + letter-spacing: 1px; + text-transform: uppercase; + position: relative; + overflow: hidden; + transition: all 0.3s ease; + cursor: pointer; + text-align: center; + color: #ffffff; + font-size: 1rem; + border: 2px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3); + background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); +} + +.btn-primary:before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: all 0.8s ease; + z-index: -1; +} + +.btn:hover, +.btn-primary:hover { + transform: translateY(-3px) scale(1.02); + box-shadow: 0 15px 25px -10px rgba(var(--primary-color-rgb), 0.6); + background: linear-gradient(135deg, var(--primary-color-hover), var(--primary-color)); +} + +.btn-primary:hover:before { + left: 100%; +} + +/* ===== CENTERED BUTTON STYLING ===== */ +.centered-btn { + display: block !important; + width: fit-content !important; + margin: 2.5rem auto 0 auto !important; + text-align: center !important; +} + +.btn-primary.centered-btn { + background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%) !important; + border: 2px solid rgba(255, 255, 255, 0.3) !important; + box-shadow: + 0 8px 32px rgba(109, 40, 217, 0.4), + 0 4px 16px rgba(147, 51, 234, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; + padding: 18px 36px !important; + letter-spacing: 1.5px !important; + text-transform: uppercase !important; + font-size: 1.2rem !important; + border-radius: 12px !important; + color: #ffffff !important; + text-decoration: none !important; + position: relative !important; + overflow: hidden !important; + transition: all 0.3s ease !important; + cursor: pointer !important; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; + backdrop-filter: blur(8px) !important; +} + +.btn-primary.centered-btn:hover { + transform: translateY(-3px) scale(1.05) !important; + background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important; + border-color: rgba(255, 255, 255, 0.5) !important; + box-shadow: + 0 12px 40px rgba(109, 40, 217, 0.6), + 0 6px 20px rgba(147, 51, 234, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.3), + 0 0 20px rgba(168, 85, 247, 0.5) !important; + text-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important; +} + +.btn-primary.centered-btn:active { + transform: translateY(-1px) scale(1.02) !important; + transition: all 0.1s ease !important; +} + +/* ===== BUTTON CONTAINER CENTERING ===== */ +.cta-buttons, +.cta-buttons-section .cta-buttons, +.webinar-actions, +.hero-cta-buttons, +.program-buttons, +.section-buttons, +.training-buttons, +.course-actions, +.workflow-actions { + display: flex !important; + justify-content: center !important; + align-items: center !important; + gap: 1rem !important; + flex-wrap: wrap !important; + text-align: center !important; + margin: 0 auto !important; +} + +.cta-buttons-section { + text-align: center !important; + padding: 2rem 0 !important; +} + +.cta-buttons-section .container { + display: flex !important; + justify-content: center !important; + align-items: center !important; +} + +div[style*="text-align: center"] { + display: flex !important; + justify-content: center !important; + align-items: center !important; + text-align: center !important; + margin: 2.5rem auto !important; +} + +.explore-button-section { + display: flex !important; + justify-content: center !important; + align-items: center !important; + text-align: center !important; + margin: 4rem auto !important; + padding: 1rem 0 !important; +} + +/* ===== SPECIALIZED BUTTONS ===== */ +.btn-book-consultation { + display: inline-block; + padding: 0.8rem 1.5rem; + background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%); + border: none; + border-radius: 8px; + color: white; + text-decoration: none; + font-size: 1.2rem; + transition: all 0.3s ease; +} + +.btn-book-consultation:hover { + background: linear-gradient(90deg, #6d7dff 0%, #b5c0ff 100%); + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(90, 107, 255, 0.4); +} + +.btn-discuss-project { + background-color: #1E1E2F; + color: var(--fg); + padding: 0.7rem 1.5rem; + border: 1px solid #3A3A5A; + border-radius: 8px; + text-decoration: none; + font-size: 1.2rem; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; +} + +.btn-discuss-project:hover { + background-color: #2C2C44; + border-color: #4F4F6A; + transform: translateY(-2px); +} + +/* ===== CONTACT FORM STYLING ===== */ +body.contact-page { + padding-top: 1; +} + +.contact-page-container { + padding-top: 0; + padding-bottom: 4rem; + color: #fff; + animation: none !important; + transition: none !important; + transform: none !important; +} + +#contact-us-section { + animation: none !important; + transition: none !important; + transform: none !important; +} + +#contact-us-section .contact-header { + text-align: center; + margin-bottom: 40px; + animation: none !important; + transition: none !important; +} + +#contact-us-section .contact-header h1 { + font-size: 4rem; + margin-bottom: 20px; +} + +#contact-us-section .contact-header p { + font-size: 1.3rem; + color: #ccc; + margin-bottom: 10px; +} + +.contact-content { + display: flex; + gap: 2rem; + flex-wrap: wrap; + justify-content: center; + align-items: stretch; +} + +.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: 1; + min-width: 300px; + max-width: 500px; +} + +.contact-info-container { + flex: 1; + min-width: 300px; + max-width: 500px; +} + +/* ===== ENHANCED CONTACT FORM STYLING ===== */ +.form-group { + margin-bottom: 1.8rem; + position: relative; +} + +.form-group label { + display: block; + margin-bottom: 0.6rem; + font-size: 1.1rem; + color: #52eef5; + font-family: 'Inter', sans-serif; + letter-spacing: 0.5px; + text-transform: uppercase; +} + +.form-group input[type="text"], +.form-group input[type="email"], +.form-group select, +.form-group textarea { + width: 100%; + padding: 1rem 1.2rem; + font-size: 1.1rem; + font-family: 'Inter', sans-serif; + background: rgba(255, 255, 255, 0.08); + border: 2px solid rgba(255, 255, 255, 0.15); + border-radius: 12px; + color: #ffffff; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + box-sizing: border-box; +} + +.form-group textarea { + resize: vertical; + min-height: 120px; + line-height: 1.6; +} + +.form-group input[type="text"]:hover, +.form-group input[type="email"]:hover, +.form-group select:hover, +.form-group textarea:hover { + background: rgba(255, 255, 255, 0.12); + border-color: rgba(82, 238, 245, 0.4); + transform: translateY(-1px); +} + +.form-group input[type="text"]::placeholder, +.form-group input[type="email"]::placeholder, +.form-group textarea::placeholder { + color: rgba(255, 255, 255, 0.6); + font-style: italic; +} + +.form-group input[type="text"]:focus, +.form-group input[type="email"]:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: #52eef5; + background: rgba(255, 255, 255, 0.15); + box-shadow: + 0 0 20px rgba(82, 238, 245, 0.3), + 0 0 40px rgba(82, 238, 245, 0.1), + inset 0 1px 3px rgba(0, 0, 0, 0.1); + transform: translateY(-2px); +} + +.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%2352eef5%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 1rem center; + background-size: 14px auto; + padding-right: 3rem; + cursor: pointer; +} + +.form-group select option { + background: #1a1a2e; + color: #ffffff; + padding: 0.5rem; +} + +/* ===== ENHANCED SUBMIT BUTTON ===== */ +.btn-send-message, +.btn-primary.btn-send-message { + display: block; + width: 100%; + padding: 1.2rem 2rem; + background: linear-gradient(135deg, #52eef5 0%, #667eea 50%, #764ba2 100%); + border: none; + border-radius: 12px; + color: #ffffff; + font-size: 1.2rem; + font-family: 'Inter', sans-serif; + text-transform: uppercase; + letter-spacing: 1.5px; + cursor: pointer; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + position: relative; + overflow: hidden; + box-shadow: + 0 8px 25px rgba(82, 238, 245, 0.3), + 0 4px 12px rgba(102, 126, 234, 0.2); + margin-top: 1rem; +} + +.btn-send-message::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.6s ease; +} + +.btn-send-message:hover { + background: linear-gradient(135deg, #45d1dc 0%, #5a73e8 50%, #6b4ba8 100%); + transform: translateY(-3px) scale(1.02); + box-shadow: + 0 12px 35px rgba(82, 238, 245, 0.4), + 0 6px 18px rgba(102, 126, 234, 0.3); +} + +.btn-send-message:hover::before { + left: 100%; +} + +.btn-send-message:active { + transform: translateY(-1px) scale(1.01); + transition: all 0.1s ease; +} + +/* ===== FORM VALIDATION ===== */ +.form-message { + padding: 1rem; + border-radius: 8px; + margin-bottom: 1.5rem; + text-align: center; + display: none; +} + +.form-message.success { + background: rgba(34, 197, 94, 0.15); + border: 2px solid rgba(34, 197, 94, 0.3); + color: #22c55e; +} + +.form-message.error { + background: rgba(239, 68, 68, 0.15); + border: 2px solid rgba(239, 68, 68, 0.3); + color: #ef4444; +} + +.form-group.error input, +.form-group.error select, +.form-group.error textarea { + border-color: #ef4444; + background: rgba(239, 68, 68, 0.1); +} + +.form-group.success input, +.form-group.success select, +.form-group.success textarea { + border-color: #22c55e; + background: rgba(34, 197, 94, 0.1); +} + +/* ===== CONTACT INFO STYLING ===== */ +.contact-details { + list-style: none; + padding: 0; + margin-bottom: 2rem; +} + +.contact-details li { + margin-bottom: 1rem; + display: flex; + align-items: center; + padding: 1.2rem; + background: rgba(255, 255, 255, 0.05); + border-radius: 8px; + font-size: 1.1rem; + border-left: 3px solid #52eef5; + border-radius: 0 8px 8px 0; + transition: all 0.3s ease; +} + +.contact-details li:hover { + background: rgba(82, 238, 245, 0.08); + transform: translateX(5px); +} + +.contact-details li i { + margin-right: 1rem; + color: #52eef5; + font-size: 1.45rem; + width: 20px; + text-align: center; +} + +.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: 1.2rem; + margin-bottom: 1.5rem; + color: rgba(255, 255, 255, 0.8); +} + +/* ===== ENHANCED CONTACT INFO STYLING ===== */ +.contact-info-container h2 { + font-size: 1.8rem; + color: #52eef5; + margin-bottom: 1.5rem; + font-family: 'VT323', monospace; + text-transform: uppercase; + letter-spacing: 2px; +} + +/* ===== FORM ANIMATION ENHANCEMENTS ===== */ +.form-group.floating-label input:focus + label, +.form-group.floating-label input:not(:placeholder-shown) + label, +.form-group.floating-label textarea:focus + label, +.form-group.floating-label textarea:not(:placeholder-shown) + label { + transform: translateY(-1.5rem) scale(0.85); + color: #52eef5; +} + +.btn-send-message.loading { + pointer-events: none; + opacity: 0.7; + position: relative; + color: transparent; +} + +.btn-send-message.loading::after { + content: ''; + position: absolute; + width: 20px; + height: 20px; + top: 50%; + left: 50%; + margin-left: -10px; + margin-top: -10px; + border: 2px solid #ffffff; + border-radius: 50%; + border-top-color: transparent; + animation: btn-loading-spinner 1s ease infinite; +} + +@keyframes btn-loading-spinner { + from { + transform: rotate(0turn); + } + to { + transform: rotate(1turn); + } +} + +.form-group.success::after { + content: '✓'; + position: absolute; + right: 1rem; + top: 50%; + transform: translateY(-50%); + color: #22c55e; + font-size: 1.2rem; + animation: checkmark-appear 0.3s ease; +} + +@keyframes checkmark-appear { + from { + opacity: 0; + transform: translateY(-50%) scale(0); + } + to { + opacity: 1; + transform: translateY(-50%) scale(1); + } +} + +/* ===== INDUSTRY PAGES BUTTON CONSISTENCY OVERRIDE ===== */ +/* Force "Explore Our Solutions" buttons on industry pages to use purple gradient */ +.explore-button-section .btn.btn-primary.gn-mobile-button, +.explore-button-section .btn-primary.gn-mobile-button { + background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%) !important; + border: 2px solid rgba(255, 255, 255, 0.3) !important; + box-shadow: + 0 8px 32px rgba(109, 40, 217, 0.4), + 0 4px 16px rgba(147, 51, 234, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; + color: #ffffff !important; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; +} + +.explore-button-section .btn.btn-primary.gn-mobile-button:hover, +.explore-button-section .btn-primary.gn-mobile-button:hover { + background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important; + border-color: rgba(255, 255, 255, 0.5) !important; + box-shadow: + 0 12px 40px rgba(109, 40, 217, 0.6), + 0 6px 20px rgba(147, 51, 234, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; + transform: translateY(-3px) scale(1.05) !important; +} + +/* Additional selector for buttons that might not have the exact same classes */ +.explore-button-section .btn[href*="contact"], +.explore-button-section .btn[href*="Contact"] { + background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%) !important; + border: 2px solid rgba(255, 255, 255, 0.3) !important; + box-shadow: + 0 8px 32px rgba(109, 40, 217, 0.4), + 0 4px 16px rgba(147, 51, 234, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; + color: #ffffff !important; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; +} + +.explore-button-section .btn[href*="contact"]:hover, +.explore-button-section .btn[href*="Contact"]:hover { + background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important; + border-color: rgba(255, 255, 255, 0.5) !important; + box-shadow: + 0 12px 40px rgba(109, 40, 217, 0.6), + 0 6px 20px rgba(147, 51, 234, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.3) !important; + transform: translateY(-3px) scale(1.05) !important; +} \ No newline at end of file diff --git a/css/07-media-responsive.css b/css/07-media-responsive.css new file mode 100644 index 0000000..6a61f57 --- /dev/null +++ b/css/07-media-responsive.css @@ -0,0 +1,825 @@ +/* ===== MEDIA QUERIES AND RESPONSIVE DESIGN ===== */ + +/* ===== LARGE DESKTOP (1024px and up) ===== */ +@media (min-width: 1024px) { + .hero-container { + padding: 12rem 4% 2rem 4%; + } +} + +@media (min-height: 600px) { + #hero { + height: 80vh; + min-height: 600px; + } +} + +@media (max-height: 599px) { + #hero { + height: auto; + min-height: 500px; + padding: 2rem 0; + } + + .hero-container { + height: auto; + min-height: 500px; + } +} + +/* ===== TABLET (769px - 1023px) ===== */ +@media (min-width: 769px) and (max-width: 1023px) { + .hero-container { + padding: 10rem 4% 2rem 4%; + } + .exp-grid { + gap: 1.5rem; + max-width: 100%; + padding: 0 2rem; + grid-template-columns: repeat(4, 1fr); + } + + .exp-item { + padding: 1.8rem; + max-width: 340px; + min-height: 320px; + } + + .exp-item img { + width: 100px; + margin-bottom: 1.2rem; + } + + .exp-item p:first-of-type { + font-size: 1.3rem; + margin-bottom: 0.9rem; + } + + .exp-item .exp-description { + font-size: 0.95rem; + line-height: 1.5; + } +} + +/* ===== MOBILE AND TABLET (768px and below) ===== */ +@media (max-width: 768px) { + /* Base mobile adjustments */ + body { + padding-top: 80px; + } + + #hero { + min-height: calc(100vh - 80px); + height: calc(100vh - 80px); + padding-top: 2rem; + } + + .hero-container { + padding: 3rem 5% 2rem 5%; + justify-content: center; + align-items: center; + } + + .hero-content { + text-align: center; + max-width: 100%; + padding: 0 1rem; + margin-top: 1rem; + } + .hero-content h1 { + font-size: 4.5rem; + font-weight: 100; + line-height: 1.2; + margin-bottom: 1.5rem; + letter-spacing: 0.5px; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); + } + + .hero-content p { + font-size: 1.4rem; + line-height: 1.4; + margin-bottom: 2rem; + color: rgba(255, 255, 255, 0.9); + max-width: 90%; + margin-left: auto; + margin-right: auto; + } + + .hero-content .btn-primary { + padding: 1rem 2rem; + font-size: 1.2rem; + border-radius: 12px; + min-width: 200px; + } + + /* Navigation mobile styles */ + .site-header { + padding: 0.5rem 1rem; + } + + /* Logo adjustments */ + .logo-img { + height: 55px; + max-width: 240px; + } + + .logo { + min-height: 60px; + padding: 0.4rem 0.8rem; + } + + /* Technology cards mobile */ + .tech-icon { + min-width: 35px; + min-height: 35px; + max-width: 65px; + max-height: 65px; + } + + #technologies { + padding-top: 1.5rem; + } + + /* Expertise grid mobile */ + .exp-grid { + gap: 1.2rem; + padding: 0 1.5rem; + grid-template-columns: repeat(2, 1fr); + } + + .exp-item { + padding: 1.5rem; + max-width: 100%; + min-height: 300px; + } + + .exp-item img { + width: 90px; + margin-bottom: 1rem; + } + + .exp-item p:first-of-type { + font-size: 1.2rem; + margin-bottom: 0.8rem; + } + + .exp-item .exp-description { + font-size: 0.9rem; + line-height: 1.4; + margin-top: 0.5rem; + } + + /* Contact form mobile */ + .contact-content { + flex-direction: column; + padding: 0; + } + + .contact-form-container, + .contact-info-container { + max-width: 100%; + padding-left: 30px; + padding-right: 30px; + padding: 1.5rem; + } + + .contact-info-container { + margin-top: 0; + } + + /* Case studies mobile */ + .case-studies-hero h1 { + font-size: 2.2rem; + } + + .case-studies-hero p, + #contact-us-section .contact-header p { + font-size: 1.2rem; + } + + .filter-controls { + flex-direction: column; + align-items: stretch; + gap: 1rem; + } + + .dropdown-filter .dropdown-toggle-filter { + width: 100%; + } + + .search-filter { + max-width: none; + } + + .discuss-project-cta .container { + flex-direction: column; + text-align: center; + } + + .discuss-project-cta h2 { + margin-bottom: 1.5rem; + font-size: 1.9rem; + } + + .btn-discuss-project { + width: 100%; + text-align: center; + } + + #contact-us-section .contact-header h1 { + font-size: 3.35rem; + } + + /* Enhanced Contact Form mobile */ + .contact-form-container { + padding: 1.5rem; + } + + .form-group { + margin-bottom: 1.5rem; + } + + .form-group label { + font-size: 1rem; + margin-bottom: 0.5rem; + } + + .form-group input[type="text"], + .form-group input[type="email"], + .form-group select, + .form-group textarea { + padding: 1rem; + font-size: 1rem; + } + + .form-group textarea { + min-height: 100px; + } + + .btn-send-message { + padding: 1rem 1.5rem; + font-size: 1.1rem; + } + + /* General mobile adjustments */ + .nav-links { + display: none; + } + + .section { + padding: 60px 0; + } + + .section .container { + padding: 30px; + } + + .page-header { + padding: 70px 0 40px; + } + + .page-header h1 { + font-size: 3rem; + } + + .grid-2 { + grid-template-columns: 1fr; + } + + .btn-outline { + display: none; + } + + /* Button adjustments */ + .centered-btn { + margin: 2rem auto 0 auto !important; + } + + .btn-primary.centered-btn { + padding: 14px 28px !important; + font-size: 1.1rem !important; + } + + .cta-buttons, + .webinar-actions, + .hero-cta-buttons, + div[style*="text-align: center"] { + flex-direction: column !important; + gap: 1.5rem !important; + margin: 2rem auto !important; + } + + .hero-section .btn, + .hero-section .btn-primary { + width: auto !important; + max-width: 280px !important; + margin: 1rem auto !important; + } + + /* Footer mobile adjustments */ + .footer-content { + gap: 20px; + text-align: center; + } + + .footer-col { + min-width: 200px; + } + + .footer-col-logo p { + max-width: 100%; + text-align: center; + } + + .footer-col .social-links { + justify-content: center; + } + + .footer-logo-img { + height: 120px; + max-width: 350px; + } +} + +/* ===== EXTRA SMALL MOBILE (480px and below) ===== */ +@media (max-width: 480px) { + #hero { + height: 65vh; + min-height: 450px; + padding-top: 1.5rem; + } + + .hero-container { + padding: 2.5rem 3% 1rem 3%; + } + + .hero-content { + margin-top: 1.5rem; + } + .hero-content h1 { + font-size: 4.5rem; + font-weight: 100; + line-height: 1.1; + margin-bottom: 0.8rem; + text-shadow: none !important; + letter-spacing: 0.3px; + filter: brightness(1.08); + } + + .hero-content p { + font-size: 1.2rem; + margin-bottom: 1.2rem; + } + + .hero-content .btn-primary { + padding: 0.8rem 1.5rem; + font-size: 1.1rem; + } + + /* Logo extra small */ + .logo-img { + height: 45px; + max-width: 180px; + } + + .logo { + min-height: 50px; + padding: 0.3rem 0.6rem; + } + + .footer-logo-img { + height: 100px; + max-width: 300px; + } + + /* Technology cards extra small */ + .tech-icon { + min-width: 30px; + min-height: 30px; + max-width: 50px; + max-height: 50px; + } + + /* Expertise grid extra small */ + .exp-grid { + gap: 1rem; + padding: 0 1rem; + grid-template-columns: 1fr; + } + + .exp-item { + padding: 1.2rem; + max-width: 300px; + min-height: 260px; + margin: 0 auto; + } + + .exp-item img { + width: 80px; + margin-bottom: 1rem; + } + + .exp-item p:first-of-type { + font-size: 1.1rem; + margin-bottom: 0.7rem; + } + + .exp-item .exp-description { + font-size: 0.85rem; + line-height: 1.5; + margin-top: 0.5rem; + } + + /* Enhanced contact form mobile */ + .contact-form-container, + .contact-info-container { + padding: 1rem; + margin: 0.5rem 0; + } + + .form-group { + margin-bottom: 1.2rem; + } + + .form-group label { + font-size: 0.9rem; + } + + .form-group input[type="text"], + .form-group input[type="email"], + .form-group select, + .form-group textarea { + padding: 0.8rem; + font-size: 0.95rem; + } + + .btn-send-message { + padding: 1rem; + font-size: 1rem; + letter-spacing: 1px; + } + + #contact-us-section .contact-header h1 { + font-size: 2.5rem; + } + + #contact-us-section .contact-header p { + font-size: 1.1rem; + } + + /* Button adjustments extra small */ + .centered-btn { + margin: 1.5rem auto 0 auto !important; + } + + .btn-primary.centered-btn { + padding: 12px 24px !important; + font-size: 1rem !important; + letter-spacing: 1px !important; + } + + .cta-buttons, + .webinar-actions, + .hero-cta-buttons { + gap: 1rem !important; + margin: 1.5rem auto !important; + } + + .btn-primary, + .btn { + padding: 0.8rem 1.5rem !important; + font-size: 0.95rem !important; + min-width: 200px !important; + text-align: center !important; + } + + .hero-cta-buttons, + .cta-buttons, + .webinar-actions { + flex-direction: column !important; + align-items: center !important; + width: 100% !important; + } + + .btn-primary, + .btn-secondary, + .workflow-cta-btn, + .specialization-btn { + width: 100% !important; + max-width: 280px !important; + margin: 0.75rem auto !important; + } + + /* Footer extra small */ + .footer-content { + flex-direction: column; + gap: 25px; + } + + .footer-col ul li p { + padding: 3px 0; + font-size: 0.9rem; + margin-bottom: 1px; + line-height: 1.2; + } + + .footer-col ul li p i { + margin-right: 10px; + font-size: 1rem; + min-width: 18px; + } + + .footer-col .social-links a { + min-width: 35px; + min-height: 35px; + font-size: 1.1rem; + } +} + +/* ===== CASE STUDIES RESPONSIVE ===== */ +@media (min-width: 768px) { + .case-studies-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +/* ===== INDUSTRY HERO RESPONSIVE ===== */ +@media (max-width: 768px) { + .industry-hero-content { + flex-direction: column; + text-align: center; + gap: 20px; + } + + .industry-hero .hero-text { + max-width: 100%; + } + + .industry-hero h1 { + font-size: 3rem; + } + + .industry-hero p { + font-size: 1.3rem; + } +} + +/* ===== SPECIALIZED SECTIONS RESPONSIVE ===== */ +@media (max-width: 1024px) { + .specializations-cards-grid { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1.5rem; + } + + .benefit-card { + padding: 20px; + } + + .benefit-card h3 { + font-size: 1.2rem; + } +} + +@media (max-width: 768px) { + .specializations-cards-grid { + grid-template-columns: 1fr; + gap: 25px; + } + + .specialization-card { + padding: 25px; + } + + .specialization-card h3 { + font-size: 1.6rem; + } + + .benefit-card .btn-primary { + padding: 14px 20px; + font-size: 0.85rem; + max-width: 180px; + } +} + +/* ===== WORKFLOW SECTION RESPONSIVE ===== */ +@media (max-width: 768px) { + .workflow-section { + padding: 2.5rem 0; + margin: 2rem 0; + } + + .workflow-intro p { + font-size: 1.1rem; + } + + .workflow-benefits h3, + .workflow-process h3 { + font-size: 1.8rem; + } + + .benefits-list { + grid-template-columns: 1fr; + gap: 1rem; + } + + .benefit-item { + padding: 1.2rem; + flex-direction: column; + text-align: center; + gap: 0.8rem; + } + + .workflow-step { + padding: 1.5rem; + margin-bottom: 2rem; + } + + .workflow-step:hover { + transform: translateY(-5px); + } + + .step-icon { + width: 70px; + height: 70px; + align-self: center; + } + + .step-icon i { + font-size: 1.8rem; + } + + .step-content { + text-align: center; + } + + .step-content h4 { + font-size: 1.4rem; + } + + .step-details span { + font-size: 0.9rem; + } + + .workflow-cta { + padding: 2rem 1.5rem; + } + + .cta-content h3 { + font-size: 1.6rem; + } + + .cta-content p { + font-size: 1.1rem; + } + + .workflow-cta-btn { + padding: 0.7rem 1.5rem; + font-size: 1rem; + max-width: 260px; + width: 100%; + } +} + +@media (max-width: 480px) { + .workflow-intro { + margin-bottom: 2rem; + } + + .workflow-step { + flex-direction: column; + text-align: center; + gap: 1rem; + } + + .step-connector { + display: none; + } +} + +/* ===== COURSES AND WEBINARS RESPONSIVE ===== */ +@media (max-width: 1024px) { + .courses-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .course-card { + padding: 1.25rem; + } + .webinar-videos-grid { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1.5rem; + margin: 0.5rem 0; + } + + .webinar-meta { + gap: 1rem; + } +} + +@media (max-width: 768px) { + .courses-grid { + gap: 1.5rem; + } + + .course-card { + padding: 1rem; + } + + .course-info h3 { + font-size: 1.4rem; + } + + .course-info p { + font-size: 1rem; + } + + .course-highlights { + gap: 0.6rem; + } + + .course-highlights .highlight-item { + font-size: 0.8rem; + padding: 0.3rem 0.6rem; + } + + /* Webinar responsive */ + .webinar-main-card { + padding: 1.5rem; + margin: 2rem 0 3rem 0; + } + + .webinar-card-header h2 { + font-size: 2rem; + flex-direction: column; + gap: 0.5rem; + } + + .upcoming-webinar-item { + flex-direction: column; + gap: 1.5rem; + padding: 1.5rem; + } + + .webinar-date-badge { + align-self: flex-start; + min-width: 80px; + } + + .webinar-meta { + flex-direction: column; + gap: 0.8rem; + } + + .webinar-actions { + flex-direction: column; + } + + .register-btn, .add-calendar-btn { + justify-content: center; + text-align: center; + } + + .webinar-videos-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .webinar-video-card { + padding: 1rem; + } +} + +/* Responsive styles for webinar video cards */ +@media (max-width: 768px) { + .webinar-video-card .video-container { + padding-bottom: 65%; /* Slightly increase height ratio on mobile */ + } + + .webinar-video-card { + padding: 1.2rem; /* Reduce padding to give more space to video */ + } +} + +@media (max-width: 480px) { + .course-video-container { + padding-bottom: 60%; + } + + .course-info h3 { + font-size: 1.3rem; + } + + .course-highlights { + flex-direction: column; + align-items: flex-start; + } + + .course-highlights .highlight-item { + align-self: flex-start; + } + + .gn-video-info h4 { + font-size: 1.2rem; + } +} \ No newline at end of file diff --git a/css/08-animations-effects.css b/css/08-animations-effects.css new file mode 100644 index 0000000..389cc78 --- /dev/null +++ b/css/08-animations-effects.css @@ -0,0 +1,620 @@ +/* ===== ANIMATIONS AND EFFECTS ===== */ + +/* ===== CORE ANIMATIONS ===== */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes pulseGlow { + 0% { + text-shadow: none; + filter: brightness(1.05); + } + 100% { + text-shadow: none; + filter: brightness(1.08); + } +} + +@keyframes glowLine { + 0%, 100% { + opacity: 0.5; + box-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.3); + } + 50% { + opacity: 1; + box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.7); + } +} + +@keyframes shimmer { + 0% { + transform: translateX(-100%) scaleX(1); + } + 49.9% { + transform: translateX(0%) scaleX(1); + } + 50% { + transform: translateX(0%) scaleX(1); + } + 100% { + transform: translateX(100%) scaleX(1); + } +} + +@keyframes float { + 0% { + transform: translateY(0px); + } + 50% { + transform: translateY(-5px); + } + 100% { + transform: translateY(0px); + } +} + +@keyframes blink { + 0%, 50% { opacity: 1; } + 51%, 100% { opacity: 0; } +} + +@keyframes spin { + to { + transform: rotate(360deg); + } +} + +@keyframes pulse { + 0%, 100% { + opacity: 0.5; + } + 50% { + opacity: 1; + } +} + +/* ===== TECHNOLOGY CARD ANIMATIONS ===== */ +@keyframes techCardsFlow { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } +} + +/* ===== BUTTON ANIMATIONS ===== */ +@keyframes heroButtonPulse { + 0%, 100% { + box-shadow: + 0 8px 32px rgba(109, 40, 217, 0.4), + 0 4px 16px rgba(147, 51, 234, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + } + 50% { + box-shadow: + 0 8px 32px rgba(109, 40, 217, 0.6), + 0 4px 16px rgba(147, 51, 234, 0.5), + inset 0 1px 0 rgba(255, 255, 255, 0.2); + } +} + +@keyframes btn-loading-spinner { + from { + transform: rotate(0turn); + } + to { + transform: rotate(1turn); + } +} + +@keyframes checkmark-appear { + from { + opacity: 0; + transform: translateY(-50%) scale(0); + } + to { + opacity: 1; + transform: translateY(-50%) scale(1); + } +} + +/* ===== WEBINAR ANIMATIONS ===== */ +@keyframes slideInFromLeft { + from { + left: -100%; + opacity: 0; + } + to { + left: 0; + opacity: 1; + } +} + +@keyframes fadeInMenu { + from { + opacity: 0.8; + } + to { + opacity: 1; + } +} + +/* ===== SPECIALIZED CARDS ANIMATIONS ===== */ +.hero-content h1, +.hero-content p, +.section-heading, +.tech-item, +.exp-item { + animation: fadeInUp 0.8s ease forwards; +} + +/* Disable animations for hero content to prevent layout shifts */ +#hero .hero-content p { + animation: none !important; +} + +/* Allow hero heading to have the glow animation only */ +#hero .hero-content h1 { + animation: pulseGlow 3s ease-in-out infinite alternate !important; + animation-delay: 0s !important; +} + +.hero-content p { + animation-delay: 0.4s; +} + +/* Override hero animation delays */ +#hero .hero-content h1, +#hero .hero-content p { + animation-delay: 0s !important; +} + +.section-heading { + animation-delay: 0.6s; +} + +.section-subheading { + animation-delay: 0.7s; +} + +.section-intro { + animation-delay: 0.8s; +} + +.tech-item { + animation-delay: 0.9s; +} + +.exp-item { + animation-delay: 1s; +} + +/* ===== SPECIALIZATION CARDS EFFECTS ===== */ +.specialization-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, transparent, var(--primary-color), transparent); + opacity: 0; + transition: opacity 0.3s ease; +} + +.specialization-card:hover::before { + opacity: 1; + animation: shimmer 3s ease-in-out infinite; +} + +/* ===== BENEFIT CARD ANIMATIONS ===== */ +.benefit-card-icon { + transition: transform 0.3s ease, background-color 0.3s ease; +} + +.benefit-card:hover .benefit-card-icon { + transform: scale(1.1); + background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.2); +} + +.benefit-card-icon i { + transition: color 0.3s ease; +} + +.highlight-badge { + transition: background 0.3s ease, transform 0.3s ease; +} + +.specialization-card:hover .highlight-badge { + background: rgba(255, 255, 255, 0.2); + transform: translateY(-2px); +} + +/* ===== TECH CARD ADVANCED EFFECTS ===== */ +.tech-card-inner::before { + animation: shimmer 3s ease-in-out infinite; +} + +.tech-icon-wrapper::before { + transition: opacity 0.3s ease; +} + +.tech-card:hover .tech-icon-wrapper::before { + opacity: 0; +} + +/* Mobile responsive animations */ +@media (max-width: 768px) { + .hero-content h1 { + animation-duration: 2.5s; + } +} + +/* ===== FOOTER ANIMATIONS ===== */ +.footer-col .social-links a { + transition: color 0.3s ease, transform 0.3s ease; +} + +.footer-col .social-links a:hover { + transform: translateY(-2px); + background-color: rgba(var(--primary-color-rgb), 0.1); +} + +/* ===== ADVANCED CARD EFFECTS ===== */ +.article-card, +.solution-item, +.related-content-item, +.offering-item, +.exp-item { + position: relative; + overflow: hidden; +} + +.article-card::before, +.solution-item::before, +.related-content-item::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); + transition: left 0.5s ease; +} + +.article-card:hover::before, +.solution-item:hover::before, +.related-content-item:hover::before { + left: 100%; +} + +/* ===== CONTACT FORM ANIMATIONS ===== */ +.form-group input, +.form-group textarea, +.form-group select { + position: relative; +} + +.form-group::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 2px; + background: linear-gradient(90deg, #52eef5, #667eea); + transition: width 0.3s ease; +} + +.form-group input:focus + label::after, +.form-group textarea:focus + label::after, +.form-group select:focus + label::after { + width: 100%; +} + +/* ===== WORKFLOW SECTION ANIMATIONS ===== */ +.workflow-step { + position: relative; +} + +.step-icon::before { + animation: shimmer 3s ease-in-out infinite; +} + +.benefit-item { + transition: all 0.3s ease; +} + +.benefit-item:hover { + transform: translateY(-5px); + border-color: rgba(var(--primary-color-rgb), 0.6); + box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4); +} + +/* ===== WEBINAR SECTION ANIMATIONS ===== */ +.webinar-main-card::before, +.webinar-video-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 3px; + max-width: 100%; + overflow: hidden; + background: linear-gradient(90deg, transparent, var(--primary-color), transparent); + animation: shimmer 3s ease-in-out infinite; + border-radius: 0 2px 2px 0; +} + +.upcoming-webinar-item::before { + animation: shimmer 3s ease-in-out infinite; + border-radius: 0 2px 2px 0; + max-width: 100%; + overflow: hidden; +} + +/* ===== GYANNETRA APP SECTION ANIMATIONS ===== */ +.gn-feature-item:hover { + background: rgba(var(--primary-color-rgb), 0.1); + transform: translateX(5px); +} + +.gn-feature-icon { + transition: all 0.3s ease; +} + +.gn-feature-item:hover .gn-feature-icon { + background: rgba(var(--primary-color-rgb), 0.25); + transform: scale(1.1); +} + +.gn-download-link { + transition: all 0.3s ease; +} + +.gn-download-link:hover .gn-download-icon { + transform: scale(1.1); +} + +/* ===== NAVIGATION ANIMATIONS ===== */ +.nav-link { + position: relative; +} + +.nav-link:after { + transition: width 0.3s ease-out, left 0.3s ease-out; +} + +.dropdown-menu { + transition: opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease, visibility 0s linear 0.3s; +} + +/* ===== HOVER EFFECTS COLLECTION ===== */ +.tech-card, +.benefit-card, +.specialization-card, +.course-card, +.webinar-video-card, +.gn-video-tutorial-card { + transition: all 0.3s ease; +} + +.tech-card:hover, +.course-card:hover, +.webinar-video-card:hover, +.gn-video-tutorial-card:hover { + transform: translateY(-5px); +} + +.benefit-card:hover, +.specialization-card:hover { + transform: translateY(-8px); +} + +/* ===== SCROLL ANIMATIONS ===== */ +.animate-on-scroll { + opacity: 0; + transform: translateY(30px); + transition: all 0.6s ease; +} + +.animate-on-scroll.animated { + opacity: 1; + transform: translateY(0); +} + +/* Stagger animation delays */ +.animate-on-scroll:nth-child(1) { transition-delay: 0.1s; } +.animate-on-scroll:nth-child(2) { transition-delay: 0.2s; } +.animate-on-scroll:nth-child(3) { transition-delay: 0.3s; } +.animate-on-scroll:nth-child(4) { transition-delay: 0.4s; } +.animate-on-scroll:nth-child(5) { transition-delay: 0.5s; } + +/* ===== LOADING ANIMATIONS ===== */ +.loading-spinner { + animation: spin 1s linear infinite; +} + +.pulse-effect { + animation: pulse 2s ease-in-out infinite; +} + +.float-effect { + animation: float 3s ease-in-out infinite; +} + +/* ===== SPECIALIZED ANIMATION OVERRIDES ===== */ +/* Ensure hero content is not affected by scroll animations */ +#hero .hero-content.animate-on-scroll { + animation: none !important; + text-align: center !important; +} + +#hero .hero-content.animate-on-scroll.animated { + transform: none !important; + opacity: 1 !important; + text-align: center !important; +} + +/* ===== PERFORMANCE OPTIMIZATIONS ===== */ +.tech-cards-track { + will-change: transform; +} + +.tech-card { + transform-style: preserve-3d; +} + +/* ===== TRANSITION COLLECTIONS ===== */ +.smooth-transition { + transition: all 0.3s ease; +} + +.fast-transition { + transition: all 0.15s ease; +} + +.slow-transition { + transition: all 0.6s ease; +} + +/* ===== MOBILE ANIMATION ADJUSTMENTS ===== */ +@media (max-width: 768px) { + /* Reduce animation intensity on mobile */ + .tech-card:hover, + .benefit-card:hover, + .specialization-card:hover { + transform: translateY(-3px); + } + + /* Simplify hover effects on mobile */ + .workflow-step:hover { + transform: translateY(-5px); + } + + /* Disable complex animations on mobile for performance */ + .tech-card-inner::before { + animation: none; + } + + .step-icon::before { + animation: none; + } +} + +@media (max-width: 480px) { + /* Further reduce animations on very small screens */ + .animate-on-scroll { + transition: all 0.3s ease; + } + + /* Disable resource-intensive animations */ + .shimmer-effect { + animation: none; + } + + .webinar-main-card::before, + .webinar-video-card::before, + .upcoming-webinar-item::before { + animation: none; + } +} + +/* ===== ACCESSIBILITY CONSIDERATIONS ===== */ +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + } +} + +/* ===== EXPERTISE SECTION DIVIDER ANIMATION ===== */ +.exp-item h3 { + position: relative; + padding-bottom: 14px; + margin-bottom: 15px; +} + +.exp-item h3::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 70px; + height: 2px; + background: linear-gradient(90deg, rgba(82, 238, 245, 0.2), rgba(82, 238, 245, 1), rgba(82, 238, 245, 0.2)); + border-radius: 2px; + box-shadow: 0 0 8px rgba(82, 238, 245, 0.5); +} + +/* ===== CUSTOM SCROLL EFFECTS ===== */ +.scroll-fade-in { + opacity: 0; + transform: translateY(50px); + transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.scroll-fade-in.visible { + opacity: 1; + transform: translateY(0); +} + +.scroll-slide-left { + opacity: 0; + transform: translateX(-50px); + transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.scroll-slide-left.visible { + opacity: 1; + transform: translateX(0); +} + +.scroll-slide-right { + opacity: 0; + transform: translateX(50px); + transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); +} + +.scroll-slide-right.visible { + opacity: 1; + transform: translateX(0); +} + +/* ===== FINAL PERFORMANCE OPTIMIZATIONS ===== */ +.will-change-transform { + will-change: transform; +} + +.will-change-opacity { + will-change: opacity; +} + +.gpu-accelerated { + transform: translateZ(0); + backface-visibility: hidden; + perspective: 1000px; +} + +/* Video container hover effects */ +.webinar-video-card .video-container { + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.webinar-video-card:hover .video-container { + transform: scale(1.02); + box-shadow: 0 6px 16px rgba(82, 238, 245, 0.15); +} \ No newline at end of file diff --git a/css/09-about-page.css b/css/09-about-page.css new file mode 100644 index 0000000..756548f --- /dev/null +++ b/css/09-about-page.css @@ -0,0 +1,297 @@ +/* ===== ABOUT US PAGE ENHANCED STYLING ===== */ + +/* Main about section styling */ +#about-us { + padding: 4rem 0; + margin: 0 auto; + max-width: var(--max-w); +} + +#about-us h1 { + font-family: var(--font-headings); + font-size: 4rem; + color: #52eef5; + text-align: center; + text-transform: uppercase; + letter-spacing: 3px; + margin-bottom: 4rem; + text-shadow: 0 0 20px rgba(82, 238, 245, 0.5); + animation: glow 2s ease-in-out infinite alternate; +} + +@keyframes glow { + from { text-shadow: 0 0 20px rgba(82, 238, 245, 0.5); } + to { text-shadow: 0 0 30px rgba(82, 238, 245, 0.8), 0 0 40px rgba(82, 238, 245, 0.3); } +} + +/* About section styling */ +.about-section { + background: rgba(20, 20, 40, 0.6); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border-radius: 20px; + padding: 3rem; + margin-bottom: 3rem; + border: 1px solid rgba(82, 238, 245, 0.2); + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); + transition: all 0.3s ease; + position: relative; + overflow: hidden; +} + +.about-section::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(82, 238, 245, 0.1), transparent); + transition: left 0.5s ease; +} + +.about-section:hover::before { + left: 100%; +} + +.about-section:hover { + transform: translateY(-5px); + border-color: rgba(82, 238, 245, 0.4); + box-shadow: 0 15px 50px rgba(82, 238, 245, 0.2); +} + +.about-section h2 { + font-family: var(--font-headings); + font-size: 2.5rem; + color: #52eef5; + text-transform: uppercase; + letter-spacing: 2px; + margin-bottom: 1.5rem; + position: relative; + display: inline-block; +} + +.about-section h2::after { + content: ''; + position: absolute; + bottom: -10px; + left: 0; + width: 100%; + height: 3px; + background: linear-gradient(90deg, #52eef5, transparent); + border-radius: 2px; +} + +.about-section p { + font-family: var(--font-body); + font-size: 1.3rem; + line-height: 1.8; + color: var(--text-light); + margin-bottom: 2rem; + text-align: justify; +} + +/* Team images styling */ +.team-images { + display: flex; + justify-content: center; + gap: 2rem; + margin: 2rem 0; + flex-wrap: wrap; +} + +.team-images img { + width: 200px; + height: 200px; + border-radius: 50%; + object-fit: cover; + border: 4px solid rgba(82, 238, 245, 0.3); + transition: all 0.3s ease; + filter: grayscale(30%); +} + +.team-images img:hover { + transform: scale(1.1) rotate(5deg); + border-color: #52eef5; + filter: grayscale(0%); + box-shadow: 0 15px 40px rgba(82, 238, 245, 0.3); +} + +/* Mission and Vision section styling */ +.mission-vision { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 3rem; + align-items: stretch; +} + +.mission, .vision { + background: rgba(15, 15, 30, 0.8); + padding: 2.5rem; + border-radius: 15px; + border: 1px solid rgba(82, 238, 245, 0.1); + transition: all 0.3s ease; + position: relative; + display: flex; + flex-direction: column; + height: 100%; +} + +.mission::before, .vision::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background: linear-gradient(90deg, #52eef5, #a2abff); + border-radius: 15px 15px 0 0; +} + +.mission:hover, .vision:hover { + transform: translateY(-3px); + border-color: rgba(82, 238, 245, 0.3); + box-shadow: 0 10px 30px rgba(82, 238, 245, 0.15); +} + +.mission h2, .vision h2 { + font-size: 2rem; + margin-bottom: 1rem; + text-align: center; +} + +.mission p, .vision p { + text-align: center; + margin-bottom: 1rem; + font-size: 1.1rem; +} + +.vision p { + flex: 1; + display: flex; + align-items: center; + justify-content: center; +} + +/* Styling for mission bullet points */ +.mission ul { + list-style: none; + padding: 0; + margin: 1rem 0 0 0; + text-align: left; +} + +.mission li { + margin-bottom: 1rem; + padding-left: 1.5rem; + position: relative; + font-size: 1.1rem; + line-height: 1.6; +} + +.mission li::before { + content: '●'; + color: #52eef5; + position: absolute; + left: 0; + font-size: 1.2rem; +} + +.mission li strong { + color: #52eef5; + font-weight: 600; +} + +/* Enhanced visual effects */ +.about-section { + background: + radial-gradient(circle at 20% 50%, rgba(82, 238, 245, 0.05) 0%, transparent 50%), + radial-gradient(circle at 80% 20%, rgba(162, 171, 255, 0.05) 0%, transparent 50%), + rgba(20, 20, 40, 0.6); +} + +/* Responsive design */ +@media (max-width: 768px) { + #about-us { + padding: 2rem 0; + } + + #about-us h1 { + font-size: 3rem; + margin-bottom: 2rem; + } + + .about-section { + padding: 2rem; + margin-bottom: 2rem; + } + + .about-section h2 { + font-size: 2rem; + } + + .team-images { + gap: 1rem; + } + + .team-images img { + width: 150px; + height: 150px; + } + + .mission-vision { + grid-template-columns: 1fr; + gap: 2rem; + } + + .mission, .vision { + padding: 2rem; + } +} + +@media (max-width: 480px) { + #about-us h1 { + font-size: 2.5rem; + } + + .about-section { + padding: 1.5rem; + } + + .about-section h2 { + font-size: 1.8rem; + } + + .team-images img { + width: 120px; + height: 120px; + } + + .mission, .vision { + padding: 1.5rem; + } +} + +/* Additional enhancements for better visual hierarchy */ +.about-section:first-of-type { + background: + radial-gradient(circle at 30% 40%, rgba(82, 238, 245, 0.08) 0%, transparent 60%), + rgba(20, 20, 40, 0.6); +} + +.about-section:last-of-type { + background: + radial-gradient(circle at 70% 60%, rgba(162, 171, 255, 0.08) 0%, transparent 60%), + rgba(20, 20, 40, 0.6); +} + +/* Smooth scroll behavior */ +html { + scroll-behavior: smooth; +} + +/* Focus states for accessibility */ +.about-section:focus-within { + outline: 2px solid rgba(82, 238, 245, 0.5); + outline-offset: 4px; +} diff --git a/css/10-case-studies-enhanced.css b/css/10-case-studies-enhanced.css new file mode 100644 index 0000000..6e7b9bf --- /dev/null +++ b/css/10-case-studies-enhanced.css @@ -0,0 +1,529 @@ +/* ===== CASE STUDIES PAGE ENHANCED STYLING ===== */ + +/* Enhanced Case Studies Hero Section */ +.case-studies-hero { + padding: 8rem 0 4rem 0; + text-align: center; + background: + radial-gradient(circle at 30% 40%, rgba(82, 238, 245, 0.1) 0%, transparent 60%), + radial-gradient(circle at 70% 60%, rgba(162, 171, 255, 0.08) 0%, transparent 60%), + rgba(10, 10, 26, 0.8); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-bottom: 1px solid rgba(82, 238, 245, 0.2); + position: relative; + overflow: hidden; + min-height: 60vh; + display: flex; + align-items: center; + justify-content: center; +} + +.case-studies-hero::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + linear-gradient(135deg, rgba(82, 238, 245, 0.05) 0%, transparent 50%), + linear-gradient(45deg, transparent 50%, rgba(162, 171, 255, 0.05) 100%); + pointer-events: none; + z-index: 1; +} + +.case-studies-hero .container { + position: relative; + z-index: 2; + max-width: 1000px; + margin: 0 auto; + padding: 0 2rem; +} + +.case-studies-hero h1 { + font-family: var(--font-headings); + font-size: 4rem; + color: #52eef5; + text-transform: uppercase; + letter-spacing: 3px; + margin-bottom: 2rem; + text-shadow: 0 0 30px rgba(82, 238, 245, 0.6); + animation: glow 3s ease-in-out infinite alternate; + line-height: 1.1; + font-weight: 400; +} + +@keyframes glow { + from { + text-shadow: 0 0 20px rgba(82, 238, 245, 0.5); + transform: scale(1); + } + to { + text-shadow: 0 0 40px rgba(82, 238, 245, 0.8), 0 0 60px rgba(82, 238, 245, 0.3); + transform: scale(1.02); + } +} + +.case-studies-hero p { + font-family: var(--font-body); + font-size: 1.4rem; + color: var(--text-light); + max-width: 800px; + margin: 0 auto 2rem auto; + line-height: 1.7; + opacity: 0.9; + text-align: center; +} + +/* Enhanced Filters Section */ +.case-studies-filters { + padding: 2rem 0; + background: rgba(15, 15, 30, 0.8); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border-bottom: 1px solid rgba(82, 238, 245, 0.1); + position: sticky; + top: 80px; + z-index: 100; +} + +.filter-controls { + display: flex; + align-items: center; + justify-content: center; + gap: 2rem; + flex-wrap: wrap; +} + +.dropdown-filter .dropdown-toggle-filter { + background: rgba(20, 20, 40, 0.8); + color: var(--fg); + padding: 1rem 2rem; + border: 2px solid rgba(82, 238, 245, 0.3); + border-radius: 12px; + font-size: 1.1rem; + cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + min-width: 200px; + transition: all 0.3s ease; + font-family: var(--font-body); + font-weight: 500; +} + +.dropdown-filter .dropdown-toggle-filter:hover { + border-color: #52eef5; + background: rgba(82, 238, 245, 0.1); + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(82, 238, 245, 0.2); +} + +.dropdown-filter .dropdown-toggle-filter i { + margin-left: 0.8rem; + transition: transform 0.3s ease; +} + +.dropdown-filter .dropdown-toggle-filter:hover i { + transform: rotate(180deg); +} + +.search-filter { + display: flex; + align-items: center; + background: rgba(20, 20, 40, 0.8); + padding: 0.5rem 1.5rem; + border: 2px solid rgba(82, 238, 245, 0.3); + border-radius: 12px; + min-width: 300px; + transition: all 0.3s ease; +} + +.search-filter:focus-within { + border-color: #52eef5; + background: rgba(82, 238, 245, 0.1); + box-shadow: 0 8px 25px rgba(82, 238, 245, 0.2); +} + +.search-filter i { + margin-right: 1rem; + color: #52eef5; + font-size: 1.2rem; +} + +.search-filter input[type="text"] { + background: transparent; + border: none; + color: var(--fg); + font-size: 1.1rem; + width: 100%; + padding: 0.8rem 0; + outline: none; + font-family: var(--font-body); +} + +.search-filter input[type="text"]::placeholder { + color: rgba(236, 236, 236, 0.6); + transition: color 0.3s ease; +} + +.search-filter input[type="text"]:focus::placeholder { + color: rgba(82, 238, 245, 0.8); +} + +/* Enhanced Case Studies Grid */ +.case-studies-grid-section { + padding: 4rem 0; + background: rgba(5, 5, 15, 0.8); +} + +.articles-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 2.5rem; + margin-top: 2rem; +} + +.article-card { + background: rgba(20, 20, 40, 0.7); + backdrop-filter: blur(15px); + -webkit-backdrop-filter: blur(15px); + border: 1px solid rgba(82, 238, 245, 0.2); + border-radius: 20px; + padding: 2.5rem; + transition: all 0.4s ease; + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + height: 100%; +} + +.article-card::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(82, 238, 245, 0.1), transparent); + transition: left 0.6s ease; +} + +.article-card:hover::before { + left: 100%; +} + +.article-card:hover { + transform: translateY(-10px) scale(1.02); + border-color: rgba(82, 238, 245, 0.5); + box-shadow: + 0 20px 60px rgba(82, 238, 245, 0.3), + 0 0 40px rgba(82, 238, 245, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.1); +} + +.case-study-img { + width: 80px; + height: 80px; + object-fit: contain; + margin-bottom: 1.5rem; + filter: brightness(1.2) contrast(1.1); + transition: all 0.3s ease; +} + +.article-card:hover .case-study-img { + transform: scale(1.1) rotate(5deg); + filter: brightness(1.4) contrast(1.2); +} + +.article-card h3 { + font-family: var(--font-headings); + font-size: 1.8rem; + color: #52eef5; + margin-bottom: 1rem; + line-height: 1.3; + font-weight: 400; + transition: color 0.3s ease; +} + +.article-card:hover h3 { + color: #ffffff; + text-shadow: 0 0 10px rgba(82, 238, 245, 0.5); +} + +.article-card p { + font-family: var(--font-body); + font-size: 1.1rem; + color: var(--text-light); + line-height: 1.6; + margin-bottom: 2rem; + flex-grow: 1; +} + +.read-more-link { + display: inline-flex; + align-items: center; + color: #52eef5; + text-decoration: none; + font-weight: 600; + font-size: 1rem; + text-transform: uppercase; + letter-spacing: 1px; + transition: all 0.3s ease; + align-self: flex-start; + position: relative; +} + +.read-more-link::after { + content: '→'; + margin-left: 0.5rem; + transition: transform 0.3s ease; +} + +.read-more-link:hover { + color: #ffffff; + text-shadow: 0 0 10px rgba(82, 238, 245, 0.8); +} + +.read-more-link:hover::after { + transform: translateX(5px); +} + +/* Enhanced CTA Section */ +.discuss-project-cta { + padding: 5rem 0; + text-align: center; + background: + radial-gradient(circle at 50% 50%, rgba(82, 238, 245, 0.1) 0%, transparent 70%), + rgba(15, 15, 30, 0.9); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + border-top: 1px solid rgba(82, 238, 245, 0.2); + position: relative; + overflow: hidden; +} + +.discuss-project-cta::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + linear-gradient(45deg, rgba(82, 238, 245, 0.05) 0%, transparent 50%), + linear-gradient(-45deg, transparent 50%, rgba(162, 171, 255, 0.05) 100%); + pointer-events: none; +} + +.discuss-project-cta .container { + position: relative; + z-index: 2; +} + +.discuss-project-cta h2 { + font-family: var(--font-headings); + font-size: 3rem; + color: #52eef5; + margin-bottom: 2rem; + text-transform: uppercase; + letter-spacing: 2px; + text-shadow: 0 0 20px rgba(82, 238, 245, 0.5); +} + +.btn-discuss-project { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 1.2rem 3rem; + background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%); + color: #ffffff; + text-decoration: none; + border-radius: 12px; + font-size: 1.2rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 1px; + transition: all 0.3s ease; + border: 2px solid transparent; + position: relative; + overflow: hidden; +} + +.btn-discuss-project::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.6s ease; +} + +.btn-discuss-project:hover::before { + left: 100%; +} + +.btn-discuss-project:hover { + transform: translateY(-3px) scale(1.05); + background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%); + border-color: rgba(255, 255, 255, 0.3); + box-shadow: + 0 15px 50px rgba(109, 40, 217, 0.4), + 0 0 30px rgba(168, 85, 247, 0.3); + text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); +} + +/* Responsive Design */ +@media (max-width: 1024px) { + .case-studies-hero h1 { + font-size: 3.5rem; + } + + .articles-grid { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + } +} + +@media (max-width: 768px) { + .case-studies-hero { + padding: 6rem 0 3rem 0; + min-height: 50vh; + } + + .case-studies-hero h1 { + font-size: 2.5rem; + letter-spacing: 2px; + margin-bottom: 1.5rem; + } + + .case-studies-hero p { + font-size: 1.2rem; + padding: 0 1rem; + } + + .case-studies-filters { + position: static; + padding: 1.5rem 0; + } + + .filter-controls { + flex-direction: column; + gap: 1rem; + } + + .dropdown-filter .dropdown-toggle-filter, + .search-filter { + width: 100%; + min-width: auto; + } + + .articles-grid { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .article-card { + padding: 2rem; + margin: 0 1rem; + } + + .discuss-project-cta h2 { + font-size: 2.2rem; + margin-bottom: 1.5rem; + } + + .btn-discuss-project { + padding: 1rem 2rem; + font-size: 1.1rem; + width: 100%; + max-width: 300px; + } +} + +@media (max-width: 480px) { + .case-studies-hero { + padding: 5rem 0 2rem 0; + min-height: 40vh; + } + + .case-studies-hero h1 { + font-size: 2rem; + letter-spacing: 1px; + } + + .case-studies-hero p { + font-size: 1.1rem; + } + + .article-card { + padding: 1.5rem; + margin: 0 0.5rem; + } + + .case-study-img { + width: 60px; + height: 60px; + } + + .article-card h3 { + font-size: 1.5rem; + } + + .discuss-project-cta { + padding: 3rem 0; + } + + .discuss-project-cta h2 { + font-size: 1.8rem; + } +} + +/* Enhanced focus states for accessibility */ +.dropdown-filter .dropdown-toggle-filter:focus, +.search-filter input:focus, +.read-more-link:focus, +.btn-discuss-project:focus { + outline: 2px solid rgba(82, 238, 245, 0.6); + outline-offset: 2px; +} + +/* Smooth scroll behavior */ +html { + scroll-behavior: smooth; +} + +/* Performance optimizations */ +.case-studies-hero, +.article-card, +.discuss-project-cta { + will-change: transform; + transform: translateZ(0); +} + +/* Loading state animation */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.article-card { + animation: fadeInUp 0.6s ease forwards; +} + +.article-card:nth-child(1) { animation-delay: 0.1s; } +.article-card:nth-child(2) { animation-delay: 0.2s; } +.article-card:nth-child(3) { animation-delay: 0.3s; } +.article-card:nth-child(4) { animation-delay: 0.4s; } +.article-card:nth-child(5) { animation-delay: 0.5s; } +.article-card:nth-child(6) { animation-delay: 0.6s; } diff --git a/css/card-heading-divider.css b/css/card-heading-divider.css new file mode 100644 index 0000000..2472991 --- /dev/null +++ b/css/card-heading-divider.css @@ -0,0 +1,71 @@ +/* Universal card heading divider for all major card types */ +.exp-item h3, +.specialization-card h3, +.benefit-card h3, +.course-card h3, +.feature-card h3, +.offering-card h3, +.blog-card h3, +.solution-item h3, +.article-card h3, +.webinar-video-card h3, +.tech-card h3, +.video-info h3, +.case-study-card h3, +.webinar-main-card h3, +.service-card h3, +.industry-card h3 { + position: relative; + padding-bottom: 12px; + margin-bottom: 15px; +} + +.exp-item h3::after, +.specialization-card h3::after, +.benefit-card h3::after, +.course-card h3::after, +.feature-card h3::after, +.offering-card h3::after, +.blog-card h3::after, +.solution-item h3::after, +.article-card h3::after, +.webinar-video-card h3::after, +.tech-card h3::after, +.video-info h3::after, +.case-study-card h3::after, +.webinar-main-card h3::after, +.service-card h3::after, +.industry-card h3::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 2px; + background: linear-gradient(90deg, rgba(82, 238, 245, 0.2), rgba(82, 238, 245, 1), rgba(82, 238, 245, 0.2)); + border-radius: 2px; + box-shadow: 0 0 8px rgba(82, 238, 245, 0.5); +} + +/* Responsive adjustments for smaller screens */ +@media (max-width: 600px) { + .exp-item h3::after, + .specialization-card h3::after, + .benefit-card h3::after, + .course-card h3::after, + .feature-card h3::after, + .offering-card h3::after, + .blog-card h3::after, + .solution-item h3::after, + .article-card h3::after, + .webinar-video-card h3::after, + .tech-card h3::after, + .video-info h3::after, + .case-study-card h3::after, + .webinar-main-card h3::after, + .service-card h3::after, + .industry-card h3::after { + width: 40px; + } +} diff --git a/css/css new b/css/css new deleted file mode 100644 index d48ae8a..0000000 --- a/css/css new +++ /dev/null @@ -1,7442 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); - -/* ===== SIMPLIFIED LOADING - NO FOUC BLOCKING ===== */ -/* Remove aggressive FOUC prevention that causes stuck pages */ -html { - visibility: visible !important; -} - -/* Keep basic loading optimization without blocking */ -.font-loading { - font-family: 'VT323', Consolas, 'Courier New', monospace; -} - -/* ===== END FOUC PREVENTION ===== */ - -/* Hero Section Typewriter Styles - Compressed for Desktop */ -.hero-typewriter-section { - margin: 1.2rem 0; -} - -.hero-subheading { - font-size: 1.4rem; - color: rgba(255, 255, 255, 0.9); - margin-bottom: 0.6rem; - font-weight: 500; - text-align: center; -} - -.typewriter-container { - font-size: 1.8rem; - color: #52eef5; - font-weight: 600; - text-align: center; - min-height: 2.5rem; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 0.8rem; -} - -.hero-supporting-text { - font-size: 1.2rem; - color: rgba(255, 255, 255, 0.8); - line-height: 1.5; - margin: 1.5rem auto; - max-width: 600px; - text-align: center; -} - -/* Hero CTA Buttons - Compact Layout */ -.hero-cta-buttons { - display: flex; - gap: 1.2rem; - justify-content: center; - align-items: center; - margin-top: 1.8rem; - flex-wrap: wrap; -} - -.primary-cta { - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); - border: 2px solid rgba(255, 255, 255, 0.2); - color: #ffffff; - padding: 0.8rem 2rem; - font-size: 1.1rem; - font-weight: 600; - border-radius: 10px; - text-decoration: none; - transition: all 0.3s ease; - position: relative; - overflow: hidden; - backdrop-filter: blur(8px); - box-shadow: - 0 6px 24px rgba(109, 40, 217, 0.4), - 0 3px 12px rgba(147, 51, 234, 0.3); -} - -.primary-cta:hover { - transform: translateY(-2px) scale(1.03); - background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%); - border-color: rgba(255, 255, 255, 0.5); - box-shadow: - 0 10px 32px rgba(109, 40, 217, 0.6), - 0 5px 16px rgba(147, 51, 234, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.3); - text-shadow: 0 0 6px rgba(255, 255, 255, 0.4); -} - -.secondary-cta { - background: transparent; - border: 2px solid #52eef5; - color: #52eef5; - padding: 0.8rem 2rem; - font-size: 1.1rem; - font-weight: 600; - border-radius: 10px; - text-decoration: none; - transition: all 0.3s ease; - backdrop-filter: blur(8px); -} - -.secondary-cta:hover { - background: rgba(82, 238, 245, 0.1); - color: #ffffff; - border-color: #ffffff; - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(82, 238, 245, 0.3); -} - -/* Page loading transitions & FOUC prevention */ -html.no-js { - visibility: hidden; -} - -body.loading { - opacity: 1; /* Show body during load but with preloader on top */ -} - -body.page-ready { - opacity: 1; - visibility: visible; -} - -/* Preloader styles */ -#preloader { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #0a0a1a; - z-index: 9999; - display: flex; - align-items: center; - justify-content: center; - transition: opacity 0.5s ease, visibility 0.5s ease; -} - -body.page-ready #preloader { - opacity: 0; - visibility: hidden; - pointer-events: none; -} - -.loader-container { - text-align: center; -} - -.loader-spinner { - width: 50px; - height: 50px; - border: 3px solid rgba(139, 92, 246, 0.2); - border-radius: 50%; - border-top-color: var(--primary-color); - margin: 0 auto 15px; - animation: spin 1s ease-in-out infinite; -} - -.loader-text { - color: var(--primary-color); - font-size: 1.2rem; - letter-spacing: 2px; - animation: pulse 1.5s ease-in-out infinite; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -@keyframes pulse { - 0%, 100% { - opacity: 0.5; - } - 50% { - opacity: 1; - } -} - -:root { - /* Base colors */ - --fg: #ececec; - --btn-bg: rgba(20, 20, 40, 0.8); - --btn-hover: rgba(20, 20, 40, 1); - --gap: 2rem; - --max-w: 1200px; - - /* Standardized card and text styles */ - --card-bg: rgba(25, 35, 55, 0.7); - --text-light: #e0e0e0; - --text-muted: #b0b0b0; - - /* Default primary color scheme (purple) */ - --primary-color: #6d28d9; - --primary-color-rgb: 109, 40, 217; - --primary-color-hover: #5b21b6; - - /* Industry-specific color schemes */ - /* Finance - Professional Blue */ - --finance-primary: #007bff; - --finance-primary-rgb: 0, 123, 255; - --finance-primary-hover: #0056b3; - - /* Healthcare - Medical Blue */ - --healthcare-primary: #00c6ff; - --healthcare-primary-rgb: 0, 198, 255; - --healthcare-primary-hover: #0099cc; - - /* Retail - Commercial Red */ - --retail-primary: #e74c3c; - --retail-primary-rgb: 231, 76, 60; - --retail-primary-hover: #c0392b; - - /* Manufacturing - Industrial Blue */ - --manufacturing-primary: #3498db; - --manufacturing-primary-rgb: 52, 152, 219; - --manufacturing-primary-hover: #2980b9; - - /* Marketing - Creative Pink */ - --marketing-primary: #ec4899; - --marketing-primary-rgb: 236, 72, 153; - --marketing-primary-hover: #db2777; - - /* Travel - Sky Blue */ - --travel-primary: #0ea5e9; - --travel-primary-rgb: 14, 165, 233; - --travel-primary-hover: #0284c7; - - /* Media & Entertainment - Purple */ - --media-primary: #9333ea; - --media-primary-rgb: 147, 51, 234; - --media-primary-hover: #7e22ce; - /* Services color schemes */ - /* Machine Learning - Deep Blue */ - --machine-learning-primary: #2563eb; - --machine-learning-primary-rgb: 37, 99, 235; - --machine-learning-primary-hover: #1d4ed8; - - /* Generative AI - Emerald Green */ - --generative-ai-primary: #10b981; - --generative-ai-primary-rgb: 16, 185, 129; - --generative-ai-primary-hover: #059669; - - /* Data Analysis - Amber */ - --data-analysis-primary: #f59e0b; - --data-analysis-primary-rgb: 245, 158, 11; - --data-analysis-primary-hover: #d97706; - - /* Automation - Purple */ - --automation-primary: #8b5cf6; - --automation-primary-rgb: 139, 92, 246; - --automation-primary-hover: #7c3aed; - - /* Agentic AI - Pink */ - --agentic-ai-primary: #ec4899; - --agentic-ai-primary-rgb: 236, 72, 153; - --agentic-ai-primary-hover: #db2777;--primary-color-glow: rgba(109, 40, 217, 0.5); - --accent: #a2abff; - --accent-rgb: 162, 171, 255; /* Spacing variables */ - --section-margin: 2rem; - --section-padding: 1.5rem; - --card-padding: 25px; - --grid-gap: 30px; -} - -/* Color Theme Utility Classes */ -.theme-finance { - --primary-color: var(--finance-primary); - --primary-color-rgb: var(--finance-primary-rgb); - --primary-color-hover: var(--finance-primary-hover); - --primary-color-glow: rgba(var(--finance-primary-rgb), 0.5); -} - -.theme-healthcare { - --primary-color: var(--healthcare-primary); - --primary-color-rgb: var(--healthcare-primary-rgb); - --primary-color-hover: var(--healthcare-primary-hover); - --primary-color-glow: rgba(var(--healthcare-primary-rgb), 0.5); -} - -.theme-retail { - --primary-color: var(--retail-primary); - --primary-color-rgb: var(--retail-primary-rgb); - --primary-color-hover: var(--retail-primary-hover); - --primary-color-glow: rgba(var(--retail-primary-rgb), 0.5); -} - -.theme-manufacturing { - --primary-color: var(--manufacturing-primary); - --primary-color-rgb: var(--manufacturing-primary-rgb); - --primary-color-hover: var(--manufacturing-primary-hover); - --primary-color-glow: rgba(var(--manufacturing-primary-rgb), 0.5); -} - -.theme-marketing { - --primary-color: var(--marketing-primary); - --primary-color-rgb: var(--marketing-primary-rgb); - --primary-color-hover: var(--marketing-primary-hover); - --primary-color-glow: rgba(var(--marketing-primary-rgb), 0.5); -} - -.theme-travel { - --primary-color: var(--travel-primary); - --primary-color-rgb: var(--travel-primary-rgb); - --primary-color-hover: var(--travel-primary-hover); - --primary-color-glow: rgba(var(--travel-primary-rgb), 0.5); -} - -.theme-media { - --primary-color: var(--media-primary); - --primary-color-rgb: var(--media-primary-rgb); - --primary-color-hover: var(--media-primary-hover); - --primary-color-glow: rgba(var(--media-primary-rgb), 0.5); -} - -.theme-machine-learning { - --primary-color: var(--machine-learning-primary); - --primary-color-rgb: var(--machine-learning-primary-rgb); - --primary-color-hover: var(--machine-learning-primary-hover); - --primary-color-glow: rgba(var(--machine-learning-primary-rgb), 0.5); -} - -.theme-generative-ai { - --primary-color: var(--generative-ai-primary); - --primary-color-rgb: var(--generative-ai-primary-rgb); - --primary-color-hover: var(--generative-ai-primary-hover); - --primary-color-glow: rgba(var(--generative-ai-primary-rgb), 0.5); -} - -.theme-data-analysis { - --primary-color: var(--data-analysis-primary); - --primary-color-rgb: var(--data-analysis-primary-rgb); - --primary-color-hover: var(--data-analysis-primary-hover); - --primary-color-glow: rgba(var(--data-analysis-primary-rgb), 0.5); -} - -.theme-automation { - --primary-color: var(--automation-primary); - --primary-color-rgb: var(--automation-primary-rgb); - --primary-color-hover: var(--automation-primary-hover); - --primary-color-glow: rgba(var(--automation-primary-rgb), 0.5); -} - -.theme-agentic-ai { - --primary-color: var(--agentic-ai-primary); - --primary-color-rgb: var(--agentic-ai-primary-rgb); - --primary-color-hover: var(--agentic-ai-primary-hover); - --primary-color-glow: rgba(var(--agentic-ai-primary-rgb), 0.5); -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html { - height: 100%; - scroll-behavior: smooth; -} - -body { - background: url('../assets/3293677.png') no-repeat center center fixed; - background-size: cover; - color: var(--fg); - font-family: 'VT323', sans-serif; - font-weight: 40; - font-style: normal; - font-size: 1.3rem; - line-height: 1.5; - margin: 0; - padding: 0; - min-height: 100vh; - overflow-x: hidden; -} - -/* Special styles for contact page to eliminate spacing */ -body.contact-page { - padding-top: 1; /* Removed padding to shift content all the way up */ -} - -.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; -} - -/* Standardized section styles */ -section { - margin: var(--section-margin) 0; - padding: var(--section-padding) 0; -} - -/* Standardized heading styles */ -.section-heading, -section h2 { - font-size: 2.6rem; - margin-bottom: 30px; - color: #52eef5; - text-align: center; - text-transform: uppercase; - letter-spacing: 1px; -} - -/* Standardized card grid styles */ -.articles-grid, -.solutions-grid, -.related-content-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - gap: var(--grid-gap); - margin-top: 40px; -} - -.solutions-grid { - grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); -} - -/* Standardized card styles */ -.article-card, -.solution-item, -.related-content-item { - background-color: var(--card-bg); - border-radius: 12px; - padding: var(--card-padding); - text-align: left; - box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); - transition: transform 0.3s ease, box-shadow 0.3s ease; - display: flex; - flex-direction: column; - border: 1px solid rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); - height: 100%; -} - -.article-card:hover, -.solution-item:hover, -.related-content-item:hover { - transform: translateY(-8px); - box-shadow: 0 12px 25px rgba(var(--primary-color-rgb, 109, 40, 217), 0.4); -} - -.solution-item { - text-align: center; - align-items: center; -} - -.article-card h3, -.solution-item h3, -.related-content-item h3 { - font-size: 1.7rem; - color: #52eef5; - margin-bottom: 12px; - font-weight: 600; -} - -.solution-item h3 { - font-size: 1.5rem; - color: #52eef5; -} - -.article-card p, -.solution-item p, -.related-content-item p { - color: var(--text-muted); - margin-bottom: 20px; - line-height: 1.6; -} - -.solution-item p { - font-size: 1.15rem; -} - -.read-more-link { - color: var(--primary-color); - text-decoration: none; - font-weight: 600; - transition: color 0.3s ease, background-color 0.3s ease; - align-self: flex-start; - padding: 8px 15px; - border: 1px solid var(--primary-color); - border-radius: 5px; -} - -.read-more-link:hover { - background-color: var(--primary-color-hover); - color: #fff; - text-decoration: none; -} - -.solution-icon { - width: 70px; - height: 70px; - margin-bottom: 20px; - object-fit: contain; -} - -.article-card img { - width: 100%; - height: 180px; - object-fit: cover; - border-radius: 8px; - margin-bottom: 20px; -} - -.tech-description, -.exp-description { - font-size: 1.1rem; - color: rgba(255, 255, 255, 0.8); - margin-top: 0.5rem; - line-height: 1.4; -} - -@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; -} - -/* Disable animations for hero content to prevent layout shifts */ -#hero .hero-content p { - animation: none !important; -} - -/* Allow hero heading to have the glow animation only */ -#hero .hero-content h1 { - animation: pulseGlow 3s ease-in-out infinite alternate !important; - animation-delay: 0s !important; -} - -.hero-content p { - animation-delay: 0.4s; -} - -/* Override hero animation delays */ -#hero .hero-content h1, -#hero .hero-content p { - animation-delay: 0s !important; -} - -.section-heading { - animation-delay: 0.6s; -} - -.section-subheading { - font-size: 1.8rem; - color: var(--primary-color); - text-align: center; - margin-top: 1.5rem; - margin-bottom: 1rem; - font-family: 'Space Grotesk', sans-serif; - font-weight: 600; - letter-spacing: 1px; - text-transform: uppercase; - animation-delay: 0.7s; -} - -.section-intro { - font-size: 1.2rem; - color: var(--text-light); - text-align: center; - max-width: 900px; - margin: 0 auto 2.5rem; - line-height: 1.6; - animation-delay: 0.8s; -} - -.tech-item { - animation-delay: 0.9s; -} - -.exp-item { - animation-delay: 1s; -} - -#technologies { - padding-top: 2rem; - padding-bottom: 2rem; - position: relative; - overflow: hidden; -} - -#expertise { - padding-top: 4rem; - padding-bottom: 4rem; - position: relative; -} - -#technologies .section-heading { - margin-bottom: 20px; - position: relative; - overflow: hidden; -} - - - -#technologies .section-heading::before { - content: ""; - position: absolute; - width: 100%; - height: 3px; - background: linear-gradient(90deg, transparent, var(--primary-color), transparent); - bottom: -10px; - left: 0; - animation: glowLine 3s ease-in-out infinite; -} - -@keyframes glowLine { - 0%, 100% { - opacity: 0.5; - box-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.3); - } - 50% { - opacity: 1; - box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.7); - } -} - -#generative-ai, -#data-analysis, -.overview-section, -.key-offerings-section, -.benefits-section, -.related-content-section, -#featured-solutions, -#gyannetra-advantage, -#related-content { - padding: 6rem 0; -} - -#agentic-ai { - padding: 80px 0; -} - -.agentic-ai-header { - text-align: center; - margin-bottom: 60px; -} - -.agentic-ai-header h1 { - font-size: 3.6em; - margin-bottom: 20px; - /* Inherit the beautiful gradient and glow from main h1 styling */ -} - -.agentic-ai-header p { - font-size: 1.45em; - 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: 2.4em; - margin-bottom: 40px; - color: #52eef5; -} - -.offerings-cards, -.blog-cards { - display: flex; - justify-content: center; - gap: 30px; - flex-wrap: wrap; -} - -.offering-card, -.feature-card, -.blog-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, -.feature-card:hover, -.blog-card:hover { - transform: translateY(-10px); -} - -.offering-card img, -.feature-card img { - width: 60px; - height: 60px; - margin-bottom: 20px; -} - -.offering-card h3 { - font-size: 1.8em; - margin-bottom: 15px; - color: var(--text-color-primary); -} - -.offering-card p { - color: var(--text-color-secondary); -} - -/* Benefits cards grid and styles */ -.benefits-cards-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 25px; - margin-top: 40px; -} - -.benefit-card { - background-color: var(--card-bg); - border: 1px solid rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); - border-radius: 12px; - padding: 25px; - text-align: center; - transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; - box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); - height: 100%; - display: flex; - flex-direction: column; - align-items: center; -} - -.benefit-card:hover { - transform: translateY(-8px); - box-shadow: 0 12px 25px rgba(var(--primary-color-rgb, 109, 40, 217), 0.4); - border-color: rgba(var(--primary-color-rgb, 109, 40, 217), 0.6); -} - -.benefit-card-icon { - width: 70px; - height: 70px; - margin-bottom: 18px; - display: flex; - align-items: center; - justify-content: center; - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.1); - border-radius: 50%; - transition: transform 0.3s ease, background-color 0.3s ease; -} - -.benefit-card:hover .benefit-card-icon { - transform: scale(1.1); - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.2); -} - -.benefit-card-icon i { - font-size: 2.2rem; - color: var(--primary-color); - transition: color 0.3s ease; -} - -.benefit-card-icon img { - width: 55px; - height: 55px; - object-fit: contain; -} - -.benefit-card h3 { - font-size: 1.4rem; - color: #52eef5; - margin-bottom: 12px; - font-weight: 600; - text-align: center; -} - -.benefit-card p { - color: var(--text-muted); - line-height: 1.6; - font-size: 1.1rem; - text-align: center; - flex-grow: 1; -} - -/* Specialization Section Styles */ -#specializations { - padding: 4rem 0; - position: relative; -} - -#specializations .section-subheading { - background: linear-gradient(90deg, var(--primary-color), #52eef5); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - text-shadow: 0 0 20px rgba(82,238,245,0.2); - margin-top: 2rem; -} - -#specializations .section-intro { - position: relative; - z-index: 2; -} - -/* Specialization Cards Styles */ -.specializations-cards-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - gap: 30px; - margin-top: 40px; - position: relative; - z-index: 2; -} - -.specialization-card { - background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%); - border: 1px solid rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); - border-radius: 15px; - padding: 30px; - transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); - height: 100%; - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - backdrop-filter: blur(10px); -} - -.specialization-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, var(--primary-color), transparent); - opacity: 0; - transition: opacity 0.3s ease; -} - -.specialization-card:hover { - transform: translateY(-8px); - box-shadow: 0 15px 35px rgba(var(--primary-color-rgb, 109, 40, 217), 0.4); - border-color: rgba(var(--primary-color-rgb, 109, 40, 217), 0.6); -} - -.specialization-card:hover::before { - opacity: 1; - animation: shimmer 3s ease-in-out infinite; -} - -.specialization-card-icon { - width: 90px; - height: 90px; - margin-bottom: 20px; - margin-left: auto; - margin-right: auto; - display: flex; - align-items: center; - justify-content: center; - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.15); - border-radius: 50%; - transition: transform 0.3s ease, background-color 0.3s ease; - box-shadow: 0 5px 15px rgba(var(--primary-color-rgb, 109, 40, 217), 0.2); -} - -.specialization-card:hover .specialization-card-icon { - transform: scale(1.1); - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.25); - box-shadow: 0 8px 20px rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); -} - -.specialization-card-icon img { - width: 60px; - height: 60px; - object-fit: contain; - filter: drop-shadow(0 0 5px rgba(var(--primary-color-rgb, 109, 40, 217), 0.3)); -} - -.specialization-card h3 { - font-size: 1.8rem; - color: #52eef5; - margin-bottom: 15px; - font-weight: 600; - text-align: center; -} - -.specialization-description { - color: var(--text-light); - line-height: 1.6; - font-size: 1.1rem; - margin-bottom: 20px; - flex-grow: 1; -} - -.specialization-highlights { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin-bottom: 25px; - justify-content: center; -} - -.highlight-badge { - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.2); - color: var(--primary-color); - padding: 6px 12px; - border-radius: 20px; - font-size: 0.9rem; - font-weight: 500; - border: 1px solid rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); - transition: background 0.3s ease, transform 0.3s ease; -} - -.specialization-card:hover .highlight-badge { - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); - transform: translateY(-2px); -} - -.specialization-btn { - align-self: center; - padding: 10px 25px; - margin-top: 5px; - font-size: 0.95rem; - border-radius: 8px; -} - -@media (max-width: 768px) { - .specializations-cards-grid { - grid-template-columns: 1fr; - gap: 25px; - } - - .specialization-card { - padding: 25px; - } - - .specialization-card h3 { - font-size: 1.6rem; - } -} - -/* Additional benefit card variants for specific pages */ -.workshop-card .card-footer { - margin-top: auto; - padding-top: 20px; - display: flex; - flex-direction: column; - gap: 15px; - align-items: center; -} - -.workshop-details { - font-size: 0.9rem; - color: var(--text-muted); - font-style: italic; -} - -.program-highlights { - display: flex; - gap: 15px; - margin-top: 15px; - flex-wrap: wrap; - justify-content: center; -} - -.highlight-item { - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.1); - color: var(--primary-color); - padding: 5px 12px; - border-radius: 20px; - font-size: 0.9rem; - display: flex; - align-items: center; - gap: 5px; -} - -.benefits ul { - list-style: disc; - padding-left: 20px; - max-width: 800px; - margin: 0 auto; -} - -.benefits li { - margin-bottom: 15px; - font-size: 1.3em; - 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.45em; - margin-bottom: 10px; - color: var(--text-color-primary); -} - -.blogs-case-studies .blog-card p { - font-size: 1.1em; - color: var(--text-color-secondary); -} - -.explore-capabilities { - text-align: center; - margin-top: 40px; -} - -.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; - 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.9rem; - 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.3rem 1rem; /* Adjusted padding */ - border-radius: 10px; - transition: all 0.3s ease; - text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); - display: inline-flex; - align-items: center; - justify-content: center; - min-height: 60px; /* Decreased minimum height */ -} - -.logo:hover { - transform: translateY(-2px); - box-shadow: 0 5px 15px rgba(140, 154, 255, 0.2); -} - -/* Logo image styles */ -.logo-img { - height: 50px; /* Decreased height */ - width: auto; /* Keep width auto to maintain aspect ratio */ - max-width: 350px; /* Increased max-width to allow wider appearance */ - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); - transition: all 0.3s ease; -} - -.logo:hover .logo-img { - filter: drop-shadow(0 4px 8px rgba(90, 107, 255, 0.4)); - transform: scale(1.05); -} - -.nav-links { - list-style: none; - display: flex; - gap: 2rem; - margin-right: 1rem; -} - -.nav-link { - color: var(--fg); - text-decoration: none; - font-size: 1.2rem; - display: flex; - align-items: center; - padding: 0.7rem 1.2rem; - border-radius: 8px; - transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; - 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%; -} - -/* Hamburger Menu Styles */ -.hamburger-menu { - display: none; /* Hidden by default on desktop */ - flex-direction: column; - justify-content: space-around; - width: 30px; - height: 30px; - background: transparent; - border: none; - cursor: pointer; - padding: 10px; /* Add padding for larger hit area */ - z-index: 1010; /* Increased z-index to ensure it's above other elements */ - position: relative; /* Ensure position context */ -} - -.hamburger-line { - width: 100%; - height: 3px; - background: #ffffff; - border-radius: 2px; - transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transition */ - transform-origin: center; - margin: 3px 0; /* Added spacing between lines */ - box-shadow: 0 0 3px rgba(255, 255, 255, 0.6); /* Better glow for visibility */ -} - -.hamburger-menu.active .hamburger-line:nth-child(1) { - transform: translateY(9px) rotate(45deg); - background: #52eef5; /* Change color when active for better visibility */ -} - -.hamburger-menu.active .hamburger-line:nth-child(2) { - opacity: 0; - transform: scale(0); -} - -.hamburger-menu.active .hamburger-line:nth-child(3) { - transform: translateY(-9px) rotate(-45deg); - background: #52eef5; /* Change color when active for better visibility */ -} - -.hero-section, -#automation-flows-hero { - padding-top: 8rem; - padding-bottom: 6rem; - text-align: center; -} - -.gn-responsive-container { - width: 92%; - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem; -} - -/* When hero-section has gn-responsive-container, ensure proper width constraint */ -.hero-section.gn-responsive-container { - width: 92%; - max-width: 1200px; - margin: 0 auto; - padding-left: 2rem; - padding-right: 2rem; -} - -.hero-section h1, -#automation-flows-hero h1 { - font-size: 4.2rem; - margin-bottom: 1rem; -} - -.hero-section p, -#automation-flows-hero p { - font-size: 1.45rem; - color: rgba(255, 255, 255, 0.8); -} - -.overview-section h2, -.key-offerings-section h2, -.benefits-section h2, -.related-content-section h2, -#featured-solutions h2, -#gyannetra-advantage h2, -#related-content h2 { - font-size: 2.4rem; - margin-bottom: 2rem; - text-align: center; - color: #52eef5; -} - -.overview-section p { - font-size: 1.3rem; - 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; - margin-top: 3rem; -} - -.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; - 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.7rem; - margin-bottom: 0.8rem; - color: #52eef5; - text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7); -} - -.offering-item p, -.related-content-item p { - font-size: 1.2rem; - color: rgba(255, 255, 255, 0.7); -} - -.benefits-section ul, -#gyannetra-advantage ul { - list-style: none; - padding: 0; - max-width: 700px; - margin: 3rem auto; -} - -.benefits-section li, -#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; - margin-bottom: 1.2rem; - font-size: 1.3rem; - color: rgba(255, 255, 255, 0.9); - position: relative; - padding-left: 3rem; -} - -.benefits-section li::before, -#gyannetra-advantage li::before { - content: '•'; - position: absolute; - left: 1rem; - color: #a2abff; - font-size: 1.8rem; - 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, -.blog-item .read-more:hover, -#insights-stories .insight-item .read-more:hover { - color: #ffffff; - text-decoration: underline; -} - -#hero { - position: relative; - display: flex; - align-items: center; - justify-content: flex-start; - padding-top: 0 !important; - padding-bottom: 0 !important; - margin-top: 0 !important; - width: 100%; - margin: 0; - overflow: hidden; - height: 70vh; - min-height: 500px; - background: none; - /* Ensure visible during page load */ - visibility: visible !important; - opacity: 1 !important; -} - -.hero-container { - display: flex; - width: 100%; - max-width: var(--max-w); - margin: 0 auto; - height: 100%; - align-items: center; - justify-content: center; - padding: 8rem 4% 1.5rem 4%; - /* Ensure consistent display */ - visibility: visible !important; -} - -.hero-content { - position: relative; - z-index: 20; - flex: 1; - max-width: 800px; - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - /* Prevent layout shifts and FOUC */ - opacity: 1 !important; - transform: none !important; - visibility: visible !important; - will-change: auto; -} - -.hero-content h1 { - font-size: 4.5rem; - line-height: 1.1; - margin-bottom: 1rem; - letter-spacing: 1.5px; - font-weight: 20; - position: relative; - text-shadow: none !important; - - /* Stunning Multi-Gradient Text Effect */ - background: linear-gradient( - 135deg, - #ffffff 0%, - #e0e7ff 15%, - #c7d2fe 30%, - #a5b4fc 45%, - #8b5cf6 60%, - #7c3aed 75%, - #6d28d9 90%, - #5b21b6 100% - ); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - - /* Multi-layered Glow Effect - REMOVED */ - filter: none; - - /* Subtle Text Stroke for Definition */ - -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.2); -} - -/* Removed animated gradient background */ - -/* Removed rotating gradient keyframes */ - -/* Fallback styling for browsers that don't support background-clip: text */ -.hero-content h1.fallback { - background: none !important; - color: #52eef5 !important; - text-shadow: none !important; -} - -/* Enhanced floating reflection effect - REMOVED */ -.hero-content h1 { - -webkit-box-reflect: none; -} - -/* Subtle pulsing glow animation - optimized for all devices */ -@keyframes pulseGlow { - 0% { - text-shadow: none; - filter: brightness(1.05); - } - 100% { - text-shadow: none; - filter: brightness(1.08); - } -} - -/* Mobile-specific animation adjustments */ -@media (max-width: 768px) { - .hero-content h1 { - animation-duration: 2.5s; /* Slightly faster animation on mobile */ - } -} - -.hero-content p { - margin: 1.5rem auto; - font-size: 1.55rem; - opacity: 1; - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); - max-width: 600px; - color: var(--fg); -} - -/* HERO SECTION LAYOUT STABILIZATION */ -#hero .hero-content h1, -#hero .hero-content p, -#hero .hero-content .btn-primary { - /* Prevent layout shifts from animations */ - opacity: 1 !important; - transform: none !important; - visibility: visible !important; - transition: none !important; - text-align: center !important; - margin-left: auto !important; - margin-right: auto !important; -} - -/* Pure #52eef5 heading with glow */ -#hero .hero-content h1 { - color: #52eef5 !important; - text-shadow: none !important; - background: none !important; - -webkit-text-fill-color: #52eef5 !important; - -webkit-text-stroke: 0.3px rgba(82, 238, 245, 0.3); - filter: none !important; - -webkit-box-reflect: none !important; -} - -/* Global override to ensure no shadows on hero h1 */ -#hero .hero-content h1, -.hero-content h1, -#hero h1 { - text-shadow: none !important; - filter: none !important; - -webkit-box-reflect: none !important; - box-shadow: none !important; -} - -/* Typewriter Effect Styles */ -.typewriter-text { - display: inline-block; - position: relative; -} - -.cursor { - display: inline-block; - width: 3px; - height: 1em; - background-color: #52eef5; - margin-left: 2px; - animation: blink 1s infinite; - vertical-align: text-bottom; -} - -@keyframes blink { - 0%, 50% { opacity: 1; } - 51%, 100% { opacity: 0; } -} - -/* Custom hero button styles - Enhanced visibility and appeal */ -/* Special styles for hero buttons across all pages - all hero section types */ -#hero .btn-primary, -.hero-section .btn-primary, -.industry-hero .btn-primary, -.travel-hero .btn-primary, -.finance-hero .btn-primary, -.manufacturing-hero .btn-primary, -.marketing-hero .btn-primary, -.media-hero .btn-primary { - background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%) !important; - border: 2px solid rgba(255, 255, 255, 0.3) !important; - box-shadow: - 0 8px 32px rgba(109, 40, 217, 0.4), - 0 4px 16px rgba(147, 51, 234, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; padding: 18px 36px !important; - margin-top: 24px !important; - font-weight: 400 !important; - letter-spacing: 1.5px !important; - text-transform: uppercase !important; - font-size: 1.3rem !important; - border-radius: 12px !important; - color: #ffffff !important; - text-decoration: none !important; - display: inline-block !important; - position: relative !important; - overflow: hidden !important; - transition: all 0.3s ease !important; - cursor: pointer !important; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; - backdrop-filter: blur(8px) !important; -} - -/* Hover effects for enhanced interactivity */ -#hero .btn-primary:hover, -.hero-section .btn-primary:hover, -.industry-hero .btn-primary:hover, -.travel-hero .btn-primary:hover, -.finance-hero .btn-primary:hover, -.manufacturing-hero .btn-primary:hover, -.marketing-hero .btn-primary:hover, -.media-hero .btn-primary:hover { - transform: translateY(-3px) scale(1.05) !important; - background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important; - border-color: rgba(255, 255, 255, 0.5) !important; - box-shadow: - 0 12px 40px rgba(109, 40, 217, 0.6), - 0 6px 20px rgba(147, 51, 234, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.3), - 0 0 20px rgba(168, 85, 247, 0.5); - text-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important; -} - -/* Active/pressed state */ -#hero .btn-primary:active, -.hero-section .btn-primary:active, -.industry-hero .btn-primary:active, -.travel-hero .btn-primary:active, -.finance-hero .btn-primary:active, -.manufacturing-hero .btn-primary:active, -.marketing-hero .btn-primary:active, -.media-hero .btn-primary:active { - transform: translateY(-1px) scale(1.02) !important; - transition: all 0.1s ease !important; -} - -/* Subtle animation for attention */ -@keyframes heroButtonPulse { - 0%, 100% { - box-shadow: - 0 8px 32px rgba(109, 40, 217, 0.4), - 0 4px 16px rgba(147, 51, 234, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - } - 50% { - box-shadow: - 0 8px 32px rgba(109, 40, 217, 0.6), - 0 4px 16px rgba(147, 51, 234, 0.5), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - } -} - -#hero .btn-primary, -.hero-section .btn-primary, -.industry-hero .btn-primary, -.travel-hero .btn-primary, -.finance-hero .btn-primary, -.manufacturing-hero .btn-primary, -.media-hero .btn-primary { - animation: heroButtonPulse 3s ease-in-out infinite !important; -} - -/* Ensure hero content is not affected by scroll animations */ -#hero .hero-content.animate-on-scroll { - animation: none !important; - text-align: center !important; -} - -#hero .hero-content.animate-on-scroll.animated { - transform: none !important; - opacity: 1 !important; - text-align: center !important; -} - -/* Override any fadeInUp animations for hero content */ -#hero .hero-content p { - animation: none !important; - animation-delay: 0s !important; -} - -/* Ensure hero heading maintains its glow animation */ -#hero .hero-content h1 { - animation: pulseGlow 3s ease-in-out infinite alternate !important; - animation-delay: 0s !important; -} - -/* Force center alignment for hero content at all times */ -#hero .hero-content { - text-align: center !important; - align-items: center !important; - justify-content: center !important; -} - -/* Prevent any FOUC in hero section */ -#hero * { - visibility: visible !important; - opacity: 1 !important; - transform: none !important; - transition: none !important; -} - -/* FOUC prevention */ -.fouc-prevention { - visibility: hidden !important; -} - -/* Exception for critical elements during loading */ -.fouc-prevention .site-header, -.fouc-prevention #hero { - visibility: visible !important; -} - -/* Smooth transition once content is loaded */ -html:not(.fouc-prevention) { - transition: opacity 0.3s ease-in; - opacity: 1; -} - -/* Ensure consistent hero layout across different screen loads */ -@media (min-width: 1024px) { - .hero-container { - padding: 12rem 4% 2rem 4%; - } -} - -@media (min-height: 600px) { - #hero { - height: 80vh; - min-height: 600px; - } -} - -@media (max-height: 599px) { - #hero { - height: auto; - min-height: 500px; - padding: 2rem 0; - } - - .hero-container { - height: auto; - min-height: 500px; - } -} - -/* Mobile responsive adjustments */ -@media (min-width: 769px) and (max-width: 1023px) { - .hero-container { - padding: 10rem 4% 2rem 4%; - } -} - -@media (max-width: 768px) { - #hero { - height: 70vh; - min-height: 500px; - padding-top: 1rem; /* Additional top padding for mobile */ - } - - .hero-container { - padding: 2rem 4% 1rem 4%; /* Increased top padding to prevent navbar overlap */ - justify-content: center; /* Ensure content is properly centered */ - } - - .hero-content { - margin-top: 1rem; /* Extra margin to push content below navbar */ - } .hero-content h1 { - font-size: 3rem; - line-height: 1.2; /* Tighter line height for mobile */ - margin-bottom: 1rem; - text-shadow: none !important; /* Removed shadow for mobile */ - letter-spacing: 0.5px; /* Slightly reduced letter spacing for mobile */ - } - .hero-content p { - font-size: 1.3rem; - margin-bottom: 1.5rem; - } - - #technologies { - padding-top: 1.5rem; } -} - -/* Extra small mobile devices */ -@media (max-width: 480px) { - #hero { - height: 65vh; - min-height: 450px; - padding-top: 1.5rem; - } - - .hero-container { - padding: 2.5rem 3% 1rem 3%; /* Even more top padding for smallest screens */ - } - - .hero-content { - margin-top: 1.5rem; /* Extra margin for smallest screens */ - } .hero-content h1 { - font-size: 2.4rem; /* Smaller font for very small screens */ - line-height: 1.1; - margin-bottom: 0.8rem; - text-shadow: none !important; /* Removed shadow for smallest screens */ - letter-spacing: 0.3px; - filter: brightness(1.08); /* Slightly increased brightness for better visibility */ - } - .hero-content p { - font-size: 1.2rem; - margin-bottom: 1.2rem; - } - .hero-content .btn-primary { - padding: 0.8rem 1.5rem; - font-size: 1.1rem; - } -} - -.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: 1.15rem; -} - -.item-description { - font-size: 0.95rem; - opacity: 0.8; -} - -.section-heading { - font-size: 3rem; - font-weight: 700; - text-align: center; - margin: var(--gap) 0; - letter-spacing: 0.7px; - position: relative; - display: inline-block; - width: 100%; - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ -} - -h1,h2,h3,h4,h5,h6 { - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ - letter-spacing: 0.7px; - font-weight: 700; -} - -.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); - 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%); -} - -/* Modern Technology Cards Animation */ -.tech-cards-container { - position: relative; - width: 100%; - overflow: hidden; - padding: 30px 0; - background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.2)); - border-radius: 20px; - margin: 10px 0; - box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3); -} - -.tech-cards-track { - display: flex; - animation: techCardsFlow 75s linear infinite; - will-change: transform; - gap: 70px; /* Further increased gap between cards */ -} - -.tech-cards-track:hover { - animation-play-state: paused; -} - -@keyframes techCardsFlow { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(-50%); - } -} - -.tech-card { - flex: 0 0 auto; - width: 240px; - height: 220px; - position: relative; - cursor: pointer; - transition: all 0.3s ease; - transform-style: preserve-3d; - margin: 5px 0; /* Reduced top/bottom margin */ - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); -} - -.tech-card-inner { position: relative; - width: 100%; - height: 100%; - background: rgba(20, 25, 45, 0.5); /* More transparent background like navbar */ - border: 1px solid rgba(255, 255, 255, 0.1); /* Similar to navbar border when scrolled */ - border-radius: 16px; - padding: 25px 15px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; backdrop-filter: blur(30px); - -webkit-backdrop-filter: blur(30px); - overflow: hidden; - transition: all 0.3s ease; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.3), - 0 4px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.tech-card-inner::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(45deg, - transparent 30%, - rgba(var(--primary-color-rgb), 0.1) 50%, - transparent 70%); - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-card:hover .tech-card-inner::before { - opacity: 1; -} - -.tech-card:hover { - transform: translateY(-10px); - z-index: 10; -} - -.tech-card:hover .tech-card-inner { - background: linear-gradient(135deg, - rgba(var(--primary-color-rgb), 0.2) 0%, - rgba(255, 255, 255, 0.1) 50%, - rgba(var(--primary-color-rgb), 0.1) 100%); - backdrop-filter: blur(35px); - -webkit-backdrop-filter: blur(35px); - border: 1px solid rgba(255, 255, 255, 0.1); /* Similar to navbar border when scrolled */ - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.1), /* Same as navbar shadow when scrolled */ - 0 0 30px rgba(var(--primary-color-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.3); -} - -.tech-icon-wrapper { - position: relative; - width: 80px; - height: 80px; - margin-bottom: 20px; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s ease; -} - -.tech-icon-wrapper::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100%; - background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.2) 0%, transparent 70%); - border-radius: 50%; - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-card:hover .tech-icon-wrapper::before { - opacity: 0; -} - - - -.tech-card:hover .tech-icon-wrapper { - transform: scale(1.1) rotateY(15deg); -} - -.tech-card h3 { - font-size: 1.45rem; - font-weight: 600; - margin-bottom: 8px; - color: var(--fg); - transition: all 0.3s ease; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); -} - -.tech-card:hover h3 { - color: #FFFFFF; /* Keep text white on hover */ - text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7); /* Still add glow effect with primary color */ - transform: translateY(-2px); -} - -.tech-card p { - font-size: 1.1rem; - color: rgba(255, 255, 255, 0.8); - transition: all 0.3s ease; - line-height: 1.4; -} - -.tech-card:hover p { - color: rgba(255, 255, 255, 0.95); - transform: translateY(-1px); -} - -.tech-icon:hover { - background-color: rgba(255, 255, 255, 0.9) !important; - transform: scale(1.05); - box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2); -} - -.tech-icon { - min-width: 40px; - min-height: 40px; - max-width: 100px; - max-height: 100px; - width: auto; - height: auto; - flex: 1; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition: transform 0.3s ease; - aspect-ratio: 1; - /* Add background to improve visibility on dark theme */ - background-color: rgba(255, 255, 255, 0.8); /* Increased opacity */ - border-radius: 8px; - padding: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); - backdrop-filter: blur(10px); - /* Ensure contrast for all icons */ - position: relative; - background-blend-mode: normal; -} - -/* Additional dark theme optimizations for tech icons */ -/* Removed redundant .tech-icon rule */ - -/* Add a subtle glow effect on hover for better visibility */ -.tech-icon:hover { - transform: scale(1.05); - box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.1); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); - border-radius: 8px; - pointer-events: none; - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-icon:hover::before { - opacity: 1; -} - -/* Specific adjustments for logos that might be invisible on dark backgrounds */ -.tech-icon.openai, -.tech-icon.anthropic, -.tech-icon.mistral { - filter: brightness(1.1) contrast(1.2); -} - -/* For GitHub avatars that might be too dark */ -.tech-icon.llamaindex, -.tech-icon.vllm, -.tech-icon.docker { - background-image: url('../assets/tech-icons/docker.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.faiss { - filter: brightness(1.1) saturate(1.1); -} - -/* Special handling for light logos on dark theme */ -.tech-icon.weaviate { - background-color: rgba(0, 0, 0, 0.7) !important; - border: 1px solid rgba(255, 255, 255, 0.2); -} - -/* Ensure proper spacing and visibility for text logos */ -.tech-icon.langchain, -.tech-icon.qdrant, -.tech-icon.haystack { - background-size: 80% auto; - background-color: rgba(255, 255, 255, 0.95) !important; -} - - - -/* Icons for each technology - Using direct image URLs from official sources */ -.tech-icon.ollama { - background-image: url('https://avatars.githubusercontent.com/u/151674099?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.95); - border-radius: 50%; - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.langchain { - background-image: url('https://python.langchain.com/img/brand/wordmark.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.chroma { - background-image: url('../assets/tech-icons/Chroma.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.4) contrast(1.5) saturate(1.3); - border: 2px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); -} - -.tech-icon.pinecone { - background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/markdown/markdown-original.svg'); - background-color: rgba(46, 160, 67, 0.9); - filter: brightness(1.4) contrast(1.5) hue-rotate(60deg); - border: 2px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 0 20px rgba(46, 160, 67, 0.3); - position: relative; -} - -.tech-icon.pinecone::after { - content: '🌲'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 29px; - z-index: 2; -} - -.tech-icon.vectordb { - background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(180deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); -} - -.tech-icon.openai { - background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.2) contrast(1.3); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.huggingface { - background-image: url('https://huggingface.co/front/assets/huggingface_logo-noborder.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.pytorch { - background-image: url('https://pytorch.org/assets/images/pytorch-logo.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.tensorflow { - background-image: url('https://www.tensorflow.org/images/tf_logo_social.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -/* Remaining Technology Icons - Using direct image URLs */ -.tech-icon.weaviate { - background-image: url('https://avatars.githubusercontent.com/u/37794290?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.95); - border-radius: 50%; - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.qdrant { - background-image: url('https://qdrant.tech/images/logo_with_text.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.haystack { - background-image: url('https://raw.githubusercontent.com/deepset-ai/haystack/main/docs/img/haystack_logo_colored.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.mistral { - background-image: url('https://docs.mistral.ai/img/logo.svg'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.anthropic { - background-image: url('../assets/tech-icons/anthropic claude.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.2) contrast(1.3); - border: 2px solid rgba(255, 255, 255, 0.3); -} - -.tech-icon.groq { - background-image: url('https://groq.com/wp-content/uploads/2024/03/PBG-mark1-color.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.gemini { - background-image: url('https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.llamaindex { - background-image: url('https://avatars.githubusercontent.com/u/130722866?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.9); - border-radius: 50%; -} - -.tech-icon.vllm { - background-image: url('https://avatars.githubusercontent.com/u/132581166?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.9); - border-radius: 50%; -} - -.tech-icon.rag { - background-image: url('https://img.icons8.com/color/96/artificial-intelligence.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.transformers { - background-image: url('https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.spacy { - background-image: url('https://raw.githubusercontent.com/explosion/spaCy/master/website/src/images/logo.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(10deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.llama { - background-image: url('../assets/tech-icons/meta-color.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(-10deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.milvus { - background-image: url('../assets/tech-icons/Milvus.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) saturate(1.2); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.docker { - background-image: url('../assets/tech-icons/docker.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.faiss { - background-image: url('https://raw.githubusercontent.com/facebookresearch/faiss/main/docs/img/faiss.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-shadow { - position: absolute; - top: 0; - width: 150px; - height: 100%; - pointer-events: none; - z-index: 1; -} - -.tech-shadow-left { - left: 0; - background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent); -} - -.tech-shadow-right { - right: 0; - background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent); -} - -/* Removed pulse animation - displaying raw icons */ - -@keyframes float { - 0% { - transform: translateY(0px); - } - 50% { - transform: translateY(-5px); - } - 100% { - transform: translateY(0px); - } -} - -/* Removed pulse hover effect - displaying raw icons */ - -/* Removed highlight glow effects - displaying raw icons */ - -/* Responsive adjustments */ -@media (max-width: 768px) { - /* Fix navbar container */ - .site-header { - padding: 0.5rem 1rem; - } - .navbar { - display: flex !important; - justify-content: space-between !important; - align-items: center !important; - padding: 1rem 2rem !important; - position: relative; - } - /* Emergency hamburger menu fixes - BULLETPROOF VERSION */ - .hamburger-menu { - display: flex !important; - visibility: visible !important; - opacity: 1 !important; - pointer-events: auto !important; - position: relative !important; - z-index: 9999 !important; - width: 50px !important; - height: 50px !important; - background: rgba(82, 238, 245, 0.4) !important; - border: 3px solid rgba(82, 238, 245, 0.8) !important; - border-radius: 8px !important; - cursor: pointer !important; - touch-action: manipulation !important; - flex-direction: column !important; - justify-content: center !important; - align-items: center !important; - -webkit-user-select: none !important; - -moz-user-select: none !important; - -ms-user-select: none !important; - user-select: none !important; - outline: none !important; - padding: 0 !important; - margin: 0 !important; - box-sizing: border-box !important; - } - - .hamburger-menu:hover { - background: rgba(82, 238, 245, 0.6) !important; - transform: scale(1.05) !important; - } - - .hamburger-menu:active { - transform: scale(0.95) !important; - background: rgba(82, 238, 245, 0.8) !important; - } - - .hamburger-line { - display: block !important; - visibility: visible !important; - opacity: 1 !important; - width: 70% !important; - height: 3px !important; - background: #ffffff !important; - margin: 2px 0 !important; - transition: all 0.3s ease !important; - border-radius: 2px !important; - } - - /* Hide nav links on mobile by default - EMERGENCY FIXED */ - .nav-links { - position: fixed !important; - top: 0 !important; - left: -100% !important; - width: 100% !important; - height: 100vh !important; - background: rgba(15, 15, 30, 0.98) !important; - backdrop-filter: blur(25px) !important; - z-index: 8888 !important; - transition: left 0.4s ease !important; - display: flex !important; - flex-direction: column !important; - justify-content: flex-start !important; - align-items: center !important; - padding-top: 100px !important; - } - - /* Show nav links when active - EMERGENCY FIXED */ - .nav-links.active, - .nav-links.show { - left: 0 !important; - } - - @keyframes slideInFromLeft { - from { - left: -100%; - opacity: 0; - } - to { - left: 0; - opacity: 1; - } - } - - @keyframes fadeInMenu { - from { - opacity: 0.8; - } - to { - opacity: 1; - } - } - /* Style nav links for mobile - IMPROVED */ - .nav-links li { - width: 90%; /* Better width for mobile */ - text-align: center; - margin-bottom: 0.5rem; /* Added margin for spacing */ - } - - .nav-link { - font-size: 1.4rem; /* Slightly larger for better touch */ - padding: 1.2rem 2rem; /* Better padding */ - width: 100%; - display: block; - border-radius: 12px; /* More rounded corners */ - background: rgba(255, 255, 255, 0.05); /* Subtle background */ - border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */ - transition: all 0.3s ease; /* Smooth transitions */ - color: #ffffff; - text-decoration: none; /* Remove underline */ - } - - .nav-link:hover { - background: rgba(82, 238, 245, 0.2); /* Hover effect */ - border-color: rgba(82, 238, 245, 0.3); - transform: translateY(-2px); /* Subtle lift effect */ - box-shadow: 0 4px 12px rgba(82, 238, 245, 0.2); - } /* Dropdown menu adjustments for mobile - GREATLY IMPROVED */ - .dropdown-menu { - position: static; - opacity: 1; - visibility: visible; - transform: none; - margin-top: 1rem; - background: rgba(30, 30, 50, 0.9); /* Better contrast */ - border-radius: 12px; /* More rounded */ - max-height: 0; - overflow: hidden; - transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transition */ - width: 95%; /* Better width */ - max-width: 450px; /* Increased max-width */ - border: 1px solid rgba(82, 238, 245, 0.2); /* Subtle border */ - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Better shadow */ - } - - .dropdown-menu.show { - max-height: 600px; /* Increased for more content */ - } .dropdown-menu a { - display: flex !important; /* Ensure flex display */ - padding: 1.5rem 2rem; /* Better padding */ - font-size: 1.1rem; /* Better font size */ - border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Subtle divider */ - transition: all 0.3s ease; /* Smooth transitions */ - border-radius: 8px; /* Rounded items */ - margin: 0.25rem; /* Small margin between items */ - align-items: center !important; /* Center align content */ - justify-content: flex-start !important; /* Start alignment */ - width: 100% !important; /* Full width */ - box-sizing: border-box !important; /* Include padding in width */ - } - - .dropdown-menu a:last-child { - border-bottom: none; - margin-bottom: 0.5rem; /* Bottom margin for last item */ - } - - .dropdown-menu a:hover { - background: rgba(82, 238, 245, 0.15); /* Better hover effect */ - transform: translateX(5px); /* Slide effect */ - } /* Improve dropdown icons and text layout on mobile - ENHANCED */ - .dropdown-item-content { - display: flex !important; - flex-direction: row !important; /* Force horizontal layout */ - text-align: left !important; /* Left align for better UX */ - gap: 1rem !important; /* Better spacing */ - align-items: center !important; /* Center align items */ - padding: 0.5rem !important; /* Internal padding */ - justify-content: flex-start !important; /* Align to start */ - width: 100% !important; /* Full width */ - } - - .dropdown-icon { - width: 40px !important; /* Larger icons for mobile */ - height: 40px !important; - margin-right: 0 !important; - margin-left: 0 !important; - flex-shrink: 0 !important; /* Prevent icon shrinking */ - filter: brightness(1.1); /* Slightly brighter icons */ - display: block !important; /* Ensure visibility */ - object-fit: contain !important; /* Maintain aspect ratio */ - } - .text-content { - flex: 1 !important; /* Take remaining space */ - display: flex !important; - flex-direction: column !important; /* Keep text stacked vertically */ - justify-content: center !important; - align-items: flex-start !important; /* Left align text */ - min-width: 0 !important; /* Allow text to wrap */ - } - - /* Ensure dropdown menu items display correctly */ - .dropdown-menu li { - width: 100% !important; - display: block !important; - } - - .dropdown-menu li a { - width: 100% !important; - display: flex !important; - align-items: center !important; - } - .item-title { - font-size: 1.1rem !important; /* Better title size */ - font-weight: 600 !important; /* Bolder title */ - color: #ffffff !important; /* White title */ - display: block !important; - margin-bottom: 0.25rem !important; - line-height: 1.2 !important; /* Better line height */ - white-space: nowrap !important; /* Prevent wrapping for mobile */ - overflow: hidden !important; - text-overflow: ellipsis !important; /* Add ellipsis for long titles */ - } - - .item-description { - font-size: 0.9rem !important; /* Smaller description */ - color: rgba(255, 255, 255, 0.8) !important; /* Slightly transparent */ - line-height: 1.3 !important; /* Better line height */ - display: -webkit-box !important; - -webkit-line-clamp: 2 !important; /* Limit to 2 lines */ - line-clamp: 2 !important; /* Standard property for compatibility */ - -webkit-box-orient: vertical !important; - overflow: hidden !important; - text-overflow: ellipsis !important; - } /* Tech marquee adjustments */ - .tech-icon { - min-width: 35px; - min-height: 35px; - max-width: 65px; - max-height: 65px; - } - - /* Mobile debug - add a subtle border to verify mobile styles are active */ - .dropdown-item-content { - border-left: 2px solid rgba(82, 238, 245, 0.3) !important; - } -} - -/* Desktop media query - Reset mobile styles for larger screens */ -@media (min-width: 769px) { - /* Hide hamburger menu on desktop */ - .hamburger-menu { - display: none !important; - } - - /* Show nav links normally on desktop */ - .nav-links { - position: static !important; - width: auto !important; - height: auto !important; - background: transparent !important; - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; - flex-direction: row !important; - justify-content: flex-end !important; - align-items: center !important; - gap: 2rem !important; - z-index: auto !important; - transition: none !important; - padding: 0 !important; - display: flex !important; - overflow: visible !important; - box-shadow: none !important; - left: auto !important; - } - - /* Reset nav link styles for desktop */ - .nav-links li { - width: auto !important; - text-align: left !important; - margin-bottom: 0 !important; - } - - .nav-link { - font-size: 1rem !important; - padding: 0.8rem 1.2rem !important; - width: auto !important; - background: transparent !important; - border: none !important; - border-radius: 0 !important; - } - - /* Reset dropdown menus for desktop */ - .dropdown-menu { - position: absolute !important; - opacity: 0 !important; - visibility: hidden !important; - transform: translateY(10px) !important; - margin-top: 0.5rem !important; - background: #100732 !important; - } - - .dropdown:hover .dropdown-menu { - opacity: 1 !important; - visibility: visible !important; - transform: translateY(0) !important; - } -} - -@media (max-width: 480px) { - .tech-icon { - min-width: 30px; - min-height: 30px; - max-width: 50px; - max-height: 50px; - } -} - -.exp-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 2rem; - justify-items: center; - max-width: 1300px; - margin: 0 auto; - padding: 0 2rem; -} - -.exp-item { - background: rgba(0, 0, 0, 0.45); - border-radius: 16px; - padding: 2.2rem; - backdrop-filter: blur(15px); - border: 1px solid rgba(255, 255, 255, 0.2); - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - width: 100%; - max-width: 320px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - min-height: 360px; - text-align: center; - position: relative; - overflow: hidden; - cursor: pointer; -} - -.exp-item::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(82, 238, 245, 0.05) 0%, rgba(162, 171, 255, 0.03) 100%); - opacity: 0; - transition: opacity 0.4s ease; - border-radius: 16px; -} - -.exp-item:hover { - transform: translateY(-10px) scale(1.03); - background: rgba(0, 0, 0, 0.65); - border-color: rgba(82, 238, 245, 0.5); - box-shadow: - 0 20px 50px rgba(82, 238, 245, 0.3), - 0 8px 20px rgba(0, 0, 0, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.15), - 0 0 0 1px rgba(82, 238, 245, 0.2); -} - -.exp-item:hover::before { - opacity: 1; -} - -.exp-item img { - width: 110px; - height: auto; - margin-bottom: 1.5rem; - opacity: 0.95; - transition: all 0.4s ease; - filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); -} - -.exp-item:hover img { - opacity: 1; - transform: scale(1.05); - filter: drop-shadow(0 6px 12px rgba(82, 238, 245, 0.3)); -} - -.exp-item p:first-of-type { - margin-top: 0; - margin-bottom: 1.2rem; - font-size: 1.5rem; - text-align: center; - font-weight: 700; - color: #ffffff; - text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9); - letter-spacing: 0.8px; - position: relative; - z-index: 2; - line-height: 1.2; -} - -.exp-item .exp-description { - margin-top: 0; - font-size: 1.05rem; - line-height: 1.65; - text-align: center; - color: rgba(255, 255, 255, 0.95); - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); - font-weight: 400; - position: relative; - z-index: 2; - max-width: 100%; - opacity: 0.9; - transition: opacity 0.3s ease; -} - -.exp-item:hover .exp-description { - opacity: 1; - color: rgba(255, 255, 255, 1); -} - -/* Responsive design for expertise grid */ -@media (max-width: 1024px) { - .exp-grid { - gap: 1.5rem; - max-width: 100%; - padding: 0 2rem; - grid-template-columns: repeat(4, 1fr); - } - - .exp-item { - padding: 1.8rem; - max-width: 280px; - min-height: 320px; - } - - .exp-item img { - width: 100px; - margin-bottom: 1.2rem; - } - - .exp-item p:first-of-type { - font-size: 1.3rem; - margin-bottom: 0.9rem; - } - - .exp-item .exp-description { - font-size: 0.95rem; - line-height: 1.5; - } -} - -@media (max-width: 768px) { - .exp-grid { - gap: 1.2rem; - padding: 0 1.5rem; - grid-template-columns: repeat(2, 1fr); - } - - .exp-item { - padding: 1.5rem; - max-width: 100%; - min-height: 300px; - } - - .exp-item img { - width: 90px; - margin-bottom: 1rem; - } - - .exp-item p:first-of-type { - font-size: 1.2rem; - margin-bottom: 0.8rem; - } - .exp-item .exp-description { - font-size: 0.9rem; - line-height: 1.4; - margin-top: 0.5rem; - } -} - -@media (max-width: 480px) { - .exp-grid { - gap: 1rem; - padding: 0 1rem; - grid-template-columns: 1fr; - } - - .exp-item { - padding: 1.2rem; - max-width: 300px; - min-height: 260px; - margin: 0 auto; - } - - .exp-item img { - width: 80px; - margin-bottom: 1rem; - } - - .exp-item p:first-of-type { - font-size: 1.1rem; - margin-bottom: 0.7rem; - } - - .exp-item .exp-description { - font-size: 0.85rem; - line-height: 1.5; - margin-top: 0.5rem; - } -} - -.about-section { - margin-bottom: var(--gap); - padding-top: 9rem; - padding-bottom: 4rem; -} - -.about-section h2 { - font-size: 2.4em; - margin-bottom: 20px; - color: #52eef5; -} - -.about-section p { - font-size: 1.3em; - 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, -.footer-col { - flex: 1; -} - -.mission h2, -.vision h2 { - font-size: 2.15em; - margin-bottom: 15px; -} - -.mission p, -.vision p { - font-size: 1.2em; - line-height: 1.5; -} - -/* Footer Styles */ -.site-footer { - background-color: #0f172a; /* Dark blue-gray background */ - color: var(--text-muted); - padding: 50px 0; - font-size: 1.4rem; -} - -.footer-content { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - gap: 30px; - margin-bottom: 40px; -} - -.footer-col { - flex: 1; - min-width: 220px; /* Ensures columns don't get too narrow */ -} - -.footer-col-logo .logo { - font-size: 2.2rem; - color: #fff; /* White logo text */ - margin-bottom: 20px; - display: inline-block; - /* Removed gradient for simpler, consistent look */ - background: none; - -webkit-background-clip: initial; - background-clip: initial; - text-shadow: none; /* Remove text shadow if not desired */ - border: none; - padding: 0; -} - -/* Footer logo description paragraph */ -.footer-col-logo p { - margin-top: 15px; - margin-bottom: 15px; - line-height: 1.6; - color: var(--text-muted); - max-width: 350px; - font-size: 1.3rem; -} - -/* Footer logo image styles */ -.footer-logo-img { - height: 200px; - width: auto; - max-width: 550px; - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); - transition: all 0.3s ease; -} - -.footer-col-logo .logo:hover .footer-logo-img { - filter: drop-shadow(0 4px 8px rgba(90, 107, 255, 0.3)); - transform: scale(1.02); -} - -.footer-col h3 { - font-size: 1.8rem; - color: #52eef5; /* Cyan heading text */ - margin-bottom: 20px; - font-weight: 600; - /* Removed gradient for simpler, consistent look */ - background: none; - -webkit-background-clip: initial; - background-clip: initial; - text-shadow: none; /* Remove text shadow if not desired */ -} - -.footer-col ul { - list-style: none; - padding: 0; -} - -.footer-col ul li { - margin-bottom: 10px; -} - -.footer-col ul li a { - color: var(--text-muted); - text-decoration: none; - transition: color 0.3s ease; - font-size: 1.3rem; -} - -.footer-col ul li a:hover { - color: var(--primary-color); /* Use primary color for hover */ -} - -.footer-col p { - margin-bottom: 10px; - line-height: 1.7; - font-size: 1.3rem; -} - -/* Footer contact info with icons styling */ -.footer-col ul li p { - display: flex; - align-items: center; - margin-bottom: 8px; - padding: 8px 0; - font-size: 1.3rem; -} - -.footer-col ul li p i { - margin-right: 12px; - font-size: 1.5rem; - color: var(--primary-color); - min-width: 24px; - text-align: center; -} -.footer-col p a { /* Styling for links within paragraphs, e.g., email */ - color: var(--text-muted); - text-decoration: none; -} - -.footer-col p a:hover { - color: var(--primary-color); - text-decoration: underline; -} - -.footer-col .social-links { - display: flex; - align-items: center; - gap: 15px; - margin-top: 15px; -} - -.footer-col .social-links a { - color: var(--text-muted); - font-size: 1.6rem; - text-decoration: none; /* Remove underlines from social media icons */ - transition: color 0.3s ease, transform 0.3s ease; - padding: 10px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - min-width: 45px; - min-height: 45px; -} - -.footer-col .social-links a:hover { - color: var(--primary-color); /* Use primary color for hover */ - transform: translateY(-2px); - background-color: rgba(var(--primary-color-rgb), 0.1); -} - -.footer-bottom { - text-align: center; - padding-top: 20px; - border-top: 1px solid rgba(255, 255, 255, 0.1); /* Light border */ - font-size: 1.25rem; -} - -.footer-bottom a { - color: #ffffff; /* White color for footer bottom links */ - text-decoration: none; /* Remove underline */ -} - -.footer-bottom a:hover { - color: #8b5cf6; - text-decoration: underline; -} - -/* General button styles */ -.btn { - display: inline-block; - text-decoration: none; - padding: 14px 28px; - border-radius: 8px; - font-weight: 500; - letter-spacing: 1px; - text-transform: uppercase; - position: relative; - overflow: hidden; - transition: all 0.3s ease; - cursor: pointer; - text-align: center; - color: #ffffff; - font-size: 1rem; - border: 2px solid rgba(255, 255, 255, 0.2); - box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3); - background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); -} - -.btn-primary { - display: inline-block; - text-decoration: none; - padding: 14px 28px; - border-radius: 8px; - font-weight: 500; - letter-spacing: 1px; - text-transform: uppercase; - position: relative; - overflow: hidden; - transition: all 0.3s ease; - cursor: pointer; - text-align: center; - color: #ffffff; - font-size: 1rem; - border: 2px solid rgba(255, 255, 255, 0.2); - box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3); - background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); -} - -.btn-primary:before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); - transition: all 0.8s ease; - z-index: -1; -} - -.btn:hover, -.btn-primary:hover { - transform: translateY(-3px) scale(1.02); - box-shadow: 0 15px 25px -10px rgba(var(--primary-color-rgb), 0.6); - background: linear-gradient(135deg, var(--primary-color-hover), var(--primary-color)); -} - -.btn-primary:hover:before { left: 100%; -} - -.contact-page-container { - padding-top: 0; /* Completely removed top padding to shift content all the way up */ - padding-bottom: 4rem; - color: #fff; - animation: none !important; /* Remove any animations */ - transition: none !important; /* Remove any transitions */ - transform: none !important; /* Ensure no transforms are applied */ -} - -#contact-us-section { - animation: none !important; - transition: none !important; - transform: none !important; -} - -#contact-us-section .contact-header { - text-align: center; - margin-bottom: 40px; - animation: none !important; - transition: none !important; -} - -#contact-us-section .contact-header h1 { - font-size: 4rem; - margin-bottom: 20px; -} - -#contact-us-section .contact-header p { - font-size: 1.3rem; - color: #ccc; - margin-bottom: 10px; -} - -.contact-content { - display: flex; - gap: 2rem; - flex-wrap: wrap; - justify-content: center; - align-items: stretch; -} - -.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: 1; - min-width: 300px; - max-width: 500px; -} - -.contact-info-container { - flex: 1; - min-width: 300px; - max-width: 500px; -} - -.contact-details { - list-style: none; - padding: 0; - margin-bottom: 2rem; -} - -.contact-details li { - margin-bottom: 1rem; - display: flex; - align-items: center; - padding: 1.2rem; - background: rgba(255, 255, 255, 0.05); - border-radius: 8px; -} - -.contact-details li i { - margin-right: 1rem; - color: #5a6bff; - font-size: 1.45rem; -} - -.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: 1.2rem; - margin-bottom: 1.5rem; - color: rgba(255, 255, 255, 0.8); -} - -.btn-book-consultation { - display: inline-block; - padding: 0.8rem 1.5rem; - background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%); - border: none; - border-radius: 8px; - color: white; - text-decoration: none; - font-size: 1.2rem; - transition: all 0.3s ease; -} - -.btn-book-consultation:hover { - background: linear-gradient(90deg, #6d7dff 0%, #b5c0ff 100%); - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(90, 107, 255, 0.4); -} - -/* ===== ENHANCED CONTACT FORM STYLING ===== */ -/* Form Group Container */ -.form-group { - margin-bottom: 1.8rem; - position: relative; -} - -/* Form Labels */ -.form-group label { - display: block; - margin-bottom: 0.6rem; - font-size: 1.1rem; - font-weight: 600; - color: #52eef5; - font-family: 'Inter', sans-serif; - letter-spacing: 0.5px; - text-transform: uppercase; -} - -/* Base Input Styling */ -.form-group input[type="text"], -.form-group input[type="email"], -.form-group select, -.form-group textarea { - width: 100%; - padding: 1rem 1.2rem; - font-size: 1.1rem; - font-family: 'Inter', sans-serif; - background: rgba(255, 255, 255, 0.08); - border: 2px solid rgba(255, 255, 255, 0.15); - border-radius: 12px; - color: #ffffff; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - box-sizing: border-box; -} - -/* Textarea Specific Styling */ -.form-group textarea { - resize: vertical; - min-height: 120px; - line-height: 1.6; -} - -/* Input Hover States */ -.form-group input[type="text"]:hover, -.form-group input[type="email"]:hover, -.form-group select:hover, -.form-group textarea:hover { - background: rgba(255, 255, 255, 0.12); - border-color: rgba(82, 238, 245, 0.4); - transform: translateY(-1px); -} - -/* Placeholder Styling */ -.form-group input[type="text"]::placeholder, -.form-group input[type="email"]::placeholder, -.form-group textarea::placeholder { - color: rgba(255, 255, 255, 0.6); - font-style: italic; -} - -/* Input Focus States */ -.form-group input[type="text"]:focus, -.form-group input[type="email"]:focus, -.form-group select:focus, -.form-group textarea:focus { - outline: none; - border-color: #52eef5; - background: rgba(255, 255, 255, 0.15); - box-shadow: - 0 0 20px rgba(82, 238, 245, 0.3), - 0 0 40px rgba(82, 238, 245, 0.1), - inset 0 1px 3px rgba(0, 0, 0, 0.1); - transform: translateY(-2px); -} - -/* Select Dropdown Styling */ -.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%2352eef5%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 1rem center; - background-size: 14px auto; - padding-right: 3rem; - cursor: pointer; -} - -/* Select option styling */ -.form-group select option { - background: #1a1a2e; - color: #ffffff; - padding: 0.5rem; -} - -/* Enhanced Submit Button */ -.btn-send-message, -.btn-primary.btn-send-message { - display: block; - width: 100%; - padding: 1.2rem 2rem; - background: linear-gradient(135deg, #52eef5 0%, #667eea 50%, #764ba2 100%); - border: none; - border-radius: 12px; - color: #ffffff; - font-size: 1.2rem; - font-weight: 700; - font-family: 'Inter', sans-serif; - text-transform: uppercase; - letter-spacing: 1.5px; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - box-shadow: - 0 8px 25px rgba(82, 238, 245, 0.3), - 0 4px 12px rgba(102, 126, 234, 0.2); - margin-top: 1rem; -} - -.btn-send-message::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); - transition: left 0.6s ease; -} - -.btn-send-message:hover { - background: linear-gradient(135deg, #45d1dc 0%, #5a73e8 50%, #6b4ba8 100%); - transform: translateY(-3px) scale(1.02); - box-shadow: - 0 12px 35px rgba(82, 238, 245, 0.4), - 0 6px 18px rgba(102, 126, 234, 0.3); -} - -.btn-send-message:hover::before { - left: 100%; -} - -.btn-send-message:active { - transform: translateY(-1px) scale(1.01); - transition: all 0.1s ease; -} - -/* Form Message Display */ -.form-message { - padding: 1rem; - border-radius: 8px; - margin-bottom: 1.5rem; - font-weight: 600; - text-align: center; - display: none; -} - -.form-message.success { - background: rgba(34, 197, 94, 0.15); - border: 2px solid rgba(34, 197, 94, 0.3); - color: #22c55e; -} - -.form-message.error { - background: rgba(239, 68, 68, 0.15); - border: 2px solid rgba(239, 68, 68, 0.3); - color: #ef4444; -} - -/* Form Validation Styling */ -.form-group.error input, -.form-group.error select, -.form-group.error textarea { - border-color: #ef4444; - background: rgba(239, 68, 68, 0.1); -} - -.form-group.success input, -.form-group.success select, -.form-group.success textarea { - border-color: #22c55e; - background: rgba(34, 197, 94, 0.1); -} - -.case-studies-hero { - padding-top: 8rem; - padding-bottom: 3rem; - text-align: left; -} - -.case-studies-hero h1 { - font-size: 3.35rem; - margin-bottom: 1rem; - /* Inherit the beautiful gradient and glow from main h1 styling */ - font-family: 'VT323', monospace; -} - -.case-studies-hero p { - font-size: 1.3rem; - color: rgba(236, 236, 236, 0.8); - max-width: 700px; - margin-bottom: 2rem; - line-height: 1.6; - font-family: 'VT323', monospace; -} - -.case-studies-filters { - padding: 1rem 0; - background-color: transparent; -} - -.case-studies-filters .container { - padding-top: 0; - padding-bottom: 0; -} - -.filter-controls { - display: flex; - align-items: center; - gap: 1.5rem; -} - -.dropdown-filter .dropdown-toggle-filter { - background-color: #0D0D1A; - color: var(--fg); - padding: 0.75rem 1.5rem; - border: 1px solid #2A2A40; border-radius: 8px; - font-size: 1.1rem; - cursor: pointer; - display: flex; - align-items: center; - justify-content: space-between; - min-width: 180px; -} - -.dropdown-filter .dropdown-toggle-filter i { - margin-left: 0.5rem; -} - -.search-filter { - display: flex; - align-items: center; - background-color: #0D0D1A; - padding-left: 1rem; - border: 1px solid #2A2A40; - border-radius: 8px; - flex-grow: 1; -} - -.search-filter i { - margin-right: 0.5rem; - color: var(--fg); - font-size: 1.1rem; -} - -.search-filter input[type="text"] { - background: transparent; - border: none; - color: var(--fg); - font-size: 1.1rem; - width: 100%; - padding: 0.75rem 1rem; - 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; - gap: 2rem; -} - -.case-study-card { - background-color: #0D0D1A; - border: 1px solid #2A2A40; - border-radius: 12px; - padding: 2rem; - display: flex; - flex-direction: column; - height: 100%; - 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; - width: auto; - max-width: 120px; - object-fit: contain; - margin-bottom: 1.5rem; - align-self: flex-start; -} - -.case-study-card .health-plus-logo { - filter: brightness(0) invert(1); -} - -.case-study-card h3 { - font-size: 1.7rem; - color: #52eef5; - margin-bottom: 0.75rem; - font-weight: 600; -} - -.discuss-project-cta h2 { - font-size: 2.15rem; - color: #52eef5; - margin: 0; - background: none; - -webkit-background-clip: unset; - background-clip: unset; - text-shadow: none; - font-family: 'VT323', monospace; -} - -.btn-discuss-project { - background-color: #1E1E2F; - color: var(--fg); - padding: 0.7rem 1.5rem; - border: 1px solid #3A3A5A; - border-radius: 8px; text-decoration: none; - font-size: 1.2rem; - 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; - border-color: #4F4F6A; - transform: translateY(-2px); -} - -.nav-links .nav-link.active { - color: #ffffff; - font-weight: bold; -} - -.nav-links .nav-link.active::after { - content: ''; - position: absolute; - bottom: -2px; - left: 7.5%; - width: 85%; - height: 3px; - background: linear-gradient(90deg, #6e7adf 0%, #a2abff 100%); - border-radius: 3px; -} - -.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: 1.1rem; -} - -.contact-info-container .contact-details li { - font-size: 1.1rem; - margin-bottom: 15px; -} - -.read-more:hover { - color: #ffffff; - text-decoration: underline; - padding: 15px; - background-color: rgba(255, 255, 255, 0.08); - border-radius: 8px; - border: 1px solid rgba(255, 255, 255, 0.15); - display: flex; - align-items: center; - 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; - margin-right: 12px; - color: #a2abff; -} - -#generative-ai { - padding-top: 9rem; - padding-bottom: 4rem; - text-align: center; -} - -.generative-ai-header h1 { font-size: 3.6em; - margin-bottom: 20px; - /* Inherit the beautiful gradient and glow from main h1 styling */ -} - -.generative-ai-header p { - font-size: 1.45em; - 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 h3 { - font-size: 2rem; - margin-bottom: 1rem; - color: #52eef5; -} - -.feature-card p { - font-size: 1.2rem; - color: #ccc; -} - -.why-choose-gyannetra, -.blogs-case-studies { - margin-top: 80px; -} - -.why-choose-gyannetra h2, -.blogs-case-studies h2 { - font-size: 3em; - margin-bottom: 30px; - color: #52eef5; -} - -.why-choose-items { - display: flex; - justify-content: center; - gap: 50px; - flex-wrap: wrap; -} - -.why-choose-items p { - font-size: 1.45em; - color: #ccc; -} - -.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 img { - width: 100%; - height: 180px; - object-fit: cover; -} - -.blog-card h3 { - font-size: 1.2em; - color: #fff; - margin: 15px; -} - -.blog-card p { - font-size: 1.2rem; - color: #ccc; - margin: 0 15px 15px; -} - -.explore-capabilities { - margin-top: 50px; -} - -.industry-hero { - padding: 64px 0; - text-align: left; - position: relative; - overflow: hidden; - min-height: 60vh; - background-size: cover; - background-position: center; -} - -.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: 'VT323', monospace; - font-size: 4rem; - font-weight: 700; - /* Inherit the beautiful gradient and glow from main h1 styling */ - margin-bottom: 20px; - line-height: 1.2; -} - -.industry-hero p { - font-family: 'VT323', monospace; - font-size: 1.45rem; - color: #e0e0e0; - line-height: 1.6; - margin-bottom: 30px; -} - -.industry-hero .btn-primary { - margin-top: 20px; -} - -/* Removed marketing-hero specific styling */ - -.hero-image-container { - width: 200px; - height: 200px; -} - -.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: 'VT323', monospace; - font-size: 3rem; - color: #52eef5; - margin-bottom: 40px; - text-align: left; - padding-left: 15px; -} - -.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); - 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: 60px; - height: 60px; - margin-bottom: 1rem; - filter: drop-shadow(0 0 8px rgba(52, 152, 219, 0.5)); -} - -.solution-item h3 { font-size: 1.5rem; - color: var(--fg); - margin-bottom: 0.5rem; - font-weight: 600; -} - -.solution-item p { - font-size: 1.1rem; - color: rgba(236, 236, 236, 0.8); -} - -.gyannetra-advantage-section .advantage-columns { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 2rem; - margin-top: 2rem; - justify-content: center; -} - -.gyannetra-advantage-section .advantage-list { - list-style: none; - padding-left: 0; - margin: 0 auto; - max-width: 400px; -} - -.gyannetra-advantage-section .advantage-list li { - font-size: 1.3rem; - color: var(--fg); - padding: 0.5rem 0; - position: relative; - padding-left: 1.7em; - line-height: 1.4; -} - -.gyannetra-advantage-section .advantage-list li::before { - content: "•"; - color: #3498db; - font-size: 1.8rem; - position: absolute; - left: 0; - top: 0.65em; - transform: translateY(-50%); - line-height: 1; -} - -.insights-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 2rem; -} - -.insight-item { - background: rgba(20, 30, 50, 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; -} - -.insight-item h4 { - font-size: 1.45rem; - font-weight: 600; - margin-bottom: 0.75rem; - color: var(--fg); -} - -.insight-item p { - font-size: 1.1rem; - color: rgba(236, 236, 236, 0.8); - margin-bottom: 1.5rem; - flex-grow: 1; -} - -.insight-item .read-more { - display: inline-block; - font-size: 1.1rem; - font-weight: bold; - color: #a2abff; - text-decoration: none; - text-transform: uppercase; - letter-spacing: 0.5px; - align-self: flex-start; -} - -/* Media Queries */ -@media (min-width: 768px) { - .case-studies-grid { - grid-template-columns: repeat(2, 1fr); - } -} - -@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; - } - - .contact-info-container { - margin-top: 0; - } -} - -@media (max-width: 768px) { - .case-studies-hero h1 { - font-size: 2.2rem; /* Adjusted for mobile */ - } .case-studies-hero p, - #contact-us-section .contact-header p { - font-size: 1.2rem; - } - - .filter-controls { - flex-direction: column; - align-items: stretch; - gap: 1rem; - } - - .dropdown-filter .dropdown-toggle-filter { - width: 100%; - } - - .search-filter { - max-width: none; - } - - .discuss-project-cta .container { - flex-direction: column; - text-align: center; - } .discuss-project-cta h2 { - margin-bottom: 1.5rem; - font-size: 1.9rem; - } - - .btn-discuss-project { - width: 100%; - text-align: center; - } #contact-us-section .contact-header h1 { - font-size: 3.35rem; - } - - /* Enhanced Contact Form Responsive Styles */ - .contact-form-container { - padding: 1.5rem; - } - - .form-group { - margin-bottom: 1.5rem; - } - - .form-group label { - font-size: 1rem; - margin-bottom: 0.5rem; - } - - .form-group input[type="text"], - .form-group input[type="email"], - .form-group select, - .form-group textarea { - padding: 1rem; - font-size: 1rem; - } - - .form-group textarea { - min-height: 100px; - } - - .btn-send-message { - padding: 1rem 1.5rem; - font-size: 1.1rem; - } - - .nav-links { - display: none; - } - - .section { - padding: 60px 0; - } - - .section .container { - padding: 30px; - } - - .page-header { - padding: 70px 0 40px; - } .page-header h1 { - font-size: 3rem; - } - - .grid-2 { - grid-template-columns: 1fr; - } .btn-outline { - display: none; /* Ensure it's hidden on smaller screens if that's the intent */ - } -} - -/* ===== ADDITIONAL MOBILE FORM ENHANCEMENTS ===== */ -@media (max-width: 480px) { - .contact-form-container, - .contact-info-container { - padding: 1rem; - margin: 0.5rem 0; - } - - .form-group { - margin-bottom: 1.2rem; - } - - .form-group label { - font-size: 0.9rem; - } - - .form-group input[type="text"], - .form-group input[type="email"], - .form-group select, - .form-group textarea { - padding: 0.8rem; - font-size: 0.95rem; - } - - .btn-send-message { - padding: 1rem; - font-size: 1rem; - letter-spacing: 1px; - } - - #contact-us-section .contact-header h1 { - font-size: 2.5rem; - } - - #contact-us-section .contact-header p { - font-size: 1.1rem; - } -} - -/* ===== MODERN FORM ANIMATION ENHANCEMENTS ===== */ -/* Floating label effect */ -.form-group { - position: relative; -} - -.form-group.floating-label input:focus + label, -.form-group.floating-label input:not(:placeholder-shown) + label, -.form-group.floating-label textarea:focus + label, -.form-group.floating-label textarea:not(:placeholder-shown) + label { - transform: translateY(-1.5rem) scale(0.85); - color: #52eef5; -} - -/* Loading animation for form submission */ -.btn-send-message.loading { - pointer-events: none; - opacity: 0.7; - position: relative; - color: transparent; -} - -.btn-send-message.loading::after { - content: ''; - position: absolute; - width: 20px; - height: 20px; - top: 50%; - left: 50%; - margin-left: -10px; - margin-top: -10px; - border: 2px solid #ffffff; - border-radius: 50%; - border-top-color: transparent; - animation: btn-loading-spinner 1s ease infinite; -} - -@keyframes btn-loading-spinner { - from { - transform: rotate(0turn); - } - to { - transform: rotate(1turn); - } -} - -/* Form field success checkmark animation */ -.form-group.success::after { - content: '✓'; - position: absolute; - right: 1rem; - top: 50%; - transform: translateY(-50%); - color: #22c55e; - font-weight: bold; - font-size: 1.2rem; - animation: checkmark-appear 0.3s ease; -} - -@keyframes checkmark-appear { - from { - opacity: 0; - transform: translateY(-50%) scale(0); - } - to { - opacity: 1; - transform: translateY(-50%) scale(1); - } -} - -/* Enhanced contact info styling */ -.contact-info-container h2 { - font-size: 1.8rem; - color: #52eef5; - margin-bottom: 1.5rem; - font-family: 'VT323', monospace; - text-transform: uppercase; - letter-spacing: 2px; -} - -.contact-details li { - font-size: 1.1rem; - margin-bottom: 1rem; - padding: 1rem; - background: rgba(255, 255, 255, 0.03); - border-left: 3px solid #52eef5; - border-radius: 0 8px 8px 0; - transition: all 0.3s ease; -} - -.contact-details li:hover { - background: rgba(82, 238, 245, 0.08); - transform: translateX(5px); -} - -.contact-details li i { - margin-right: 1rem; - color: #52eef5; - font-size: 1.2rem; - width: 20px; - text-align: center; -} - -.footer-col p { - font-size: 1.2rem; - color: #ffffff; -} - -.footer-col h3 { - margin-bottom: 1rem; - font-size: 1.5rem; - color: #52eef5; -} - -/* Responsive styles for logo images */ -@media (max-width: 768px) { - .logo-img { - height: 55px; - max-width: 240px; - } .footer-logo-img { - height: 120px; - max-width: 350px; - } - - .logo { - min-height: 60px; - padding: 0.4rem 0.8rem; - } - - /* Footer responsive adjustments */ - .footer-content { - gap: 20px; - text-align: center; - } - - .footer-col { - min-width: 200px; - } - - .footer-col-logo p { - max-width: 100%; - text-align: center; - } - - .footer-col .social-links { - justify-content: center; - } -} - -@media (max-width: 480px) { - .logo-img { - height: 45px; - max-width: 180px; - } .footer-logo-img { - height: 100px; - max-width: 300px; - } - .logo { - min-height: 50px; - padding: 0.3rem 0.6rem; - } - - /* Footer mobile adjustments */ - .footer-content { - flex-direction: column; - gap: 25px; - } - - .footer-col ul li p { - padding: 6px 0; - font-size: 0.9rem; - } - - .footer-col ul li p i { - margin-right: 10px; - font-size: 1rem; - min-width: 18px; - } - - .footer-col .social-links a { - min-width: 35px; - min-height: 35px; - font-size: 1.1rem; - } -} - -/* =================================================================== */ -/* CONSOLIDATED INLINE STYLES FROM ALL HTML FILES */ -/* =================================================================== */ - -/* Navbar scroll effects - Common across all pages */ -.site-header { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 1000; - background: transparent !important; - backdrop-filter: blur(0px); - -webkit-backdrop-filter: blur(0px); - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - border-bottom: 1px solid transparent; - box-shadow: none; - display: flex; - align-items: center; - width: 100%; -} - -.site-header.scrolled { - background: transparent !important; - backdrop-filter: blur(30px); - -webkit-backdrop-filter: blur(30px); - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); -} - -.navbar { - padding: 1rem 2rem; - max-width: none !important; - margin: 0 !important; - background: transparent !important; - border-radius: 0 !important; - border: none !important; - box-shadow: none !important; - position: relative; - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; -} - -/* Override any existing navbar container styles */ -.site-header .navbar, -.site-header .container, -.navbar .container { - background: transparent !important; - border: none !important; - box-shadow: none !important; - border-radius: 0 !important; -} - -/* Hero section layout stabilization - from index.html */ -/* Ensure body has top padding to account for fixed navbar */ -body { - padding-top: 80px; -} - -/* HERO SECTION LAYOUT STABILIZATION */ -#hero { - /* Prevent layout shift during load */ - min-height: calc(100vh - 80px); - height: calc(100vh - 80px); - margin-top: 0 !important; - padding-top: 0 !important; -} - -.hero-container { - /* Stabilize hero content positioning */ - height: 100%; - min-height: inherit; - align-items: center; - justify-content: flex-start; - padding-top: 2rem; - padding-bottom: 2rem; -} - -.hero-content { - /* Prevent content shifting */ - position: relative; - transform: none !important; - opacity: 1 !important; - visibility: visible !important; -} - -/* Prevent FOUC and layout shifts */ -.hero-content h1, -.hero-content p, -.hero-content .btn-primary { - opacity: 1 !important; - transform: none !important; - visibility: visible !important; -} - -/* Mobile adjustments for navbar spacing - ENHANCED */ -@media (max-width: 768px) { - body { - padding-top: 80px; /* Increased for better spacing */ - } - - #hero { - min-height: calc(100vh - 80px); - height: calc(100vh - 80px); - padding-top: 2rem; /* Increased top padding for mobile */ - } - - .hero-container { - padding: 3rem 5% 2rem 5%; /* Better horizontal padding */ - justify-content: center; - align-items: center; - } - - .hero-content { - text-align: center; - max-width: 100%; - padding: 0 1rem; /* Internal padding */ - } - - .hero-content h1 { - font-size: 2.8rem; /* Better size for mobile */ - line-height: 1.2; - margin-bottom: 1.5rem; - letter-spacing: 0.5px; - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* Better text shadow */ - } - - .hero-content p { - font-size: 1.4rem; /* Better paragraph size */ - line-height: 1.4; - margin-bottom: 2rem; - color: rgba(255, 255, 255, 0.9); - max-width: 90%; /* Limit width for better readability */ - margin-left: auto; - margin-right: auto; - } - .hero-content .btn-primary { - padding: 1rem 2rem; /* Better button padding */ - font-size: 1.2rem; - border-radius: 12px; /* More rounded button */ - min-width: 200px; /* Minimum button width */ - } -} - -@media (max-width: 480px) { - body { - padding-top: 65px; /* Further reduced for small screens */ - } - - #hero { - min-height: calc(100vh - 65px); - height: calc(100vh - 65px); - padding-top: 1.5rem; - } - - .hero-container { - padding-top: 2.5rem; /* Extra spacing for very small screens */ - } -} - -/* EMERGENCY: Additional hamburger menu responsiveness fixes */ -@media (max-width: 768px) { - .hamburger-menu { - background: rgba(82, 238, 245, 0.3) !important; - border: 1px solid rgba(82, 238, 245, 0.6) !important; - box-shadow: 0 0 10px rgba(82, 238, 245, 0.3) !important; - } - - .hamburger-menu:active { - background: rgba(82, 238, 245, 0.5) !important; - transform: scale(0.95) !important; - } -} - -/* ADDITIONAL: Enhanced mobile dropdown visibility for Services and Industries */ -@media (max-width: 768px) { - /* Ensure dropdowns are fully visible in mobile hamburger menu */ - .nav-links .dropdown { - width: 100% !important; - margin-bottom: 1rem !important; - } - - /* Make dropdown triggers more obvious in mobile */ - .nav-links .dropdown > .nav-link { - position: relative !important; - background: rgba(82, 238, 245, 0.1) !important; - border: 1px solid rgba(82, 238, 245, 0.3) !important; - margin-bottom: 0.5rem !important; - } - - /* Add visual indicator for dropdowns in mobile */ - .nav-links .dropdown > .nav-link::after { - content: '▼' !important; - position: absolute !important; - right: 1.5rem !important; - font-size: 0.8em !important; - transition: transform 0.3s ease !important; - color: rgba(82, 238, 245, 0.8) !important; - } - - /* Rotate arrow when dropdown is open */ - .nav-links .dropdown.active > .nav-link::after { - transform: rotate(180deg) !important; - } - - /* Ensure dropdown menus stack vertically and are fully visible */ - .nav-links .dropdown-menu { - position: static !important; - width: 100% !important; - max-width: none !important; - margin-top: 0 !important; - margin-bottom: 1rem !important; - border-radius: 8px !important; - background: rgba(25, 25, 45, 0.95) !important; - border: 1px solid rgba(82, 238, 245, 0.3) !important; - max-height: 0 !important; - overflow: hidden !important; - transition: max-height 0.5s ease, padding 0.3s ease !important; - padding: 0 !important; - } - - /* Show dropdown menu when active */ - .nav-links .dropdown.active .dropdown-menu, - .nav-links .dropdown-menu.show { - max-height: 800px !important; /* Increased height for more items */ - padding: 1rem 0 !important; - animation: fadeInDropdown 0.3s ease forwards !important; - } - - /* Ensure dropdown items display vertically in mobile */ - .nav-links .dropdown-menu li { - width: 100% !important; - margin-bottom: 0.3rem !important; - } - - /* Style dropdown links for better mobile experience */ - .nav-links .dropdown-menu a { - padding: 1rem 1.5rem !important; - margin: 0.2rem 0.5rem !important; - border-radius: 6px !important; - background: rgba(255, 255, 255, 0.05) !important; - border: none !important; - font-size: 1rem !important; - } - - /* Enhanced hover effect for dropdown items */ - .nav-links .dropdown-menu a:hover { - background: rgba(82, 238, 245, 0.2) !important; - transform: translateX(10px) !important; - border-left: 3px solid rgba(82, 238, 245, 0.8) !important; - } - - /* Ensure dropdown content displays horizontally within each item */ - .nav-links .dropdown-item-content { - display: flex !important; - flex-direction: row !important; - align-items: center !important; - gap: 1rem !important; - width: 100% !important; - } - - /* Ensure dropdown icons are properly sized and positioned */ - .nav-links .dropdown-icon { - width: 35px !important; - height: 35px !important; - flex-shrink: 0 !important; - opacity: 0.9 !important; - } - - /* Ensure text content flows properly */ - .nav-links .text-content { - flex: 1 !important; - display: flex !important; - flex-direction: column !important; - align-items: flex-start !important; - text-align: left !important; - } - - /* Style dropdown titles and descriptions */ - .nav-links .item-title { - font-size: 1.1rem !important; - font-weight: 600 !important; - color: #ffffff !important; - margin-bottom: 0.2rem !important; - } - - .nav-links .item-description { - font-size: 0.85rem !important; - color: rgba(255, 255, 255, 0.7) !important; - line-height: 1.3 !important; - } - } - - /* Add fade-in animation for dropdown appearance */ @keyframes fadeInDropdown { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } - } - - /* ADDITIONAL: Mobile dropdown visual enhancements for Services and Industries */ - @media (max-width: 768px) { - .nav-links .dropdown-menu { - background: linear-gradient(135deg, rgba(25, 25, 45, 0.95) 0%, rgba(35, 35, 55, 0.98) 100%) !important; - box-shadow: 0 4px 20px rgba(82, 238, 245, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important; - } - - .nav-links .dropdown:not(:last-child) { - margin-bottom: 1.5rem !important; - } - - .nav-links .dropdown > .nav-link { - min-height: 48px !important; - display: flex !important; - align-items: center !important; - justify-content: space-between !important; - } - } - - -/* ===== BACK TO TOP BUTTON ===== */ -.back-to-top-btn { - position: fixed; - bottom: 30px; - right: 30px; - width: 50px; - height: 50px; - border-radius: 50%; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - color: white; - border: none; - font-size: 20px; - font-weight: bold; - cursor: pointer; - z-index: 1000; - box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); - transition: all 0.3s ease; - opacity: 0; - visibility: hidden; -} - -.back-to-top-btn:hover { - transform: scale(1.1); - box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); -} - -@media (max-width: 768px) { - .back-to-top-btn { - bottom: 20px; - right: 20px; - width: 45px; - height: 45px; - font-size: 18px; - } -} - -/* ===== WEBINAR SECTIONS STYLES ===== */ - -/* Hero Section for Webinars */ -#webinars-hero { - background: linear-gradient(135deg, rgba(25, 25, 45, 0.9) 0%, rgba(35, 35, 55, 0.95) 100%); - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -#webinars-hero::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: - radial-gradient(circle at 20% 20%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%); - pointer-events: none; -} - -#webinars-hero h1 { - font-size: 3.5rem; - color: #52eef5; - margin-bottom: 1.5rem; - text-transform: uppercase; - letter-spacing: 2px; - text-shadow: 0 0 20px rgba(82, 238, 245, 0.5); - animation: pulseGlow 3s ease-in-out infinite alternate; -} - -#webinars-hero p { - font-size: 1.4rem; - color: var(--text-light); - max-width: 600px; - margin: 0 auto; - line-height: 1.6; -} - -/* Main Webinar Cards - Reduced padding for smaller height */ -.webinar-main-card { - background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%); - border-radius: 20px; - padding: 1.5rem; - margin: 0.25rem 0; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 50px rgba(var(--primary-color-rgb), 0.1); - border: 1px solid rgba(var(--primary-color-rgb), 0.2); - backdrop-filter: blur(10px); - transition: all 0.3s ease; -} - -.webinar-main-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, var(--primary-color), transparent); - animation: shimmer 3s ease-in-out infinite; -} - -.webinar-main-card:hover { - transform: translateY(-5px); - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); -} - -/* Webinar Card Headers - Reduced margins for compact layout */ -.webinar-card-header { - text-align: center; - margin-bottom: 1.5rem; - border-bottom: 2px solid rgba(var(--primary-color-rgb), 0.3); - padding-bottom: 1rem; -} - -.webinar-card-header h2 { - font-size: 2.5rem; - color: #52eef5; - margin-bottom: 0.8rem; - text-transform: uppercase; - letter-spacing: 1px; - display: flex; - align-items: center; - justify-content: center; - gap: 1rem; -} - -.webinar-card-header h2 i { - color: var(--primary-color); - font-size: 2.2rem; - text-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.6); -} - -.webinar-card-header p { - font-size: 1.2rem; - color: var(--text-muted); - margin: 0; -} - -/* Upcoming Webinars Content - Reduced gap between items */ -.upcoming-webinars-content { - display: flex; - - flex-direction: column; - gap: 1.2rem; -} - -.upcoming-webinar-item { - background: rgba(20, 30, 50, 0.6); - border-radius: 15px; - padding: 1.2rem; - display: flex; - gap: 1.5rem; - align-items: flex-start; - border: 1px solid rgba(var(--primary-color-rgb), 0.2); - transition: all 0.3s ease; - position: relative; - overflow: hidden; -} - -.upcoming-webinar-item::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 2px; - background: linear-gradient(180deg, var(--primary-color), var(--primary-color-hover)); - border-radius: 0 2px 2px 0; -} - -.upcoming-webinar-item:hover { - background: rgba(25, 35, 55, 0.9); - transform: translateY(-5px); - box-shadow: 0 5px 20px rgba(var(--primary-color-rgb), 0.2); -} - -/* Date Badge - Reduced padding for more compact appearance */ -.webinar-date-badge { - background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); - border-radius: 12px; - padding: 0.8rem; - text-align: center; - min-width: 80px; - box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3); - flex-shrink: 0; -} - -.webinar-date-badge .date { - display: block; - font-size: 1.8rem; - font-weight: bold; - color: #fff; - line-height: 1; -} - -.webinar-date-badge .year { - display: block; - font-size: 1rem; - color: rgba(255, 255, 255, 0.9); - margin-top: 0.2rem; -} - -/* Webinar Details */ -.webinar-details { - flex: 1; -} - -.webinar-details h3 { - font-size: 1.8rem; - color: #52eef5; - margin-bottom: 1rem; - font-weight: 600; -} - -.webinar-meta { - display: flex; - gap: 2rem; - margin-bottom: 1rem; - flex-wrap: wrap; -} - -.webinar-meta span { - display: flex; - align-items: center; - gap: 0.5rem; - color: var(--text-muted); - font-size: 1rem; -} - -.webinar-meta i { - color: var(--primary-color); - font-size: 0.9rem; -} - -.webinar-description { - color: var(--text-light); - line-height: 1.6; - margin-bottom: 1.5rem; - font-size: 1.1rem; -} - -.webinar-takeaways { - margin-bottom: 2rem; -} - -.webinar-takeaways h4 { - color: #52eef5; - font-size: 1.3rem; - margin-bottom: 0.8rem; - font-weight: 600; -} - -.webinar-takeaways ul { - list-style: none; - padding: 0; -} - -.webinar-takeaways li { - color: var(--text-light); - margin-bottom: 0.5rem; - padding-left: 1.5rem; - position: relative; - line-height: 1.5; -} - -.webinar-takeaways li::before { - content: '✓'; - position: absolute; - left: 0; - color: var(--primary-color); - font-weight: bold; - font-size: 1.1rem; -} - -/* Webinar Actions */ -.webinar-actions { - display: flex; - gap: 1rem; - flex-wrap: wrap; -} - -.register-btn, .add-calendar-btn { - padding: 0.8rem 1.5rem; - border-radius: 8px; - text-decoration: none; - font-weight: 600; - font-size: 1rem; - transition: all 0.3s ease; - text-transform: uppercase; - letter-spacing: 0.5px; - display: inline-flex; - align-items: center; - gap: 0.5rem; -} - -.register-btn { - background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); - color: #fff; - border: none; - box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3); -} - -.register-btn:hover { - background: linear-gradient(135deg, var(--primary-color-hover), var(--primary-color)); - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.4); - color: #fff; -} - -.add-calendar-btn { - background: transparent; - color: var(--primary-color); - border: 2px solid var(--primary-color); -} - -.add-calendar-btn:hover { - background: var(--primary-color); - color: #fff; - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3); -} - -/* Already Done Webinars (Video Grid) */ -.webinar-videos-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); - gap: 2rem; - margin-top: 1rem; -} - -.webinar-video-card { - background: rgba(20, 30, 50, 0.6); - border: 1px solid rgba(var(--primary-color-rgb), 0.2); - border-radius: 15px; - padding: 1.5rem; - transition: all 0.3s ease; - position: relative; - overflow: hidden; - backdrop-filter: blur(10px); -} - -.webinar-video-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, var(--primary-color), transparent); - animation: shimmer 3s ease-in-out infinite; -} - -.webinar-video-card:hover { - background: rgba(25, 35, 55, 0.8); - transform: translateY(-5px); - box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.2); -} - -/* Video Container with reduced aspect ratio for more compact display */ -.gn-video-container { - position: relative; - width: 100%; - height: 0; - padding-bottom: 45%; /* Reduced from 56.25% (16:9) to 45% for shorter videos */ - overflow: hidden; - border-radius: 10px; - margin-bottom: 1.5rem; -} - -.gn-video-container iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: none; - border-radius: 10px; -} - -/* Video Info */ -.gn-video-info h4 { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 1.3rem; - color: #52eef5; - margin-bottom: 0.8rem; - font-weight: 600; -} - -.gn-video-info h4 i { - font-size: 1.1rem; - color: var(--primary-color); -} - -.gn-video-info p { - font-size: 1rem; - color: var(--text-muted); - line-height: 1.6; - margin: 0; -} - -/* Responsive Design for Dual Column Layout */ -@media (max-width: 1024px) { - .gn-app-dual-column-container { - gap: 2rem; - } - - .gn-app-section-wrapper { - padding: 0 1.5rem; - } - - .gn-download-links-container { - gap: 1rem; - } -} - -@media (max-width: 768px) { - /* Collapse to single column on mobile */ - .gn-app-dual-column-container { - grid-template-columns: 1fr; - gap: 2.5rem; - } - - .gyannetra-app-section-redesigned { - padding: 3rem 0; - margin: 2rem auto; - } - - .gn-app-section-wrapper { - padding: 0 1rem; - } - - .gn-app-main-heading { - font-size: 2rem; - } - - .gn-app-features-card, - .gn-app-download-section, - .gn-video-tutorial-card { - padding: 1.5rem; - } - - .gn-download-links-container { - flex-direction: column; - align-items: center; - gap: 1rem; - } - - .gn-download-link { - min-width: 220px; - padding: 0.8rem 1.3rem; - } - - .gn-video-info h4 { - font-size: 1.1rem; - flex-direction: column; - gap: 0.3rem; - text-align: center; - } -} - -@media (max-width: 480px) { - .gyannetra-app-section-redesigned { - padding: 2rem 0; - } - - .gn-app-section-wrapper { - padding: 0 0.8rem; - } - - .gn-app-main-heading { - font-size: 1.6rem; - } - - .gn-app-features-card, - .gn-app-download-section, - .gn-video-tutorial-card { - padding: 1.2rem; - } - - .gn-feature-item { - flex-direction: column; - text-align: center; - gap: 0.8rem; - } - - .gn-feature-icon { - align-self: center; - } - - .gn-download-link { - min-width: 180px; - padding: 0.7rem 1rem; - } - - .gn-download-icon { - font-size: 1.7rem; - } - - .gn-download-title { - font-size: 0.8rem; - } - - .gn-download-store { - font-size: 1rem; - } -} - -/* Shimmer animation for video cards */ -@keyframes shimmer { - 0% { - transform: translateX(-100%); - } - 100% { - transform: translateX(100%); - } -} - -/* Pulse Glow Animation */ -@keyframes pulseGlow { - 0% { - text-shadow: 0 0 20px rgba(82, 238, 245, 0.5); - } - 100% { - text-shadow: 0 0 30px rgba(82, 238, 245, 0.8), 0 0 40px rgba(82, 238, 245, 0.3); - } -} - -/* Responsive Design for Webinars */ -@media (max-width: 1024px) { - .webinar-videos-grid { - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 1.5rem; - } - - .webinar-meta { - gap: 1rem; - } -} - -@media (max-width: 768px) { - #webinars-hero h1 { - font-size: 2.8rem; - } - - #webinars-hero p { - font-size: 1.2rem; - } - - .webinar-main-card { - padding: 1.5rem; - margin: 2rem 0 3rem 0; - } - .already-done-webinars-card { - margin-top: 2rem !important; - } - - .webinar-videos-section { - padding: 3rem 0 1.5rem 0; - margin-top: 2rem; - } - - .webinar-card-header h2 { - font-size: 2rem; - flex-direction: column; - gap: 0.5rem; - } - - .upcoming-webinar-item { - flex-direction: column; - gap: 1.5rem; - padding: 1.5rem; - } - - .webinar-date-badge { - align-self: flex-start; - min-width: 80px; - } - - .webinar-meta { - flex-direction: column; - gap: 0.8rem; - } - - .webinar-actions { - flex-direction: column; - } - - .register-btn, .add-calendar-btn { - justify-content: center; - text-align: center; - } - - .webinar-videos-grid { - grid-template-columns: 1fr; - gap: 1.5rem; - } - - .webinar-video-card { - padding: 1rem; - } -} - -@media (max-width: 480px) { - #webinars-hero { - padding: 2.5rem 0; - } - - #webinars-hero h1 { - font-size: 2.2rem; - letter-spacing: 1px; - } - - #webinars-hero p { - font-size: 1.1rem; - } - - .webinar-main-card { - padding: 1rem; - margin: 1.5rem 0 2.5rem 0; - } - .already-done-webinars-card { - margin-top: 1.5rem !important; - } - - .webinar-videos-section { - padding: 2rem 0 1rem 0; - margin-top: 1.5rem; - } - - .webinar-card-header { - margin-bottom: 1.5rem; - padding-bottom: 1rem; - } - - .webinar-card-header h2 { - font-size: 1.8rem; - } - - .upcoming-webinar-item { - padding: 1rem; - } - - .webinar-details h3 { - font-size: 1.5rem; - } - - .webinar-takeaways { - margin-bottom: 1.5rem; - } - - .video-info h3 { - font-size: 1.2rem; - } -} - -/* ===== CUSTOM TRAINING WORKFLOW SECTION STYLES ===== */ - -.workflow-section { - padding: 4rem 0; - background: linear-gradient(135deg, rgba(15, 15, 25, 0.95) 0%, rgba(25, 25, 45, 0.9) 100%); - border-radius: 20px; - margin: 3rem 0; - position: relative; - overflow: hidden; -} - -/* Shift workflow section container slightly to the right for better centering */ -#custom-training-workflow.container { - margin-left: auto; - margin-right: calc(50% - 580px - 2rem); -} - -.workflow-section::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: - radial-gradient(circle at 20% 20%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%); - pointer-events: none; -} - -.workflow-intro { - text-align: center; - max-width: 900px; - margin: 0 auto 3rem auto; - position: relative; - z-index: 2; -} - -.workflow-intro p { - font-size: 1.3rem; - color: var(--text-light); - line-height: 1.7; - font-weight: 400; -} - -.workflow-benefits { - margin: 3rem 0; - position: relative; - z-index: 2; -} - -.workflow-benefits h3 { - font-size: 2.2rem; - color: #52eef5; - text-align: center; - margin-bottom: 2rem; - font-family: 'VT323', monospace; - letter-spacing: 1px; -} - -.benefits-list { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 1.5rem; - margin-top: 2rem; -} - -.benefit-item { - background: rgba(25, 35, 55, 0.8); - border: 1px solid rgba(var(--primary-color-rgb), 0.3); - border-radius: 12px; - padding: 1.5rem; - display: flex; - align-items: flex-start; - gap: 1rem; - transition: all 0.3s ease; - backdrop-filter: blur(10px); -} - -.benefit-item:hover { - transform: translateY(-5px); - border-color: rgba(var(--primary-color-rgb), 0.6); - box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4); -} - -.benefit-item i { - font-size: 1.8rem; - color: var(--primary-color); - margin-top: 0.2rem; - flex-shrink: 0; -} - -.benefit-item h4 { - font-size: 1.3rem; - color: #52eef5; - margin-bottom: 0.5rem; - font-weight: 600; -} - -.benefit-item p { - color: var(--text-light); - font-size: 1rem; - line-height: 1.5; - margin: 0; -} - -.workflow-process { - margin: 4rem 0; - position: relative; - z-index: 2; -} - -.workflow-process h3 { - font-size: 2.2rem; - color: #52eef5; - text-align: center; - margin-bottom: 3rem; - font-family: 'VT323', monospace; - letter-spacing: 1px; -} - -.workflow-visualization { - position: relative; - max-width: 1000px; - margin: 0 auto; -} - -.workflow-step { - display: flex; - align-items: flex-start; - gap: 2rem; - margin-bottom: 3rem; - padding: 2rem; - background: rgba(20, 30, 50, 0.7); - border-radius: 16px; - border: 1px solid rgba(255, 255, 255, 0.1); - position: relative; - transition: all 0.3s ease; - backdrop-filter: blur(15px); -} - -.workflow-step:hover { - background: rgba(25, 35, 55, 0.9); - border-color: rgba(var(--primary-color-rgb), 0.4); - transform: translateX(10px); -} - -.workflow-step:last-child { - margin-bottom: 0; -} - -.workflow-step:last-child .step-connector { - display: none; -} - -.step-icon { - width: 80px; - height: 80px; - background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.3); - flex-shrink: 0; - position: relative; - overflow: hidden; -} - -.step-icon::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%); - animation: shimmer 3s ease-in-out infinite; -} - -.step-icon i { - font-size: 2rem; - color: #fff; - z-index: 2; - position: relative; -} - -.step-content { - flex: 1; -} - -.step-content h4 { - font-size: 1.6rem; - color: #52eef5; - margin-bottom: 1rem; - font-weight: 600; -} - -.step-content p { - color: var(--text-light); - font-size: 1.1rem; - line-height: 1.6; - margin-bottom: 1rem; -} - -.step-details { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.step-details span { - color: var(--text-muted); - font-size: 0.95rem; - padding-left: 1rem; - position: relative; -} - -.step-details span::before { - content: '✓'; - position: absolute; - left: 0; - color: var(--primary-color); - font-weight: bold; - font-size: 1.1rem; -} - -.step-connector { - position: absolute; - right: -1rem; - top: 50%; - transform: translateY(-50%); - width: 2rem; - height: 2px; - background: linear-gradient(90deg, var(--primary-color), transparent); - z-index: 3; -} - -.step-connector::after { - content: ''; - position: absolute; - right: -6px; - top: 50%; - transform: translateY(-50%); - width: 0; - height: 0; - border-left: 8px solid var(--primary-color); - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; -} - -.workflow-cta { - background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.15) 0%, rgba(82, 238, 245, 0.1) 100%); - border-radius: 16px; - padding: 3rem 2rem; - text-align: center; - border: 1px solid rgba(var(--primary-color-rgb), 0.3); - position: relative; - z-index: 2; - margin-top: 3rem; -} - -.cta-content h3 { - font-size: 2rem; - color: #52eef5; - margin-bottom: 1rem; - font-family: 'VT323', monospace; -} - -.cta-content p { - font-size: 1.2rem; - color: var(--text-light); - margin-bottom: 2rem; - max-width: 600px; - margin-left: auto; - margin-right: auto; -} - -.workflow-cta-btn { - background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%); - color: #fff; - padding: 1rem 2.5rem; - border-radius: 12px; - text-decoration: none; - font-size: 1.2rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 1px; - display: inline-block; - transition: all 0.3s ease; - box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.3); - border: 2px solid rgba(255, 255, 255, 0.1); -} - -.workflow-cta-btn:hover { - transform: translateY(-3px); - box-shadow: 0 12px 30px rgba(var(--primary-color-rgb), 0.4); - background: linear-gradient(135deg, var(--primary-color-hover) 0%, var(--primary-color) 100%); - border-color: rgba(255, 255, 255, 0.2); - color: #fff; - text-decoration: none; -} - -@keyframes shimmer { - 0% { - transform: translateX(-100%); - } - 100% { - transform: translateX(100%); - } -} - -/* Responsive Design for Workflow Section */ -@media (max-width: 768px) { - .workflow-section { - padding: 2.5rem 0; - margin: 2rem 0; - } - - .workflow-intro p { - font-size: 1.1rem; - } - - .workflow-benefits h3, - .workflow-process h3 { - font-size: 1.8rem; - } - - .benefits-list { - grid-template-columns: 1fr; - gap: 1rem; - } - - .benefit-item { - padding: 1.2rem; - flex-direction: column; - text-align: center; - gap: 0.8rem; - } - - .workflow-step { - padding: 1.5rem; - margin-bottom: 2rem; - } - - .workflow-step:hover { - transform: translateY(-5px); - } - - .step-icon { - width: 70px; - height: 70px; - align-self: center; - } - - .step-icon i { - font-size: 1.8rem; - } - - .step-content { - text-align: center; - } - - .step-content h4 { - font-size: 1.4rem; - } - - .step-details span { - font-size: 0.9rem; - } - - .workflow-cta { - padding: 2rem 1.5rem; - } - - .cta-content h3 { - font-size: 1.6rem; - } - - .cta-content p { - font-size: 1.1rem; - } - - .workflow-cta-btn { - padding: 0.8rem 2rem; - font-size: 1.1rem; - } -} - -@media (max-width: 480px) { - .workflow-intro { - margin-bottom: 2rem; - } - - .workflow-benefits h3, - .workflow-process h3 { - font-size: 1.6rem; - margin-bottom: 1.5rem; - } - - .benefit-item { - padding: 1rem; - } - - .benefit-item h4 { - font-size: 1.2rem; - } - - .benefit-item p { - font-size: 0.95rem; - } - - .workflow-step { - padding: 1.2rem; - margin-bottom: 1.5rem; - } - - .step-icon { - width: 60px; - height: 60px; - } - - .step-icon i { - font-size: 1.5rem; - } - - .step-content h4 { - font-size: 1.3rem; - } - - .step-details span { - font-size: 0.9rem; - } - - .workflow-cta { - padding: 1.5rem 1rem; - } - - .cta-content h3 { - font-size: 1.4rem; - } - - .workflow-cta-btn { - padding: 0.7rem 1.5rem; - font-size: 1rem; - } -} - -/* ===== GYANNETRA MOBILE APP SECTION STYLES ===== */ - -.gyannetra-app-section { - padding: 4rem 0; - background: linear-gradient(135deg, rgba(15, 15, 25, 0.95) 0%, rgba(25, 25, 45, 0.9) 100%); - border-radius: 20px; - margin: 3rem 0; - position: relative; - overflow: hidden; -} - -.gyannetra-app-section::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: - radial-gradient(circle at 20% 20%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%); - pointer-events: none; -} - -/* Wrapper for centering and max-width control */ -.gn-app-section-wrapper { - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem; - position: relative; - z-index: 2; -} - -/* Main Heading */ -.gn-app-main-heading { - font-size: 2.6rem; - margin-bottom: 3rem; - color: #52eef5; - text-align: center; - text-transform: uppercase; - letter-spacing: 1px; - font-family: 'VT323', monospace; -} - -/* Dual Column Container */ -.gn-app-dual-column-container { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 3rem; - align-items: start; -} - -/* Left Column Styling */ -.gn-app-left-column { - display: flex; - flex-direction: column; - gap: 2.5rem; -} - -/* Right Column Styling */ -.gn-app-right-column { - display: flex; - flex-direction: column; - gap: 2rem; -} - -/* App Features Card */ -.gn-app-features-card { - background: rgba(25, 35, 55, 0.8); - border: 1px solid rgba(var(--primary-color-rgb), 0.3); - border-radius: 15px; - padding: 2rem; - backdrop-filter: blur(10px); - transition: all 0.3s ease; - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); -} - -.gn-app-features-card:hover { - transform: translateY(-5px); - border-color: rgba(var(--primary-color-rgb), 0.6); - box-shadow: 0 12px 30px rgba(var(--primary-color-rgb), 0.3); -} - -/* App Intro Text */ -.gn-app-intro-text { - margin-bottom: 2rem; -} - -.gn-app-intro-text p { - font-size: 1.2rem; - color: var(--text-light); - line-height: 1.7; - font-weight: 400; - text-align: center; - margin: 0; -} - -/* App Features List */ -.gn-app-features-list { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.gn-feature-item { - display: flex; - align-items: flex-start; - gap: 1rem; - padding: 1rem; - background: rgba(var(--primary-color-rgb), 0.05); - border-radius: 10px; - transition: all 0.3s ease; -} - -.gn-feature-item:hover { - background: rgba(var(--primary-color-rgb), 0.1); - transform: translateX(5px); -} - -.gn-feature-icon { - background: rgba(var(--primary-color-rgb), 0.15); - border-radius: 10px; - padding: 0.8rem; - display: flex; - align-items: center; - justify-content: center; - min-width: 50px; - height: 50px; - transition: all 0.3s ease; -} - -.gn-feature-icon i { - font-size: 1.3rem; - color: var(--primary-color); -} - -.gn-feature-item:hover .gn-feature-icon { - background: rgba(var(--primary-color-rgb), 0.25); - transform: scale(1.1); -} - -.gn-feature-content h4 { - font-size: 1.2rem; - color: #52eef5; - margin-bottom: 0.5rem; - font-weight: 600; -} - -.gn-feature-content p { - font-size: 1rem; - color: var(--text-muted); - line-height: 1.5; - margin: 0; -} - -/* App Download Section */ -.gn-app-download-section { - background: rgba(20, 30, 50, 0.6); - border: 1px solid rgba(var(--primary-color-rgb), 0.2); - border-radius: 15px; - padding: 2rem; - text-align: center; - backdrop-filter: blur(10px); - transition: all 0.3s ease; -} - -.gn-app-download-section:hover { - background: rgba(25, 35, 55, 0.8); - border-color: rgba(var(--primary-color-rgb), 0.4); -} - -.gn-download-heading { - font-size: 1.8rem; - color: #52eef5; - margin-bottom: 1.5rem; - font-family: 'VT323', monospace; - letter-spacing: 1px; - text-transform: uppercase; -} - -.gn-download-links-container { - display: flex; - justify-content: center; - gap: 1.5rem; - flex-wrap: wrap; - margin-top: 2rem; -} - -.gn-download-link { - display: flex; - align-items: center; - gap: 1rem; - padding: 1rem 1.5rem; - background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%); - border: 2px solid rgba(var(--primary-color-rgb), 0.3); - border-radius: 12px; - text-decoration: none; - transition: all 0.3s ease; - min-width: 180px; - backdrop-filter: blur(10px); - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); -} - -.gn-download-link:hover { - transform: translateY(-3px); - border-color: rgba(var(--primary-color-rgb), 0.6); - box-shadow: 0 10px 25px rgba(var(--primary-color-rgb), 0.3); - text-decoration: none; -} - -.gn-download-icon { - font-size: 2rem; - color: var(--primary-color); - transition: transform 0.3s ease; -} - -.gn-download-link:hover .gn-download-icon { - transform: scale(1.1); -} - -.gn-download-text { - display: flex; - flex-direction: column; - align-items: flex-start; - text-align: left; -} - -.gn-download-title { - font-size: 0.85rem; - color: var(--text-muted); - line-height: 1.2; -} - -.gn-download-store { - font-size: 1.1rem; - color: #ffffff; - font-weight: 600; - line-height: 1.2; -} - -/* Platform-specific styling */ -.gn-android-link:hover { - border-color: rgba(52, 168, 83, 0.6); - box-shadow: 0 10px 25px rgba(52, 168, 83, 0.3); -} - -.gn-android-link .gn-download-icon { - color: #34a853; -} - -.gn-ios-link:hover { - border-color: rgba(0, 122, 255, 0.6); - box-shadow: 0 10px 25px rgba(0, 122, 255, 0.3); -} - -.gn-ios-link .gn-download-icon { - color: #007aff; -} - -/* Video Tutorial Cards */ -.gn-video-tutorial-card { - background: rgba(20, 30, 50, 0.6); - border: 1px solid rgba(var(--primary-color-rgb), 0.2); - border-radius: 15px; - padding: 1.5rem; - transition: all 0.3s ease; - position: relative; - overflow: hidden; - backdrop-filter: blur(10px); -} - -.gn-video-tutorial-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, var(--primary-color), transparent); - animation: shimmer 3s ease-in-out infinite; -} - -.gn-video-tutorial-card:hover { - background: rgba(25, 35, 55, 0.8); - transform: translateY(-5px); - box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.2); -} - -/* Video Container with reduced aspect ratio for more compact display */ -.gn-video-container { - position: relative; - width: 100%; - height: 0; - padding-bottom: 45%; /* Reduced from 56.25% (16:9) to 45% for shorter videos */ - overflow: hidden; - border-radius: 10px; - margin-bottom: 1.5rem; -} - -.gn-video-container iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: none; - border-radius: 10px; -} - -/* Video Info */ -.gn-video-info h4 { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 1.3rem; - color: #52eef5; - margin-bottom: 0.8rem; - font-weight: 600; -} - -.gn-video-info h4 i { - font-size: 1.1rem; - color: var(--primary-color); -} - -.gn-video-info p { - font-size: 1rem; - color: var(--text-muted); - line-height: 1.6; - margin: 0; -} - -/* Responsive Design for Dual Column Layout */ -@media (max-width: 1024px) { - .gn-app-dual-column-container { - gap: 2rem; - } - - .gn-app-section-wrapper { - padding: 0 1.5rem; - } - - .gn-download-links-container { - gap: 1rem; - } -} - -@media (max-width: 768px) { - /* Collapse to single column on mobile */ - .gn-app-dual-column-container { - grid-template-columns: 1fr; - gap: 2.5rem; - } - - .gyannetra-app-section-redesigned { - padding: 3rem 0; - margin: 2rem auto; - } - - .gn-app-section-wrapper { - padding: 0 1rem; - } - - .gn-app-main-heading { - font-size: 2rem; - } - - .gn-app-features-card, - .gn-app-download-section, - .gn-video-tutorial-card { - padding: 1.5rem; - } - - .gn-download-links-container { - flex-direction: column; - align-items: center; - gap: 1rem; - } - - .gn-download-link { - min-width: 220px; - padding: 0.8rem 1.3rem; - } - - .gn-video-info h4 { - font-size: 1.1rem; - flex-direction: column; - gap: 0.3rem; - text-align: center; - } -} - -@media (max-width: 480px) { - .gyannetra-app-section-redesigned { - padding: 2rem 0; - } - - .gn-app-section-wrapper { - padding: 0 0.8rem; - } - - .gn-app-main-heading { - font-size: 1.6rem; - } - - .gn-app-features-card, - .gn-app-download-section, - .gn-video-tutorial-card { - padding: 1.2rem; - } - - .gn-feature-item { - flex-direction: column; - text-align: center; - gap: 0.8rem; - } - - .gn-feature-icon { - align-self: center; - } - - .gn-download-link { - min-width: 180px; - padding: 0.7rem 1rem; - } - - .gn-download-icon { - font-size: 1.7rem; - } - - .gn-download-title { - font-size: 0.8rem; - } - - .gn-download-store { - font-size: 1rem; - } -} - -/* Shimmer animation for video cards */ -@keyframes shimmer { - 0% { - transform: translateX(-100%); - } - 100% { - transform: translateX(100%); - } -} - -/* Pulse Glow Animation */ -@keyframes pulseGlow { - 0% { - text-shadow: 0 0 20px rgba(82, 238, 245, 0.5); - } - 100% { - text-shadow: 0 0 30px rgba(82, 238, 245, 0.8), 0 0 40px rgba(82, 238, 245, 0.3); - } -} - -/* Responsive Design for Webinars */ -@media (max-width: 1024px) { - .webinar-videos-grid { - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 1.5rem; - } - - .webinar-meta { - gap: 1rem; - } -} - -@media (max-width: 768px) { - #webinars-hero h1 { - font-size: 2.8rem; - } - - #webinars-hero p { - font-size: 1.2rem; - } - - .webinar-main-card { - padding: 1.5rem; - margin: 2rem 0 3rem 0; - } - .already-done-webinars-card { - margin-top: 2rem !important; - } - - .webinar-videos-section { - padding: 3rem 0 1.5rem 0; - margin-top: 2rem; - } - - .webinar-card-header h2 { - font-size: 2rem; - flex-direction: column; - gap: 0.5rem; - } - - .upcoming-webinar-item { - flex-direction: column; - gap: 1.5rem; - padding: 1.5rem; - } - - .webinar-date-badge { - align-self: flex-start; - min-width: 80px; - } - - .webinar-meta { - flex-direction: column; - gap: 0.8rem; - } - - .webinar-actions { - flex-direction: column; - } - - .register-btn, .add-calendar-btn { - justify-content: center; - text-align: center; - } - - .webinar-videos-grid { - grid-template-columns: 1fr; - gap: 1.5rem; - } - - .webinar-video-card { - padding: 1rem; - } -} - -@media (max-width: 480px) { - #webinars-hero { - padding: 2.5rem 0; - } - - #webinars-hero h1 { - font-size: 2.2rem; - letter-spacing: 1px; - } - - #webinars-hero p { - font-size: 1.1rem; - } - - .webinar-main-card { - padding: 1rem; - margin: 1.5rem 0 2.5rem 0; - } - .already-done-webinars-card { - margin-top: 1.5rem !important; - } - - .webinar-videos-section { - padding: 2rem 0 1rem 0; - margin-top: 1.5rem; - } - - .webinar-card-header { - margin-bottom: 1.5rem; - padding-bottom: 1rem; - } - - .webinar-card-header h2 { - font-size: 1.8rem; - } - - .upcoming-webinar-item { - padding: 1rem; - } - - .webinar-details h3 { - font-size: 1.5rem; - } - - .webinar-takeaways { - margin-bottom: 1.5rem; - } - - .video-info h3 { - font-size: 1.2rem; - } -} - -/* ===== RESTRUCTURED GYANNETRA MOBILE APP SECTION - DUAL COLUMN LAYOUT ===== */ - -/* Main Section Container - Centered with max-width */ -.gyannetra-app-section-redesigned { - padding: 4rem 0; - background: linear-gradient(135deg, rgba(15, 15, 25, 0.95) 0%, rgba(25, 25, 45, 0.9) 100%); - border-radius: 20px; - margin: 3rem auto; - position: relative; - overflow: hidden; -} - -.gyannetra-app-section-redesigned::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: - radial-gradient(circle at 20% 20%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%); - pointer-events: none; -} - -/* Wrapper for centering and max-width control */ -.gn-app-section-wrapper { - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem; - position: relative; - z-index: 2; -} - -/* Main Heading */ -.gn-app-main-heading { - font-size: 2.6rem; - margin-bottom: 3rem; - color: #52eef5; - text-align: center; - text-transform: uppercase; - letter-spacing: 1px; - font-family: 'VT323', monospace; -} - -/* Dual Column Container */ -.gn-app-dual-column-container { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 3rem; - align-items: start; -} - -/* Left Column Styling */ -.gn-app-left-column { - display: flex; - flex-direction: column; - gap: 2.5rem; -} - -/* Right Column Styling */ -.gn-app-right-column { - display: flex; - flex-direction: column; - gap: 2rem; -} - -/* App Features Card */ -.gn-app-features-card { - background: rgba(25, 35, 55, 0.8); - border: 1px solid rgba(var(--primary-color-rgb), 0.3); - border-radius: 15px; - padding: 2rem; - backdrop-filter: blur(10px); - transition: all 0.3s ease; - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); -} - -.gn-app-features-card:hover { - transform: translateY(-5px); - border-color: rgba(var(--primary-color-rgb), 0.6); - box-shadow: 0 12px 30px rgba(var(--primary-color-rgb), 0.3); -} - -/* App Intro Text */ -.gn-app-intro-text { - margin-bottom: 2rem; -} - -.gn-app-intro-text p { - font-size: 1.2rem; - color: var(--text-light); - line-height: 1.7; - font-weight: 400; - text-align: center; - margin: 0; -} - -/* App Features List */ -.gn-app-features-list { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.gn-feature-item { - display: flex; - align-items: flex-start; - gap: 1rem; - padding: 1rem; - background: rgba(var(--primary-color-rgb), 0.05); - border-radius: 10px; - transition: all 0.3s ease; -} - -.gn-feature-item:hover { - background: rgba(var(--primary-color-rgb), 0.1); - transform: translateX(5px); -} - -.gn-feature-icon { - background: rgba(var(--primary-color-rgb), 0.15); - border-radius: 10px; - padding: 0.8rem; - display: flex; - align-items: center; - justify-content: center; - min-width: 50px; - height: 50px; - transition: all 0.3s ease; -} - -.gn-feature-icon i { - font-size: 1.3rem; - color: var(--primary-color); -} - -.gn-feature-item:hover .gn-feature-icon { - background: rgba(var(--primary-color-rgb), 0.25); - transform: scale(1.1); -} - -.gn-feature-content h4 { - font-size: 1.2rem; - color: #52eef5; - margin-bottom: 0.5rem; - font-weight: 600; -} - -.gn-feature-content p { - font-size: 1rem; - color: var(--text-muted); - line-height: 1.5; - margin: 0; -} - -/* App Download Section */ -.gn-app-download-section { - background: rgba(20, 30, 50, 0.6); - border: 1px solid rgba(var(--primary-color-rgb), 0.2); - border-radius: 15px; - padding: 2rem; - text-align: center; - backdrop-filter: blur(10px); - transition: all 0.3s ease; -} - -.gn-app-download-section:hover { - background: rgba(25, 35, 55, 0.8); - border-color: rgba(var(--primary-color-rgb), 0.4); -} - -.gn-download-heading { - font-size: 1.8rem; - color: #52eef5; - margin-bottom: 1.5rem; - font-family: 'VT323', monospace; - letter-spacing: 1px; - text-transform: uppercase; -} - -.gn-download-links-container { - display: flex; - justify-content: center; - gap: 1.5rem; - flex-wrap: wrap; - margin-top: 2rem; -} - -.gn-download-link { - display: flex; - align-items: center; - gap: 1rem; - padding: 1rem 1.5rem; - background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%); - border: 2px solid rgba(var(--primary-color-rgb), 0.3); - border-radius: 12px; - text-decoration: none; - transition: all 0.3s ease; - min-width: 180px; - backdrop-filter: blur(10px); - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); -} - -.gn-download-link:hover { - transform: translateY(-3px); - border-color: rgba(var(--primary-color-rgb), 0.6); - box-shadow: 0 10px 25px rgba(var(--primary-color-rgb), 0.3); - text-decoration: none; -} - -.gn-download-icon { - font-size: 2rem; - color: var(--primary-color); - transition: transform 0.3s ease; -} - -.gn-download-link:hover .gn-download-icon { - transform: scale(1.1); -} - -.gn-download-text { - display: flex; - flex-direction: column; - align-items: flex-start; - text-align: left; -} - -.gn-download-title { - font-size: 0.85rem; - color: var(--text-muted); - line-height: 1.2; -} - -.gn-download-store { - font-size: 1.1rem; - color: #ffffff; - font-weight: 600; - line-height: 1.2; -} - -/* Platform-specific styling */ -.gn-android-link:hover { - border-color: rgba(52, 168, 83, 0.6); - box-shadow: 0 10px 25px rgba(52, 168, 83, 0.3); -} - -.gn-android-link .gn-download-icon { - color: #34a853; -} - -.gn-ios-link:hover { - border-color: rgba(0, 122, 255, 0.6); - box-shadow: 0 10px 25px rgba(0, 122, 255, 0.3); -} - -.gn-ios-link .gn-download-icon { - color: #007aff; -} - -/* Video Tutorial Cards */ -.gn-video-tutorial-card { - background: rgba(20, 30, 50, 0.6); - border: 1px solid rgba(var(--primary-color-rgb), 0.2); - border-radius: 15px; - padding: 1.5rem; - transition: all 0.3s ease; - position: relative; - overflow: hidden; - backdrop-filter: blur(10px); -} - -.gn-video-tutorial-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, var(--primary-color), transparent); - animation: shimmer 3s ease-in-out infinite; -} - -.gn-video-tutorial-card:hover { - background: rgba(25, 35, 55, 0.8); - transform: translateY(-5px); - box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.2); -} - -/* Video Container with reduced aspect ratio for more compact display */ -.gn-video-container { - position: relative; - width: 100%; - height: 0; - padding-bottom: 45%; /* Reduced from 56.25% (16:9) to 45% for shorter videos */ - overflow: hidden; - border-radius: 10px; - margin-bottom: 1.5rem; -} - -.gn-video-container iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: none; - border-radius: 10px; -} - -/* Video Info */ -.gn-video-info h4 { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 1.3rem; - color: #52eef5; - margin-bottom: 0.8rem; - font-weight: 600; -} - -.gn-video-info h4 i { - font-size: 1.1rem; - color: var(--primary-color); -} - -.gn-video-info p { - font-size: 1rem; - color: var(--text-muted); - line-height: 1.6; - margin: 0; -} - -/* Responsive Design for Dual Column Layout */ -@media (max-width: 1024px) { - .gn-app-dual-column-container { - gap: 2rem; - } - - .gn-app-section-wrapper { - padding: 0 1.5rem; - } - - .gn-download-links-container { - gap: 1rem; - } -} - -@media (max-width: 768px) { - /* Collapse to single column on mobile */ - .gn-app-dual-column-container { - grid-template-columns: 1fr; - gap: 2.5rem; - } - - .gyannetra-app-section-redesigned { - padding: 3rem 0; - margin: 2rem auto; - } - - .gn-app-section-wrapper { - padding: 0 1rem; - } - - .gn-app-main-heading { - font-size: 2rem; - } - - .gn-app-features-card, - .gn-app-download-section, - .gn-video-tutorial-card { - padding: 1.5rem; - } - - .gn-download-links-container { - flex-direction: column; - align-items: center; - gap: 1rem; - } - - .gn-download-link { - min-width: 220px; - padding: 0.8rem 1.3rem; - } - - .gn-video-info h4 { - font-size: 1.1rem; - flex-direction: column; - gap: 0.3rem; - text-align: center; - } -} - -@media (max-width: 480px) { - .gyannetra-app-section-redesigned { - padding: 2rem 0; - } - - .gn-app-section-wrapper { - padding: 0 0.8rem; - } - - .gn-app-main-heading { - font-size: 1.6rem; - } - - .gn-app-features-card, - .gn-app-download-section, - .gn-video-tutorial-card { - padding: 1.2rem; - } - - .gn-feature-item { - flex-direction: column; - text-align: center; - gap: 0.8rem; - } - - .gn-feature-icon { - align-self: center; - } - - .gn-download-link { - min-width: 180px; - padding: 0.7rem 1rem; - } - - .gn-download-icon { - font-size: 1.7rem; - } - - .gn-download-title { - font-size: 0.8rem; - } - - .gn-download-store { - font-size: 1rem; - } -} - -/* Shimmer animation for video cards */ -@keyframes shimmer { - 0% { - transform: translateX(-100%); - } - 100% { - transform: translateX(100%); - } -} - -/* Pulse Glow Animation */ -@keyframes pulseGlow { - 0% { - text-shadow: 0 0 20px rgba(82, 238, 245, 0.5); - } - 100% { - text-shadow: 0 0 30px rgba(82, 238, 245, 0.8), 0 0 40px rgba(82, 238, 245, 0.3); - } -} - -/* Responsive Design for Webinars */ -@media (max-width: 1024px) { - .webinar-videos-grid { - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 1.5rem; - } - - .webinar-meta { - gap: 1rem; - } -} - -@media (max-width: 768px) { - #webinars-hero h1 { - font-size: 2.8rem; - } - - #webinars-hero p { - font-size: 1.2rem; - } - - .webinar-main-card { - padding: 1.5rem; - margin: 2rem 0 3rem 0; - } - .already-done-webinars-card { - margin-top: 2rem !important; - } - - .webinar-videos-section { - padding: 3rem 0 1.5rem 0; - margin-top: 2rem; - } - - .webinar-card-header h2 { - font-size: 2rem; - flex-direction: column; - gap: 0.5rem; - } - - .upcoming-webinar-item { - flex-direction: column; - gap: 1.5rem; - padding: 1.5rem; - } - - .webinar-date-badge { - align-self: flex-start; - min-width: 80px; - } - - .webinar-meta { - flex-direction: column; - gap: 0.8rem; - } - - .webinar-actions { - flex-direction: column; - } - - .register-btn, .add-calendar-btn { - justify-content: center; - text-align: center; - } - - .webinar-videos-grid { - grid-template-columns: 1fr; - gap: 1.5rem; - } - - .webinar-video-card { - padding: 1rem; - } -} - -@media (max-width: 480px) { - #webinars-hero { - padding: 2.5rem 0; - } - - #webinars-hero h1 { - font-size: 2.2rem; - letter-spacing: 1px; - } - - #webinars-hero p { - font-size: 1.1rem; - } - - .webinar-main-card { - padding: 1rem; - margin: 1.5rem 0 2.5rem 0; - } - .already-done-webinars-card { - margin-top: 1.5rem !important; - } - - .webinar-videos-section { - padding: 2rem 0 1rem 0; - margin-top: 1.5rem; - } - - .webinar-card-header { - margin-bottom: 1.5rem; - padding-bottom: 1rem; - } - - .webinar-card-header h2 { - font-size: 1.8rem; - } - - .upcoming-webinar-item { - padding: 1rem; - } - - .webinar-details h3 { - font-size: 1.5rem; - } - - .webinar-takeaways { - margin-bottom: 1.5rem; - } - - .video-info h3 { - font-size: 1.2rem; - } -} - -/* ===== RESTRUCTURED GYANNETRA MOBILE APP SECTION - DUAL COLUMN LAYOUT ===== */ - -/* Main Section Container - Centered with max-width */ -.gyannetra-app-section-redesigned { - padding: 4rem 0; - background: linear-gradient(135deg, rgba(15, 15, 25, 0.95) 0%, rgba(25, 25, 45, 0.9) 100%); - border-radius: 20px; - margin: 3rem auto; - position: relative; - overflow: hidden; -} - -.gyannetra-app-section-redesigned::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: - radial-gradient(circle at 20% 20%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%); - pointer-events: none; -} - -/* Wrapper for centering and max-width control */ -.gn-app-section-wrapper { - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem; - position: relative; - z-index: 2; -} - -/* Main Heading */ -.gn-app-main-heading { - font-size: 2.6rem; - margin-bottom: 3rem; - color: #52eef5; - text-align: center; - text-transform: uppercase; - letter-spacing: 1px; - font-family: 'VT323', monospace; -} - -/* Dual Column Container */ -.gn-app-dual-column-container { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 3rem; - align-items: start; -} - -/* Left Column Styling */ -.gn-app-left-column { - display: flex; - flex-direction: column; - gap: 2.5rem; -} - -/* Right Column Styling */ -.gn-app-right-column { - display: flex; - flex-direction: column; - gap: 2rem; -} - -/* App Features Card */ -.gn-app-features-card { - background: rgba(25, 35, 55, 0.8); - border: 1px solid rgba(var(--primary-color-rgb), 0.3); - border-radius: 15px; - padding: 2rem; - backdrop-filter: blur(10px); - transition: all 0.3s ease; - box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); -} - -.gn-app-features-card:hover { - transform: translateY(-5px); - border-color: rgba(var(--primary-color-rgb), 0.6); - box-shadow: 0 12px 30px rgba(var(--primary-color-rgb), 0.3); -} - -/* App Intro Text */ -.gn-app-intro-text { - margin-bottom: 2rem; -} - -.gn-app-intro-text p { - font-size: 1.2rem; - color: var(--text-light); - line-height: 1.7; - font-weight: 400; - text-align: center; - margin: 0; -} - -/* App Features List */ -.gn-app-features-list { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.gn-feature-item { - display: flex; - align-items: flex-start; - gap: 1rem; - padding: 1rem; - background: rgba(var(--primary-color-rgb), 0.05); - border-radius: 10px; - transition: all 0.3s ease; -} - -.gn-feature-item:hover { - background: rgba(var(--primary-color-rgb), 0.1); - transform: translateX(5px); -} - -.gn-feature-icon { - background: rgba(var(--primary-color-rgb), 0.15); - border-radius: 10px; - padding: 0.8rem; - display: flex; - align-items: center; - justify-content: center; - min-width: 50px; - height: 50px; - transition: all 0.3s ease; -} - -.gn-feature-icon i { - font-size: 1.3rem; - color: var(--primary-color); -} - -.gn-feature-item:hover .gn-feature-icon { - background: rgba(var(--primary-color-rgb), 0.25); - transform: scale(1.1); -} - -.gn-feature-content h4 { - font-size: 1.2rem; - color: #52eef5; - margin-bottom: 0.5rem; - font-weight: 600; -} - -.gn-feature-content p { - font-size: 1rem; - color: var(--text-muted); - line-height: 1.5; - margin: 0; -} - -/* App Download Section */ -.gn-app-download-section { - background: rgba(20, 30, 50, 0.6); - border: 1px solid rgba(var(--primary-color-rgb), 0.2); - border-radius: 15px; - padding: 2rem; - text-align: center; - backdrop-filter: blur(10px); - transition: all 0.3s ease; -} - -.gn-app-download-section:hover { - background: rgba(25, 35, 55, 0.8); - border-color: rgba(var(--primary-color-rgb), 0.4); -} - -.gn-download-heading { - font-size: 1.8rem; - color: #52eef5; - margin-bottom: 1.5rem; - font-family: 'VT323', monospace; - letter-spacing: 1px; - text-transform: uppercase; -} - -.gn-download-links-container { - display: flex; - justify-content: center; - gap: 1.5rem; - flex-wrap: wrap; - margin-top: 2rem; -} - -.gn-download-link { - display: flex; - align-items: center; - gap: 1rem; - padding: 1rem 1.5rem; - background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%); - border: 2px solid rgba(var(--primary-color-rgb), 0.3); - border-radius: 12px; - text-decoration: none; - transition: all 0.3s ease; - min-width: 180px; - backdrop-filter: blur(10px); - box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); -} - -.gn-download-link:hover { - transform: translateY(-3px); - border-color: rgba(var(--primary-color-rgb), 0.6); - box-shadow: 0 10px 25px rgba(var(--primary-color-rgb), 0.3); - text-decoration: none; -} - -.gn-download-icon { - font-size: 2rem; - color: var(--primary-color); - transition: transform 0.3s ease; -} - -.gn-download-link:hover .gn-download-icon { - transform: scale(1.1); -} - -.gn-download-text { - display: flex; - flex-direction: column; - align-items: flex-start; - text-align: left; -} - -.gn-download-title { - font-size: 0.85rem; - color: var(--text-muted); - line-height: 1.2; -} - -.gn-download-store { - font-size: 1.1rem; - color: #ffffff; - font-weight: 600; - line-height: 1.2; -} - -/* Platform-specific styling */ -.gn-android-link:hover { - border-color: rgba(52, 168, 83, 0.6); - box-shadow: 0 10px 25px rgba(52, 168, 83, 0.3); -} - -.gn-android-link .gn-download-icon { - color: #34a853; -} - -.gn-ios-link:hover { - border-color: rgba(0, 122, 255, 0.6); - box-shadow: 0 10px 25px rgba(0, 122, 255, 0.3); -} - -.gn-ios-link .gn-download-icon { - color: #007aff; -} - -/* Video Tutorial Cards */ -.gn-video-tutorial-card { - background: rgba(20, 30, 50, 0.6); - border: 1px solid rgba(var(--primary-color-rgb), 0.2); - border-radius: 15px; - padding: 1.5rem; - transition: all 0.3s ease; - position: relative; - overflow: hidden; - backdrop-filter: blur(10px); -} - -.gn-video-tutorial-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, var(--primary-color), transparent); - animation: shimmer 3s ease-in-out infinite; -} - -.gn-video-tutorial-card:hover { - background: rgba(25, 35, 55, 0.8); - transform: translateY(-5px); - box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.2); -} - -/* Video Container with reduced aspect ratio for more compact display */ -.gn-video-container { - position: relative; - width: 100%; - height: 0; - padding-bottom: 45%; /* Reduced from 56.25% (16:9) to 45% for shorter videos */ - overflow: hidden; - border-radius: 10px; - margin-bottom: 1.5rem; -} - -.gn-video-container iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: none; - border-radius: 10px; -} - -/* Video Info */ -.gn-video-info h4 { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 1.3rem; - color: #52eef5; - margin-bottom: 0.8rem; - font-weight: 600; -} - -.gn-video-info h4 i { - font-size: 1.1rem; - color: var(--primary-color); -} - -.gn-video-info p { - font-size: 1rem; - color: var(--text-muted); - line-height: 1.6; - margin: 0; -} - -/* Responsive Design for Dual Column Layout */ -@media (max-width: 1024px) { - .gn-app-dual-column-container { - gap: 2rem; - } - - .gn-app-section-wrapper { - padding: 0 1.5rem; - } - - .gn-download-links-container { - gap: 1rem; - } -} - -@media (max-width: 768px) { - /* Collapse to single column on mobile */ - .gn-app-dual-column-container { - grid-template-columns: 1fr; - gap: 2.5rem; - } - - .gyannetra-app-section-redesigned { - padding: 3rem 0; - margin: 2rem auto; - } - - .gn-app-section-wrapper { - padding: 0 1rem; - } - - .gn-app-main-heading { - font-size: 2rem; - } - - .gn-app-features-card, - .gn-app-download-section, - .gn-video-tutorial-card { - padding: 1.5rem; - } - - .gn-download-links-container { - flex-direction: column; - align-items: center; - gap: 1rem; - } - - .gn-download-link { - min-width: 220px; - padding: 0.8rem 1.3rem; - } - - .gn-video-info h4 { - font-size: 1.1rem; - flex-direction: column; - gap: 0.3rem; - text-align: center; - } -} - -@media (max-width: 480px) { - .gyannetra-app-section-redesigned { - padding: 2rem 0; - } - - .gn-app-section-wrapper { - padding: 0 0.8rem; - } - - .gn-app-main-heading { - font-size: 1.6rem; - } - - .gn-app-features-card, - .gn-app-download-section, - .gn-video-tutorial-card { - padding: 1.2rem; - } - - .gn-feature-item { - flex-direction: column; - text-align: center; - gap: 0.8rem; - } - - .gn-feature-icon { - align-self: center; - } - - .gn-download-link { - min-width: 180px; - padding: 0.7rem 1rem; - } - - .gn-download-icon { - font-size: 1.7rem; - } - - .gn-download-title { - font-size: 0.8rem; - } - - .gn-download-store { - font-size: 1rem; - } -} - -/* Shimmer animation for video cards */ -@keyframes shimmer { - 0% { - transform: translateX(-100%); - } - 100% { - transform: translateX(100%); - } -} - -/* Pulse Glow Animation */ -@keyframes pulseGlow { - 0% { - text-shadow: 0 0 20px rgba(82, 238, 245, 0.5); - } - 50% { - text-shadow: 0 0 30px rgba(82, 238, 245, 0.8), 0 0 40px rgba(82, 238, 245, 0.3); - } - 100% { - text-shadow: 0 0 20px rgba(82, 238, 245, 0.5); - } -} diff --git a/css/expertise-divider.css b/css/expertise-divider.css deleted file mode 100644 index 9adde45..0000000 --- a/css/expertise-divider.css +++ /dev/null @@ -1,19 +0,0 @@ -/* Additional CSS for expertise section divider */ -.exp-item h3 { - position: relative; - padding-bottom: 12px; - margin-bottom: 15px; -} - -.exp-item h3::after { - content: ''; - position: absolute; - bottom: 0; - left: 50%; - transform: translateX(-50%); - width: 60px; - height: 2px; - background: linear-gradient(90deg, rgba(82, 238, 245, 0.2), rgba(82, 238, 245, 1), rgba(82, 238, 245, 0.2)); - border-radius: 2px; - box-shadow: 0 0 8px rgba(82, 238, 245, 0.5); -} diff --git a/css/expertise-fix.css b/css/expertise-fix.css new file mode 100644 index 0000000..ebeff20 --- /dev/null +++ b/css/expertise-fix.css @@ -0,0 +1,37 @@ +/* Expertise Cards Heading Styles */ +.exp-item h3 { + font-size: 1.8rem; + line-height: 1.2; + margin-top: 0.5rem; + margin-bottom: 1.2rem; + color: #52eef5; + font-weight: 600; + letter-spacing: 0.5px; + white-space: nowrap; + overflow: visible; + text-overflow: clip; +} + +/* Responsive adjustments */ +@media (max-width: 1024px) { + .exp-item h3 { + font-size: 1.6rem; + white-space: nowrap; + } +} + +@media (max-width: 768px) { + .exp-item h3 { + font-size: 1.5rem; + margin-bottom: 1rem; + white-space: nowrap; + } +} + +@media (max-width: 480px) { + .exp-item h3 { + font-size: 1.4rem; + margin-bottom: 0.8rem; + white-space: nowrap; + } +} diff --git a/css/fix-subheading.css b/css/fix-subheading.css new file mode 100644 index 0000000..4a70296 --- /dev/null +++ b/css/fix-subheading.css @@ -0,0 +1,16 @@ +/* Fix for section-subheading readability in specializations section */ +#specializations .section-subheading { + /* Remove any gradient or transparent text */ + background: none !important; + -webkit-background-clip: initial !important; + background-clip: initial !important; + -webkit-text-fill-color: #52eef5 !important; /* Use solid color instead of transparent */ + color: #52eef5 !important; /* Fallback */ + text-shadow: 0 0 10px rgba(82, 238, 245, 0.3) !important; /* Add subtle glow but keep text readable */ + opacity: 1 !important; + visibility: visible !important; + font-weight: 400 !important; /* Reduced font weight for better readability */ + letter-spacing: 1.5px !important; /* Maintain increased letter spacing */ + margin: 1rem auto 2rem !important; /* Keep same spacing */ + font-size: 2.1rem !important; /* Increased font size for better readability */ +} diff --git a/css/style.css b/css/style.css index b5b107b..c6b0709 100644 --- a/css/style.css +++ b/css/style.css @@ -1,10343 +1,198 @@ -@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); - -/* ===== SIMPLIFIED LOADING - NO FOUC BLOCKING ===== */ -/* Remove aggressive FOUC prevention that causes stuck pages */ -html { - visibility: visible !important; +/* ===== WIDENED CONTACT INFO STYLES ===== */ +/* Enhanced contact content layout when form is commented out */ +.contact-page-container { + width: 95% !important; + max-width: 1600px !important; + margin: 0 auto !important; + padding: 0 3rem !important; } -/* Keep basic loading optimization without blocking */ -.font-loading { - font-family: 'VT323', Consolas, 'Courier New', monospace; +.contact-page-container #contact-us-section { + width: 100% !important; + max-width: none !important; } -/* ===== END FOUC PREVENTION ===== */ - -/* Hero Section Typewriter Styles - Compressed for Desktop */ -.hero-typewriter-section { - margin: 0.2rem 0; -} - -.hero-subheading { - font-size: 1.4rem; - color: rgba(255, 255, 255, 0.9); - margin-bottom: 0.6rem; font-weight: 100; - text-align: center; -} - -.typewriter-container { - font-size: 3rem; /* Increased size for typewriter text */ - color: #52eef5; - font-weight: 100; /* Lowered font weight */ - text-align: center; - min-height: 3.8rem; /* Increased height for larger text */ - min-width: 90%; /* Added min-width to make container wider */ - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 0.4rem; /* Adjusted bottom margin */ - padding: 0.2rem 1rem; /* Added padding for better spacing */ - line-height: 1.0; /* Lowered and uniform line spacing */ -} - -.hero-supporting-text { - font-size: 1.2rem; - color: rgba(255, 255, 255, 0.8); - line-height: 1.5; - margin: 1.5rem auto; - max-width: 600px; - text-align: center; -} - -/* Hero CTA Buttons - Compact Layout */ -.hero-cta-buttons { - display: flex; - gap: 1.2rem; - justify-content: center; - align-items: center; - margin-top: 1.8rem; - flex-wrap: wrap; -} - -.primary-cta { - background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); - border: 2px solid rgba(255, 255, 255, 0.2); - color: #ffffff; - padding: 0.8rem 2rem; - font-size: 1.1rem; - - border-radius: 10px; - text-decoration: none; - transition: all 0.3s ease; - position: relative; - overflow: hidden; - backdrop-filter: blur(8px); - box-shadow: - 0 6px 24px rgba(109, 40, 217, 0.4), - 0 3px 12px rgba(147, 51, 234, 0.3); -} - -.primary-cta:hover { - transform: translateY(-2px) scale(1.03); - background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%); - border-color: rgba(255, 255, 255, 0.5); - box-shadow: - 0 10px 32px rgba(109, 40, 217, 0.6), - 0 5px 16px rgba(147, 51, 234, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.3); - text-shadow: 0 0 6px rgba(255, 255, 255, 0.4); -} - -.secondary-cta { - background: transparent; - border: 2px solid #52eef5; - color: #52eef5; - padding: 0.8rem 2rem; - font-size: 1.1rem; - - border-radius: 10px; - text-decoration: none; - transition: all 0.3s ease; - backdrop-filter: blur(8px); -} - -.secondary-cta:hover { - background: rgba(82, 238, 245, 0.1); - color: #ffffff; - border-color: #ffffff; - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(82, 238, 245, 0.3); -} - -/* Page loading transitions & FOUC prevention */ -html.no-js { - visibility: hidden; -} - -body.loading { - opacity: 1; /* Show body during load but with preloader on top */ -} - -body.page-ready { - opacity: 1; - visibility: visible; -} - -/* Preloader styles */ -#preloader { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: #0a0a1a; - z-index: 9999; +.contact-page-container .contact-content { display: flex; - align-items: center; justify-content: center; - transition: opacity 0.5s ease, visibility 0.5s ease; -} - -body.page-ready #preloader { - opacity: 0; - visibility: hidden; - pointer-events: none; -} - -.loader-container { - text-align: center; -} - -.loader-spinner { - width: 50px; - height: 50px; - border: 3px solid rgba(139, 92, 246, 0.2); - border-radius: 50%; - border-top-color: var(--primary-color); - margin: 0 auto 15px; - animation: spin 1s ease-in-out infinite; -} - -.loader-text { - color: var(--primary-color); - font-size: 1.2rem; - letter-spacing: 2px; - animation: pulse 1.5s ease-in-out infinite; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -@keyframes pulse { - 0%, 100% { - opacity: 0.5; - } - 50% { - opacity: 1; - } -} - -:root { - /* Base colors */ - --fg: #ececec; - --btn-bg: rgba(20, 20, 40, 0.8); - --btn-hover: rgba(20, 20, 40, 1); - --gap: 2rem; - --max-w: 1200px; - - /* Standardized card and text styles */ - --card-bg: rgba(25, 35, 55, 0.7); - --text-light: #e0e0e0; - --text-muted: #b0b0b0; - - /* Default primary color scheme (purple) */ - --primary-color: #6d28d9; - --primary-color-rgb: 109, 40, 217; - --primary-color-hover: #5b21b6; - - /* Industry-specific color schemes */ - /* Finance - Professional Blue */ - --finance-primary: #007bff; - --finance-primary-rgb: 0, 123, 255; - --finance-primary-hover: #0056b3; - - /* Healthcare - Medical Blue */ - --healthcare-primary: #00c6ff; - --healthcare-primary-rgb: 0, 198, 255; - --healthcare-primary-hover: #0099cc; - - /* Retail - Commercial Red */ - --retail-primary: #e74c3c; - --retail-primary-rgb: 231, 76, 60; - --retail-primary-hover: #c0392b; - - /* Manufacturing - Industrial Blue */ - --manufacturing-primary: #3498db; - --manufacturing-primary-rgb: 52, 152, 219; - --manufacturing-primary-hover: #2980b9; - - /* Marketing - Creative Pink */ - --marketing-primary: #ec4899; - --marketing-primary-rgb: 236, 72, 153; - --marketing-primary-hover: #db2777; - - /* Travel - Sky Blue */ - --travel-primary: #0ea5e9; - --travel-primary-rgb: 14, 165, 233; - --travel-primary-hover: #0284c7; - - /* Media & Entertainment - Purple */ - --media-primary: #9333ea; - --media-primary-rgb: 147, 51, 234; - --media-primary-hover: #7e22ce; - /* Services color schemes */ - /* Machine Learning - Deep Blue */ - --machine-learning-primary: #2563eb; - --machine-learning-primary-rgb: 37, 99, 235; - --machine-learning-primary-hover: #1d4ed8; - - /* Generative AI - Emerald Green */ - --generative-ai-primary: #10b981; - --generative-ai-primary-rgb: 16, 185, 129; - --generative-ai-primary-hover: #059669; - - /* Data Analysis - Amber */ - --data-analysis-primary: #f59e0b; - --data-analysis-primary-rgb: 245, 158, 11; - --data-analysis-primary-hover: #d97706; - - /* Automation - Purple */ - --automation-primary: #8b5cf6; - --automation-primary-rgb: 139, 92, 246; - --automation-primary-hover: #7c3aed; - - /* Agentic AI - Pink */ - --agentic-ai-primary: #ec4899; - --agentic-ai-primary-rgb: 236, 72, 153; - --agentic-ai-primary-hover: #db2777;--primary-color-glow: rgba(109, 40, 217, 0.5); - --accent: #a2abff; - --accent-rgb: 162, 171, 255; /* Spacing variables */ - --section-margin: 2rem; - --section-padding: 1.5rem; - --card-padding: 25px; - --grid-gap: 30px; -} - -/* Color Theme Utility Classes */ -.theme-finance { - --primary-color: var(--finance-primary); - --primary-color-rgb: var(--finance-primary-rgb); - --primary-color-hover: var(--finance-primary-hover); - --primary-color-glow: rgba(var(--finance-primary-rgb), 0.5); -} - -.theme-healthcare { - --primary-color: var(--healthcare-primary); - --primary-color-rgb: var(--healthcare-primary-rgb); - --primary-color-hover: var(--healthcare-primary-hover); - --primary-color-glow: rgba(var(--healthcare-primary-rgb), 0.5); -} - -.theme-retail { - --primary-color: var(--retail-primary); - --primary-color-rgb: var(--retail-primary-rgb); - --primary-color-hover: var(--retail-primary-hover); - --primary-color-glow: rgba(var(--retail-primary-rgb), 0.5); -} - -.theme-manufacturing { - --primary-color: var(--manufacturing-primary); - --primary-color-rgb: var(--manufacturing-primary-rgb); - --primary-color-hover: var(--manufacturing-primary-hover); - --primary-color-glow: rgba(var(--manufacturing-primary-rgb), 0.5); -} - -.theme-marketing { - --primary-color: var(--marketing-primary); - --primary-color-rgb: var(--marketing-primary-rgb); - --primary-color-hover: var(--marketing-primary-hover); - --primary-color-glow: rgba(var(--marketing-primary-rgb), 0.5); -} - -.theme-travel { - --primary-color: var(--travel-primary); - --primary-color-rgb: var(--travel-primary-rgb); - --primary-color-hover: var(--travel-primary-hover); - --primary-color-glow: rgba(var(--travel-primary-rgb), 0.5); -} - -.theme-media { - --primary-color: var(--media-primary); - --primary-color-rgb: var(--media-primary-rgb); - --primary-color-hover: var(--media-primary-hover); - --primary-color-glow: rgba(var(--media-primary-rgb), 0.5); -} - -.theme-machine-learning { - --primary-color: var(--machine-learning-primary); - --primary-color-rgb: var(--machine-learning-primary-rgb); - --primary-color-hover: var(--machine-learning-primary-hover); - --primary-color-glow: rgba(var(--machine-learning-primary-rgb), 0.5); -} - -.theme-generative-ai { - --primary-color: var(--generative-ai-primary); - --primary-color-rgb: var(--generative-ai-primary-rgb); - --primary-color-hover: var(--generative-ai-primary-hover); - --primary-color-glow: rgba(var(--generative-ai-primary-rgb), 0.5); -} - -.theme-data-analysis { - --primary-color: var(--data-analysis-primary); - --primary-color-rgb: var(--data-analysis-primary-rgb); - --primary-color-hover: var(--data-analysis-primary-hover); - --primary-color-glow: rgba(var(--data-analysis-primary-rgb), 0.5); -} - -.theme-automation { - --primary-color: var(--automation-primary); - --primary-color-rgb: var(--automation-primary-rgb); - --primary-color-hover: var(--automation-primary-hover); - --primary-color-glow: rgba(var(--automation-primary-rgb), 0.5); -} - -.theme-agentic-ai { - --primary-color: var(--agentic-ai-primary); - --primary-color-rgb: var(--agentic-ai-primary-rgb); - --primary-color-hover: var(--agentic-ai-primary-hover); - --primary-color-glow: rgba(var(--agentic-ai-primary-rgb), 0.5); -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -html { - height: 100%; - scroll-behavior: smooth; -} - -body { - background: url('../assets/3293677.png') no-repeat center center fixed; - background-size: cover; - color: var(--fg); - font-family: 'VT323', sans-serif; - font-weight: 40; - font-style: normal; - font-size: 1.3rem; - line-height: 1.5; - margin: 0; - padding: 0; - min-height: 100vh; - overflow-x: hidden; -} - -/* Special styles for contact page to eliminate spacing */ -body.contact-page { - padding-top: 1; /* Removed padding to shift content all the way up */ -} - -.container { - width: 92%; - max-width: var(--max-w); + align-items: center; + width: 100% !important; + max-width: none !important; margin: 0 auto; padding: 2rem 0; } -.navbar.container { - width: 100%; - max-width: 1400px; - padding: 0.5rem 2.0rem; -} - -/* Standardized section styles */ -section { - margin: var(--section-margin) 0; - padding: var(--section-padding) 0; -} - -/* Standardized heading styles */ -.section-heading, -section h2 { - font-size: 2.6rem; - margin-bottom: 30px; - color: #52eef5; - text-align: center; - text-transform: uppercase; - letter-spacing: 1px; -} - -/* Standardized card grid styles */ -.articles-grid, -.solutions-grid, -.related-content-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - gap: var(--grid-gap); - margin-top: 40px; -} - -.solutions-grid { - grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); -} - -/* Standardized card styles */ -.article-card, -.solution-item, -.related-content-item { - background-color: var(--card-bg); - border-radius: 12px; - padding: var(--card-padding); - text-align: left; - box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); - transition: transform 0.3s ease, box-shadow 0.3s ease; - display: flex; - flex-direction: column; - border: 1px solid rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); - height: 100%; -} - -.article-card:hover, -.solution-item:hover, -.related-content-item:hover { - transform: translateY(-8px); - box-shadow: 0 12px 25px rgba(var(--primary-color-rgb, 109, 40, 217), 0.4); -} - -.solution-item { - text-align: center; - align-items: center; -} - -.article-card h3, -.solution-item h3, -.related-content-item h3 { - font-size: 1.7rem; - color: #52eef5; - margin-bottom: 12px; - -} - -.solution-item h3 { - font-size: 1.5rem; - color: #52eef5; -} - -.article-card p, -.solution-item p, -.related-content-item p { - color: var(--text-muted); - margin-bottom: 20px; - line-height: 1.6; -} - -.solution-item p { - font-size: 1.15rem; -} - -.read-more-link { - color: var(--primary-color); - text-decoration: none; - - transition: color 0.3s ease, background-color 0.3s ease; - align-self: flex-start; - padding: 8px 15px; - border: 1px solid var(--primary-color); - border-radius: 5px; -} - -.read-more-link:hover { - background-color: var(--primary-color-hover); - color: #fff; - text-decoration: none; -} - -.solution-icon { - width: 70px; - height: 70px; - margin-bottom: 20px; - object-fit: contain; -} - -.article-card img { - width: 100%; - height: 180px; - object-fit: cover; - border-radius: 8px; - margin-bottom: 20px; -} - -.tech-description, -.exp-description { - font-size: 1.1rem; - color: rgba(255, 255, 255, 0.8); - margin-top: 0.5rem; - line-height: 1.4; -} - -@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; -} - -/* Disable animations for hero content to prevent layout shifts */ -#hero .hero-content p { - animation: none !important; -} - -/* Allow hero heading to have the glow animation only */ -#hero .hero-content h1 { - animation: pulseGlow 3s ease-in-out infinite alternate !important; - animation-delay: 0s !important; -} - -.hero-content p { - animation-delay: 0.4s; -} - -/* Override hero animation delays */ -#hero .hero-content h1, -#hero .hero-content p { - animation-delay: 0s !important; -} - -.section-heading { - animation-delay: 0.6s; -} - -.section-subheading { - font-size: 1.8rem; - color: var(--primary-color); - text-align: center; - margin-top: 1.5rem; - margin-bottom: 1rem; - font-family: 'Space Grotesk', sans-serif; - - letter-spacing: 1px; - text-transform: uppercase; - animation-delay: 0.7s; -} - -.section-intro { - font-size: 1.2rem; - color: var(--text-light); - text-align: center; - max-width: 900px; - margin: 0 auto 2.5rem; - line-height: 1.6; - animation-delay: 0.8s; -} - -.tech-item { - animation-delay: 0.9s; -} - -.exp-item { - animation-delay: 1s; -} - -#technologies { - padding-top: 2rem; - padding-bottom: 2rem; - position: relative; - overflow: hidden; -} - -#expertise { - padding-top: 4rem; - padding-bottom: 4rem; - position: relative; -} - -#technologies .section-heading { - margin-bottom: 20px; - position: relative; - overflow: hidden; -} - - - -#technologies .section-heading::before { - content: ""; - position: absolute; - width: 100%; - height: 3px; - background: linear-gradient(90deg, transparent, var(--primary-color), transparent); - bottom: -10px; - left: 0; - animation: glowLine 3s ease-in-out infinite; -} - -@keyframes glowLine { - 0%, 100% { - opacity: 0.5; - box-shadow: 0 0 5px rgba(var(--primary-color-rgb), 0.3); - } - 50% { - opacity: 1; - box-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.7); - } -} - -#generative-ai, -#data-analysis, -.overview-section, -.key-offerings-section, -.benefits-section, -.related-content-section, -#featured-solutions, -#gyannetra-advantage, -#related-content { - padding: 6rem 0; -} - -#agentic-ai { - padding: 80px 0; -} - -.agentic-ai-header { - text-align: center; - margin-bottom: 60px; -} - -.agentic-ai-header h1 { - font-size: 3.6em; - margin-bottom: 20px; - /* Inherit the beautiful gradient and glow from main h1 styling */ -} - -.agentic-ai-header p { - font-size: 1.45em; - 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: 2.4em; - margin-bottom: 40px; - color: #52eef5; -} - -.offerings-cards, -.blog-cards { - display: flex; - justify-content: center; - gap: 30px; - flex-wrap: wrap; -} - -.offering-card, -.feature-card, -.blog-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, -.feature-card:hover, -.blog-card:hover { - transform: translateY(-10px); -} - -.offering-card img, -.feature-card img { - width: 60px; - height: 60px; - margin-bottom: 20px; -} - -.offering-card h3 { - font-size: 1.8em; - margin-bottom: 15px; - color: var(--text-color-primary); -} - -.offering-card p { - color: var(--text-color-secondary); -} - -/* Benefits cards grid and styles */ -.benefits-cards-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: 25px; - margin-top: 40px; -} - -.benefit-card { - background-color: var(--card-bg); - border: 1px solid rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); - border-radius: 12px; - padding: 25px; - text-align: center; - transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; - box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25); - height: 100%; - display: flex; - flex-direction: column; - align-items: center; -} - -.benefit-card:hover { - transform: translateY(-8px); - box-shadow: 0 12px 25px rgba(var(--primary-color-rgb, 109, 40, 217), 0.4); - border-color: rgba(var(--primary-color-rgb, 109, 40, 217), 0.6); -} - -.benefit-card-icon { - width: 70px; - height: 70px; - margin-bottom: 18px; - display: flex; - align-items: center; - justify-content: center; - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.1); - border-radius: 50%; - transition: transform 0.3s ease, background-color 0.3s ease; -} - -.benefit-card:hover .benefit-card-icon { - transform: scale(1.1); - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.2); -} - -.benefit-card-icon i { - font-size: 2.2rem; - color: var(--primary-color); - transition: color 0.3s ease; -} - -.benefit-card-icon img { - width: 55px; - height: 55px; - object-fit: contain; -} - -/* Specific styling for buttons within benefit cards */ -.benefit-card .btn-primary { - margin-top: auto; - width: 100%; - max-width: 200px; - padding: 12px 24px; - font-size: 0.9rem; - border-radius: 6px; - align-self: center; - text-align: center; - white-space: nowrap; - min-height: 44px; - display: flex; - align-items: center; - justify-content: center; -} - -/* Ensure consistent spacing and alignment for benefit card content */ -.benefit-card h3 { - margin-bottom: 15px; - font-size: 1.4rem; - color: var(--text-color-primary); - line-height: 1.3; -} - -.benefit-card .program-details, -.benefit-card .program-outcomes, -.benefit-card .program-highlights { - margin-bottom: 20px; - flex-grow: 1; -} - -.benefit-card .program-details p, -.benefit-card .program-outcomes p { - margin-bottom: 8px; - font-size: 0.95rem; -} - -.benefit-card .program-outcomes ul { - text-align: left; - padding-left: 20px; - margin-top: 10px; -} - -.benefit-card .program-outcomes li { - margin-bottom: 5px; - font-size: 0.9rem; - line-height: 1.4; -} - -.benefit-card .program-highlights { - display: flex; - flex-wrap: wrap; - gap: 10px; - justify-content: center; - margin-bottom: 20px; -} - -.benefit-card .highlight-item { - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.1); - padding: 5px 10px; - border-radius: 15px; - font-size: 0.8rem; - color: var(--primary-color); - display: flex; - align-items: center; - gap: 5px; -} - -/* Mobile responsiveness for benefit card buttons */ -@media (max-width: 768px) { - .benefit-card .btn-primary { - padding: 14px 20px; - font-size: 0.85rem; - max-width: 180px; - } - - .benefit-card { - padding: 20px; - } - - .benefit-card h3 { - font-size: 1.2rem; - } -} - -.benefit-card h3 { - font-size: 1.4rem; - color: #52eef5; - margin-bottom: 12px; - -} - -.benefit-card p { - color: var(--text-muted); - line-height: 1.6; - font-size: 1.1rem; - text-align: center; - flex-grow: 1; -} - -/* Specialization Section Styles */ -#specializations { - padding: 4rem 0; - position: relative; -} - -#specializations .section-subheading { - background: linear-gradient(90deg, var(--primary-color), #52eef5); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - text-shadow: 0 0 20px rgba(82,238,245,0.2); - margin-top: 2rem; -} - -#specializations .section-intro { - position: relative; - z-index: 2; -} - -/* Specialization Cards Styles */ -.specializations-cards-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - gap: 30px; - margin-top: 40px; - position: relative; - z-index: 2; -} - -.specialization-card { - background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%); - border: 1px solid rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); - border-radius: 15px; - padding: 30px; - transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); - height: 100%; - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - backdrop-filter: blur(10px); -} - -.specialization-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, var(--primary-color), transparent); - opacity: 0; - transition: opacity 0.3s ease; -} - -.specialization-card:hover { - transform: translateY(-8px); - box-shadow: 0 15px 35px rgba(var(--primary-color-rgb, 109, 40, 217), 0.4); - border-color: rgba(var(--primary-color-rgb, 109, 40, 217), 0.6); -} - -.specialization-card:hover::before { - opacity: 1; - animation: shimmer 3s ease-in-out infinite; -} - -.specialization-card-icon { - width: 90px; - height: 90px; - margin-bottom: 20px; - margin-left: auto; - margin-right: auto; - display: flex; - align-items: center; - justify-content: center; - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.15); - border-radius: 50%; - transition: transform 0.3s ease, background-color 0.3s ease; - box-shadow: 0 5px 15px rgba(var(--primary-color-rgb, 109, 40, 217), 0.2); -} - -.specialization-card:hover .specialization-card-icon { - transform: scale(1.1); - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.25); - box-shadow: 0 8px 20px rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); -} - -.specialization-card-icon img { - width: 60px; - height: 60px; - object-fit: contain; - filter: drop-shadow(0 0 5px rgba(var(--primary-color-rgb, 109, 40, 217), 0.3)); -} - -.specialization-card h3 { - font-size: 1.8rem; - color: #52eef5; - margin-bottom: 15px; - - text-align: center; -} - -.specialization-description { - color: var(--text-light); - line-height: 1.6; - font-size: 1.1rem; - margin-bottom: 20px; - flex-grow: 1; -} - -.specialization-highlights { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin-bottom: 25px; - justify-content: center; -} - -.highlight-badge { - background: rgba(255, 255, 255, 0.1); - color: #ffffff; - padding: 6px 12px; - border-radius: 20px; - font-size: 0.9rem; - - border: 1px solid rgba(255, 255, 255, 0.2); - transition: background 0.3s ease, transform 0.3s ease; -} - -.specialization-card:hover .highlight-badge { - background: rgba(255, 255, 255, 0.2); - transform: translateY(-2px); -} - -.specialization-btn { - align-self: center; - padding: 10px 25px; - margin-top: 5px; - font-size: 0.95rem; - border-radius: 8px; -} - -@media (max-width: 768px) { - .specializations-cards-grid { - grid-template-columns: 1fr; - gap: 25px; - } - - .specialization-card { - padding: 25px; - } - - .specialization-card h3 { - font-size: 1.6rem; - } -} - -/* Additional benefit card variants for specific pages */ -.workshop-card .card-footer { - margin-top: auto; - padding-top: 20px; - display: flex; - flex-direction: column; - gap: 15px; - align-items: center; -} - -.workshop-details { - font-size: 0.9rem; - color: var(--text-muted); - font-style: italic; -} - -.program-highlights { - display: flex; - gap: 15px; - margin-top: 15px; - flex-wrap: wrap; - justify-content: center; -} - -.highlight-item { - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.1); - color: var(--primary-color); - padding: 5px 12px; - border-radius: 20px; - font-size: 0.9rem; - display: flex; - align-items: center; - gap: 5px; -} - -.benefits ul { - list-style: disc; - padding-left: 20px; - max-width: 800px; - margin: 0 auto; -} - -.benefits li { - margin-bottom: 15px; - font-size: 1.3em; - 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.45em; - margin-bottom: 10px; - color: var(--text-color-primary); -} - -.blogs-case-studies .blog-card p { - font-size: 1.1em; - color: var(--text-color-secondary); -} - -.explore-capabilities { - text-align: center; - margin-top: 40px; -} - -.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; - 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.9rem; - - 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.3rem 1rem; /* Adjusted padding */ - border-radius: 10px; - transition: all 0.3s ease; - text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4); - display: inline-flex; - align-items: center; - justify-content: center; - min-height: 60px; /* Decreased minimum height */ -} - -.logo:hover { - transform: translateY(-2px); - box-shadow: 0 5px 15px rgba(140, 154, 255, 0.2); -} - -/* Logo image styles */ -.logo-img { - height: 50px; /* Decreased height */ - width: auto; /* Keep width auto to maintain aspect ratio */ - max-width: 350px; /* Increased max-width to allow wider appearance */ - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); - transition: all 0.3s ease; -} - -.logo:hover .logo-img { - filter: drop-shadow(0 4px 8px rgba(90, 107, 255, 0.4)); - transform: scale(1.05); -} - -.nav-links { - list-style: none; - display: flex; - gap: 2rem; - margin-right: 1rem; -} - -.nav-link { - color: var(--fg); - text-decoration: none; - font-size: 1.5rem; /* Increased from 1.2rem for better readability */ - display: flex; - align-items: center; - padding: 0.7rem 1.2rem; - border-radius: 8px; - transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; - position: relative; - letter-spacing: 0.5px; - -} - -.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%; -} - -/* Hamburger Menu Styles */ -.hamburger-menu { - display: none; /* Hidden by default on desktop */ - flex-direction: column; - justify-content: space-around; - width: 30px; - height: 30px; - background: transparent; - border: none; - cursor: pointer; - padding: 10px; /* Add padding for larger hit area */ - z-index: 1010; /* Increased z-index to ensure it's above other elements */ - position: relative; /* Ensure position context */ -} - -.hamburger-line { - width: 100%; - height: 3px; - background: #ffffff; - border-radius: 2px; - transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transition */ - transform-origin: center; - margin: 3px 0; /* Added spacing between lines */ - box-shadow: 0 0 3px rgba(255, 255, 255, 0.6); /* Better glow for visibility */ -} - -.hamburger-menu.active .hamburger-line:nth-child(1) { - transform: translateY(9px) rotate(45deg); - background: #52eef5; /* Change color when active for better visibility */ -} - -.hamburger-menu.active .hamburger-line:nth-child(2) { - opacity: 0; - transform: scale(0); -} - -.hamburger-menu.active .hamburger-line:nth-child(3) { - transform: translateY(-9px) rotate(-45deg); - background: #52eef5; /* Change color when active for better visibility */ -} - -.hero-section, -#automation-flows-hero { - padding-top: 8rem; - padding-bottom: 6rem; - text-align: center; -} - -.gn-responsive-container { - width: 92%; - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem; -} - -/* When hero-section has gn-responsive-container, ensure proper width constraint */ -.hero-section.gn-responsive-container { - width: 92%; - max-width: 1200px; - margin: 0 auto; - padding-left: 2rem; - padding-right: 2rem; -} - -.hero-section h1, -#automation-flows-hero h1 { - font-size: 4.2rem; - margin-bottom: 1rem; -} - -.hero-section p, -#automation-flows-hero p { - font-size: 1.45rem; - color: rgba(255, 255, 255, 0.8); -} - -.overview-section h2, -.key-offerings-section h2, -.benefits-section h2, -.related-content-section h2, -#featured-solutions h2, -#gyannetra-advantage h2, -#related-content h2 { - font-size: 2.4rem; - margin-bottom: 2rem; - text-align: center; - color: #52eef5; -} - -.overview-section p { - font-size: 1.3rem; - 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; - margin-top: 3rem; -} - -.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; - 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.7rem; - margin-bottom: 0.8rem; - color: #52eef5; - text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.7); -} - -.offering-item p, -.related-content-item p { - font-size: 1.2rem; - color: rgba(255, 255, 255, 0.7); -} - -.benefits-section ul, -#gyannetra-advantage ul { - list-style: none; - padding: 0; - max-width: 700px; - margin: 3rem auto; -} - -.benefits-section li, -#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; - margin-bottom: 1.2rem; - font-size: 1.3rem; - color: rgba(255, 255, 255, 0.9); - position: relative; - padding-left: 3rem; -} - -.benefits-section li::before, -#gyannetra-advantage li::before { - content: '•'; - position: absolute; - left: 1rem; - color: #a2abff; - font-size: 1.8rem; - line-height: 1; -} - -.read-more { - display: inline-block; - margin-top: 1rem; - color: #a2abff; - text-decoration: none; - - transition: color 0.3s ease; -} - -.read-more:hover, -.blog-item .read-more:hover, -#insights-stories .insight-item .read-more:hover { - color: #ffffff; - text-decoration: underline; -} - -#hero { - position: relative; - display: flex; - align-items: center; - justify-content: flex-start; - padding-top: 0 !important; - padding-bottom: 0 !important; - margin-top: 0 !important; - width: 100%; - margin: 0; - overflow: hidden; - height: 70vh; - min-height: 500px; - background: none; - /* Ensure visible during page load */ - visibility: visible !important; - opacity: 1 !important; -} - -.hero-container { - display: flex; - width: 100%; - max-width: var(--max-w); - margin: 0 auto; - height: 100%; - align-items: center; - justify-content: center; - padding: 8rem 4% 1.5rem 4%; - /* Ensure consistent display */ - visibility: visible !important; -} - -.hero-content { - position: relative; - z-index: 20; - flex: 1; - max-width: 800px; - text-align: center; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - /* Prevent layout shifts and FOUC */ - opacity: 1 !important; - transform: none !important; - visibility: visible !important; - will-change: auto; -} - -.hero-content h1 { - font-size: 4.5rem; - line-height: 1.1; - margin-bottom: 1rem; - letter-spacing: 1.5px; - font-weight: 20; - position: relative; - text-shadow: none !important; - - /* Stunning Multi-Gradient Text Effect */ - background: linear-gradient( - 135deg, - #ffffff 0%, - #e0e7ff 15%, - #c7d2fe 30%, - #a5b4fc 45%, - #8b5cf6 60%, - #7c3aed 75%, - #6d28d9 90%, - #5b21b6 100% - ); - -webkit-background-clip: text; - background-clip: text; - -webkit-text-fill-color: transparent; - - /* Multi-layered Glow Effect - REMOVED */ - filter: none; - - /* Subtle Text Stroke for Definition */ - -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.2); -} - -/* Removed animated gradient background */ - -/* Removed rotating gradient keyframes */ - -/* Fallback styling for browsers that don't support background-clip: text */ -.hero-content h1.fallback { - background: none !important; - color: #52eef5 !important; - text-shadow: none !important; -} - -/* Enhanced floating reflection effect - REMOVED */ -.hero-content h1 { - -webkit-box-reflect: none; -} - -/* Subtle pulsing glow animation - optimized for all devices */ -@keyframes pulseGlow { - 0% { - text-shadow: none; - filter: brightness(1.05); - } - 100% { - text-shadow: none; - filter: brightness(1.08); - } -} - -/* Mobile-specific animation adjustments */ -@media (max-width: 768px) { - .hero-content h1 { - animation-duration: 2.5s; /* Slightly faster animation on mobile */ - } -} - -.hero-content p { - margin: 1.5rem auto; - font-size: 1.55rem; - opacity: 1; - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); - max-width: 600px; - color: var(--fg); -} - -/* HERO SECTION LAYOUT STABILIZATION */ -#hero .hero-content h1, -#hero .hero-content p, -#hero .hero-content .btn-primary { - /* Prevent layout shifts from animations */ - opacity: 1 !important; - transform: none !important; - visibility: visible !important; - transition: none !important; +.contact-page-container .widened-contact-info { + width: 100% !important; + max-width: 1200px !important; + min-width: 800px !important; + background: rgba(20, 20, 40, 0.5) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + border-radius: 20px !important; + padding: 4rem !important; + box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.4) !important; + border: 2px solid rgba(82, 238, 245, 0.2) !important; text-align: center !important; - margin-left: auto !important; - margin-right: auto !important; + margin: 0 auto !important; } -/* Pure #52eef5 heading with glow */ -#hero .hero-content h1 { +.contact-page-container .widened-contact-info h2 { + font-size: 2.2rem !important; color: #52eef5 !important; - text-shadow: none !important; - background: none !important; - -webkit-text-fill-color: #52eef5 !important; - -webkit-text-stroke: 0.3px rgba(82, 238, 245, 0.3); - filter: none !important; - -webkit-box-reflect: none !important; -} - -/* Global override to ensure no shadows on hero h1 */ -#hero .hero-content h1, -.hero-content h1, -#hero h1 { - text-shadow: none !important; - filter: none !important; - -webkit-box-reflect: none !important; - box-shadow: none !important; -} - -/* Typewriter Effect Styles */ -.typewriter-text { - display: inline-block; - position: relative; -} - -.cursor { - display: inline-block; - width: 3px; - height: 1em; - background-color: #52eef5; - margin-left: 2px; - animation: blink 1s infinite; - vertical-align: text-bottom; -} - -@keyframes blink { - 0%, 50% { opacity: 1; } - 51%, 100% { opacity: 0; } -} - -/* Custom hero button styles - Enhanced visibility and appeal */ -/* Special styles for hero buttons across all pages - all hero section types */ -#hero .btn-primary, -.hero-section .btn-primary, -.industry-hero .btn-primary, -.travel-hero .btn-primary, -.finance-hero .btn-primary, -.manufacturing-hero .btn-primary, -.marketing-hero .btn-primary, -.media-hero .btn-primary { - background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%) !important; - border: 2px solid rgba(255, 255, 255, 0.3) !important; - box-shadow: - 0 8px 32px rgba(109, 40, 217, 0.4), - 0 4px 16px rgba(147, 51, 234, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; padding: 18px 36px !important; - margin-top: 24px !important; - important; - letter-spacing: 1.5px !important; + margin-bottom: 2rem !important; + font-family: 'VT323', monospace !important; text-transform: uppercase !important; + letter-spacing: 2px !important; +} + +.contact-page-container .widened-contact-info .contact-details { + display: flex !important; + flex-direction: column !important; + gap: 2rem !important; + max-width: 900px !important; + margin: 0 auto 3rem auto !important; +} + +.contact-page-container .widened-contact-info .contact-details li { + font-size: 1.5rem !important; + padding: 2rem 3rem !important; + background: rgba(255, 255, 255, 0.1) !important; + border: 1px solid rgba(255, 255, 255, 0.2) !important; + border-radius: 16px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + transition: all 0.3s ease !important; + border-left: 6px solid #52eef5 !important; +} + +.contact-page-container .widened-contact-info .contact-details li:hover { + background: rgba(82, 238, 245, 0.1) !important; + transform: translateY(-2px) !important; + box-shadow: 0 8px 25px rgba(82, 238, 245, 0.2) !important; +} + +.contact-page-container .widened-contact-info .contact-details li i { + font-size: 1.5rem !important; + margin-right: 1.5rem !important; + color: #52eef5 !important; + min-width: 30px !important; +} + +.contact-page-container .widened-contact-info .expert-advice-card { + max-width: 900px !important; + margin: 0 auto !important; + padding: 3rem !important; + background: rgba(82, 238, 245, 0.08) !important; + border: 3px solid rgba(82, 238, 245, 0.3) !important; + border-radius: 20px !important; +} + +.contact-page-container .widened-contact-info .expert-advice-card h3 { + font-size: 2.4rem !important; + color: #52eef5 !important; + margin-bottom: 1rem !important; +} + +.contact-page-container .widened-contact-info .expert-advice-card p { font-size: 1.3rem !important; + margin-bottom: 2rem !important; + color: rgba(255, 255, 255, 0.9) !important; + line-height: 1.6 !important; +} + +.contact-page-container .widened-contact-info .btn-book-consultation { + padding: 1rem 2.5rem !important; + font-size: 1.2rem !important; + background: linear-gradient(135deg, #52eef5 0%, #667eea 50%, #764ba2 100%) !important; + border: none !important; border-radius: 12px !important; color: #ffffff !important; text-decoration: none !important; - display: inline-block !important; - position: relative !important; - overflow: hidden !important; + text-transform: uppercase !important; + letter-spacing: 1.5px !important; transition: all 0.3s ease !important; - cursor: pointer !important; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; - backdrop-filter: blur(8px) !important; + box-shadow: 0 4px 16px rgba(82, 238, 245, 0.3) !important; } -/* Hover effects for enhanced interactivity */ -#hero .btn-primary:hover, -.hero-section .btn-primary:hover, -.industry-hero .btn-primary:hover, -.travel-hero .btn-primary:hover, -.finance-hero .btn-primary:hover, -.manufacturing-hero .btn-primary:hover, -.marketing-hero .btn-primary:hover, -.media-hero .btn-primary:hover { - transform: translateY(-3px) scale(1.05) !important; - background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important; - border-color: rgba(255, 255, 255, 0.5) !important; - box-shadow: - 0 12px 40px rgba(109, 40, 217, 0.6), - 0 6px 20px rgba(147, 51, 234, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.3), - 0 0 20px rgba(168, 85, 247, 0.5); - text-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important; +.contact-page-container .widened-contact-info .btn-book-consultation:hover { + transform: translateY(-2px) !important; + box-shadow: 0 8px 25px rgba(82, 238, 245, 0.4) !important; + background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #52eef5 100%) !important; } -/* Active/pressed state */ -#hero .btn-primary:active, -.hero-section .btn-primary:active, -.industry-hero .btn-primary:active, -.travel-hero .btn-primary:active, -.finance-hero .btn-primary:active, -.manufacturing-hero .btn-primary:active, -.marketing-hero .btn-primary:active, -.media-hero .btn-primary:active { - transform: translateY(-1px) scale(1.02) !important; - transition: all 0.1s ease !important; -} - -/* Subtle animation for attention */ -@keyframes heroButtonPulse { - 0%, 100% { - box-shadow: - 0 8px 32px rgba(109, 40, 217, 0.4), - 0 4px 16px rgba(147, 51, 234, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - } - 50% { - box-shadow: - 0 8px 32px rgba(109, 40, 217, 0.6), - 0 4px 16px rgba(147, 51, 234, 0.5), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - } -} - -#hero .btn-primary, -.hero-section .btn-primary, -.industry-hero .btn-primary, -.travel-hero .btn-primary, -.finance-hero .btn-primary, -.manufacturing-hero .btn-primary, -.media-hero .btn-primary { - animation: heroButtonPulse 3s ease-in-out infinite !important; -} - -/* Ensure hero content is not affected by scroll animations */ -#hero .hero-content.animate-on-scroll { - animation: none !important; - text-align: center !important; -} - -#hero .hero-content.animate-on-scroll.animated { - transform: none !important; - opacity: 1 !important; - text-align: center !important; -} - -/* Override any fadeInUp animations for hero content */ -#hero .hero-content p { - animation: none !important; - animation-delay: 0s !important; -} - -/* Ensure hero heading maintains its glow animation */ -#hero .hero-content h1 { - animation: pulseGlow 3s ease-in-out infinite alternate !important; - animation-delay: 0s !important; -} - -/* Force center alignment for hero content at all times */ -#hero .hero-content { - text-align: center !important; - align-items: center !important; - justify-content: center !important; -} - -/* Prevent any FOUC in hero section */ -#hero * { - visibility: visible !important; - opacity: 1 !important; - transform: none !important; - transition: none !important; -} - -/* FOUC prevention */ -.fouc-prevention { - visibility: hidden !important; -} - -/* Exception for critical elements during loading */ -.fouc-prevention .site-header, -.fouc-prevention #hero { - visibility: visible !important; -} - -/* Smooth transition once content is loaded */ -html:not(.fouc-prevention) { - transition: opacity 0.3s ease-in; - opacity: 1; -} - -/* Ensure consistent hero layout across different screen loads */ -@media (min-width: 1024px) { - .hero-container { - padding: 12rem 4% 2rem 4%; - } -} - -@media (min-height: 600px) { - #hero { - height: 80vh; - min-height: 600px; - } -} - -@media (max-height: 599px) { - #hero { - height: auto; - min-height: 500px; - padding: 2rem 0; +/* Responsive design for widened contact info */ +@media (max-width: 1200px) { + .contact-page-container { + max-width: 95% !important; + padding: 0 2rem !important; } - .hero-container { - height: auto; - min-height: 500px; - } -} - -/* Mobile responsive adjustments */ -@media (min-width: 769px) and (max-width: 1023px) { - .hero-container { - padding: 10rem 4% 2rem 4%; - } -} - -@media (max-width: 768px) { - #hero { - height: 70vh; - min-height: 500px; - padding-top: 1rem; /* Additional top padding for mobile */ - } - - .hero-container { - padding: 2rem 4% 1rem 4%; /* Increased top padding to prevent navbar overlap */ - justify-content: center; /* Ensure content is properly centered */ - } - - .hero-content { - margin-top: 1rem; /* Extra margin to push content below navbar */ - } .hero-content h1 { - font-size: 3rem; - line-height: 1.2; /* Tighter line height for mobile */ - margin-bottom: 1rem; - text-shadow: none !important; /* Removed shadow for mobile */ - letter-spacing: 0.5px; /* Slightly reduced letter spacing for mobile */ - } - .hero-content p { - font-size: 1.3rem; - margin-bottom: 1.5rem; - } - - #technologies { - padding-top: 1.5rem; } -} - -/* Extra small mobile devices */ -@media (max-width: 480px) { - #hero { - height: 65vh; - min-height: 450px; - padding-top: 1.5rem; - } - - .hero-container { - padding: 2.5rem 3% 1rem 3%; /* Even more top padding for smallest screens */ - } - - .hero-content { - margin-top: 1.5rem; /* Extra margin for smallest screens */ - } .hero-content h1 { - font-size: 2.4rem; /* Smaller font for very small screens */ - line-height: 1.1; - margin-bottom: 0.8rem; - text-shadow: none !important; /* Removed shadow for smallest screens */ - letter-spacing: 0.3px; - filter: brightness(1.08); /* Slightly increased brightness for better visibility */ - } - .hero-content p { - font-size: 1.2rem; - margin-bottom: 1.2rem; - } - .hero-content .btn-primary { - padding: 0.8rem 1.5rem; - font-size: 1.1rem; - } -} - -.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-size: 1.15rem; -} - -.item-description { - font-size: 0.95rem; - opacity: 0.8; -} - -.section-heading { - font-size: 3rem; - - text-align: center; - margin: var(--gap) 0; - letter-spacing: 0.7px; - position: relative; - display: inline-block; - width: 100%; - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ -} - -h1,h2,h3,h4,h5,h6 { - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ - letter-spacing: 0.7px; - -} - -.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); - 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%); -} - -/* Specific targeting for footer Contact Us section line spacing */ -.footer-col:has(h3:contains("Contact Us")) ul li, -.footer-col h3 + ul li { - margin-bottom: 3px !important; -} - -.footer-col:has(h3:contains("Contact Us")) ul li p, -.footer-col h3 + ul li p { - margin-bottom: 1px !important; - padding: 2px 0 !important; - line-height: 1.25 !important; -} - -/* Modern Technology Cards Animation */ -.tech-cards-container { - position: relative; - width: 100%; - overflow: hidden; - padding: 30px 0; - background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.2)); - border-radius: 20px; - margin: 10px 0; - box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3); -} - -.tech-cards-track { - display: flex; - animation: techCardsFlow 75s linear infinite; - will-change: transform; - gap: 70px; /* Further increased gap between cards */ -} - -.tech-cards-track:hover { - animation-play-state: paused; -} - -@keyframes techCardsFlow { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(-50%); - } -} - -.tech-card { - flex: 0 0 auto; - width: 240px; - height: 220px; - position: relative; - cursor: pointer; - transition: all 0.3s ease; - transform-style: preserve-3d; - margin: 5px 0; /* Reduced top/bottom margin */ - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); -} - -.tech-card-inner { position: relative; - width: 100%; - height: 100%; - background: rgba(20, 25, 45, 0.5); /* More transparent background like navbar */ - border: 1px solid rgba(255, 255, 255, 0.1); /* Similar to navbar border when scrolled */ - border-radius: 16px; - padding: 25px 15px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; backdrop-filter: blur(30px); - -webkit-backdrop-filter: blur(30px); - overflow: hidden; - transition: all 0.3s ease; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.3), - 0 4px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.tech-card-inner::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%); - animation: shimmer 3s ease-in-out infinite; -} - -.tech-card:hover .tech-card-inner { - background: linear-gradient(135deg, - rgba(var(--primary-color-rgb), 0.2) 0%, - rgba(255, 255, 255, 0.1) 50%, - rgba(var(--primary-color-rgb), 0.1) 100%); - backdrop-filter: blur(35px); - -webkit-backdrop-filter: blur(35px); - border: 1px solid rgba(255, 255, 255, 0.1); /* Similar to navbar border when scrolled */ - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.1), /* Same as navbar shadow when scrolled */ - 0 0 30px rgba(var(--primary-color-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.3); -} - -.tech-icon-wrapper { - position: relative; - width: 80px; - height: 80px; - margin-bottom: 20px; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s ease; -} - -.tech-icon-wrapper::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100%; - background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.2) 0%, transparent 70%); - border-radius: 50%; - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-card:hover .tech-icon-wrapper::before { - opacity: 0; -} - - - -.tech-card:hover .tech-icon-wrapper { - transform: scale(1.1) rotateY(15deg); -} - -.tech-card h3 { - font-size: 1.45rem; - - margin-bottom: 8px; - color: var(--fg); - transition: all 0.3s ease; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); -} - -.tech-card:hover h3 { - color: #FFFFFF; /* Keep text white on hover */ - text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7); /* Still add glow effect with primary color */ - transform: translateY(-2px); -} - -.tech-card p { - font-size: 1.1rem; - color: rgba(255, 255, 255, 0.8); - transition: all 0.3s ease; - line-height: 1.4; -} - -.tech-card:hover p { - color: rgba(255, 255, 255, 0.95); - transform: translateY(-1px); -} - -.tech-icon:hover { - background-color: rgba(255, 255, 255, 0.9) !important; - transform: scale(1.05); - box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2); -} - -.tech-icon { - min-width: 40px; - min-height: 40px; - max-width: 100px; - max-height: 100px; - width: auto; - height: auto; - flex: 1; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition: transform 0.3s ease; - aspect-ratio: 1; - /* Add background to improve visibility on dark theme */ - background-color: rgba(255, 255, 255, 0.8); /* Increased opacity */ - border-radius: 8px; - padding: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); - backdrop-filter: blur(10px); - /* Ensure contrast for all icons */ - position: relative; - background-blend-mode: normal; -} - -/* Additional dark theme optimizations for tech icons */ -/* Removed redundant .tech-icon rule */ - -/* Add a subtle glow effect on hover for better visibility */ -.tech-icon:hover { - transform: scale(1.05); - box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.1); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); - border-radius: 8px; - pointer-events: none; - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-icon:hover::before { - opacity: 1; -} - -/* Specific adjustments for logos that might be invisible on dark backgrounds */ -.tech-icon.openai, -.tech-icon.anthropic, -.tech-icon.mistral { - filter: brightness(1.1) contrast(1.2); -} - -/* For GitHub avatars that might be too dark */ -.tech-icon.llamaindex, -.tech-icon.vllm, -.tech-icon.docker { - background-image: url('../assets/tech-icons/docker.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.faiss { - filter: brightness(1.1) saturate(1.1); -} - -/* Special handling for light logos on dark theme */ -.tech-icon.weaviate { - background-color: rgba(0, 0, 0, 0.7) !important; - border: 1px solid rgba(255, 255, 255, 0.2); -} - -/* Ensure proper spacing and visibility for text logos */ -.tech-icon.langchain, -.tech-icon.qdrant, -.tech-icon.haystack { - background-size: 80% auto; - background-color: rgba(255, 255, 255, 0.95) !important; -} - - - -/* Icons for each technology - Using direct image URLs from official sources */ -.tech-icon.ollama { - background-image: url('https://avatars.githubusercontent.com/u/151674099?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.95); - border-radius: 50%; - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.langchain { - background-image: url('https://python.langchain.com/img/brand/wordmark.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.chroma { - background-image: url('../assets/tech-icons/Chroma.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.4) contrast(1.5) saturate(1.3); - border: 2px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); -} - -.tech-icon.pinecone { - background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/markdown/markdown-original.svg'); - background-color: rgba(46, 160, 67, 0.9); - filter: brightness(1.4) contrast(1.5) hue-rotate(60deg); - border: 2px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 0 20px rgba(46, 160, 67, 0.3); - position: relative; -} - -.tech-icon.pinecone::after { - content: '🌲'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 29px; - z-index: 2; -} - -.tech-icon.vectordb { - background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(180deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); -} - -.tech-icon.openai { - background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.2) contrast(1.3); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.huggingface { - background-image: url('https://huggingface.co/front/assets/huggingface_logo-noborder.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.pytorch { - background-image: url('https://pytorch.org/assets/images/pytorch-logo.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.tensorflow { - background-image: url('https://www.tensorflow.org/images/tf_logo_social.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -/* Remaining Technology Icons - Using direct image URLs */ -.tech-icon.weaviate { - background-image: url('https://avatars.githubusercontent.com/u/37794290?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.95); - border-radius: 50%; - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.qdrant { - background-image: url('https://qdrant.tech/images/logo_with_text.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.haystack { - background-image: url('https://raw.githubusercontent.com/deepset-ai/haystack/main/docs/img/haystack_logo_colored.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.mistral { - background-image: url('https://docs.mistral.ai/img/logo.svg'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.anthropic { - background-image: url('../assets/tech-icons/anthropic claude.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.2) contrast(1.3); - border: 2px solid rgba(255, 255, 255, 0.3); -} - -.tech-icon.groq { - background-image: url('https://groq.com/wp-content/uploads/2024/03/PBG-mark1-color.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.gemini { - background-image: url('https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.llamaindex { - background-image: url('https://avatars.githubusercontent.com/u/130722866?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.9); - border-radius: 50%; -} - -.tech-icon.vllm { - background-image: url('https://avatars.githubusercontent.com/u/132581166?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.9); - border-radius: 50%; -} - -.tech-icon.rag { - background-image: url('https://img.icons8.com/color/96/artificial-intelligence.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.transformers { - background-image: url('https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.spacy { - background-image: url('https://raw.githubusercontent.com/explosion/spaCy/master/website/src/images/logo.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(10deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.llama { - background-image: url('../assets/tech-icons/meta-color.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(-10deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.milvus { - background-image: url('../assets/tech-icons/Milvus.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) saturate(1.2); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.docker { - background-image: url('../assets/tech-icons/docker.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.faiss { - background-image: url('https://raw.githubusercontent.com/facebookresearch/faiss/main/docs/img/faiss.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-shadow { - position: absolute; - top: 0; - width: 150px; - height: 100%; - pointer-events: none; - z-index: 1; -} - -.tech-shadow-left { - left: 0; - background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent); -} - -.tech-shadow-right { - right: 0; - background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent); -} - -/* Removed pulse animation - displaying raw icons */ - -@keyframes float { - 0% { - transform: translateY(0px); - } - 50% { - transform: translateY(-5px); - } - 100% { - transform: translateY(0px); - } -} - -/* Removed pulse hover effect - displaying raw icons */ - -/* Removed highlight glow effects - displaying raw icons */ - -/* Responsive adjustments */ -@media (max-width: 768px) { - /* Fix navbar container */ - .site-header { - padding: 0.5rem 1rem; - } - .navbar { - display: flex !important; - justify-content: space-between !important; - align-items: center !important; - padding: 1rem 2rem !important; - position: relative; - } - /* Emergency hamburger menu fixes - BULLETPROOF VERSION */ - .hamburger-menu { - display: flex !important; - visibility: visible !important; - opacity: 1 !important; - pointer-events: auto !important; - position: relative !important; - z-index: 9999 !important; - width: 50px !important; - height: 50px !important; - background: rgba(82, 238, 245, 0.4) !important; - border: 3px solid rgba(82, 238, 245, 0.8) !important; - border-radius: 8px !important; - cursor: pointer !important; - touch-action: manipulation !important; - flex-direction: column !important; - justify-content: center !important; - align-items: center !important; - -webkit-user-select: none !important; - -moz-user-select: none !important; - -ms-user-select: none !important; - user-select: none !important; - outline: none !important; - padding: 0 !important; - margin: 0 !important; - box-sizing: border-box !important; - } - - .hamburger-menu:hover { - background: rgba(82, 238, 245, 0.6) !important; - transform: scale(1.05) !important; - } - - .hamburger-menu:active { - transform: scale(0.95) !important; - background: rgba(82, 238, 245, 0.8) !important; - } - - .hamburger-line { - display: block !important; - visibility: visible !important; - opacity: 1 !important; - width: 70% !important; - height: 3px !important; - background: #ffffff !important; - margin: 2px 0 !important; - transition: all 0.3s ease !important; - border-radius: 2px !important; - } - - /* Hide nav links on mobile by default - EMERGENCY FIXED */ - .nav-links { - position: fixed !important; - top: 0 !important; - left: -100% !important; - width: 100% !important; - height: 100vh !important; - background: rgba(15, 15, 30, 0.98) !important; - backdrop-filter: blur(25px) !important; - z-index: 8888 !important; - transition: left 0.4s ease !important; - display: flex !important; - flex-direction: column !important; - justify-content: flex-start !important; - align-items: center !important; - padding-top: 100px !important; - } - - /* Show nav links when active - EMERGENCY FIXED */ - .nav-links.active, - .nav-links.show { - left: 0 !important; - } - - @keyframes slideInFromLeft { - from { - left: -100%; - opacity: 0; - } - to { - left: 0; - opacity: 1; - } - } - - @keyframes fadeInMenu { - from { - opacity: 0.8; - } - to { - opacity: 1; - } - } - /* Style nav links for mobile - IMPROVED */ - .nav-links li { - width: 90%; /* Better width for mobile */ - text-align: center; - margin-bottom: 0.5rem; /* Added margin for spacing */ - } - - .nav-link { - font-size: 1.4rem; /* Slightly larger for better touch */ - padding: 1.2rem 2rem; /* Better padding */ - width: 100%; - display: block; - border-radius: 12px; /* More rounded corners */ - background: rgba(255, 255, 255, 0.05); /* Subtle background */ - border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */ - transition: all 0.3s ease; /* Smooth transitions */ - color: #ffffff; - text-decoration: none; /* Remove underline */ - } - - .nav-link:hover { - background: rgba(82, 238, 245, 0.2); /* Hover effect */ - border-color: rgba(82, 238, 245, 0.3); - transform: translateY(-2px); /* Subtle lift effect */ - box-shadow: 0 4px 12px rgba(82, 238, 245, 0.2); - } /* Dropdown menu adjustments for mobile - GREATLY IMPROVED */ - .dropdown-menu { - position: static; - opacity: 1; - visibility: visible; - transform: none; - margin-top: 1rem; - background: rgba(30, 30, 50, 0.9); /* Better contrast */ - border-radius: 12px; /* More rounded */ - max-height: 0; - overflow: hidden; - transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transition */ - width: 95%; /* Better width */ - max-width: 450px; /* Increased max-width */ - border: 1px solid rgba(82, 238, 245, 0.2); /* Subtle border */ - box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); /* Better shadow */ - } - - .dropdown-menu.show { - max-height: 600px; /* Increased for more content */ - } .dropdown-menu a { - display: flex !important; /* Ensure flex display */ - padding: 1.5rem 2rem; /* Better padding */ - font-size: 1.1rem; /* Better font size */ - border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Subtle divider */ - transition: all 0.3s ease; /* Smooth transitions */ - border-radius: 8px; /* Rounded items */ - margin: 0.25rem; /* Small margin between items */ - align-items: center !important; /* Center align content */ - justify-content: flex-start !important; /* Start alignment */ - width: 100% !important; /* Full width */ - box-sizing: border-box !important; /* Include padding in width */ - } - - .dropdown-menu a:last-child { - border-bottom: none; - margin-bottom: 0.5rem; /* Bottom margin for last item */ - } - - .dropdown-menu a:hover { - background: rgba(82, 238, 245, 0.15); /* Better hover effect */ - transform: translateX(5px); /* Slide effect */ - } /* Improve dropdown icons and text layout on mobile - ENHANCED */ - .dropdown-item-content { - display: flex !important; - flex-direction: row !important; /* Force horizontal layout */ - text-align: left !important; /* Left align for better UX */ - gap: 1rem !important; /* Better spacing */ - align-items: center !important; /* Center align items */ - padding: 0.5rem !important; /* Internal padding */ - justify-content: flex-start !important; /* Align to start */ - width: 100% !important; /* Full width */ - } - - .dropdown-icon { - width: 40px !important; /* Larger icons for mobile */ - height: 40px !important; - margin-right: 0 !important; - margin-left: 0 !important; - flex-shrink: 0 !important; /* Prevent icon shrinking */ - filter: brightness(1.1); /* Slightly brighter icons */ - display: block !important; /* Ensure visibility */ - object-fit: contain !important; /* Maintain aspect ratio */ - } - .text-content { - flex: 1 !important; /* Take remaining space */ - display: flex !important; - flex-direction: column !important; /* Keep text stacked vertically */ - justify-content: center !important; - align-items: flex-start !important; /* Left align text */ - min-width: 0 !important; /* Allow text to wrap */ - } - - /* Ensure dropdown menu items display correctly */ - .dropdown-menu li { - width: 100% !important; - display: block !important; - } - - .dropdown-menu li a { - width: 100% !important; - display: flex !important; - align-items: center !important; - } - .item-title { - font-size: 1.1rem !important; /* Better title size */ - important; /* Bolder title */ - color: #ffffff !important; /* White title */ - display: block !important; - margin-bottom: 0.25rem !important; - line-height: 1.2 !important; /* Better line height */ - white-space: nowrap !important; /* Prevent wrapping for mobile */ - overflow: hidden !important; - text-overflow: ellipsis !important; /* Add ellipsis for long titles */ - } - - .item-description { - font-size: 0.9rem !important; /* Smaller description */ - color: rgba(255, 255, 255, 0.8) !important; /* Slightly transparent */ - line-height: 1.3 !important; /* Better line height */ - display: -webkit-box !important; - -webkit-line-clamp: 2 !important; /* Limit to 2 lines */ - line-clamp: 2 !important; /* Standard property for compatibility */ - -webkit-box-orient: vertical !important; - overflow: hidden !important; - text-overflow: ellipsis !important; - } /* Tech marquee adjustments */ - .tech-icon { - min-width: 35px; - min-height: 35px; - max-width: 65px; - max-height: 65px; - } - - /* Mobile debug - add a subtle border to verify mobile styles are active */ - .dropdown-item-content { - border-left: 2px solid rgba(82, 238, 245, 0.3) !important; - } -} - -/* Desktop media query - Reset mobile styles for larger screens */ -@media (min-width: 769px) { - /* Hide hamburger menu on desktop */ - .hamburger-menu { - display: none !important; - } - - /* Show nav links normally on desktop */ - .nav-links { - position: static !important; - width: auto !important; - height: auto !important; - background: transparent !important; - backdrop-filter: none !important; - -webkit-backdrop-filter: none !important; - flex-direction: row !important; - justify-content: flex-end !important; - align-items: center !important; - gap: 2rem !important; - z-index: auto !important; - transition: none !important; - padding: 0 !important; - display: flex !important; - overflow: visible !important; - box-shadow: none !important; - left: auto !important; - } - - /* Reset nav link styles for desktop */ - .nav-links li { - width: auto !important; - text-align: left !important; - margin-bottom: 0 !important; - } - .nav-link { - font-size: 1.5rem !important; /* Increased from 1rem for better readability */ - padding: 0.8rem 1.2rem !important; - width: auto !important; - background: transparent !important; - border: none !important; - border-radius: 0 !important; - } - - /* Reset dropdown menus for desktop */ - .dropdown-menu { - position: absolute !important; - opacity: 0 !important; - visibility: hidden !important; - transform: translateY(10px) !important; - margin-top: 0.5rem !important; - background: #100732 !important; - } - - .dropdown:hover .dropdown-menu { - opacity: 1 !important; - visibility: visible !important; - transform: translateY(0) !important; - } -} - -@media (max-width: 480px) { - .tech-icon { - min-width: 30px; - min-height: 30px; - max-width: 50px; - max-height: 50px; - } -} - -.exp-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 2rem; - justify-items: center; - max-width: 1300px; - margin: 0 auto; - padding: 0 2rem; -} - -.exp-item { - background: rgba(0, 0, 0, 0.45); - border-radius: 16px; - padding: 2.2rem; - backdrop-filter: blur(15px); - border: 1px solid rgba(255, 255, 255, 0.2); - transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); - width: 100%; - max-width: 320px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - min-height: 360px; - text-align: center; - position: relative; - overflow: hidden; - cursor: pointer; -} - -.exp-item::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(82, 238, 245, 0.05) 0%, rgba(162, 171, 255, 0.03) 100%); - opacity: 0; - transition: opacity 0.4s ease; -} - -.exp-item:hover { - transform: translateY(-10px) scale(1.03); - background: rgba(0, 0, 0, 0.65); - border-color: rgba(82, 238, 245, 0.5); - box-shadow: - 0 20px 50px rgba(82, 238, 245, 0.3), - 0 8px 20px rgba(0, 0, 0, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.15), - 0 0 0 1px rgba(82, 238, 245, 0.2); -} - -.exp-item:hover::before { - opacity: 1; -} - -.exp-item img { - width: 110px; - height: auto; - margin-bottom: 1.5rem; - opacity: 0.95; - transition: all 0.4s ease; - filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); -} - -.exp-item:hover img { - opacity: 1; - transform: scale(1.05); - filter: drop-shadow(0 6px 12px rgba(82, 238, 245, 0.3)); -} - -.exp-item p:first-of-type { - margin-top: 0; - margin-bottom: 1.2rem; - font-size: 1.5rem; - text-align: center; - - color: #ffffff; - text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9); - letter-spacing: 0.8px; - position: relative; - z-index: 2; - line-height: 1.2; -} - -.exp-item .exp-description { - margin-top: 0; - font-size: 1.05rem; - line-height: 1.65; - text-align: center; - color: rgba(255, 255, 255, 0.95); - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); - - position: relative; - z-index: 2; - max-width: 100%; - opacity: 0.9; - transition: opacity 0.3s ease; -} - -.exp-item:hover .exp-description { - opacity: 1; - color: rgba(255, 255, 255, 1); -} - -/* Responsive design for expertise grid */ -@media (max-width: 1024px) { - .exp-grid { - gap: 1.5rem; - max-width: 100%; - padding: 0 2rem; - grid-template-columns: repeat(4, 1fr); - } - - .exp-item { - padding: 1.8rem; - max-width: 280px; - min-height: 320px; - } - - .exp-item img { - width: 100px; - margin-bottom: 1.2rem; - } - - .exp-item p:first-of-type { - font-size: 1.3rem; - margin-bottom: 0.9rem; - } - - .exp-item .exp-description { - font-size: 0.95rem; - line-height: 1.5; - } -} - -@media (max-width: 768px) { - .exp-grid { - gap: 1.2rem; - padding: 0 1.5rem; - grid-template-columns: repeat(2, 1fr); - } - - .exp-item { - padding: 1.5rem; - max-width: 100%; - min-height: 300px; - } - - .exp-item img { - width: 90px; - margin-bottom: 1rem; - } - - .exp-item p:first-of-type { - font-size: 1.2rem; - margin-bottom: 0.8rem; - } - .exp-item .exp-description { - font-size: 0.9rem; - line-height: 1.4; - margin-top: 0.5rem; - } -} - -@media (max-width: 480px) { - .exp-grid { - gap: 1rem; - padding: 0 1rem; - grid-template-columns: 1fr; - } - - .exp-item { - padding: 1.2rem; - max-width: 300px; - min-height: 260px; - margin: 0 auto; - } - - .exp-item img { - width: 80px; - margin-bottom: 1rem; - } - - .exp-item p:first-of-type { - font-size: 1.1rem; - margin-bottom: 0.7rem; - } - - .exp-item .exp-description { - font-size: 0.85rem; - line-height: 1.5; - margin-top: 0.5rem; - } -} - -.about-section { - margin-bottom: var(--gap); - padding-top: 9rem; - padding-bottom: 4rem; -} - -.about-section h2 { - font-size: 2.4em; - margin-bottom: 20px; - color: #52eef5; -} - -.about-section p { - font-size: 1.3em; - 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, -.footer-col { - flex: 1; -} - -.mission h2, -.vision h2 { - font-size: 2.15em; - margin-bottom: 15px; -} - -.mission p, -.vision p { - font-size: 1.2em; - line-height: 1.5; -} - -/* Footer Styles */ -.site-footer { - background-color: #0f172a; /* Dark blue-gray background */ - color: var(--text-muted); - padding: 50px 0; - font-size: 1.4rem; -} - -.footer-content { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - gap: 30px; - margin-bottom: 40px; -} - -.footer-col { - flex: 1; - min-width: 220px; /* Ensures columns don't get too narrow */ -} - -.footer-col-logo .logo { - font-size: 2.2rem; - color: #fff; /* White logo text */ - margin-bottom: 20px; - display: inline-block; - /* Removed gradient for simpler, consistent look */ - background: none; - -webkit-background-clip: initial; - background-clip: initial; - text-shadow: none; /* Remove text shadow if not desired */ - border: none; - padding: 0; -} - -/* Footer logo description paragraph */ -.footer-col-logo p { - margin-top: 15px; - margin-bottom: 15px; - line-height: 1.6; - color: var(--text-muted); - max-width: 350px; - font-size: 1.3rem; -} - -/* Footer logo image styles */ -.footer-logo-img { - height: 200px; - width: auto; - max-width: 550px; - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); - transition: all 0.3s ease; -} - -.footer-col-logo .logo:hover .footer-logo-img { - filter: drop-shadow(0 4px 8px rgba(90, 107, 255, 0.3)); - transform: scale(1.02); -} - -.footer-col h3 { - font-size: 1.8rem; - color: #52eef5; /* Cyan heading text */ - margin-bottom: 20px; - - /* Removed gradient for simpler, consistent look */ - background: none; - -webkit-background-clip: initial; - background-clip: initial; - text-shadow: none; /* Remove text shadow if not desired */ -} - -.footer-col ul { - list-style: none; - padding: 0; -} - -.footer-col ul li { - margin-bottom: 10px; -} - -/* Reduce line spacing in footer contact information */ -.footer-col ul li { - margin-bottom: 4px; -} - -.footer-col ul li p { - margin-bottom: 2px; - padding: 4px 0; - line-height: 1.3; -} - -.footer-col ul li a { - color: var(--text-muted); - text-decoration: none; - transition: color 0.3s ease; - font-size: 1.3rem; -} - -.footer-col ul li a:hover { - color: var(--primary-color); /* Use primary color for hover */ -} - -.footer-col p { - margin-bottom: 10px; - line-height: 1.7; - font-size: 1.3rem; -} - -/* Footer contact info with icons styling */ -.footer-col ul li p { - display: flex; - align-items: center; - margin-bottom: 2px; - padding: 4px 0; - font-size: 1.3rem; - line-height: 1.3; -} - -.footer-col ul li p i { - margin-right: 12px; - font-size: 1.5rem; - color: var(--primary-color); - min-width: 24px; - text-align: center; -} -.footer-col p a { /* Styling for links within paragraphs, e.g., email */ - color: var(--text-muted); - text-decoration: none; -} - -.footer-col p a:hover { - color: var(--primary-color); - text-decoration: underline; -} - -.footer-col .social-links { - display: flex; - align-items: center; - gap: 15px; - margin-top: 15px; -} - -.footer-col .social-links a { - color: var(--text-muted); - font-size: 1.6rem; - text-decoration: none; /* Remove underlines from social media icons */ - transition: color 0.3s ease, transform 0.3s ease; - padding: 10px; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - min-width: 45px; - min-height: 45px; -} - -.footer-col .social-links a:hover { - color: var(--primary-color); /* Use primary color for hover */ - transform: translateY(-2px); - background-color: rgba(var(--primary-color-rgb), 0.1); -} - -.footer-bottom { - text-align: center; - padding-top: 20px; - border-top: 1px solid rgba(255, 255, 255, 0.1); /* Light border */ - font-size: 1.25rem; -} - -.footer-bottom a { - color: #ffffff; /* White color for footer bottom links */ - text-decoration: none; /* Remove underline */ -} - -.footer-bottom a:hover { - color: #8b5cf6; - text-decoration: underline; -} - -/* General button styles */ -.btn { - display: inline-block; - text-decoration: none; - padding: 14px 28px; - border-radius: 8px; - - letter-spacing: 1px; - text-transform: uppercase; - position: relative; - overflow: hidden; - transition: all 0.3s ease; - cursor: pointer; - text-align: center; - color: #ffffff; - font-size: 1rem; - border: 2px solid rgba(255, 255, 255, 0.2); - box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3); - background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); -} - -.btn-primary { - display: inline-block; - text-decoration: none; - padding: 14px 28px; - border-radius: 8px; - - letter-spacing: 1px; - text-transform: uppercase; - position: relative; - overflow: hidden; - transition: all 0.3s ease; - cursor: pointer; - text-align: center; - color: #ffffff; - font-size: 1rem; - border: 2px solid rgba(255, 255, 255, 0.2); - box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3); - background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); -} - -.btn-primary:before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); - transition: all 0.8s ease; - z-index: -1; -} - -.btn:hover, -.btn-primary:hover { - transform: translateY(-3px) scale(1.02); - box-shadow: 0 15px 25px -10px rgba(var(--primary-color-rgb), 0.6); - background: linear-gradient(135deg, var(--primary-color-hover), var(--primary-color)); -} - -.btn-primary:hover:before { left: 100%; -} - -.contact-page-container { - padding-top: 0; /* Completely removed top padding to shift content all the way up */ - padding-bottom: 4rem; - color: #fff; - animation: none !important; /* Remove any animations */ - transition: none !important; /* Remove any transitions */ - transform: none !important; /* Ensure no transforms are applied */ -} - -#contact-us-section { - animation: none !important; - transition: none !important; - transform: none !important; -} - -#contact-us-section .contact-header { - text-align: center; - margin-bottom: 40px; - animation: none !important; - transition: none !important; -} - -#contact-us-section .contact-header h1 { - font-size: 4rem; - margin-bottom: 20px; -} - -#contact-us-section .contact-header p { - font-size: 1.3rem; - color: #ccc; - margin-bottom: 10px; -} - -.contact-content { - display: flex; - gap: 2rem; - flex-wrap: wrap; - justify-content: center; - align-items: stretch; -} - -.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: 1; - min-width: 300px; - max-width: 500px; -} - -.contact-info-container { - flex: 1; - min-width: 300px; - max-width: 500px; -} - -.contact-details { - list-style: none; - padding: 0; - margin-bottom: 2rem; -} - -.contact-details li { - margin-bottom: 1rem; - display: flex; - align-items: center; - padding: 1.2rem; - background: rgba(255, 255, 255, 0.05); - border-radius: 8px; -} - -.contact-details li i { - margin-right: 1rem; - color: #5a6bff; - font-size: 1.45rem; -} - -.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: 1.2rem; - margin-bottom: 1.5rem; - color: rgba(255, 255, 255, 0.8); -} - -.btn-book-consultation { - display: inline-block; - padding: 0.8rem 1.5rem; - background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 100%); - border: none; - border-radius: 8px; - color: white; - text-decoration: none; - font-size: 1.2rem; - transition: all 0.3s ease; -} - -.btn-book-consultation:hover { - background: linear-gradient(90deg, #6d7dff 0%, #b5c0ff 100%); - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(90, 107, 255, 0.4); -} - -/* ===== ENHANCED CONTACT FORM STYLING ===== */ -/* Form Group Container */ -.form-group { - margin-bottom: 1.8rem; - position: relative; -} - -/* Form Labels */ -.form-group label { - display: block; - margin-bottom: 0.6rem; - font-size: 1.1rem; - - color: #52eef5; - font-family: 'Inter', sans-serif; - letter-spacing: 0.5px; - text-transform: uppercase; -} - -/* Base Input Styling */ -.form-group input[type="text"], -.form-group input[type="email"], -.form-group select, -.form-group textarea { - width: 100%; - padding: 1rem 1.2rem; - font-size: 1.1rem; - font-family: 'Inter', sans-serif; - background: rgba(255, 255, 255, 0.08); - border: 2px solid rgba(255, 255, 255, 0.15); - border-radius: 12px; - color: #ffffff; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); - box-sizing: border-box; -} - -/* Textarea Specific Styling */ -.form-group textarea { - resize: vertical; - min-height: 120px; - line-height: 1.6; -} - -/* Input Hover States */ -.form-group input[type="text"]:hover, -.form-group input[type="email"]:hover, -.form-group select:hover, -.form-group textarea:hover { - background: rgba(255, 255, 255, 0.12); - border-color: rgba(82, 238, 245, 0.4); - transform: translateY(-1px); -} - -/* Placeholder Styling */ -.form-group input[type="text"]::placeholder, -.form-group input[type="email"]::placeholder, -.form-group textarea::placeholder { - color: rgba(255, 255, 255, 0.6); - font-style: italic; -} - -/* Input Focus States */ -.form-group input[type="text"]:focus, -.form-group input[type="email"]:focus, -.form-group select:focus, -.form-group textarea:focus { - outline: none; - border-color: #52eef5; - background: rgba(255, 255, 255, 0.15); - box-shadow: - 0 0 20px rgba(82, 238, 245, 0.3), - 0 0 40px rgba(82, 238, 245, 0.1), - inset 0 1px 3px rgba(0, 0, 0, 0.1); - transform: translateY(-2px); -} - -/* Select Dropdown Styling */ -.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%2352eef5%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 1rem center; - background-size: 14px auto; - padding-right: 3rem; - cursor: pointer; -} - -/* Select option styling */ -.form-group select option { - background: #1a1a2e; - color: #ffffff; - padding: 0.5rem; -} - -/* Enhanced Submit Button */ -.btn-send-message, -.btn-primary.btn-send-message { - display: block; - width: 100%; - padding: 1.2rem 2rem; - background: linear-gradient(135deg, #52eef5 0%, #667eea 50%, #764ba2 100%); - border: none; - border-radius: 12px; - color: #ffffff; - font-size: 1.2rem; - - font-family: 'Inter', sans-serif; - text-transform: uppercase; - letter-spacing: 1.5px; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - position: relative; - overflow: hidden; - box-shadow: - 0 8px 25px rgba(82, 238, 245, 0.3), - 0 4px 12px rgba(102, 126, 234, 0.2); - margin-top: 1rem; -} - -.btn-send-message::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); - transition: left 0.6s ease; -} - -.btn-send-message:hover { - background: linear-gradient(135deg, #45d1dc 0%, #5a73e8 50%, #6b4ba8 100%); - transform: translateY(-3px) scale(1.02); - box-shadow: - 0 12px 35px rgba(82, 238, 245, 0.4), - 0 6px 18px rgba(102, 126, 234, 0.3); -} - -.btn-send-message:hover::before { - left: 100%; -} - -.btn-send-message:active { - transform: translateY(-1px) scale(1.01); - transition: all 0.1s ease; -} - -/* Form Message Display */ -.form-message { - padding: 1rem; - border-radius: 8px; - margin-bottom: 1.5rem; - - text-align: center; - display: none; -} - -.form-message.success { - background: rgba(34, 197, 94, 0.15); - border: 2px solid rgba(34, 197, 94, 0.3); - color: #22c55e; -} - -.form-message.error { - background: rgba(239, 68, 68, 0.15); - border: 2px solid rgba(239, 68, 68, 0.3); - color: #ef4444; -} - -/* Form Validation Styling */ -.form-group.error input, -.form-group.error select, -.form-group.error textarea { - border-color: #ef4444; - background: rgba(239, 68, 68, 0.1); -} - -.form-group.success input, -.form-group.success select, -.form-group.success textarea { - border-color: #22c55e; - background: rgba(34, 197, 94, 0.1); -} - -.case-studies-hero { - padding-top: 8rem; - padding-bottom: 3rem; - text-align: left; -} - -.case-studies-hero h1 { - font-size: 3.35rem; - margin-bottom: 1rem; - /* Inherit the beautiful gradient and glow from main h1 styling */ - font-family: 'VT323', monospace; -} - -.case-studies-hero p { - font-size: 1.3rem; - color: rgba(236, 236, 236, 0.8); - max-width: 700px; - margin-bottom: 2rem; - line-height: 1.6; - font-family: 'VT323', monospace; -} - -.case-studies-filters { - padding: 1rem 0; - background-color: transparent; -} - -.case-studies-filters .container { - padding-top: 0; - padding-bottom: 0; -} - -.filter-controls { - display: flex; - align-items: center; - gap: 1.5rem; -} - -.dropdown-filter .dropdown-toggle-filter { - background-color: #0D0D1A; - color: var(--fg); - padding: 0.75rem 1.5rem; - border: 1px solid #2A2A40; border-radius: 8px; - font-size: 1.1rem; - cursor: pointer; - display: flex; - align-items: center; - justify-content: space-between; - min-width: 180px; -} - -.dropdown-filter .dropdown-toggle-filter i { - margin-left: 0.5rem; -} - -.search-filter { - display: flex; - align-items: center; - background-color: #0D0D1A; - padding-left: 1rem; - border: 1px solid #2A2A40; - border-radius: 8px; - flex-grow: 1; -} - -.search-filter i { - margin-right: 0.5rem; - color: var(--fg); - font-size: 1.1rem; -} - -.search-filter input[type="text"] { - background: transparent; - border: none; - color: var(--fg); - font-size: 1.1rem; - width: 100%; - padding: 0.75rem 1rem; - 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; - gap: 2rem; -} - -.case-study-card { - background-color: #0D0D1A; - border: 1px solid #2A2A40; - border-radius: 12px; - padding: 2rem; - display: flex; - flex-direction: column; - height: 100%; - 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; - width: auto; - max-width: 120px; - object-fit: contain; - margin-bottom: 1.5rem; - align-self: flex-start; -} - -.case-study-card .health-plus-logo { - filter: brightness(0) invert(1); -} - -.case-study-card h3 { - font-size: 1.7rem; - color: #52eef5; - margin-bottom: 0.75rem; - -} - -.discuss-project-cta h2 { - font-size: 2.15rem; - color: #52eef5; - margin: 0; - background: none; - -webkit-background-clip: unset; - background-clip: unset; - text-shadow: none; - font-family: 'VT323', monospace; -} - -.btn-discuss-project { - background-color: #1E1E2F; - color: var(--fg); - padding: 0.7rem 1.5rem; - border: 1px solid #3A3A5A; - border-radius: 8px; text-decoration: none; - font-size: 1.2rem; - - transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; -} - -.btn-discuss-project:hover { - background-color: #2C2C44; - border-color: #4F4F6A; - transform: translateY(-2px); -} - -.nav-links .nav-link.active { - color: #ffffff; - -} - -.nav-links .nav-link.active::after { - content: ''; - position: absolute; - bottom: -2px; - left: 7.5%; - width: 85%; - height: 3px; - background: linear-gradient(90deg, #6e7adf 0%, #a2abff 100%); - border-radius: 3px; -} - -.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: 1.1rem; -} - -.contact-info-container .contact-details li { - font-size: 1.1rem; - margin-bottom: 15px; -} - -.read-more:hover { - color: #ffffff; - text-decoration: underline; - padding: 15px; - background-color: rgba(255, 255, 255, 0.08); - border-radius: 8px; - border: 1px solid rgba(255, 255, 255, 0.15); - display: flex; - align-items: center; - 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; - margin-right: 12px; - color: #a2abff; -} - -#generative-ai { - padding-top: 9rem; - padding-bottom: 4rem; - text-align: center; -} - -.generative-ai-header h1 { font-size: 3.6em; - margin-bottom: 20px; - /* Inherit the beautiful gradient and glow from main h1 styling */ -} - -.generative-ai-header p { - font-size: 1.45em; - 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 h3 { - font-size: 2rem; - margin-bottom: 1rem; - color: #52eef5; -} - -.feature-card p { - font-size: 1.2rem; - color: #ccc; -} - -.why-choose-gyannetra, -.blogs-case-studies { - margin-top: 80px; -} - -.why-choose-gyannetra h2, -.blogs-case-studies h2 { - font-size: 3em; - margin-bottom: 30px; - color: #52eef5; -} - -.why-choose-items { - display: flex; - justify-content: center; - gap: 50px; - flex-wrap: wrap; -} - -.why-choose-items p { - font-size: 1.45em; - color: #ccc; -} - -.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 img { - width: 100%; - height: 180px; - object-fit: cover; -} - -.blog-card h3 { - font-size: 1.2em; - color: #fff; - margin: 15px; -} - -.blog-card p { - font-size: 1.2rem; - color: #ccc; - margin: 0 15px 15px; -} - -.explore-capabilities { - margin-top: 50px; -} - -.industry-hero { - padding: 64px 0; - text-align: left; - position: relative; - overflow: hidden; - min-height: 60vh; - background-size: cover; - background-position: center; -} - -.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: 'VT323', monospace; - font-size: 4rem; - - /* Inherit the beautiful gradient and glow from main h1 styling */ - margin-bottom: 20px; - line-height: 1.2; -} - -.industry-hero p { - font-family: 'VT323', monospace; - font-size: 1.45rem; - color: #e0e0e0; - line-height: 1.6; - margin-bottom: 30px; -} - -.industry-hero .btn-primary { - margin-top: 20px; -} - -/* Removed marketing-hero specific styling */ - -.hero-image-container { - width: 200px; - height: 200px; -} - -.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: 'VT323', monospace; - font-size: 3rem; - color: #52eef5; - margin-bottom: 40px; - text-align: left; - padding-left: 15px; -} - -.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); - 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: 60px; - height: 60px; - margin-bottom: 1rem; - filter: drop-shadow(0 0 8px rgba(52, 152, 219, 0.5)); -} - -.solution-item h3 { font-size: 1.5rem; - color: var(--fg); - margin-bottom: 0.5rem; - -} - -.solution-item p { - font-size: 1.1rem; - color: rgba(236, 236, 236, 0.8); -} - -.gyannetra-advantage-section .advantage-columns { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 2rem; - margin-top: 2rem; - justify-content: center; -} - -.gyannetra-advantage-section .advantage-list { - list-style: none; - padding-left: 0; - margin: 0 auto; - max-width: 400px; -} - -.gyannetra-advantage-section .advantage-list li { - font-size: 1.3rem; - color: var(--fg); - padding: 0.5rem 0; - position: relative; - padding-left: 1.7em; - line-height: 1.4; -} - -.gyannetra-advantage-section .advantage-list li::before { - content: "•"; - color: #3498db; - font-size: 1.8rem; - position: absolute; - left: 0; - top: 0.65em; - transform: translateY(-50%); - line-height: 1; -} - -.insights-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 2rem; -} - -.insight-item { - background: rgba(20, 30, 50, 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; -} - -.insight-item h4 { - font-size: 1.45rem; - - margin-bottom: 0.75rem; - color: var(--fg); -} - -.insight-item p { - font-size: 1.1rem; - color: rgba(236, 236, 236, 0.8); - margin-bottom: 1.5rem; - flex-grow: 1; -} - -.insight-item .read-more { - display: inline-block; - font-size: 1.1rem; - - color: #a2abff; - text-decoration: none; - text-transform: uppercase; - letter-spacing: 0.5px; - align-self: flex-start; -} - -/* Media Queries */ -@media (min-width: 768px) { - .case-studies-grid { - grid-template-columns: repeat(2, 1fr); + .contact-page-container .widened-contact-info { + max-width: 95% !important; + min-width: auto !important; + padding: 3rem !important; } } @media (max-width: 992px) { - .contact-content { - flex-direction: column; - padding: 0; + .contact-page-container .widened-contact-info { + min-width: auto !important; + max-width: 90% !important; + padding: 2rem !important; } - - .contact-form-container, - .contact-info-container { - max-width: 100%; - padding-left: 30px; - padding-right: 30px; + + .contact-page-container .widened-contact-info .contact-details { + max-width: 100% !important; } - - .contact-info-container { - margin-top: 0; + + .contact-page-container .widened-contact-info .contact-details li { + font-size: 1.3rem !important; + padding: 1.5rem !important; + } + + .contact-page-container .widened-contact-info .expert-advice-card { + max-width: 100% !important; + padding: 2rem !important; } } @media (max-width: 768px) { - .case-studies-hero h1 { - font-size: 2.2rem; /* Adjusted for mobile */ - } .case-studies-hero p, - #contact-us-section .contact-header p { - font-size: 1.2rem; - } - - .filter-controls { - flex-direction: column; - align-items: stretch; - gap: 1rem; - } - - .dropdown-filter .dropdown-toggle-filter { - width: 100%; - } - - .search-filter { - max-width: none; - } - - .discuss-project-cta .container { - flex-direction: column; - text-align: center; - } .discuss-project-cta h2 { - margin-bottom: 1.5rem; - font-size: 1.9rem; - } - - .btn-discuss-project { - width: 100%; - text-align: center; - } #contact-us-section .contact-header h1 { - font-size: 3.35rem; - } - - /* Enhanced Contact Form Responsive Styles */ - .contact-form-container { - padding: 1.5rem; - } - - .form-group { - margin-bottom: 1.5rem; - } - - .form-group label { - font-size: 1rem; - margin-bottom: 0.5rem; - } - - .form-group input[type="text"], - .form-group input[type="email"], - .form-group select, - .form-group textarea { - padding: 1rem; - font-size: 1rem; - } - - .form-group textarea { - min-height: 100px; - } - - .btn-send-message { - padding: 1rem 1.5rem; - font-size: 1.1rem; - } - - .nav-links { - display: none; - } - - .section { - padding: 60px 0; - } - - .section .container { - padding: 30px; - } - - .page-header { - padding: 70px 0 40px; - } .page-header h1 { - font-size: 3rem; - } - - .grid-2 { - grid-template-columns: 1fr; - } .btn-outline { - display: none; /* Ensure it's hidden on smaller screens if that's the intent */ - } -} - -/* ===== ADDITIONAL MOBILE FORM ENHANCEMENTS ===== */ -@media (max-width: 480px) { - .contact-form-container, - .contact-info-container { - padding: 1rem; - margin: 0.5rem 0; - } - - .form-group { - margin-bottom: 1.2rem; - } - - .form-group label { - font-size: 0.9rem; - } - - .form-group input[type="text"], - .form-group input[type="email"], - .form-group select, - .form-group textarea { - padding: 0.8rem; - font-size: 0.95rem; - } - - .btn-send-message { - padding: 1rem; - font-size: 1rem; - letter-spacing: 1px; - } - - #contact-us-section .contact-header h1 { - font-size: 2.5rem; - } - - #contact-us-section .contact-header p { - font-size: 1.1rem; - } -} - -/* ===== MODERN FORM ANIMATION ENHANCEMENTS ===== */ -/* Floating label effect */ -.form-group { - position: relative; -} - -.form-group.floating-label input:focus + label, -.form-group.floating-label input:not(:placeholder-shown) + label, -.form-group.floating-label textarea:focus + label, -.form-group.floating-label textarea:not(:placeholder-shown) + label { - transform: translateY(-1.5rem) scale(0.85); - color: #52eef5; -} - -/* Loading animation for form submission */ -.btn-send-message.loading { - pointer-events: none; - opacity: 0.7; - position: relative; - color: transparent; -} - -.btn-send-message.loading::after { - content: ''; - position: absolute; - width: 20px; - height: 20px; - top: 50%; - left: 50%; - margin-left: -10px; - margin-top: -10px; - border: 2px solid #ffffff; - border-radius: 50%; - border-top-color: transparent; - animation: btn-loading-spinner 1s ease infinite; -} - -@keyframes btn-loading-spinner { - from { - transform: rotate(0turn); - } - to { - transform: rotate(1turn); - } -} - -/* Form field success checkmark animation */ -.form-group.success::after { - content: '✓'; - position: absolute; - right: 1rem; - top: 50%; - transform: translateY(-50%); - color: #22c55e; - - font-size: 1.2rem; - animation: checkmark-appear 0.3s ease; -} - -@keyframes checkmark-appear { - from { - opacity: 0; - transform: translateY(-50%) scale(0); - } - to { - opacity: 1; - transform: translateY(-50%) scale(1); - } -} - -/* Enhanced contact info styling */ -.contact-info-container h2 { - font-size: 1.8rem; - color: #52eef5; - margin-bottom: 1.5rem; - font-family: 'VT323', monospace; - text-transform: uppercase; - letter-spacing: 2px; -} - -.contact-details li { - font-size: 1.1rem; - margin-bottom: 1rem; - padding: 1rem; - background: rgba(255, 255, 255, 0.03); - border-left: 3px solid #52eef5; - border-radius: 0 8px 8px 0; - transition: all 0.3s ease; -} - -.contact-details li:hover { - background: rgba(82, 238, 245, 0.08); - transform: translateX(5px); -} - -.contact-details li i { - margin-right: 1rem; - color: #52eef5; - font-size: 1.2rem; - width: 20px; - text-align: center; -} - -.footer-col p { - font-size: 1.2rem; - color: #ffffff; -} - -.footer-col h3 { - margin-bottom: 1rem; - font-size: 1.5rem; - color: #52eef5; -} - -/* Responsive styles for logo images */ -@media (max-width: 768px) { - .logo-img { - height: 55px; - max-width: 240px; - } .footer-logo-img { - height: 120px; - max-width: 350px; - } - - .logo { - min-height: 60px; - padding: 0.4rem 0.8rem; - } - - /* Footer responsive adjustments */ - .footer-content { - gap: 20px; - text-align: center; - } - - .footer-col { - min-width: 200px; - } - - .footer-col-logo p { - max-width: 100%; - text-align: center; - } - - .footer-col .social-links { - justify-content: center; - } -} - -@media (max-width: 480px) { - .logo-img { - height: 45px; - max-width: 180px; - } .footer-logo-img { - height: 100px; - max-width: 300px; - } - .logo { - min-height: 50px; - padding: 0.3rem 0.6rem; - } /* Footer mobile adjustments */ - .footer-content { - flex-direction: column; - gap: 25px; - } - - .footer-col ul li p { - padding: 3px 0; - font-size: 0.9rem; - margin-bottom: 1px; - line-height: 1.2; - } - - .footer-col ul li p i { - margin-right: 10px; - font-size: 1rem; - min-width: 18px; - } - - .footer-col .social-links a { - min-width: 35px; - min-height: 35px; - font-size: 1.1rem; - } -} - -/* =================================================================== */ -/* CONSOLIDATED INLINE STYLES FROM ALL HTML FILES */ -/* =================================================================== */ - -/* Navbar scroll effects - Common across all pages */ -.site-header { - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 1000; - background: transparent !important; - backdrop-filter: blur(0px); - -webkit-backdrop-filter: blur(0px); - transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); - border-bottom: 1px solid transparent; - box-shadow: none; - display: flex; - align-items: center; - width: 100%; -} - -.site-header.scrolled { - background: transparent !important; - backdrop-filter: blur(30px); - -webkit-backdrop-filter: blur(30px); - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); -} - -.navbar { - padding: 1rem 2rem; - max-width: none !important; - margin: 0 !important; - background: transparent !important; - border-radius: 0 !important; - border: none !important; - box-shadow: none !important; - position: relative; - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; -} - -/* Override any existing navbar container styles */ -.site-header .navbar, -.site-header .container, -.navbar .container { - background: transparent !important; - border: none !important; - box-shadow: none !important; - border-radius: 0 !important; -} - -/* Hero section layout stabilization - from index.html */ -/* Ensure body has top padding to account for fixed navbar */ -body { - padding-top: 80px; -} - -/* HERO SECTION LAYOUT STABILIZATION */ -#hero { - /* Prevent layout shift during load */ - min-height: calc(100vh - 80px); - height: calc(100vh - 80px); - margin-top: 0 !important; - padding-top: 0 !important; -} - -.hero-container { - /* Stabilize hero content positioning */ - height: 100%; - min-height: inherit; - align-items: center; - justify-content: flex-start; - padding-top: 2rem; - padding-bottom: 2rem; -} - -.hero-content { - /* Prevent content shifting */ - position: relative; - transform: none !important; - opacity: 1 !important; - visibility: visible !important; -} - -/* Prevent FOUC and layout shifts */ -.hero-content h1, -.hero-content p, -.hero-content .btn-primary { - opacity: 1 !important; - transform: none !important; - visibility: visible !important; -} - -/* Pure #52eef5 heading with glow */ -#hero .hero-content h1 { - color: #52eef5 !important; - text-shadow: none !important; - background: none !important; - -webkit-text-fill-color: #52eef5 !important; - -webkit-text-stroke: 0.3px rgba(82, 238, 245, 0.3); - filter: none !important; - -webkit-box-reflect: none !important; -} - -/* Global override to ensure no shadows on hero h1 */ -#hero .hero-content h1, -.hero-content h1, -#hero h1 { - text-shadow: none !important; - filter: none !important; - -webkit-box-reflect: none !important; - box-shadow: none !important; -} - -/* Typewriter Effect Styles */ -.typewriter-text { - display: inline-block; - position: relative; -} - -.cursor { - display: inline-block; - width: 3px; - height: 1em; - background-color: #52eef5; - margin-left: 2px; - animation: blink 1s infinite; - vertical-align: text-bottom; -} - -@keyframes blink { - 0%, 50% { opacity: 1; } - 51%, 100% { opacity: 0; } -} - -/* Custom hero button styles - Enhanced visibility and appeal */ -/* Special styles for hero buttons across all pages - all hero section types */ -#hero .btn-primary, -.hero-section .btn-primary, -.industry-hero .btn-primary, -.travel-hero .btn-primary, -.finance-hero .btn-primary, -.manufacturing-hero .btn-primary, -.marketing-hero .btn-primary, -.media-hero .btn-primary { - background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%) !important; - border: 2px solid rgba(255, 255, 255, 0.3) !important; - box-shadow: - 0 8px 32px rgba(109, 40, 217, 0.4), - 0 4px 16px rgba(147, 51, 234, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; padding: 18px 36px !important; - margin-top: 24px !important; - important; - letter-spacing: 1.5px !important; - text-transform: uppercase !important; - font-size: 1.3rem !important; - border-radius: 12px !important; - color: #ffffff !important; - text-decoration: none !important; - display: inline-block !important; - position: relative !important; - overflow: hidden !important; - transition: all 0.3s ease !important; - cursor: pointer !important; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; - backdrop-filter: blur(8px) !important; -} - -/* Hover effects for enhanced interactivity */ -#hero .btn-primary:hover, -.hero-section .btn-primary:hover, -.industry-hero .btn-primary:hover, -.travel-hero .btn-primary:hover, -.finance-hero .btn-primary:hover, -.manufacturing-hero .btn-primary:hover, -.marketing-hero .btn-primary:hover, -.media-hero .btn-primary:hover { - transform: translateY(-3px) scale(1.05) !important; - background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important; - border-color: rgba(255, 255, 255, 0.5) !important; - box-shadow: - 0 12px 40px rgba(109, 40, 217, 0.6), - 0 6px 20px rgba(147, 51, 234, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.3), - 0 0 20px rgba(168, 85, 247, 0.5); - text-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important; -} - -/* Active/pressed state */ -#hero .btn-primary:active, -.hero-section .btn-primary:active, -.industry-hero .btn-primary:active, -.travel-hero .btn-primary:active, -.finance-hero .btn-primary:active, -.manufacturing-hero .btn-primary:active, -.marketing-hero .btn-primary:active, -.media-hero .btn-primary:active { - transform: translateY(-1px) scale(1.02) !important; - transition: all 0.1s ease !important; -} - -/* Subtle animation for attention */ -@keyframes heroButtonPulse { - 0%, 100% { - box-shadow: - 0 8px 32px rgba(109, 40, 217, 0.4), - 0 4px 16px rgba(147, 51, 234, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - } - 50% { - box-shadow: - 0 8px 32px rgba(109, 40, 217, 0.6), - 0 4px 16px rgba(147, 51, 234, 0.5), - inset 0 1px 0 rgba(255, 255, 255, 0.2); - } -} - -#hero .btn-primary, -.hero-section .btn-primary, -.industry-hero .btn-primary, -.travel-hero .btn-primary, -.finance-hero .btn-primary, -.manufacturing-hero .btn-primary, -.media-hero .btn-primary { - animation: heroButtonPulse 3s ease-in-out infinite !important; -} - -/* Ensure hero content is not affected by scroll animations */ -#hero .hero-content.animate-on-scroll { - animation: none !important; - text-align: center !important; -} - -#hero .hero-content.animate-on-scroll.animated { - transform: none !important; - opacity: 1 !important; - text-align: center !important; -} - -/* Override any fadeInUp animations for hero content */ -#hero .hero-content p { - animation: none !important; - animation-delay: 0s !important; -} - -/* Ensure hero heading maintains its glow animation */ -#hero .hero-content h1 { - animation: pulseGlow 3s ease-in-out infinite alternate !important; - animation-delay: 0s !important; -} - -/* Force center alignment for hero content at all times */ -#hero .hero-content { - text-align: center !important; - align-items: center !important; - justify-content: center !important; -} - -/* Prevent any FOUC in hero section */ -#hero * { - visibility: visible !important; - opacity: 1 !important; - transform: none !important; - transition: none !important; -} - -/* FOUC prevention */ -.fouc-prevention { - visibility: hidden !important; -} - -/* Exception for critical elements during loading */ -.fouc-prevention .site-header, -.fouc-prevention #hero { - visibility: visible !important; -} - -/* Smooth transition once content is loaded */ -html:not(.fouc-prevention) { - transition: opacity 0.3s ease-in; - opacity: 1; -} - -/* Ensure consistent hero layout across different screen loads */ -@media (min-width: 1024px) { - .hero-container { - padding: 12rem 4% 2rem 4%; - } -} - -@media (min-height: 600px) { - #hero { - height: 80vh; - min-height: 600px; - } -} - -@media (max-height: 599px) { - #hero { - height: auto; - min-height: 500px; - padding: 2rem 0; - } - - .hero-container { - height: auto; - min-height: 500px; - } -} - -/* Mobile responsive adjustments */ -@media (min-width: 769px) and (max-width: 1023px) { - .hero-container { - padding: 10rem 4% 2rem 4%; - } -} - -@media (max-width: 768px) { - #hero { - height: 70vh; - min-height: 500px; - padding-top: 1rem; /* Additional top padding for mobile */ - } - - .hero-container { - padding: 2rem 4% 1rem 4%; /* Increased top padding to prevent navbar overlap */ - justify-content: center; /* Ensure content is properly centered */ - } - - .hero-content { - margin-top: 1rem; /* Extra margin to push content below navbar */ - } .hero-content h1 { - font-size: 3rem; - line-height: 1.2; /* Tighter line height for mobile */ - margin-bottom: 1rem; - text-shadow: none !important; /* Removed shadow for mobile */ - letter-spacing: 0.5px; /* Slightly reduced letter spacing for mobile */ - } - .hero-content p { - font-size: 1.3rem; - margin-bottom: 1.5rem; - } - - #technologies { - padding-top: 1.5rem; } -} - -/* Extra small mobile devices */ -@media (max-width: 480px) { - #hero { - height: 65vh; - min-height: 450px; - padding-top: 1.5rem; - } - - .hero-container { - padding: 2.5rem 3% 1rem 3%; /* Even more top padding for smallest screens */ - } - - .hero-content { - margin-top: 1.5rem; /* Extra margin for smallest screens */ - } .hero-content h1 { - font-size: 2.4rem; /* Smaller font for very small screens */ - line-height: 1.1; - margin-bottom: 0.8rem; - text-shadow: none !important; /* Removed shadow for smallest screens */ - letter-spacing: 0.3px; - filter: brightness(1.08); /* Slightly increased brightness for better visibility */ - } - .hero-content p { - font-size: 1.2rem; - margin-bottom: 1.2rem; - } - .hero-content .btn-primary { - padding: 0.8rem 1.5rem; - font-size: 1.1rem; - } -} - -.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-size: 1.15rem; -} - -.item-description { - font-size: 0.95rem; - opacity: 0.8; -} - -.section-heading { - font-size: 3rem; - - text-align: center; - margin: var(--gap) 0; - letter-spacing: 0.7px; - position: relative; - display: inline-block; - width: 100%; - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ -} - -h1,h2,h3,h4,h5,h6 { - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ - letter-spacing: 0.7px; - -} - -.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); - 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%); -} - -/* Modern Technology Cards Animation */ -.tech-cards-container { - position: relative; - width: 100%; - overflow: hidden; - padding: 30px 0; - background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.2)); - border-radius: 20px; - margin: 10px 0; - box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3); -} - -.tech-cards-track { - display: flex; - animation: techCardsFlow 75s linear infinite; - will-change: transform; - gap: 70px; /* Further increased gap between cards */ -} - -.tech-cards-track:hover { - animation-play-state: paused; -} - -@keyframes techCardsFlow { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(-50%); - } -} - -.tech-card { - flex: 0 0 auto; - width: 240px; - height: 220px; - position: relative; - cursor: pointer; - transition: all 0.3s ease; - transform-style: preserve-3d; - margin: 5px 0; /* Reduced top/bottom margin */ - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); -} - -.tech-card-inner { position: relative; - width: 100%; - height: 100%; - background: rgba(20, 25, 45, 0.5); /* More transparent background like navbar */ - border: 1px solid rgba(255, 255, 255, 0.1); /* Similar to navbar border when scrolled */ - border-radius: 16px; - padding: 25px 15px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; backdrop-filter: blur(30px); - -webkit-backdrop-filter: blur(30px); - overflow: hidden; - transition: all 0.3s ease; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.3), - 0 4px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.tech-card-inner::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(45deg, - transparent 30%, - rgba(var(--primary-color-rgb), 0.2) 50%, - transparent 70%); - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-card:hover .tech-card-inner::before { - opacity: 1; -} - -.tech-card:hover { - transform: translateY(-10px); - z-index: 10; -} - -.tech-card:hover .tech-card-inner { - background: linear-gradient(135deg, - rgba(var(--primary-color-rgb), 0.2) 0%, - rgba(255, 255, 255, 0.1) 50%, - rgba(var(--primary-color-rgb), 0.1) 100%); - backdrop-filter: blur(35px); - -webkit-backdrop-filter: blur(35px); - border: 1px solid rgba(255, 255, 255, 0.1); /* Similar to navbar border when scrolled */ - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.1), /* Same as navbar shadow when scrolled */ - 0 0 30px rgba(var(--primary-color-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.3); -} - -.tech-icon-wrapper { - position: relative; - width: 80px; - height: 80px; - margin-bottom: 20px; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s ease; -} - -.tech-icon-wrapper::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100%; - background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.2) 0%, transparent 70%); - border-radius: 50%; - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-card:hover .tech-icon-wrapper::before { - opacity: 0; -} - - - -.tech-card:hover .tech-icon-wrapper { - transform: scale(1.1) rotateY(15deg); -} - -.tech-card h3 { - font-size: 1.45rem; - - margin-bottom: 8px; - color: var(--fg); - transition: all 0.3s ease; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); -} - -.tech-card:hover h3 { - color: #FFFFFF; /* Keep text white on hover */ - text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7); /* Still add glow effect with primary color */ - transform: translateY(-2px); -} - -.tech-card p { - font-size: 1.1rem; - color: rgba(255, 255, 255, 0.8); - transition: all 0.3s ease; - line-height: 1.4; -} - -.tech-card:hover p { - color: rgba(255, 255, 255, 0.95); - transform: translateY(-1px); -} - -.tech-icon:hover { - background-color: rgba(255, 255, 255, 0.9) !important; - transform: scale(1.05); - box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2); -} - -.tech-icon { - min-width: 40px; - min-height: 40px; - max-width: 100px; - max-height: 100px; - width: auto; - height: auto; - flex: 1; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition: transform 0.3s ease; - aspect-ratio: 1; - /* Add background to improve visibility on dark theme */ - background-color: rgba(255, 255, 255, 0.8); /* Increased opacity */ - border-radius: 8px; - padding: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); - backdrop-filter: blur(10px); - /* Ensure contrast for all icons */ - position: relative; - background-blend-mode: normal; -} - -/* Additional dark theme optimizations for tech icons */ -/* Removed redundant .tech-icon rule */ - -/* Add a subtle glow effect on hover for better visibility */ -.tech-icon:hover { - transform: scale(1.05); - box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.1); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); - border-radius: 8px; - pointer-events: none; - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-icon:hover::before { - opacity: 1; -} - -/* Specific adjustments for logos that might be invisible on dark backgrounds */ -.tech-icon.openai, -.tech-icon.anthropic, -.tech-icon.mistral { - filter: brightness(1.1) contrast(1.2); -} - -/* For GitHub avatars that might be too dark */ -.tech-icon.llamaindex, -.tech-icon.vllm, -.tech-icon.docker { - background-image: url('../assets/tech-icons/docker.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.faiss { - filter: brightness(1.1) saturate(1.1); -} - -/* Special handling for light logos on dark theme */ -.tech-icon.weaviate { - background-color: rgba(0, 0, 0, 0.7) !important; - border: 1px solid rgba(255, 255, 255, 0.2); -} - -/* Ensure proper spacing and visibility for text logos */ -.tech-icon.langchain, -.tech-icon.qdrant, -.tech-icon.haystack { - background-size: 80% auto; - background-color: rgba(255, 255, 255, 0.95) !important; -} - - - -/* Icons for each technology - Using direct image URLs from official sources */ -.tech-icon.ollama { - background-image: url('https://avatars.githubusercontent.com/u/151674099?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.95); - border-radius: 50%; - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.langchain { - background-image: url('https://python.langchain.com/img/brand/wordmark.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.chroma { - background-image: url('../assets/tech-icons/Chroma.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.4) contrast(1.5) saturate(1.3); - border: 2px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); -} - -.tech-icon.pinecone { - background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/markdown/markdown-original.svg'); - background-color: rgba(46, 160, 67, 0.9); - filter: brightness(1.4) contrast(1.5) hue-rotate(60deg); - border: 2px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 0 20px rgba(46, 160, 67, 0.3); - position: relative; -} - -.tech-icon.pinecone::after { - content: '🌲'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 29px; - z-index: 2; -} - -.tech-icon.vectordb { - background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(180deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); -} - -.tech-icon.openai { - background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.2) contrast(1.3); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.huggingface { - background-image: url('https://huggingface.co/front/assets/huggingface_logo-noborder.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.pytorch { - background-image: url('https://pytorch.org/assets/images/pytorch-logo.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.tensorflow { - background-image: url('https://www.tensorflow.org/images/tf_logo_social.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -/* Remaining Technology Icons - Using direct image URLs */ -.tech-icon.weaviate { - background-image: url('https://avatars.githubusercontent.com/u/37794290?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.95); - border-radius: 50%; - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.qdrant { - background-image: url('https://qdrant.tech/images/logo_with_text.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.haystack { - background-image: url('https://raw.githubusercontent.com/deepset-ai/haystack/main/docs/img/haystack_logo_colored.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.mistral { - background-image: url('https://docs.mistral.ai/img/logo.svg'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.anthropic { - background-image: url('../assets/tech-icons/anthropic claude.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.2) contrast(1.3); - border: 2px solid rgba(255, 255, 255, 0.3); -} - -.tech-icon.groq { - background-image: url('https://groq.com/wp-content/uploads/2024/03/PBG-mark1-color.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.gemini { - background-image: url('https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.llamaindex { - background-image: url('https://avatars.githubusercontent.com/u/130722866?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.9); - border-radius: 50%; -} - -.tech-icon.vllm { - background-image: url('https://avatars.githubusercontent.com/u/132581166?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.9); - border-radius: 50%; -} - -.tech-icon.rag { - background-image: url('https://img.icons8.com/color/96/artificial-intelligence.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.transformers { - background-image: url('https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.spacy { - background-image: url('https://raw.githubusercontent.com/explosion/spaCy/master/website/src/images/logo.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(10deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.llama { - background-image: url('../assets/tech-icons/meta-color.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(-10deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.milvus { - background-image: url('../assets/tech-icons/Milvus.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) saturate(1.2); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.docker { - background-image: url('../assets/tech-icons/docker.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.faiss { - background-image: url('https://raw.githubusercontent.com/facebookresearch/faiss/main/docs/img/faiss.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-shadow { - position: absolute; - top: 0; - width: 150px; - height: 100%; - pointer-events: none; - z-index: 1; -} - -.tech-shadow-left { - left: 0; - background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent); -} - -.tech-shadow-right { - right: 0; - background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent); -} - -/* Removed pulse animation - displaying raw icons */ - -/* Mobile adjustments for navbar spacing - ENHANCED */ -@media (max-width: 768px) { - body { - padding-top: 80px; /* Increased for better spacing */ - } - - #hero { - min-height: calc(100vh - 80px); - height: calc(100vh - 80px); - padding-top: 2rem; /* Increased top padding for mobile */ - } - - .hero-container { - padding: 3rem 5% 2rem 5%; /* Better horizontal padding */ - justify-content: center; - align-items: center; - } - - .hero-content { - text-align: center; - max-width: 100%; - padding: 0 1rem; /* Internal padding */ - } - - .hero-content h1 { - font-size: 2.8rem; /* Better size for mobile */ - line-height: 1.2; - margin-bottom: 1.5rem; - letter-spacing: 0.5px; - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* Better text shadow */ - } - - .hero-content p { - font-size: 1.4rem; /* Better paragraph size */ - line-height: 1.4; - margin-bottom: 2rem; - color: rgba(255, 255, 255, 0.9); - max-width: 90%; /* Limit width for better readability */ - margin-left: auto; - margin-right: auto; - } - .hero-content .btn-primary { - padding: 1rem 2rem; /* Better button padding */ - font-size: 1.2rem; - border-radius: 12px; /* More rounded button */ - min-width: 200px; /* Minimum button width */ - } -} - -/* Extra small mobile devices */ -@media (max-width: 480px) { - #hero { - height: 65vh; - min-height: 450px; - padding-top: 1.5rem; - } - - .hero-container { - padding: 2.5rem 3% 1rem 3%; /* Even more top padding for smallest screens */ - } - - .hero-content { - margin-top: 1.5rem; /* Extra margin for smallest screens */ - } .hero-content h1 { - font-size: 2.4rem; /* Smaller font for very small screens */ - line-height: 1.1; - margin-bottom: 0.8rem; - text-shadow: none !important; /* Removed shadow for smallest screens */ - letter-spacing: 0.3px; - filter: brightness(1.08); /* Slightly increased brightness for better visibility */ - } - .hero-content p { - font-size: 1.2rem; - margin-bottom: 1.2rem; - } - .hero-content .btn-primary { - padding: 0.8rem 1.5rem; - font-size: 1.1rem; - } -} - -.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-size: 1.15rem; -} - -.item-description { - font-size: 0.95rem; - opacity: 0.8; -} - -.section-heading { - font-size: 3rem; - - text-align: center; - margin: var(--gap) 0; - letter-spacing: 0.7px; - position: relative; - display: inline-block; - width: 100%; - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ -} - -h1,h2,h3,h4,h5,h6 { - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ - letter-spacing: 0.7px; - -} - -.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); - 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%); -} - -/* Modern Technology Cards Animation */ -.tech-cards-container { - position: relative; - width: 100%; - overflow: hidden; - padding: 30px 0; - background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.2)); - border-radius: 20px; - margin: 10px 0; - box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3); -} - -.tech-cards-track { - display: flex; - animation: techCardsFlow 75s linear infinite; - will-change: transform; - gap: 70px; /* Further increased gap between cards */ -} - -.tech-cards-track:hover { - animation-play-state: paused; -} - -@keyframes techCardsFlow { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(-50%); - } -} - -.tech-card { - flex: 0 0 auto; - width: 240px; - height: 220px; - position: relative; - cursor: pointer; - transition: all 0.3s ease; - transform-style: preserve-3d; - margin: 5px 0; /* Reduced top/bottom margin */ - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); -} - -.tech-card-inner { position: relative; - width: 100%; - height: 100%; - background: rgba(20, 25, 45, 0.5); /* More transparent background like navbar */ - border: 1px solid rgba(255, 255, 255, 0.1); /* Similar to navbar border when scrolled */ - border-radius: 16px; - padding: 25px 15px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; backdrop-filter: blur(30px); - -webkit-backdrop-filter: blur(30px); - overflow: hidden; - transition: all 0.3s ease; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.3), - 0 4px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.tech-card-inner::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(45deg, - transparent 30%, - rgba(var(--primary-color-rgb), 0.2) 50%, - transparent 70%); - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-card:hover .tech-card-inner::before { - opacity: 1; -} - -.tech-card:hover { - transform: translateY(-10px); - z-index: 10; -} - -.tech-card:hover .tech-card-inner { - background: linear-gradient(135deg, - rgba(var(--primary-color-rgb), 0.2) 0%, - rgba(255, 255, 255, 0.1) 50%, - rgba(var(--primary-color-rgb), 0.1) 100%); - backdrop-filter: blur(35px); - -webkit-backdrop-filter: blur(35px); - border: 1px solid rgba(255, 255, 255, 0.1); /* Similar to navbar border when scrolled */ - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.1), /* Same as navbar shadow when scrolled */ - 0 0 30px rgba(var(--primary-color-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.3); -} - -.tech-icon-wrapper { - position: relative; - width: 80px; - height: 80px; - margin-bottom: 20px; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s ease; -} - -.tech-icon-wrapper::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100%; - background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.2) 0%, transparent 70%); - border-radius: 50%; - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-card:hover .tech-icon-wrapper::before { - opacity: 0; -} - - - -.tech-card:hover .tech-icon-wrapper { - transform: scale(1.1) rotateY(15deg); -} - -.tech-card h3 { - font-size: 1.45rem; - - margin-bottom: 8px; - color: var(--fg); - transition: all 0.3s ease; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); -} - -.tech-card:hover h3 { - color: #FFFFFF; /* Keep text white on hover */ - text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7); /* Still add glow effect with primary color */ - transform: translateY(-2px); -} - -.tech-card p { - font-size: 1.1rem; - color: rgba(255, 255, 255, 0.8); - transition: all 0.3s ease; - line-height: 1.4; -} - -.tech-card:hover p { - color: rgba(255, 255, 255, 0.95); - transform: translateY(-1px); -} - -.tech-icon:hover { - background-color: rgba(255, 255, 255, 0.9) !important; - transform: scale(1.05); - box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2); -} - -.tech-icon { - min-width: 40px; - min-height: 40px; - max-width: 100px; - max-height: 100px; - width: auto; - height: auto; - flex: 1; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition: transform 0.3s ease; - aspect-ratio: 1; - /* Add background to improve visibility on dark theme */ - background-color: rgba(255, 255, 255, 0.8); /* Increased opacity */ - border-radius: 8px; - padding: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); - backdrop-filter: blur(10px); - /* Ensure contrast for all icons */ - position: relative; - background-blend-mode: normal; -} - -/* Additional dark theme optimizations for tech icons */ -/* Removed redundant .tech-icon rule */ - -/* Add a subtle glow effect on hover for better visibility */ -.tech-icon:hover { - transform: scale(1.05); - box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.1); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); - border-radius: 8px; - pointer-events: none; - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-icon:hover::before { - opacity: 1; -} - -/* Specific adjustments for logos that might be invisible on dark backgrounds */ -.tech-icon.openai, -.tech-icon.anthropic, -.tech-icon.mistral { - filter: brightness(1.1) contrast(1.2); -} - -/* For GitHub avatars that might be too dark */ -.tech-icon.llamaindex, -.tech-icon.vllm, -.tech-icon.docker { - background-image: url('../assets/tech-icons/docker.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.faiss { - filter: brightness(1.1) saturate(1.1); -} - -/* Special handling for light logos on dark theme */ -.tech-icon.weaviate { - background-color: rgba(0, 0, 0, 0.7) !important; - border: 1px solid rgba(255, 255, 255, 0.2); -} - -/* Ensure proper spacing and visibility for text logos */ -.tech-icon.langchain, -.tech-icon.qdrant, -.tech-icon.haystack { - background-size: 80% auto; - background-color: rgba(255, 255, 255, 0.95) !important; -} - - - -/* Icons for each technology - Using direct image URLs from official sources */ -.tech-icon.ollama { - background-image: url('https://avatars.githubusercontent.com/u/151674099?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.95); - border-radius: 50%; - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.langchain { - background-image: url('https://python.langchain.com/img/brand/wordmark.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.chroma { - background-image: url('../assets/tech-icons/Chroma.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.4) contrast(1.5) saturate(1.3); - border: 2px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); -} - -.tech-icon.pinecone { - background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/markdown/markdown-original.svg'); - background-color: rgba(46, 160, 67, 0.9); - filter: brightness(1.4) contrast(1.5) hue-rotate(60deg); - border: 2px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 0 20px rgba(46, 160, 67, 0.3); - position: relative; -} - -.tech-icon.pinecone::after { - content: '🌲'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 29px; - z-index: 2; -} - -.tech-icon.vectordb { - background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(180deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); -} - -.tech-icon.openai { - background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.2) contrast(1.3); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.huggingface { - background-image: url('https://huggingface.co/front/assets/huggingface_logo-noborder.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.pytorch { - background-image: url('https://pytorch.org/assets/images/pytorch-logo.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.tensorflow { - background-image: url('https://www.tensorflow.org/images/tf_logo_social.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -/* Remaining Technology Icons - Using direct image URLs */ -.tech-icon.weaviate { - background-image: url('https://avatars.githubusercontent.com/u/37794290?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.95); - border-radius: 50%; - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.qdrant { - background-image: url('https://qdrant.tech/images/logo_with_text.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.haystack { - background-image: url('https://raw.githubusercontent.com/deepset-ai/haystack/main/docs/img/haystack_logo_colored.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.mistral { - background-image: url('https://docs.mistral.ai/img/logo.svg'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.anthropic { - background-image: url('../assets/tech-icons/anthropic claude.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.2) contrast(1.3); - border: 2px solid rgba(255, 255, 255, 0.3); -} - -.tech-icon.groq { - background-image: url('https://groq.com/wp-content/uploads/2024/03/PBG-mark1-color.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.gemini { - background-image: url('https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.llamaindex { - background-image: url('https://avatars.githubusercontent.com/u/130722866?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.9); - border-radius: 50%; -} - -.tech-icon.vllm { - background-image: url('https://avatars.githubusercontent.com/u/132581166?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.9); - border-radius: 50%; -} - -.tech-icon.rag { - background-image: url('https://img.icons8.com/color/96/artificial-intelligence.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.transformers { - background-image: url('https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.spacy { - background-image: url('https://raw.githubusercontent.com/explosion/spaCy/master/website/src/images/logo.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(10deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.llama { - background-image: url('../assets/tech-icons/meta-color.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(-10deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.milvus { - background-image: url('../assets/tech-icons/Milvus.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) saturate(1.2); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.docker { - background-image: url('../assets/tech-icons/docker.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.faiss { - background-image: url('https://raw.githubusercontent.com/facebookresearch/faiss/main/docs/img/faiss.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-shadow { - position: absolute; - top: 0; - width: 150px; - height: 100%; - pointer-events: none; - z-index: 1; -} - -.tech-shadow-left { - left: 0; - background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent); -} - -.tech-shadow-right { - right: 0; - background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent); -} - -/* Removed pulse animation - displaying raw icons */ - -/* Mobile adjustments for navbar spacing - ENHANCED */ -@media (max-width: 768px) { - body { - padding-top: 80px; /* Increased for better spacing */ - } - - #hero { - min-height: calc(100vh - 80px); - height: calc(100vh - 80px); - padding-top: 2rem; /* Increased top padding for mobile */ - } - - .hero-container { - padding: 3rem 5% 2rem 5%; /* Better horizontal padding */ - justify-content: center; - align-items: center; - } - - .hero-content { - text-align: center; - max-width: 100%; - padding: 0 1rem; /* Internal padding */ - } - - .hero-content h1 { - font-size: 2.8rem; /* Better size for mobile */ - line-height: 1.2; - margin-bottom: 1.5rem; - letter-spacing: 0.5px; - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* Better text shadow */ - } - - .hero-content p { - font-size: 1.4rem; /* Better paragraph size */ - line-height: 1.4; - margin-bottom: 2rem; - color: rgba(255, 255, 255, 0.9); - max-width: 90%; /* Limit width for better readability */ - margin-left: auto; - margin-right: auto; - } - .hero-content .btn-primary { - padding: 1rem 2rem; /* Better button padding */ - font-size: 1.2rem; - border-radius: 12px; /* More rounded button */ - min-width: 200px; /* Minimum button width */ - } -} - -/* Extra small mobile devices */ -@media (max-width: 480px) { - #hero { - height: 65vh; - min-height: 450px; - padding-top: 1.5rem; - } - - .hero-container { - padding: 2.5rem 3% 1rem 3%; /* Even more top padding for smallest screens */ - } - - .hero-content { - margin-top: 1.5rem; /* Extra margin for smallest screens */ - } .hero-content h1 { - font-size: 2.4rem; /* Smaller font for very small screens */ - line-height: 1.1; - margin-bottom: 0.8rem; - text-shadow: none !important; /* Removed shadow for smallest screens */ - letter-spacing: 0.3px; - filter: brightness(1.08); /* Slightly increased brightness for better visibility */ - } - .hero-content p { - font-size: 1.2rem; - margin-bottom: 1.2rem; - } - .hero-content .btn-primary { - padding: 0.8rem 1.5rem; - font-size: 1.1rem; - } -} - -.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-size: 1.15rem; -} - -.item-description { - font-size: 0.95rem; - opacity: 0.8; -} - -.section-heading { - font-size: 3rem; - - text-align: center; - margin: var(--gap) 0; - letter-spacing: 0.7px; - position: relative; - display: inline-block; - width: 100%; - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ -} - -h1,h2,h3,h4,h5,h6 { - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ - letter-spacing: 0.7px; - -} - -.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); - 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%); -} - -/* Modern Technology Cards Animation */ -.tech-cards-container { - position: relative; - width: 100%; - overflow: hidden; - padding: 30px 0; - background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.2)); - border-radius: 20px; - margin: 10px 0; - box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3); -} - -.tech-cards-track { - display: flex; - animation: techCardsFlow 75s linear infinite; - will-change: transform; - gap: 70px; /* Further increased gap between cards */ -} - -.tech-cards-track:hover { - animation-play-state: paused; -} - -@keyframes techCardsFlow { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(-50%); - } -} - -.tech-card { - flex: 0 0 auto; - width: 240px; - height: 220px; - position: relative; - cursor: pointer; - transition: all 0.3s ease; - transform-style: preserve-3d; - margin: 5px 0; /* Reduced top/bottom margin */ - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); -} - -.tech-card-inner { position: relative; - width: 100%; - height: 100%; - background: rgba(20, 25, 45, 0.5); /* More transparent background like navbar */ - border: 1px solid rgba(255, 255, 255, 0.1); /* Similar to navbar border when scrolled */ - border-radius: 16px; - padding: 25px 15px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; backdrop-filter: blur(30px); - -webkit-backdrop-filter: blur(30px); - overflow: hidden; - transition: all 0.3s ease; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.3), - 0 4px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.tech-card-inner::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(45deg, - transparent 30%, - rgba(var(--primary-color-rgb), 0.2) 50%, - transparent 70%); - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-card:hover .tech-card-inner::before { - opacity: 1; -} - -.tech-card:hover { - transform: translateY(-10px); - z-index: 10; -} - -.tech-card:hover .tech-card-inner { - background: linear-gradient(135deg, - rgba(var(--primary-color-rgb), 0.2) 0%, - rgba(255, 255, 255, 0.1) 50%, - rgba(var(--primary-color-rgb), 0.1) 100%); - backdrop-filter: blur(35px); - -webkit-backdrop-filter: blur(35px); - border: 1px solid rgba(255, 255, 255, 0.1); /* Similar to navbar border when scrolled */ - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.1), /* Same as navbar shadow when scrolled */ - 0 0 30px rgba(var(--primary-color-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.3); -} - -.tech-icon-wrapper { - position: relative; - width: 80px; - height: 80px; - margin-bottom: 20px; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s ease; -} - -.tech-icon-wrapper::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100%; - background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.2) 0%, transparent 70%); - border-radius: 50%; - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-card:hover .tech-icon-wrapper::before { - opacity: 0; -} - - - -.tech-card:hover .tech-icon-wrapper { - transform: scale(1.1) rotateY(15deg); -} - -.tech-card h3 { - font-size: 1.45rem; - - margin-bottom: 8px; - color: var(--fg); - transition: all 0.3s ease; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); -} - -.tech-card:hover h3 { - color: #FFFFFF; /* Keep text white on hover */ - text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7); /* Still add glow effect with primary color */ - transform: translateY(-2px); -} - -.tech-card p { - font-size: 1.1rem; - color: rgba(255, 255, 255, 0.8); - transition: all 0.3s ease; - line-height: 1.4; -} - -.tech-card:hover p { - color: rgba(255, 255, 255, 0.95); - transform: translateY(-1px); -} - -.tech-icon:hover { - background-color: rgba(255, 255, 255, 0.9) !important; - transform: scale(1.05); - box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2); -} - -.tech-icon { - min-width: 40px; - min-height: 40px; - max-width: 100px; - max-height: 100px; - width: auto; - height: auto; - flex: 1; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition: transform 0.3s ease; - aspect-ratio: 1; - /* Add background to improve visibility on dark theme */ - background-color: rgba(255, 255, 255, 0.8); /* Increased opacity */ - border-radius: 8px; - padding: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); - backdrop-filter: blur(10px); - /* Ensure contrast for all icons */ - position: relative; - background-blend-mode: normal; -} - -/* Additional dark theme optimizations for tech icons */ -/* Removed redundant .tech-icon rule */ - -/* Add a subtle glow effect on hover for better visibility */ -.tech-icon:hover { - transform: scale(1.05); - box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.1); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); - border-radius: 8px; - pointer-events: none; - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-icon:hover::before { - opacity: 1; -} - -/* Specific adjustments for logos that might be invisible on dark backgrounds */ -.tech-icon.openai, -.tech-icon.anthropic, -.tech-icon.mistral { - filter: brightness(1.1) contrast(1.2); -} - -/* For GitHub avatars that might be too dark */ -.tech-icon.llamaindex, -.tech-icon.vllm, -.tech-icon.docker { - background-image: url('../assets/tech-icons/docker.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.faiss { - filter: brightness(1.1) saturate(1.1); -} - -/* Special handling for light logos on dark theme */ -.tech-icon.weaviate { - background-color: rgba(0, 0, 0, 0.7) !important; - border: 1px solid rgba(255, 255, 255, 0.2); -} - -/* Ensure proper spacing and visibility for text logos */ -.tech-icon.langchain, -.tech-icon.qdrant, -.tech-icon.haystack { - background-size: 80% auto; - background-color: rgba(255, 255, 255, 0.95) !important; -} - - - -/* Icons for each technology - Using direct image URLs from official sources */ -.tech-icon.ollama { - background-image: url('https://avatars.githubusercontent.com/u/151674099?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.95); - border-radius: 50%; - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.langchain { - background-image: url('https://python.langchain.com/img/brand/wordmark.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.chroma { - background-image: url('../assets/tech-icons/Chroma.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.4) contrast(1.5) saturate(1.3); - border: 2px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); -} - -.tech-icon.pinecone { - background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/markdown/markdown-original.svg'); - background-color: rgba(46, 160, 67, 0.9); - filter: brightness(1.4) contrast(1.5) hue-rotate(60deg); - border: 2px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 0 20px rgba(46, 160, 67, 0.3); - position: relative; -} - -.tech-icon.pinecone::after { - content: '🌲'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 29px; - z-index: 2; -} - -.tech-icon.vectordb { - background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(180deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); -} - -.tech-icon.openai { - background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.2) contrast(1.3); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.huggingface { - background-image: url('https://huggingface.co/front/assets/huggingface_logo-noborder.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.pytorch { - background-image: url('https://pytorch.org/assets/images/pytorch-logo.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.tensorflow { - background-image: url('https://www.tensorflow.org/images/tf_logo_social.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -/* Remaining Technology Icons - Using direct image URLs */ -.tech-icon.weaviate { - background-image: url('https://avatars.githubusercontent.com/u/37794290?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.95); - border-radius: 50%; - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.qdrant { - background-image: url('https://qdrant.tech/images/logo_with_text.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.haystack { - background-image: url('https://raw.githubusercontent.com/deepset-ai/haystack/main/docs/img/haystack_logo_colored.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.mistral { - background-image: url('https://docs.mistral.ai/img/logo.svg'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.anthropic { - background-image: url('../assets/tech-icons/anthropic claude.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.2) contrast(1.3); - border: 2px solid rgba(255, 255, 255, 0.3); -} - -.tech-icon.groq { - background-image: url('https://groq.com/wp-content/uploads/2024/03/PBG-mark1-color.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.gemini { - background-image: url('https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.llamaindex { - background-image: url('https://avatars.githubusercontent.com/u/130722866?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.9); - border-radius: 50%; -} - -.tech-icon.vllm { - background-image: url('https://avatars.githubusercontent.com/u/132581166?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.9); - border-radius: 50%; -} - -.tech-icon.rag { - background-image: url('https://img.icons8.com/color/96/artificial-intelligence.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.transformers { - background-image: url('https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.spacy { - background-image: url('https://raw.githubusercontent.com/explosion/spaCy/master/website/src/images/logo.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(10deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.llama { - background-image: url('../assets/tech-icons/meta-color.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(-10deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.milvus { - background-image: url('../assets/tech-icons/Milvus.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) saturate(1.2); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.docker { - background-image: url('../assets/tech-icons/docker.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.faiss { - background-image: url('https://raw.githubusercontent.com/facebookresearch/faiss/main/docs/img/faiss.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-shadow { - position: absolute; - top: 0; - width: 150px; - height: 100%; - pointer-events: none; - z-index: 1; -} - -.tech-shadow-left { - left: 0; - background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent); -} - -.tech-shadow-right { - right: 0; - background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent); -} - -/* Removed pulse animation - displaying raw icons */ - -/* Mobile adjustments for navbar spacing - ENHANCED */ -@media (max-width: 768px) { - body { - padding-top: 80px; /* Increased for better spacing */ - } - - #hero { - min-height: calc(100vh - 80px); - height: calc(100vh - 80px); - padding-top: 2rem; /* Increased top padding for mobile */ - } - - .hero-container { - padding: 3rem 5% 2rem 5%; /* Better horizontal padding */ - justify-content: center; - align-items: center; - } - - .hero-content { - text-align: center; - max-width: 100%; - padding: 0 1rem; /* Internal padding */ - } - - .hero-content h1 { - font-size: 2.8rem; /* Better size for mobile */ - line-height: 1.2; - margin-bottom: 1.5rem; - letter-spacing: 0.5px; - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* Better text shadow */ - } - - .hero-content p { - font-size: 1.4rem; /* Better paragraph size */ - line-height: 1.4; - margin-bottom: 2rem; - color: rgba(255, 255, 255, 0.9); - max-width: 90%; /* Limit width for better readability */ - margin-left: auto; - margin-right: auto; - } - .hero-content .btn-primary { - padding: 1rem 2rem; /* Better button padding */ - font-size: 1.2rem; - border-radius: 12px; /* More rounded button */ - min-width: 200px; /* Minimum button width */ - } -} - -/* Extra small mobile devices */ -@media (max-width: 480px) { - #hero { - height: 65vh; - min-height: 450px; - padding-top: 1.5rem; - } - - .hero-container { - padding: 2.5rem 3% 1rem 3%; /* Even more top padding for smallest screens */ - } - - .hero-content { - margin-top: 1.5rem; /* Extra margin for smallest screens */ - } .hero-content h1 { - font-size: 2.4rem; /* Smaller font for very small screens */ - line-height: 1.1; - margin-bottom: 0.8rem; - text-shadow: none !important; /* Removed shadow for smallest screens */ - letter-spacing: 0.3px; - filter: brightness(1.08); /* Slightly increased brightness for better visibility */ - } - .hero-content p { - font-size: 1.2rem; - margin-bottom: 1.2rem; - } - .hero-content .btn-primary { - padding: 0.8rem 1.5rem; - font-size: 1.1rem; - } -} - -.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-size: 1.15rem; -} - -.item-description { - font-size: 0.95rem; - opacity: 0.8; -} - -.section-heading { - font-size: 3rem; - - text-align: center; - margin: var(--gap) 0; - letter-spacing: 0.7px; - position: relative; - display: inline-block; - width: 100%; - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ -} - -h1,h2,h3,h4,h5,h6 { - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ - letter-spacing: 0.7px; - -} - -.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); - 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%); -} - -/* Modern Technology Cards Animation */ -.tech-cards-container { - position: relative; - width: 100%; - overflow: hidden; - padding: 30px 0; - background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.2)); - border-radius: 20px; - margin: 10px 0; - box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3); -} - -.tech-cards-track { - display: flex; - animation: techCardsFlow 75s linear infinite; - will-change: transform; - gap: 70px; /* Further increased gap between cards */ -} - -.tech-cards-track:hover { - animation-play-state: paused; -} - -@keyframes techCardsFlow { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(-50%); - } -} - -.tech-card { - flex: 0 0 auto; - width: 240px; - height: 220px; - position: relative; - cursor: pointer; - transition: all 0.3s ease; - transform-style: preserve-3d; - margin: 5px 0; /* Reduced top/bottom margin */ - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); -} - -.tech-card-inner { position: relative; - width: 100%; - height: 100%; - background: rgba(20, 25, 45, 0.5); /* More transparent background like navbar */ - border: 1px solid rgba(255, 255, 255, 0.1); /* Similar to navbar border when scrolled */ - border-radius: 16px; - padding: 25px 15px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; backdrop-filter: blur(30px); - -webkit-backdrop-filter: blur(30px); - overflow: hidden; - transition: all 0.3s ease; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.3), - 0 4px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.tech-card-inner::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(45deg, - transparent 30%, - rgba(var(--primary-color-rgb), 0.2) 50%, - transparent 70%); - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-card:hover .tech-card-inner::before { - opacity: 1; -} - -.tech-card:hover { - transform: translateY(-10px); - z-index: 10; -} - -.tech-card:hover .tech-card-inner { - background: linear-gradient(135deg, - rgba(var(--primary-color-rgb), 0.2) 0%, - rgba(255, 255, 255, 0.1) 50%, - rgba(var(--primary-color-rgb), 0.1) 100%); - backdrop-filter: blur(35px); - -webkit-backdrop-filter: blur(35px); - border: 1px solid rgba(255, 255, 255, 0.1); /* Similar to navbar border when scrolled */ - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.1), /* Same as navbar shadow when scrolled */ - 0 0 30px rgba(var(--primary-color-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.3); -} - -.tech-icon-wrapper { - position: relative; - width: 80px; - height: 80px; - margin-bottom: 20px; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s ease; -} - -.tech-icon-wrapper::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100%; - background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.2) 0%, transparent 70%); - border-radius: 50%; - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-card:hover .tech-icon-wrapper::before { - opacity: 0; -} - - - -.tech-card:hover .tech-icon-wrapper { - transform: scale(1.1) rotateY(15deg); -} - -.tech-card h3 { - font-size: 1.45rem; - - margin-bottom: 8px; - color: var(--fg); - transition: all 0.3s ease; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); -} - -.tech-card:hover h3 { - color: #FFFFFF; /* Keep text white on hover */ - text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7); /* Still add glow effect with primary color */ - transform: translateY(-2px); -} - -.tech-card p { - font-size: 1.1rem; - color: rgba(255, 255, 255, 0.8); - transition: all 0.3s ease; - line-height: 1.4; -} - -.tech-card:hover p { - color: rgba(255, 255, 255, 0.95); - transform: translateY(-1px); -} - -.tech-icon:hover { - background-color: rgba(255, 255, 255, 0.9) !important; - transform: scale(1.05); - box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2); -} - -.tech-icon { - min-width: 40px; - min-height: 40px; - max-width: 100px; - max-height: 100px; - width: auto; - height: auto; - flex: 1; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition: transform 0.3s ease; - aspect-ratio: 1; - /* Add background to improve visibility on dark theme */ - background-color: rgba(255, 255, 255, 0.8); /* Increased opacity */ - border-radius: 8px; - padding: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); - backdrop-filter: blur(10px); - /* Ensure contrast for all icons */ - position: relative; - background-blend-mode: normal; -} - -/* Additional dark theme optimizations for tech icons */ -/* Removed redundant .tech-icon rule */ - -/* Add a subtle glow effect on hover for better visibility */ -.tech-icon:hover { - transform: scale(1.05); - box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.1); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); - border-radius: 8px; - pointer-events: none; - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-icon:hover::before { - opacity: 1; -} - -/* Specific adjustments for logos that might be invisible on dark backgrounds */ -.tech-icon.openai, -.tech-icon.anthropic, -.tech-icon.mistral { - filter: brightness(1.1) contrast(1.2); -} - -/* For GitHub avatars that might be too dark */ -.tech-icon.llamaindex, -.tech-icon.vllm, -.tech-icon.docker { - background-image: url('../assets/tech-icons/docker.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.faiss { - filter: brightness(1.1) saturate(1.1); -} - -/* Special handling for light logos on dark theme */ -.tech-icon.weaviate { - background-color: rgba(0, 0, 0, 0.7) !important; - border: 1px solid rgba(255, 255, 255, 0.2); -} - -/* Ensure proper spacing and visibility for text logos */ -.tech-icon.langchain, -.tech-icon.qdrant, -.tech-icon.haystack { - background-size: 80% auto; - background-color: rgba(255, 255, 255, 0.95) !important; -} - - - -/* Icons for each technology - Using direct image URLs from official sources */ -.tech-icon.ollama { - background-image: url('https://avatars.githubusercontent.com/u/151674099?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.95); - border-radius: 50%; - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.langchain { - background-image: url('https://python.langchain.com/img/brand/wordmark.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.chroma { - background-image: url('../assets/tech-icons/Chroma.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.4) contrast(1.5) saturate(1.3); - border: 2px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); -} - -.tech-icon.pinecone { - background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/markdown/markdown-original.svg'); - background-color: rgba(46, 160, 67, 0.9); - filter: brightness(1.4) contrast(1.5) hue-rotate(60deg); - border: 2px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 0 20px rgba(46, 160, 67, 0.3); - position: relative; -} - -.tech-icon.pinecone::after { - content: '🌲'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 29px; - z-index: 2; -} - -.tech-icon.vectordb { - background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(180deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); -} - -.tech-icon.openai { - background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.2) contrast(1.3); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.huggingface { - background-image: url('https://huggingface.co/front/assets/huggingface_logo-noborder.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.pytorch { - background-image: url('https://pytorch.org/assets/images/pytorch-logo.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.tensorflow { - background-image: url('https://www.tensorflow.org/images/tf_logo_social.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -/* Remaining Technology Icons - Using direct image URLs */ -.tech-icon.weaviate { - background-image: url('https://avatars.githubusercontent.com/u/37794290?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.95); - border-radius: 50%; - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.qdrant { - background-image: url('https://qdrant.tech/images/logo_with_text.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.haystack { - background-image: url('https://raw.githubusercontent.com/deepset-ai/haystack/main/docs/img/haystack_logo_colored.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.mistral { - background-image: url('https://docs.mistral.ai/img/logo.svg'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.anthropic { - background-image: url('../assets/tech-icons/anthropic claude.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.2) contrast(1.3); - border: 2px solid rgba(255, 255, 255, 0.3); -} - -.tech-icon.groq { - background-image: url('https://groq.com/wp-content/uploads/2024/03/PBG-mark1-color.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.gemini { - background-image: url('https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.llamaindex { - background-image: url('https://avatars.githubusercontent.com/u/130722866?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.9); - border-radius: 50%; -} - -.tech-icon.vllm { - background-image: url('https://avatars.githubusercontent.com/u/132581166?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.9); - border-radius: 50%; -} - -.tech-icon.rag { - background-image: url('https://img.icons8.com/color/96/artificial-intelligence.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.transformers { - background-image: url('https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.spacy { - background-image: url('https://raw.githubusercontent.com/explosion/spaCy/master/website/src/images/logo.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(10deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.llama { - background-image: url('../assets/tech-icons/meta-color.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(-10deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.milvus { - background-image: url('../assets/tech-icons/Milvus.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) saturate(1.2); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.docker { - background-image: url('../assets/tech-icons/docker.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.faiss { - background-image: url('https://raw.githubusercontent.com/facebookresearch/faiss/main/docs/img/faiss.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-shadow { - position: absolute; - top: 0; - width: 150px; - height: 100%; - pointer-events: none; - z-index: 1; -} - -.tech-shadow-left { - left: 0; - background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent); -} - -.tech-shadow-right { - right: 0; - background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent); -} - -/* Removed pulse animation - displaying raw icons */ - -/* Mobile adjustments for navbar spacing - ENHANCED */ -@media (max-width: 768px) { - body { - padding-top: 80px; /* Increased for better spacing */ - } - - #hero { - min-height: calc(100vh - 80px); - height: calc(100vh - 80px); - padding-top: 2rem; /* Increased top padding for mobile */ - } - - .hero-container { - padding: 3rem 5% 2rem 5%; /* Better horizontal padding */ - justify-content: center; - align-items: center; - } - - .hero-content { - text-align: center; - max-width: 100%; - padding: 0 1rem; /* Internal padding */ - } - - .hero-content h1 { - font-size: 2.8rem; /* Better size for mobile */ - line-height: 1.2; - margin-bottom: 1.5rem; - letter-spacing: 0.5px; - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* Better text shadow */ - } - - .hero-content p { - font-size: 1.4rem; /* Better paragraph size */ - line-height: 1.4; - margin-bottom: 2rem; - color: rgba(255, 255, 255, 0.9); - max-width: 90%; /* Limit width for better readability */ - margin-left: auto; - margin-right: auto; - } - .hero-content .btn-primary { - padding: 1rem 2rem; /* Better button padding */ - font-size: 1.2rem; - border-radius: 12px; /* More rounded button */ - min-width: 200px; /* Minimum button width */ - } -} - -/* Extra small mobile devices */ -@media (max-width: 480px) { - #hero { - height: 65vh; - min-height: 450px; - padding-top: 1.5rem; - } - - .hero-container { - padding: 2.5rem 3% 1rem 3%; /* Even more top padding for smallest screens */ - } - - .hero-content { - margin-top: 1.5rem; /* Extra margin for smallest screens */ - } .hero-content h1 { - font-size: 2.4rem; /* Smaller font for very small screens */ - line-height: 1.1; - margin-bottom: 0.8rem; - text-shadow: none !important; /* Removed shadow for smallest screens */ - letter-spacing: 0.3px; - filter: brightness(1.08); /* Slightly increased brightness for better visibility */ - } - .hero-content p { - font-size: 1.2rem; - margin-bottom: 1.2rem; - } - .hero-content .btn-primary { - padding: 0.8rem 1.5rem; - font-size: 1.1rem; - } -} - -.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-size: 1.15rem; -} - -.item-description { - font-size: 0.95rem; - opacity: 0.8; -} - -.section-heading { - font-size: 3rem; - - text-align: center; - margin: var(--gap) 0; - letter-spacing: 0.7px; - position: relative; - display: inline-block; - width: 100%; - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ -} - -h1,h2,h3,h4,h5,h6 { - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ - letter-spacing: 0.7px; - -} - -.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); - 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%); -} - -/* Modern Technology Cards Animation */ -.tech-cards-container { - position: relative; - width: 100%; - overflow: hidden; - padding: 30px 0; - background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.2)); - border-radius: 20px; - margin: 10px 0; - box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3); -} - -.tech-cards-track { - display: flex; - animation: techCardsFlow 75s linear infinite; - will-change: transform; - gap: 70px; /* Further increased gap between cards */ -} - -.tech-cards-track:hover { - animation-play-state: paused; -} - -@keyframes techCardsFlow { - 0% { - transform: translateX(0); - } - 100% { - transform: translateX(-50%); - } -} - -.tech-card { - flex: 0 0 auto; - width: 240px; - height: 220px; - position: relative; - cursor: pointer; - transition: all 0.3s ease; - transform-style: preserve-3d; - margin: 5px 0; /* Reduced top/bottom margin */ - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); -} - -.tech-card-inner { position: relative; - width: 100%; - height: 100%; - background: rgba(20, 25, 45, 0.5); /* More transparent background like navbar */ - border: 1px solid rgba(255, 255, 255, 0.1); /* Similar to navbar border when scrolled */ - border-radius: 16px; - padding: 25px 15px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; backdrop-filter: blur(30px); - -webkit-backdrop-filter: blur(30px); - overflow: hidden; - transition: all 0.3s ease; - box-shadow: - 0 10px 20px rgba(0, 0, 0, 0.3), - 0 4px 8px rgba(0, 0, 0, 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.1); -} - -.tech-card-inner::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(45deg, - transparent 30%, - rgba(var(--primary-color-rgb), 0.2) 50%, - transparent 70%); - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-card:hover .tech-card-inner::before { - opacity: 1; -} - -.tech-card:hover { - transform: translateY(-10px); - z-index: 10; -} - -.tech-card:hover .tech-card-inner { - background: linear-gradient(135deg, - rgba(var(--primary-color-rgb), 0.2) 0%, - rgba(255, 255, 255, 0.1) 50%, - rgba(var(--primary-color-rgb), 0.1) 100%); - backdrop-filter: blur(35px); - -webkit-backdrop-filter: blur(35px); - border: 1px solid rgba(255, 255, 255, 0.1); /* Similar to navbar border when scrolled */ - box-shadow: - 0 4px 20px rgba(0, 0, 0, 0.1), /* Same as navbar shadow when scrolled */ - 0 0 30px rgba(var(--primary-color-rgb), 0.2), - inset 0 1px 0 rgba(255, 255, 255, 0.3); -} - -.tech-icon-wrapper { - position: relative; - width: 80px; - height: 80px; - margin-bottom: 20px; - display: flex; - align-items: center; - justify-content: center; - transition: all 0.3s ease; -} - -.tech-icon-wrapper::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 100%; - height: 100%; - background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.2) 0%, transparent 70%); - border-radius: 50%; - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-card:hover .tech-icon-wrapper::before { - opacity: 0; -} - - - -.tech-card:hover .tech-icon-wrapper { - transform: scale(1.1) rotateY(15deg); -} - -.tech-card h3 { - font-size: 1.45rem; - - margin-bottom: 8px; - color: var(--fg); - transition: all 0.3s ease; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); -} - -.tech-card:hover h3 { - color: #FFFFFF; /* Keep text white on hover */ - text-shadow: 0 0 10px rgba(var(--primary-color-rgb), 0.7); /* Still add glow effect with primary color */ - transform: translateY(-2px); -} - -.tech-card p { - font-size: 1.1rem; - color: rgba(255, 255, 255, 0.8); - transition: all 0.3s ease; - line-height: 1.4; -} - -.tech-card:hover p { - color: rgba(255, 255, 255, 0.95); - transform: translateY(-1px); -} - -.tech-icon:hover { - background-color: rgba(255, 255, 255, 0.9) !important; - transform: scale(1.05); - box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2); -} - -.tech-icon { - min-width: 40px; - min-height: 40px; - max-width: 100px; - max-height: 100px; - width: auto; - height: auto; - flex: 1; - background-size: contain; - background-position: center; - background-repeat: no-repeat; - transition: transform 0.3s ease; - aspect-ratio: 1; - /* Add background to improve visibility on dark theme */ - background-color: rgba(255, 255, 255, 0.8); /* Increased opacity */ - border-radius: 8px; - padding: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); - backdrop-filter: blur(10px); - /* Ensure contrast for all icons */ - position: relative; - background-blend-mode: normal; -} - -/* Additional dark theme optimizations for tech icons */ -/* Removed redundant .tech-icon rule */ - -/* Add a subtle glow effect on hover for better visibility */ -.tech-icon:hover { - transform: scale(1.05); - box-shadow: 0 4px 16px rgba(255, 255, 255, 0.2), 0 0 20px rgba(255, 255, 255, 0.1); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%); - border-radius: 8px; - pointer-events: none; - opacity: 0; - transition: opacity 0.3s ease; -} - -.tech-icon:hover::before { - opacity: 1; -} - -/* Specific adjustments for logos that might be invisible on dark backgrounds */ -.tech-icon.openai, -.tech-icon.anthropic, -.tech-icon.mistral { - filter: brightness(1.1) contrast(1.2); -} - -/* For GitHub avatars that might be too dark */ -.tech-icon.llamaindex, -.tech-icon.vllm, -.tech-icon.docker { - background-image: url('../assets/tech-icons/docker.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.faiss { - filter: brightness(1.1) saturate(1.1); -} - -/* Special handling for light logos on dark theme */ -.tech-icon.weaviate { - background-color: rgba(0, 0, 0, 0.7) !important; - border: 1px solid rgba(255, 255, 255, 0.2); -} - -/* Ensure proper spacing and visibility for text logos */ -.tech-icon.langchain, -.tech-icon.qdrant, -.tech-icon.haystack { - background-size: 80% auto; - background-color: rgba(255, 255, 255, 0.95) !important; -} - - - -/* Icons for each technology - Using direct image URLs from official sources */ -.tech-icon.ollama { - background-image: url('https://avatars.githubusercontent.com/u/151674099?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.95); - border-radius: 50%; - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.langchain { - background-image: url('https://python.langchain.com/img/brand/wordmark.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.chroma { - background-image: url('../assets/tech-icons/Chroma.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.4) contrast(1.5) saturate(1.3); - border: 2px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); -} - -.tech-icon.pinecone { - background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/markdown/markdown-original.svg'); - background-color: rgba(46, 160, 67, 0.9); - filter: brightness(1.4) contrast(1.5) hue-rotate(60deg); - border: 2px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 0 20px rgba(46, 160, 67, 0.3); - position: relative; -} - -.tech-icon.pinecone::after { - content: '🌲'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 29px; - z-index: 2; -} - -.tech-icon.vectordb { - background-image: url('https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(180deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); -} - -.tech-icon.openai { - background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/04/ChatGPT_logo.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.2) contrast(1.3); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.huggingface { - background-image: url('https://huggingface.co/front/assets/huggingface_logo-noborder.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.pytorch { - background-image: url('https://pytorch.org/assets/images/pytorch-logo.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.tensorflow { - background-image: url('https://www.tensorflow.org/images/tf_logo_social.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -/* Remaining Technology Icons - Using direct image URLs */ -.tech-icon.weaviate { - background-image: url('https://avatars.githubusercontent.com/u/37794290?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.95); - border-radius: 50%; - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.qdrant { - background-image: url('https://qdrant.tech/images/logo_with_text.png'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.haystack { - background-image: url('https://raw.githubusercontent.com/deepset-ai/haystack/main/docs/img/haystack_logo_colored.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.mistral { - background-image: url('https://docs.mistral.ai/img/logo.svg'); - background-color: rgba(255, 255, 255, 0.9); -} - -.tech-icon.anthropic { - background-image: url('../assets/tech-icons/anthropic claude.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.2) contrast(1.3); - border: 2px solid rgba(255, 255, 255, 0.3); -} - -.tech-icon.groq { - background-image: url('https://groq.com/wp-content/uploads/2024/03/PBG-mark1-color.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.gemini { - background-image: url('https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.llamaindex { - background-image: url('https://avatars.githubusercontent.com/u/130722866?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.9); - border-radius: 50%; -} - -.tech-icon.vllm { - background-image: url('https://avatars.githubusercontent.com/u/132581166?s=200&v=4'); - background-color: rgba(255, 255, 255, 0.9); - border-radius: 50%; -} - -.tech-icon.rag { - background-image: url('https://img.icons8.com/color/96/artificial-intelligence.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.transformers { - background-image: url('https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.png'); - background-color: rgba(255, 255, 255, 0.95); - filter: brightness(1.1) contrast(1.1); -} - -.tech-icon.spacy { - background-image: url('https://raw.githubusercontent.com/explosion/spaCy/master/website/src/images/logo.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(10deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.llama { - background-image: url('../assets/tech-icons/meta-color.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) hue-rotate(-10deg); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.milvus { - background-image: url('../assets/tech-icons/Milvus.svg'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4) saturate(1.2); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.docker { - background-image: url('../assets/tech-icons/docker.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-icon.faiss { - background-image: url('https://raw.githubusercontent.com/facebookresearch/faiss/main/docs/img/faiss.png'); - background-color: rgba(255, 255, 255, 0.98); - filter: brightness(1.3) contrast(1.4); - border: 2px solid rgba(255, 255, 255, 0.4); - box-shadow: 0 0 15px rgba(255, 255, 255, 0.2); -} - -.tech-shadow { - position: absolute; - top: 0; - width: 150px; - height: 100%; - pointer-events: none; - z-index: 1; -} - -.tech-shadow-left { - left: 0; - background: linear-gradient(to right, rgba(0, 0, 0, 0.8), transparent); -} - -.tech-shadow-right { - right: 0; - background: linear-gradient(to left, rgba(0, 0, 0, 0.8), transparent); -} - -/* Removed pulse animation - displaying raw icons */ - -/* Mobile adjustments for navbar spacing - ENHANCED */ -@media (max-width: 768px) { - body { - padding-top: 80px; /* Increased for better spacing */ - } - - #hero { - min-height: calc(100vh - 80px); - height: calc(100vh - 80px); - padding-top: 2rem; /* Increased top padding for mobile */ - } - - .hero-container { - padding: 3rem 5% 2rem 5%; /* Better horizontal padding */ - justify-content: center; - align-items: center; - } - - .hero-content { - text-align: center; - max-width: 100%; - padding: 0 1rem; /* Internal padding */ - } - - .hero-content h1 { - font-size: 2.8rem; /* Better size for mobile */ - line-height: 1.2; - margin-bottom: 1.5rem; - letter-spacing: 0.5px; - text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); /* Better text shadow */ - } - - .hero-content p { - font-size: 1.4rem; /* Better paragraph size */ - line-height: 1.4; - margin-bottom: 2rem; - color: rgba(255, 255, 255, 0.9); - max-width: 90%; /* Limit width for better readability */ - margin-left: auto; - margin-right: auto; - } - .hero-content .btn-primary { - padding: 1rem 2rem; /* Better button padding */ - font-size: 1.2rem; - border-radius: 12px; /* More rounded button */ - min-width: 200px; /* Minimum button width */ - } -} - -/* Extra small mobile devices */ -@media (max-width: 480px) { - #hero { - height: 65vh; - min-height: 450px; - padding-top: 1.5rem; - } - - .hero-container { - padding: 2.5rem 3% 1rem 3%; /* Even more top padding for smallest screens */ - } - - .hero-content { - margin-top: 1.5rem; /* Extra margin for smallest screens */ - } .hero-content h1 { - font-size: 2.4rem; /* Smaller font for very small screens */ - line-height: 1.1; - margin-bottom: 0.8rem; - text-shadow: none !important; /* Removed shadow for smallest screens */ - letter-spacing: 0.3px; - filter: brightness(1.08); /* Slightly increased brightness for better visibility */ - } - .hero-content p { - font-size: 1.2rem; - margin-bottom: 1.2rem; - } - .hero-content .btn-primary { - padding: 0.8rem 1.5rem; - font-size: 1.1rem; - } -} - -.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-size: 1.15rem; -} - -.item-description { - font-size: 0.95rem; - opacity: 0.8; -} - -.section-heading { - font-size: 3rem; - - text-align: center; - margin: var(--gap) 0; - letter-spacing: 0.7px; - position: relative; - display: inline-block; - width: 100%; - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ -} - -h1,h2,h3,h4,h5,h6 { - font-family: 'VT323', monospace; - color: #52eef5; - /* Removed text shadow effect */ - letter-spacing: 0.7px; - -} - -.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); - 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%); -} - -/* Modern Technology Cards Animation */ -.tech-cards-container { - position: relative; - width: 100%; overflow: hidden; - padding: 30px 0; - background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.2)); - border-radius: 20px; - margin: 10px 0; -} - -/* ===== FEATURED COURSES SECTION STYLES ===== */ - -/* Courses Grid Layout */ -.courses-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); - gap: 2.5rem; - margin-top: 2rem; -} - -/* Course Card Styling */ -.course-card { - background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%); - border: 1px solid rgba(var(--primary-color-rgb), 0.3); - border-radius: 15px; - padding: 1.5rem; - transition: all 0.3s ease; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 50px rgba(var(--primary-color-rgb), 0.1); - backdrop-filter: blur(10px); - position: relative; - overflow: hidden; -} - -.course-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, var(--primary-color), transparent); - animation: shimmer 3s ease-in-out infinite; -} - -.course-card:hover { - transform: translateY(-8px); - border-color: rgba(var(--primary-color-rgb), 0.6); - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 80px rgba(var(--primary-color-rgb), 0.2); -} - -/* Course Video Container */ -.course-video-container { - position: relative; - width: 100%; - height: 0; - padding-bottom: 56.25%; /* 16:9 aspect ratio */ - overflow: hidden; - border-radius: 10px; - margin-bottom: 1.5rem; - background: rgba(0, 0, 0, 0.3); -} - -.course-video-container iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: none; - border-radius: 10px; -} - -/* Course Thumbnail Styles - Static Display */ -.course-thumbnail { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 10px; - display: block; - position: absolute; - top: 0; - left: 0; -} - -/* Course Information */ -.course-info h3 { - font-size: 1.6rem; - color: #52eef5; - margin-bottom: 1rem; - -} - -.course-info p { - color: var(--text-muted); - line-height: 1.6; - margin-bottom: 1.5rem; - font-size: 1.1rem; -} - -/* Course Highlights */ -.course-highlights { - display: flex; - flex-wrap: wrap; - gap: 0.8rem; - margin-bottom: 1.5rem; -} - -.course-highlights .highlight-item { - background: rgba(255, 255, 255, 0.1); - color: #ffffff; - padding: 6px 12px; - border-radius: 20px; - font-size: 0.9rem; - display: flex; - align-items: center; - gap: 0.4rem; - border: 1px solid rgba(255, 255, 255, 0.2); - transition: background 0.3s ease, transform 0.3s ease; -} - -.course-highlights .highlight-item:hover { - background: rgba(255, 255, 255, 0.2); - transform: translateY(-2px); -} - -.course-highlights .highlight-item i { - font-size: 0.8rem; -} - -/* Course CTA Button */ -.course-card .btn-primary { - width: 100%; - padding: 0.8rem 1.5rem; - font-size: 1rem; - - border-radius: 8px; - background: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-color-rgb), 0.8) 100%); - border: 2px solid var(--primary-color); - color: #ffffff; - text-decoration: none; - text-align: center; - transition: all 0.3s ease; - display: inline-block; - position: relative; - overflow: hidden; -} - -.course-card .btn-primary::before { - content: ''; - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); - transition: left 0.5s ease; -} - -.course-card .btn-primary:hover { - transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.4); - background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.9) 0%, var(--primary-color) 100%); -} - -.course-card .btn-primary:hover::before { - left: 100%; -} - -/* Responsive Design for Courses */ -@media (max-width: 1024px) { - .courses-grid { - grid-template-columns: 1fr; - gap: 2rem; - } - - .course-card { - padding: 1.25rem; - } -} - -@media (max-width: 768px) { - .courses-grid { - gap: 1.5rem; - } - - .course-card { - padding: 1rem; - } - - .course-info h3 { - font-size: 1.4rem; - } - - .course-info p { - font-size: 1rem; - } - .course-highlights { - gap: 0.6rem; - } - - .course-highlights .highlight-item { - font-size: 0.8rem; - padding: 0.3rem 0.6rem; - } -} -} - -@media (max-width: 480px) { - .course-video-container { - padding-bottom: 60%; /* Slightly taller aspect ratio for mobile */ - } - - .course-info h3 { - font-size: 1.3rem; - } - - .course-highlights { - flex-direction: column; - align-items: flex-start; - } - - .course-highlights .highlight-item { - align-self: flex-start; - } - - /* Mobile play overlay adjustments */ - .play-overlay { - width: 50px; - height: 50px; - font-size: 18px; - } -} - -/* ===== END FEATURED COURSES SECTION STYLES ===== */ - -/* ===== WEBINAR SECTIONS STYLES ===== */ - -/* Hero Section for Webinars */ -#webinars-hero { - background: linear-gradient(135deg, rgba(25, 25, 45, 0.9) 0%, rgba(35, 35, 55, 0.95) 100%); - padding: 4rem 0; - text-align: center; - position: relative; - overflow: hidden; -} - -#webinars-hero::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: - radial-gradient(circle at 20% 20%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%); - pointer-events: none; -} - -#webinars-hero h1 { - font-size: 3.5rem; - color: #52eef5; - margin-bottom: 1.5rem; - text-transform: uppercase; - letter-spacing: 2px; - text-shadow: 0 0 20px rgba(82, 238, 245, 0.5); - animation: pulseGlow 3s ease-in-out infinite alternate; -} - -#webinars-hero p { - font-size: 1.4rem; - color: var(--text-light); - max-width: 600px; - margin: 0 auto; - line-height: 1.6; -} - -/* Main Webinar Cards - Reduced padding for smaller height */ -.webinar-main-card { - background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%); - border-radius: 20px; - padding: 1.5rem; - margin: 0.25rem 0; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 50px rgba(var(--primary-color-rgb), 0.1); - border: 1px solid rgba(var(--primary-color-rgb), 0.2); - backdrop-filter: blur(10px); - transition: all 0.3s ease; - position: relative; -} - -.webinar-main-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, var(--primary-color), transparent); - /* Removed shimmer animation from section-wide element */ -} - -.webinar-main-card:hover { - transform: translateY(-5px); - box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); -} - -/* Webinar Card Headers - Reduced margins for compact layout */ -.webinar-card-header { - text-align: center; - margin-bottom: 1.5rem; - border-bottom: 2px solid rgba(var(--primary-color-rgb), 0.3); - padding-bottom: 1rem; -} - -.webinar-card-header h2 { - font-size: 2.5rem; - color: #52eef5; - margin-bottom: 0.8rem; - text-transform: uppercase; - letter-spacing: 1px; - display: flex; - align-items: center; - justify-content: center; - gap: 1rem; -} - -.webinar-card-header h2 i { - color: var(--primary-color); - font-size: 2.2rem; - text-shadow: 0 0 15px rgba(var(--primary-color-rgb), 0.6); -} - -.webinar-card-header p { - font-size: 1.2rem; - color: var(--text-muted); - margin: 0; -} - -/* Upcoming Webinars Content - Reduced gap between items */ -.upcoming-webinars-content { - display: flex; - flex-direction: column; - gap: 1.2rem; -} - -.upcoming-webinar-item { - background: rgba(20, 30, 50, 0.6); - border-radius: 15px; - padding: 1.2rem; - display: flex; - gap: 1.5rem; - align-items: flex-start; - border: 1px solid rgba(var(--primary-color-rgb), 0.2); - transition: all 0.3s ease; - position: relative; - overflow: hidden; -} - -.upcoming-webinar-item::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, var(--primary-color), transparent); - animation: shimmer 3s ease-in-out infinite; - border-radius: 0 2px 2px 0; -} - -.upcoming-webinar-item:hover { - background: rgba(25, 35, 55, 0.9); - transform: translateY(-5px); - box-shadow: 0 5px 20px rgba(var(--primary-color-rgb), 0.2); -} - -/* Date Badge - Reduced padding for more compact appearance */ -.webinar-date-badge { - background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); - border-radius: 12px; - padding: 0.8rem; - text-align: center; - min-width: 80px; - box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3); - flex-shrink: 0; -} - -.webinar-date-badge .date { - display: block; - font-size: 1.8rem; - - color: #fff; - line-height: 1; -} - -.webinar-date-badge .year { - display: block; - font-size: 1rem; - color: rgba(255, 255, 255, 0.9); - margin-top: 0.2rem; -} - -/* Webinar Details */ -.webinar-details { - flex: 1; -} - -.webinar-details h3 { - font-size: 1.8rem; - color: #52eef5; - margin-bottom: 1rem; - -} - -.webinar-meta { - display: flex; - gap: 2rem; - margin-bottom: 1rem; - flex-wrap: wrap; -} - -.webinar-meta span { - display: flex; - align-items: center; - gap: 0.5rem; - color: var(--text-muted); - font-size: 1rem; -} - -.webinar-meta i { - color: var(--primary-color); - font-size: 0.9rem; -} - -.webinar-description { - color: var(--text-light); - line-height: 1.6; - margin-bottom: 1.5rem; - font-size: 1.1rem; -} - -.webinar-takeaways { - margin-bottom: 2rem; -} - -.webinar-takeaways h4 { - color: #52eef5; - font-size: 1.3rem; - margin-bottom: 0.8rem; - -} - -.webinar-takeaways ul { - list-style: none; - padding: 0; -} - -.webinar-takeaways li { - color: var(--text-light); - margin-bottom: 0.5rem; - padding-left: 1.5rem; - position: relative; - line-height: 1.5; -} - -.webinar-takeaways li::before { - content: '✓'; - position: absolute; - left: 0; - color: var(--primary-color); - - font-size: 1.1rem; -} - -/* Webinar Actions */ -.webinar-actions { - display: flex; - gap: 1rem; - flex-wrap: wrap; -} - -.register-btn, .add-calendar-btn { - padding: 0.8rem 1.5rem; - border-radius: 8px; - text-decoration: none; - - font-size: 1rem; - transition: all 0.3s ease; - text-transform: uppercase; - letter-spacing: 0.5px; - display: inline-flex; - align-items: center; - gap: 0.5rem; -} - -.register-btn { - background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); - color: #fff; - border: none; - box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3); -} - -.register-btn:hover { - background: linear-gradient(135deg, var(--primary-color-hover), var(--primary-color)); - transform: translateY(-2px); - box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.4); - color: #fff; -} - -.add-calendar-btn { - background: transparent; - color: var(--primary-color); - border: 2px solid var(--primary-color); -} - -.add-calendar-btn:hover { - background: var(--primary-color); - color: #fff; - transform: translateY(-2px); - box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3); -} - -/* Already Done Webinars (Video Grid) */ -.webinar-videos-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); - gap: 2rem; - margin-top: 1rem; -} - -.webinar-video-card { - background: rgba(20, 30, 50, 0.6); - border: 1px solid rgba(var(--primary-color-rgb), 0.2); - border-radius: 15px; - padding: 1.5rem; - transition: all 0.3s ease; - position: relative; - overflow: hidden; - backdrop-filter: blur(10px); -} - -.webinar-video-card::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, transparent, var(--primary-color), transparent); - animation: shimmer 3s ease-in-out infinite; -} - -.webinar-video-card:hover { - background: rgba(25, 35, 55, 0.8); - transform: translateY(-5px); - box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.2); -} - -/* Video Container with reduced aspect ratio for more compact display */ -.gn-video-container { - position: relative; - width: 100%; - height: 0; - padding-bottom: 45%; /* Reduced from 56.25% (16:9) to 45% for shorter videos */ - overflow: hidden; - border-radius: 10px; - margin-bottom: 1.5rem; -} - -.gn-video-container iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: none; - border-radius: 10px; -} - -/* Video Info */ -.gn-video-info h4 { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 1.3rem; - color: #52eef5; - margin-bottom: 0.8rem; - -} - -.gn-video-info h4 i { - font-size: 1.1rem; - color: var(--primary-color); -} - -.gn-video-info p { - font-size: 1rem; - color: var(--text-muted); - line-height: 1.6; - margin: 0; -} - -/* Shimmer animation for webinar cards */ -@keyframes shimmer { - 0% { - transform: translateX(-100%); - } - 100% { - transform: translateX(100%); - } -} - -/* Pulse Glow Animation for webinars */ -@keyframes pulseGlow { - 0% { - text-shadow: 0 0 20px rgba(82, 238, 245, 0.5); - } - 100% { - text-shadow: 0 0 30px rgba(82, 238, 245, 0.8), 0 0 40px rgba(82, 238, 245, 0.3); - } -} - -/* Responsive Design for Webinars */ -@media (max-width: 1024px) { - .webinar-videos-grid { - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 1.5rem; - } - - .webinar-meta { - gap: 1rem; - } -} - -@media (max-width: 768px) { - #webinars-hero h1 { - font-size: 2.8rem; - } - - #webinars-hero p { - font-size: 1.2rem; - } - - .webinar-main-card { - padding: 1.5rem; - margin: 2rem 0 3rem 0; - } - - .already-done-webinars-card { - margin-top: 2rem !important; - } - - .webinar-videos-section { - padding: 3rem 0 1.5rem 0; - margin-top: 2rem; - } - - .webinar-card-header h2 { - font-size: 2rem; - flex-direction: column; - gap: 0.5rem; - } - - .upcoming-webinar-item { - flex-direction: column; - gap: 1.5rem; - padding: 1.5rem; - } - - .webinar-date-badge { - align-self: flex-start; - min-width: 80px; - } - - .webinar-meta { - flex-direction: column; - gap: 0.8rem; - } - - .webinar-actions { - flex-direction: column; - } - - .register-btn, .add-calendar-btn { - justify-content: center; - text-align: center; - } - - .webinar-videos-grid { - grid-template-columns: 1fr; - gap: 1.5rem; - } - - .webinar-video-card { - padding: 1rem; - } -} - -@media (max-width: 480px) { - #webinars-hero { - padding: 2.5rem 0; - } - - #webinars-hero h1 { - font-size: 2.2rem; - letter-spacing: 1px; - } - - #webinars-hero p { - font-size: 1.1rem; - } - - .webinar-main-card { - padding: 1rem; - margin: 1.5rem 0 2.5rem 0; - } - - .already-done-webinars-card { - margin-top: 1.5rem !important; - } - - .webinar-videos-section { - padding: 2rem 0 1rem 0; - margin-top: 1.5rem; - } - - .webinar-card-header { - margin-bottom: 1.5rem; - padding-bottom: 1rem; - } - - .webinar-card-header h2 { - font-size: 1.8rem; - } - - .upcoming-webinar-item { - padding: 1rem; - } - - .webinar-details h3 { - font-size: 1.5rem; - } - - .webinar-takeaways { - margin-bottom: 1.5rem; - } - - .gn-video-info h4 { - font-size: 1.2rem; - } -} - -/* ===== GYANNETRA MOBILE APP SECTION STYLES ===== */ - -.gyannetra-app-section-redesigned { - padding: 4rem 0; - background: linear-gradient(135deg, rgba(15, 15, 25, 0.95) 0%, rgba(25, 25, 45, 0.9) 100%); - border-radius: 20px; - margin: 3rem auto; - position: relative; - overflow: hidden; -} - -.gyannetra-app-section-redesigned::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: - radial-gradient(circle at 20% 20%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%); - pointer-events: none; -} - -/* Wrapper for centering and max-width control */ -.gn-app-section-wrapper { - max-width: 1200px; - margin: 0 auto; - padding: 0 2rem; - position: relative; - z-index: 2; -} - -/* Main Heading */ -.gn-app-main-heading { - font-size: 2.6rem; - margin-bottom: 3rem; - color: #52eef5; - text-align: center; - text-transform: uppercase; - letter-spacing: 1px; - font-family: 'VT323', monospace; -} - -/* Dual Column Container */ -.gn-app-dual-column-container { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 3rem; - align-items: start; -} - -/* Left Column Styling */ -.gn-app-left-column { - display: flex; - flex-direction: column; - gap: 2.5rem; -} - -/* Right Column Styling */ -.gn-app-right-column { - display: flex; - flex-direction: column; - gap: 2rem; -} - -/* App Features Card */ -.gn-app-features-card { - background: rgba(25, 35, 55, 0.8); - border: 1px solid rgba(var(--primary-color-rgb), 0.3); - border-radius: 15px; - padding: 2rem; - backdrop-filter: blur(10px); - transition: all 0.3s ease; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.15); -} - -.gn-app-features-card:hover { - transform: translateY(-5px); - border-color: rgba(var(--primary-color-rgb), 0.6); - box-shadow: 0 15px 35px rgba(var(--primary-color-rgb), 0.25), 0 8px 15px rgba(0, 0, 0, 0.2); -} - -/* App Intro Text */ -.gn-app-intro-text { - margin-bottom: 2rem; -} - -.gn-app-intro-text p { - font-size: 1.2rem; - color: var(--text-light); - line-height: 1.7; - - text-align: center; - margin: 0; -} - -/* App Features List */ -.gn-app-features-list { - display: flex; - flex-direction: column; - gap: 1.5rem; -} - -.gn-feature-item { - display: flex; - align-items: flex-start; - gap: 1rem; - padding: 1rem; - background: rgba(var(--primary-color-rgb), 0.05); - border-radius: 10px; - transition: all 0.3s ease; -} - -.gn-feature-item:hover { - background: rgba(var(--primary-color-rgb), 0.1); - transform: translateX(5px); -} - -.gn-feature-icon { - background: rgba(var(--primary-color-rgb), 0.15); - border-radius: 10px; - padding: 0.8rem; - display: flex; - align-items: center; - justify-content: center; - min-width: 50px; - height: 50px; - transition: all 0.3s ease; -} - -.gn-feature-icon i { - font-size: 1.3rem; - color: var(--primary-color); -} - -.gn-feature-item:hover .gn-feature-icon { - background: rgba(var(--primary-color-rgb), 0.25); - transform: scale(1.1); -} - -.gn-feature-content h4 { - font-size: 1.2rem; - color: #52eef5; - margin-bottom: 0.5rem; - -} - -.gn-feature-content p { - font-size: 1rem; - color: var(--text-muted); - line-height: 1.5; - margin: 0; -} - -/* App Download Section */ -.gn-app-download-section { - background: rgba(25, 35, 55, 0.8); - border: 1px solid rgba(var(--primary-color-rgb), 0.3); - border-radius: 15px; - padding: 2rem; - text-align: center; - backdrop-filter: blur(10px); - transition: all 0.3s ease; - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.15); -} - -.gn-app-download-section:hover { - transform: translateY(-5px); - border-color: rgba(var(--primary-color-rgb), 0.6); - box-shadow: 0 15px 35px rgba(var(--primary-color-rgb), 0.25), 0 8px 15px rgba(0, 0, 0, 0.2); -} - -.gn-download-heading { - font-size: 1.8rem; - color: #52eef5; - margin-bottom: 1.5rem; - font-family: 'VT323', monospace; - letter-spacing: 1px; - text-transform: uppercase; -} - -.gn-download-links-container { - display: flex; - justify-content: center; - gap: 1.5rem; - flex-wrap: wrap; - margin-top: 2rem; -} - -.gn-download-link { - display: flex; - align-items: center; - gap: 1rem; - padding: 1rem 1.5rem; - background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%); - border: 2px solid rgba(var(--primary-color-rgb), 0.3); - border-radius: 12px; - text-decoration: none; - transition: all 0.3s ease; - min-width: 180px; - backdrop-filter: blur(10px); - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.15); -} - -.gn-download-link:hover { - transform: translateY(-5px); - border-color: rgba(var(--primary-color-rgb), 0.6); - box-shadow: 0 15px 35px rgba(var(--primary-color-rgb), 0.25), 0 8px 15px rgba(0, 0, 0, 0.2); - text-decoration: none; -} - -.gn-download-icon { - font-size: 2rem; - color: var(--primary-color); - transition: transform 0.3s ease; -} - -.gn-download-link:hover .gn-download-icon { - transform: scale(1.1); -} - -.gn-download-text { - display: flex; - flex-direction: column; - align-items: flex-start; - text-align: left; -} - -.gn-download-title { - font-size: 0.85rem; - color: var(--text-muted); - line-height: 1.2; -} - -.gn-download-store { - font-size: 1.1rem; - color: #ffffff; - - line-height: 1.2; -} - -/* Platform-specific styling */ -.gn-android-link:hover { - border-color: rgba(52, 168, 83, 0.6); - box-shadow: 0 10px 25px rgba(52, 168, 83, 0.3); -} - -.gn-android-link .gn-download-icon { - color: #34a853; -} - -.gn-ios-link:hover { - border-color: rgba(0, 122, 255, 0.6); - box-shadow: 0 10px 25px rgba(0, 122, 255, 0.3); -} - -.gn-ios-link .gn-download-icon { - color: #007aff; -} - -/* Video Tutorial Cards */ -.gn-video-tutorial-card { - background: rgba(25, 35, 55, 0.8); - border: 1px solid rgba(var(--primary-color-rgb), 0.3); - border-radius: 15px; - padding: 2rem; - transition: all 0.3s ease; - position: relative; - overflow: hidden; - backdrop-filter: blur(10px); - box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.15); -} - -.gn-video-tutorial-card:hover { - transform: translateY(-5px); - border-color: rgba(var(--primary-color-rgb), 0.6); - box-shadow: 0 15px 35px rgba(var(--primary-color-rgb), 0.25), 0 8px 15px rgba(0, 0, 0, 0.2); -} - -/* Video Container with reduced aspect ratio for more compact display */ -.gn-video-container { - position: relative; - width: 100%; - height: 0; - padding-bottom: 45%; /* Reduced from 56.25% (16:9) to 45% for shorter videos */ - overflow: hidden; - border-radius: 10px; - margin-bottom: 1.5rem; -} - -.gn-video-container iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: none; - border-radius: 10px; -} - -/* Video Info */ -.gn-video-info h4 { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 1.3rem; - color: #52eef5; - margin-bottom: 0.8rem; - -} - -.gn-video-info h4 i { - font-size: 1.1rem; - color: var(--primary-color); -} - -.gn-video-info p { - font-size: 1rem; - color: var(--text-muted); - line-height: 1.6; - margin: 0; -} - -/* Responsive Design for Dual Column Layout */ -@media (max-width: 1024px) { - .gn-app-dual-column-container { - gap: 2rem; - } - - .gn-app-section-wrapper { - padding: 0 1.5rem; - } - - .gn-download-links-container { - gap: 1rem; - } -} - -@media (max-width: 768px) { - /* Collapse to single column on mobile */ - .gn-app-dual-column-container { - grid-template-columns: 1fr; - gap: 2.5rem; - } - - .gyannetra-app-section-redesigned { - padding: 3rem 0; - margin: 2rem auto; - } - - .gn-app-section-wrapper { - padding: 0 1rem; - } - - .gn-app-main-heading { - font-size: 2rem; - } - - .gn-app-features-card, - .gn-app-download-section, - .gn-video-tutorial-card { - padding: 1.5rem; - } - - .gn-download-links-container { - flex-direction: column; - align-items: center; - gap: 1rem; - } - - .gn-download-link { - min-width: 220px; - padding: 0.8rem 1.3rem; - } - - .gn-video-info h4 { - font-size: 1.1rem; - flex-direction: column; - gap: 0.3rem; - text-align: center; - } -} - -@media (max-width: 480px) { - .gyannetra-app-section-redesigned { - padding: 2rem 0; - } - - .gn-app-section-wrapper { - padding: 0 0.8rem; - } - - .gn-app-main-heading { - font-size: 1.6rem; - } - - .gn-app-features-card, - .gn-app-download-section, - .gn-video-tutorial-card { - padding: 1.2rem; - } - - .gn-feature-item { - flex-direction: column; - text-align: center; - gap: 0.8rem; + .contact-page-container { + padding: 0 1rem !important; } - .gn-feature-icon { - align-self: center; + .contact-page-container .widened-contact-info { + padding: 1.5rem !important; + min-width: auto !important; } - .gn-download-link { - min-width: 180px; - padding: 0.7rem 1rem; + .contact-page-container .widened-contact-info h2 { + font-size: 1.8rem !important; } - .gn-download-icon { - font-size: 1.7rem; + .contact-page-container .widened-contact-info .contact-details li { + font-size: 1.1rem !important; + padding: 1rem !important; + flex-direction: column !important; + text-align: center !important; + gap: 0.5rem !important; } - .gn-download-title { - font-size: 0.8rem; + .contact-page-container .widened-contact-info .contact-details li i { + margin-right: 0 !important; + margin-bottom: 0.5rem !important; } - .gn-download-store { - font-size: 1rem; + .contact-page-container .widened-contact-info .expert-advice-card { + padding: 1.5rem !important; } -} - -/* ===== CENTERED BUTTON STYLING ===== */ -.centered-btn { - display: block !important; - width: fit-content !important; - margin: 2.5rem auto 0 auto !important; - text-align: center !important; -} - -/* ===== BUTTON CONTAINER CENTERING ===== */ -/* Center all CTA button containers */ -.cta-buttons, -.cta-buttons-section .cta-buttons, -.webinar-actions, -.hero-cta-buttons, -.program-buttons, -.section-buttons, -.training-buttons, -.course-actions, -.workflow-actions { - display: flex !important; - justify-content: center !important; - align-items: center !important; - gap: 1rem !important; - flex-wrap: wrap !important; - text-align: center !important; - margin: 0 auto !important; -} - -/* CTA buttons section specific styling */ -.cta-buttons-section { - text-align: center !important; - padding: 2rem 0 !important; -} - -.cta-buttons-section .container { - display: flex !important; - justify-content: center !important; - align-items: center !important; -} - -/* Center all button containers with inline styles - Services pages */ -div[style*="text-align: center"] { - display: flex !important; - justify-content: center !important; - align-items: center !important; - text-align: center !important; - margin: 2.5rem auto !important; -} - -/* Center explore button sections - Industry pages */ -.explore-button-section { - display: flex !important; - justify-content: center !important; - align-items: center !important; - text-align: center !important; - margin: 4rem auto !important; - padding: 1rem 0 !important; -} - -/* Center hero section buttons */ -.hero-section { - text-align: center !important; -} - -.hero-section .btn, -.hero-section .btn-primary { - display: inline-block !important; - margin: 2rem auto 0 auto !important; -} - -/* Center specialization card buttons */ -.specialization-card { - text-align: center !important; -} - -.specialization-btn { - display: inline-block !important; - margin: 1.5rem auto 0 auto !important; - text-align: center !important; -} - -/* Center discussion/project buttons in service sections */ -.discuss-project-cta { - text-align: center !important; -} - -.btn-discuss-project { - display: inline-block !important; - margin: 0 auto !important; -} - -/* Center form submit buttons */ -.contact-form-container, -.form-container { - text-align: center !important; -} - -.btn-send-message, -.btn-submit, -form button[type="submit"] { - display: block !important; - margin: 2rem auto 0 auto !important; - text-align: center !important; -} - -/* Center footer subscription buttons */ -.footer-subscribe button, -.newsletter-form { - display: inline-block !important; - margin: 0 auto !important; - text-align: center !important; -} - -/* Global button centering fallback - catch any missed buttons */ -.btn-container, -[class*="button-container"], -[class*="btn-container"], -[class*="cta-container"] { - display: flex !important; - justify-content: center !important; - align-items: center !important; - text-align: center !important; - flex-wrap: wrap !important; - gap: 1rem !important; -} - -/* Ensure any standalone buttons in sections are centered */ -section .btn:only-child, -section .btn-primary:only-child, -section .btn-secondary:only-child { - display: block !important; - margin: 2rem auto !important; - text-align: center !important; -} - -/* Ensure consistent button group spacing */ -.benefits-section .centered-btn, -.training-programs-section .centered-btn, -.workflow-section .centered-btn { - margin: 2rem auto 0 auto !important; -} - -/* Ensure proper styling for the button when it has both btn-primary and centered-btn classes */ -.btn-primary.centered-btn { - background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%) !important; - border: 2px solid rgba(255, 255, 255, 0.3) !important; - box-shadow: - 0 8px 32px rgba(109, 40, 217, 0.4), - 0 4px 16px rgba(147, 51, 234, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; - padding: 18px 36px !important; - important; - letter-spacing: 1.5px !important; - text-transform: uppercase !important; - font-size: 1.2rem !important; - border-radius: 12px !important; - color: #ffffff !important; - text-decoration: none !important; - position: relative !important; - overflow: hidden !important; - transition: all 0.3s ease !important; - cursor: pointer !important; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important; - backdrop-filter: blur(8px) !important; -} - -.btn-primary.centered-btn:hover { - transform: translateY(-3px) scale(1.05) !important; - background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%) !important; - border-color: rgba(255, 255, 255, 0.5) !important; - box-shadow: - 0 12px 40px rgba(109, 40, 217, 0.6), - 0 6px 20px rgba(147, 51, 234, 0.4), - inset 0 1px 0 rgba(255, 255, 255, 0.3), - 0 0 20px rgba(168, 85, 247, 0.5) !important; - text-shadow: 0 0 8px rgba(255, 255, 255, 0.4) !important; -} - -.btn-primary.centered-btn:active { - transform: translateY(-1px) scale(1.02) !important; - transition: all 0.1s ease !important; -} - -/* Responsive adjustments for centered button */ -@media (max-width: 768px) { - .centered-btn { - margin: 2rem auto 0 auto !important; + .contact-page-container .widened-contact-info .expert-advice-card h3 { + font-size: 2.0rem !important; } - .btn-primary.centered-btn { - padding: 14px 28px !important; + .contact-page-container .widened-contact-info .expert-advice-card p { font-size: 1.1rem !important; } - - /* Mobile button container centering */ - .cta-buttons, - .webinar-actions, - .hero-cta-buttons, - div[style*="text-align: center"] { - flex-direction: column !important; - gap: 1.5rem !important; - margin: 2rem auto !important; - } - - .hero-section .btn, - .hero-section .btn-primary { - width: auto !important; - max-width: 280px !important; - margin: 1rem auto !important; - } -} - -@media (max-width: 480px) { - .centered-btn { - margin: 1.5rem auto 0 auto !important; - } - - .btn-primary.centered-btn { - padding: 12px 24px !important; - font-size: 1rem !important; - letter-spacing: 1px !important; - } - /* Extra small screen button adjustments */ - .cta-buttons, - .webinar-actions, - .hero-cta-buttons { - gap: 1rem !important; - margin: 1.5rem auto !important; - } - - .btn-primary, - .btn { - padding: 0.8rem 1.5rem !important; - font-size: 0.95rem !important; - min-width: 200px !important; - text-align: center !important; - } - - /* Ensure buttons stack vertically on very small screens */ - .hero-cta-buttons, - .cta-buttons, - .webinar-actions { - flex-direction: column !important; - align-items: center !important; - width: 100% !important; - } - - /* Adjust button widths for better mobile UX */ - .btn-primary, - .btn-secondary, - .workflow-cta-btn, - .specialization-btn { - width: 100% !important; - max-width: 280px !important; - margin: 0.75rem auto !important; - } -} - -/* ===== CUSTOM TRAINING WORKFLOW SECTION STYLES ===== */ - -.workflow-section { - padding: 4rem 0; - background: linear-gradient(135deg, rgba(15, 15, 25, 0.95) 0%, rgba(25, 25, 45, 0.9) 100%); - border-radius: 20px; - margin: 3rem 0; - position: relative; - overflow: hidden; -} - -/* Shift workflow section container slightly to the right for better centering */ -#custom-training-workflow.container { - margin-left: auto; - margin-right: calc(50% - 580px - 2rem); -} - -.workflow-section::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: - radial-gradient(circle at 20% 20%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), - radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%); - pointer-events: none; -} - -.workflow-intro { - text-align: center; - max-width: 900px; - margin: 0 auto 3rem auto; - position: relative; - z-index: 2; -} - -.workflow-intro p { - font-size: 1.3rem; - color: var(--text-light); - line-height: 1.7; - -} - -.workflow-benefits { - margin: 3rem 0; - position: relative; - z-index: 2; -} - -.workflow-benefits h3 { - font-size: 2.2rem; - color: #52eef5; - text-align: center; - margin-bottom: 2rem; - font-family: 'VT323', monospace; - letter-spacing: 1px; -} - -.benefits-list { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); - gap: 1.5rem; - margin-top: 2rem; -} - -.benefit-item { - background: rgba(25, 35, 55, 0.8); - border: 1px solid rgba(var(--primary-color-rgb), 0.3); - border-radius: 12px; - padding: 1.5rem; - display: flex; - align-items: flex-start; - gap: 1rem; - transition: all 0.3s ease; - backdrop-filter: blur(10px); -} - -.benefit-item:hover { - transform: translateY(-5px); - border-color: rgba(var(--primary-color-rgb), 0.6); - box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4); -} - -.benefit-item i { - font-size: 1.8rem; - color: var(--primary-color); - margin-top: 0.2rem; - flex-shrink: 0; -} - -.benefit-item h4 { - font-size: 1.3rem; - color: #52eef5; - margin-bottom: 0.5rem; - -} - -.benefit-item p { - color: var(--text-light); - font-size: 1rem; - line-height: 1.5; - margin: 0; -} - -.workflow-process { - margin: 4rem 0; - position: relative; - z-index: 2; -} - -.workflow-process h3 { - font-size: 2.2rem; - color: #52eef5; - text-align: center; - margin-bottom: 3rem; - font-family: 'VT323', monospace; - letter-spacing: 1px; -} - -.workflow-visualization { - position: relative; - max-width: 1000px; - margin: 0 auto; -} - -.workflow-step { - display: flex; - align-items: flex-start; - gap: 2rem; - margin-bottom: 3rem; - padding: 2rem; - background: rgba(20, 30, 50, 0.7); - border-radius: 16px; - border: 1px solid rgba(255, 255, 255, 0.1); - position: relative; - transition: all 0.3s ease; - backdrop-filter: blur(15px); -} - -.workflow-step:hover { - background: rgba(25, 35, 55, 0.9); - border-color: rgba(var(--primary-color-rgb), 0.4); - transform: translateX(10px); -} - -.workflow-step:last-child { - margin-bottom: 0; -} - -.workflow-step:last-child .step-connector { - display: none; -} - -.step-icon { - width: 80px; - height: 80px; - background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.3); - flex-shrink: 0; - position: relative; - overflow: hidden; -} - -.step-icon::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%); - animation: shimmer 3s ease-in-out infinite; -} - -.step-icon i { - font-size: 2rem; - color: #fff; - z-index: 2; - position: relative; -} - -.step-content { - flex: 1; -} - -.step-content h4 { - font-size: 1.6rem; - color: #52eef5; - margin-bottom: 1rem; - -} - -.step-content p { - color: var(--text-light); - font-size: 1.1rem; - line-height: 1.6; - margin-bottom: 1rem; -} - -.step-details { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.step-details span { - color: var(--text-muted); - font-size: 0.95rem; - padding-left: 1rem; - position: relative; -} - -.step-details span::before { - content: '✓'; - position: absolute; - left: 0; - color: var(--primary-color); - - font-size: 1.1rem; -} - -.step-connector { - position: absolute; - right: -1rem; - top: 50%; - transform: translateY(-50%); - width: 2rem; - height: 2px; - background: linear-gradient(90deg, var(--primary-color), transparent); - z-index: 3; -} - -.step-connector::after { - content: ''; - position: absolute; - right: -6px; - top: 50%; - transform: translateY(-50%); - width: 0; - height: 0; - border-left: 8px solid var(--primary-color); - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; -} - -.workflow-cta { - background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.15) 0%, rgba(82, 238, 245, 0.1) 100%); - border-radius: 16px; - padding: 3rem 2rem; - text-align: center; - border: 1px solid rgba(var(--primary-color-rgb), 0.3); - position: relative; - z-index: 2; - margin-top: 3rem; -} - -.cta-content h3 { - font-size: 2rem; - color: #52eef5; - margin-bottom: 1rem; - font-family: 'VT323', monospace; -} - -.cta-content p { - font-size: 1.2rem; - color: var(--text-light); - margin-bottom: 2rem; - max-width: 600px; - margin-left: auto; - margin-right: auto; -} - -.workflow-cta-btn { - background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%); - color: #fff; - padding: 0.8rem 2rem; - border-radius: 10px; - text-decoration: none; - font-size: 1.1rem; - - text-transform: uppercase; - letter-spacing: 1px; - display: inline-block; - transition: all 0.3s ease; - box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.3); - border: 2px solid rgba(255, 255, 255, 0.1); - min-width: 160px; - text-align: center; -} - -.workflow-cta-btn:hover { - transform: translateY(-3px); - box-shadow: 0 12px 30px rgba(var(--primary-color-rgb), 0.4); - background: linear-gradient(135deg, var(--primary-color-hover) 0%, var(--primary-color) 100%); - border-color: rgba(255, 255, 255, 0.2); - color: #fff; - text-decoration: none; -} - -/* Responsive Design for Workflow Section */ -@media (max-width: 768px) { - .workflow-section { - padding: 2.5rem 0; - margin: 2rem 0; - } - - .workflow-intro p { - font-size: 1.1rem; - } - - .workflow-benefits h3, - .workflow-process h3 { - font-size: 1.8rem; - } - - .benefits-list { - grid-template-columns: 1fr; - gap: 1rem; - } - - .benefit-item { - padding: 1.2rem; - flex-direction: column; - text-align: center; - gap: 0.8rem; - } - - .workflow-step { - padding: 1.5rem; - margin-bottom: 2rem; - } - - .workflow-step:hover { - transform: translateY(-5px); - } - - .step-icon { - width: 70px; - height: 70px; - align-self: center; - } - - .step-icon i { - font-size: 1.8rem; - } - - .step-content { - text-align: center; - } - - .step-content h4 { - font-size: 1.4rem; - } - - .step-details span { - font-size: 0.9rem; - } - - .workflow-cta { - padding: 2rem 1.5rem; - } - - .cta-content h3 { - font-size: 1.6rem; - } - - .cta-content p { - font-size: 1.1rem; - } .workflow-cta-btn { - padding: 0.7rem 1.5rem; - font-size: 1rem; - max-width: 260px; - width: 100%; - } -} - -@media (max-width: 480px) { - .workflow-intro { - margin-bottom: 2rem; - } - - .workflow-step { - flex-direction: column; - text-align: center; - gap: 1rem; - } .step-connector { - display: none; - } -} - -/* Additional CSS for expertise section divider */ -.exp-item h3 { - position: relative; - padding-bottom: 12px; - margin-bottom: 15px; -} - -.exp-item h3::after { - content: ''; - position: absolute; - bottom: 0; - left: 50%; - transform: translateX(-50%); - width: 60px; - height: 2px; - background: linear-gradient(90deg, rgba(82, 238, 245, 0.2), rgba(82, 238, 245, 1), rgba(82, 238, 245, 0.2)); - border-radius: 2px; - box-shadow: 0 0 8px rgba(82, 238, 245, 0.5); -} - +} \ No newline at end of file diff --git a/css/style.css.backup b/css/style.css.backup index 1d047b3..b5b107b 100644 --- a/css/style.css.backup +++ b/css/style.css.backup @@ -21,15 +21,14 @@ html { .hero-subheading { font-size: 1.4rem; color: rgba(255, 255, 255, 0.9); - margin-bottom: 0.6rem; - font-weight: 500; + margin-bottom: 0.6rem; font-weight: 100; text-align: center; } .typewriter-container { font-size: 3rem; /* Increased size for typewriter text */ color: #52eef5; - font-weight: 400; /* Lowered font weight */ + font-weight: 100; /* Lowered font weight */ text-align: center; min-height: 3.8rem; /* Increased height for larger text */ min-width: 90%; /* Added min-width to make container wider */ @@ -66,7 +65,7 @@ html { color: #ffffff; padding: 0.8rem 2rem; font-size: 1.1rem; - font-weight: 600; + border-radius: 10px; text-decoration: none; transition: all 0.3s ease; @@ -95,7 +94,7 @@ html { color: #52eef5; padding: 0.8rem 2rem; font-size: 1.1rem; - font-weight: 600; + border-radius: 10px; text-decoration: none; transition: all 0.3s ease; @@ -461,7 +460,7 @@ section h2 { font-size: 1.7rem; color: #52eef5; margin-bottom: 12px; - font-weight: 600; + } .solution-item h3 { @@ -484,7 +483,7 @@ section h2 { .read-more-link { color: var(--primary-color); text-decoration: none; - font-weight: 600; + transition: color 0.3s ease, background-color 0.3s ease; align-self: flex-start; padding: 8px 15px; @@ -573,7 +572,7 @@ section h2 { margin-top: 1.5rem; margin-bottom: 1rem; font-family: 'Space Grotesk', sans-serif; - font-weight: 600; + letter-spacing: 1px; text-transform: uppercase; animation-delay: 0.7s; @@ -789,11 +788,97 @@ section h2 { object-fit: contain; } +/* Specific styling for buttons within benefit cards */ +.benefit-card .btn-primary { + margin-top: auto; + width: 100%; + max-width: 200px; + padding: 12px 24px; + font-size: 0.9rem; + border-radius: 6px; + align-self: center; + text-align: center; + white-space: nowrap; + min-height: 44px; + display: flex; + align-items: center; + justify-content: center; +} + +/* Ensure consistent spacing and alignment for benefit card content */ +.benefit-card h3 { + margin-bottom: 15px; + font-size: 1.4rem; + color: var(--text-color-primary); + line-height: 1.3; +} + +.benefit-card .program-details, +.benefit-card .program-outcomes, +.benefit-card .program-highlights { + margin-bottom: 20px; + flex-grow: 1; +} + +.benefit-card .program-details p, +.benefit-card .program-outcomes p { + margin-bottom: 8px; + font-size: 0.95rem; +} + +.benefit-card .program-outcomes ul { + text-align: left; + padding-left: 20px; + margin-top: 10px; +} + +.benefit-card .program-outcomes li { + margin-bottom: 5px; + font-size: 0.9rem; + line-height: 1.4; +} + +.benefit-card .program-highlights { + display: flex; + flex-wrap: wrap; + gap: 10px; + justify-content: center; + margin-bottom: 20px; +} + +.benefit-card .highlight-item { + background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.1); + padding: 5px 10px; + border-radius: 15px; + font-size: 0.8rem; + color: var(--primary-color); + display: flex; + align-items: center; + gap: 5px; +} + +/* Mobile responsiveness for benefit card buttons */ +@media (max-width: 768px) { + .benefit-card .btn-primary { + padding: 14px 20px; + font-size: 0.85rem; + max-width: 180px; + } + + .benefit-card { + padding: 20px; + } + + .benefit-card h3 { + font-size: 1.2rem; + } +} + .benefit-card h3 { font-size: 1.4rem; color: #52eef5; margin-bottom: 12px; - font-weight: 600; + } .benefit-card p { @@ -904,7 +989,7 @@ section h2 { font-size: 1.8rem; color: #52eef5; margin-bottom: 15px; - font-weight: 600; + text-align: center; } @@ -925,18 +1010,18 @@ section h2 { } .highlight-badge { - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.2); - color: var(--primary-color); + background: rgba(255, 255, 255, 0.1); + color: #ffffff; padding: 6px 12px; border-radius: 20px; font-size: 0.9rem; - font-weight: 500; - border: 1px solid rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); + + border: 1px solid rgba(255, 255, 255, 0.2); transition: background 0.3s ease, transform 0.3s ease; } .specialization-card:hover .highlight-badge { - background: rgba(var(--primary-color-rgb, 109, 40, 217), 0.3); + background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } @@ -1075,7 +1160,7 @@ section h2 { .logo { font-size: 1.9rem; - font-weight: bold; + text-decoration: none; letter-spacing: 1.5px; background: linear-gradient(90deg, #5a6bff 0%, #a2b0ff 50%, #ffffff 100%); @@ -1129,7 +1214,7 @@ section h2 { transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; position: relative; letter-spacing: 0.5px; - font-weight: 500; + } .nav-link:hover { @@ -1337,7 +1422,7 @@ section h2 { margin-top: 1rem; color: #a2abff; text-decoration: none; - font-weight: bold; + transition: color 0.3s ease; } @@ -1546,7 +1631,7 @@ section h2 { 0 4px 16px rgba(147, 51, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; padding: 18px 36px !important; margin-top: 24px !important; - font-weight: 400 !important; + important; letter-spacing: 1.5px !important; text-transform: uppercase !important; font-size: 1.3rem !important; @@ -1868,7 +1953,7 @@ html:not(.fouc-prevention) { } .item-title { - font-weight: bold; + font-size: 1.15rem; } @@ -1879,7 +1964,7 @@ html:not(.fouc-prevention) { .section-heading { font-size: 3rem; - font-weight: 700; + text-align: center; margin: var(--gap) 0; letter-spacing: 0.7px; @@ -1896,7 +1981,7 @@ h1,h2,h3,h4,h5,h6 { color: #52eef5; /* Removed text shadow effect */ letter-spacing: 0.7px; - font-weight: 700; + } .dropdown-menu h1, @@ -2065,7 +2150,7 @@ h1,h2,h3,h4,h5,h6 { .tech-card h3 { font-size: 1.45rem; - font-weight: 600; + margin-bottom: 8px; color: var(--fg); transition: all 0.3s ease; @@ -2621,7 +2706,7 @@ h1,h2,h3,h4,h5,h6 { } .item-title { font-size: 1.1rem !important; /* Better title size */ - font-weight: 600 !important; /* Bolder title */ + important; /* Bolder title */ color: #ffffff !important; /* White title */ display: block !important; margin-bottom: 0.25rem !important; @@ -2801,7 +2886,7 @@ h1,h2,h3,h4,h5,h6 { margin-bottom: 1.2rem; font-size: 1.5rem; text-align: center; - font-weight: 700; + color: #ffffff; text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9); letter-spacing: 0.8px; @@ -2817,7 +2902,7 @@ h1,h2,h3,h4,h5,h6 { text-align: center; color: rgba(255, 255, 255, 0.95); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); - font-weight: 400; + position: relative; z-index: 2; max-width: 100%; @@ -3039,7 +3124,7 @@ h1,h2,h3,h4,h5,h6 { font-size: 1.8rem; color: #52eef5; /* Cyan heading text */ margin-bottom: 20px; - font-weight: 600; + /* Removed gradient for simpler, consistent look */ background: none; -webkit-background-clip: initial; @@ -3161,7 +3246,7 @@ h1,h2,h3,h4,h5,h6 { text-decoration: none; padding: 14px 28px; border-radius: 8px; - font-weight: 500; + letter-spacing: 1px; text-transform: uppercase; position: relative; @@ -3181,7 +3266,7 @@ h1,h2,h3,h4,h5,h6 { text-decoration: none; padding: 14px 28px; border-radius: 8px; - font-weight: 500; + letter-spacing: 1px; text-transform: uppercase; position: relative; @@ -3352,7 +3437,7 @@ h1,h2,h3,h4,h5,h6 { display: block; margin-bottom: 0.6rem; font-size: 1.1rem; - font-weight: 600; + color: #52eef5; font-family: 'Inter', sans-serif; letter-spacing: 0.5px; @@ -3448,7 +3533,7 @@ h1,h2,h3,h4,h5,h6 { border-radius: 12px; color: #ffffff; font-size: 1.2rem; - font-weight: 700; + font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 1.5px; @@ -3495,7 +3580,7 @@ h1,h2,h3,h4,h5,h6 { padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; - font-weight: 600; + text-align: center; display: none; } @@ -3659,7 +3744,7 @@ h1,h2,h3,h4,h5,h6 { font-size: 1.7rem; color: #52eef5; margin-bottom: 0.75rem; - font-weight: 600; + } .discuss-project-cta h2 { @@ -3680,7 +3765,7 @@ h1,h2,h3,h4,h5,h6 { border: 1px solid #3A3A5A; border-radius: 8px; text-decoration: none; font-size: 1.2rem; - font-weight: 500; + transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease; } @@ -3692,7 +3777,7 @@ h1,h2,h3,h4,h5,h6 { .nav-links .nav-link.active { color: #ffffff; - font-weight: bold; + } .nav-links .nav-link.active::after { @@ -3879,7 +3964,7 @@ h1,h2,h3,h4,h5,h6 { .industry-hero h1 { font-family: 'VT323', monospace; font-size: 4rem; - font-weight: 700; + /* Inherit the beautiful gradient and glow from main h1 styling */ margin-bottom: 20px; line-height: 1.2; @@ -3956,7 +4041,7 @@ h1,h2,h3,h4,h5,h6 { .solution-item h3 { font-size: 1.5rem; color: var(--fg); margin-bottom: 0.5rem; - font-weight: 600; + } .solution-item p { @@ -4018,7 +4103,7 @@ h1,h2,h3,h4,h5,h6 { .insight-item h4 { font-size: 1.45rem; - font-weight: 600; + margin-bottom: 0.75rem; color: var(--fg); } @@ -4033,7 +4118,7 @@ h1,h2,h3,h4,h5,h6 { .insight-item .read-more { display: inline-block; font-size: 1.1rem; - font-weight: bold; + color: #a2abff; text-decoration: none; text-transform: uppercase; @@ -4252,7 +4337,7 @@ h1,h2,h3,h4,h5,h6 { top: 50%; transform: translateY(-50%); color: #22c55e; - font-weight: bold; + font-size: 1.2rem; animation: checkmark-appear 0.3s ease; } @@ -4540,7 +4625,7 @@ body { 0 4px 16px rgba(147, 51, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; padding: 18px 36px !important; margin-top: 24px !important; - font-weight: 400 !important; + important; letter-spacing: 1.5px !important; text-transform: uppercase !important; font-size: 1.3rem !important; @@ -4862,7 +4947,7 @@ html:not(.fouc-prevention) { } .item-title { - font-weight: bold; + font-size: 1.15rem; } @@ -4873,7 +4958,7 @@ html:not(.fouc-prevention) { .section-heading { font-size: 3rem; - font-weight: 700; + text-align: center; margin: var(--gap) 0; letter-spacing: 0.7px; @@ -4890,7 +4975,7 @@ h1,h2,h3,h4,h5,h6 { color: #52eef5; /* Removed text shadow effect */ letter-spacing: 0.7px; - font-weight: 700; + } .dropdown-menu h1, @@ -5059,7 +5144,7 @@ h1,h2,h3,h4,h5,h6 { .tech-card h3 { font-size: 1.45rem; - font-weight: 600; + margin-bottom: 8px; color: var(--fg); transition: all 0.3s ease; @@ -5558,7 +5643,7 @@ h1,h2,h3,h4,h5,h6 { } .item-title { - font-weight: bold; + font-size: 1.15rem; } @@ -5569,7 +5654,7 @@ h1,h2,h3,h4,h5,h6 { .section-heading { font-size: 3rem; - font-weight: 700; + text-align: center; margin: var(--gap) 0; letter-spacing: 0.7px; @@ -5586,7 +5671,7 @@ h1,h2,h3,h4,h5,h6 { color: #52eef5; /* Removed text shadow effect */ letter-spacing: 0.7px; - font-weight: 700; + } .dropdown-menu h1, @@ -5755,7 +5840,7 @@ h1,h2,h3,h4,h5,h6 { .tech-card h3 { font-size: 1.45rem; - font-weight: 600; + margin-bottom: 8px; color: var(--fg); transition: all 0.3s ease; @@ -6254,7 +6339,7 @@ h1,h2,h3,h4,h5,h6 { } .item-title { - font-weight: bold; + font-size: 1.15rem; } @@ -6265,7 +6350,7 @@ h1,h2,h3,h4,h5,h6 { .section-heading { font-size: 3rem; - font-weight: 700; + text-align: center; margin: var(--gap) 0; letter-spacing: 0.7px; @@ -6282,7 +6367,7 @@ h1,h2,h3,h4,h5,h6 { color: #52eef5; /* Removed text shadow effect */ letter-spacing: 0.7px; - font-weight: 700; + } .dropdown-menu h1, @@ -6451,7 +6536,7 @@ h1,h2,h3,h4,h5,h6 { .tech-card h3 { font-size: 1.45rem; - font-weight: 600; + margin-bottom: 8px; color: var(--fg); transition: all 0.3s ease; @@ -6950,7 +7035,7 @@ h1,h2,h3,h4,h5,h6 { } .item-title { - font-weight: bold; + font-size: 1.15rem; } @@ -6961,7 +7046,7 @@ h1,h2,h3,h4,h5,h6 { .section-heading { font-size: 3rem; - font-weight: 700; + text-align: center; margin: var(--gap) 0; letter-spacing: 0.7px; @@ -6978,7 +7063,7 @@ h1,h2,h3,h4,h5,h6 { color: #52eef5; /* Removed text shadow effect */ letter-spacing: 0.7px; - font-weight: 700; + } .dropdown-menu h1, @@ -7147,7 +7232,7 @@ h1,h2,h3,h4,h5,h6 { .tech-card h3 { font-size: 1.45rem; - font-weight: 600; + margin-bottom: 8px; color: var(--fg); transition: all 0.3s ease; @@ -7646,7 +7731,7 @@ h1,h2,h3,h4,h5,h6 { } .item-title { - font-weight: bold; + font-size: 1.15rem; } @@ -7657,7 +7742,7 @@ h1,h2,h3,h4,h5,h6 { .section-heading { font-size: 3rem; - font-weight: 700; + text-align: center; margin: var(--gap) 0; letter-spacing: 0.7px; @@ -7674,7 +7759,7 @@ h1,h2,h3,h4,h5,h6 { color: #52eef5; /* Removed text shadow effect */ letter-spacing: 0.7px; - font-weight: 700; + } .dropdown-menu h1, @@ -7843,7 +7928,7 @@ h1,h2,h3,h4,h5,h6 { .tech-card h3 { font-size: 1.45rem; - font-weight: 600; + margin-bottom: 8px; color: var(--fg); transition: all 0.3s ease; @@ -8342,7 +8427,7 @@ h1,h2,h3,h4,h5,h6 { } .item-title { - font-weight: bold; + font-size: 1.15rem; } @@ -8353,7 +8438,7 @@ h1,h2,h3,h4,h5,h6 { .section-heading { font-size: 3rem; - font-weight: 700; + text-align: center; margin: var(--gap) 0; letter-spacing: 0.7px; @@ -8370,7 +8455,7 @@ h1,h2,h3,h4,h5,h6 { color: #52eef5; /* Removed text shadow effect */ letter-spacing: 0.7px; - font-weight: 700; + } .dropdown-menu h1, @@ -8409,6 +8494,231 @@ h1,h2,h3,h4,h5,h6 { margin: 10px 0; } +/* ===== FEATURED COURSES SECTION STYLES ===== */ + +/* Courses Grid Layout */ +.courses-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); + gap: 2.5rem; + margin-top: 2rem; +} + +/* Course Card Styling */ +.course-card { + background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%); + border: 1px solid rgba(var(--primary-color-rgb), 0.3); + border-radius: 15px; + padding: 1.5rem; + transition: all 0.3s ease; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 50px rgba(var(--primary-color-rgb), 0.1); + backdrop-filter: blur(10px); + position: relative; + overflow: hidden; +} + +.course-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, transparent, var(--primary-color), transparent); + animation: shimmer 3s ease-in-out infinite; +} + +.course-card:hover { + transform: translateY(-8px); + border-color: rgba(var(--primary-color-rgb), 0.6); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 80px rgba(var(--primary-color-rgb), 0.2); +} + +/* Course Video Container */ +.course-video-container { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; /* 16:9 aspect ratio */ + overflow: hidden; + border-radius: 10px; + margin-bottom: 1.5rem; + background: rgba(0, 0, 0, 0.3); +} + +.course-video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; + border-radius: 10px; +} + +/* Course Thumbnail Styles - Static Display */ +.course-thumbnail { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 10px; + display: block; + position: absolute; + top: 0; + left: 0; +} + +/* Course Information */ +.course-info h3 { + font-size: 1.6rem; + color: #52eef5; + margin-bottom: 1rem; + +} + +.course-info p { + color: var(--text-muted); + line-height: 1.6; + margin-bottom: 1.5rem; + font-size: 1.1rem; +} + +/* Course Highlights */ +.course-highlights { + display: flex; + flex-wrap: wrap; + gap: 0.8rem; + margin-bottom: 1.5rem; +} + +.course-highlights .highlight-item { + background: rgba(255, 255, 255, 0.1); + color: #ffffff; + padding: 6px 12px; + border-radius: 20px; + font-size: 0.9rem; + display: flex; + align-items: center; + gap: 0.4rem; + border: 1px solid rgba(255, 255, 255, 0.2); + transition: background 0.3s ease, transform 0.3s ease; +} + +.course-highlights .highlight-item:hover { + background: rgba(255, 255, 255, 0.2); + transform: translateY(-2px); +} + +.course-highlights .highlight-item i { + font-size: 0.8rem; +} + +/* Course CTA Button */ +.course-card .btn-primary { + width: 100%; + padding: 0.8rem 1.5rem; + font-size: 1rem; + + border-radius: 8px; + background: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-color-rgb), 0.8) 100%); + border: 2px solid var(--primary-color); + color: #ffffff; + text-decoration: none; + text-align: center; + transition: all 0.3s ease; + display: inline-block; + position: relative; + overflow: hidden; +} + +.course-card .btn-primary::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.5s ease; +} + +.course-card .btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.4); + background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.9) 0%, var(--primary-color) 100%); +} + +.course-card .btn-primary:hover::before { + left: 100%; +} + +/* Responsive Design for Courses */ +@media (max-width: 1024px) { + .courses-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .course-card { + padding: 1.25rem; + } +} + +@media (max-width: 768px) { + .courses-grid { + gap: 1.5rem; + } + + .course-card { + padding: 1rem; + } + + .course-info h3 { + font-size: 1.4rem; + } + + .course-info p { + font-size: 1rem; + } + .course-highlights { + gap: 0.6rem; + } + + .course-highlights .highlight-item { + font-size: 0.8rem; + padding: 0.3rem 0.6rem; + } +} +} + +@media (max-width: 480px) { + .course-video-container { + padding-bottom: 60%; /* Slightly taller aspect ratio for mobile */ + } + + .course-info h3 { + font-size: 1.3rem; + } + + .course-highlights { + flex-direction: column; + align-items: flex-start; + } + + .course-highlights .highlight-item { + align-self: flex-start; + } + + /* Mobile play overlay adjustments */ + .play-overlay { + width: 50px; + height: 50px; + font-size: 18px; + } +} + +/* ===== END FEATURED COURSES SECTION STYLES ===== */ + /* ===== WEBINAR SECTIONS STYLES ===== */ /* Hero Section for Webinars */ @@ -8472,7 +8782,7 @@ h1,h2,h3,h4,h5,h6 { right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--primary-color), transparent); - animation: shimmer 3s ease-in-out infinite; + /* Removed shimmer animation from section-wide element */ } .webinar-main-card:hover { @@ -8538,8 +8848,9 @@ h1,h2,h3,h4,h5,h6 { top: 0; left: 0; right: 0; - height: 2px; - background: linear-gradient(180deg, var(--primary-color), var(--primary-color-hover)); + height: 3px; + background: linear-gradient(90deg, transparent, var(--primary-color), transparent); + animation: shimmer 3s ease-in-out infinite; border-radius: 0 2px 2px 0; } @@ -8563,7 +8874,7 @@ h1,h2,h3,h4,h5,h6 { .webinar-date-badge .date { display: block; font-size: 1.8rem; - font-weight: bold; + color: #fff; line-height: 1; } @@ -8584,7 +8895,7 @@ h1,h2,h3,h4,h5,h6 { font-size: 1.8rem; color: #52eef5; margin-bottom: 1rem; - font-weight: 600; + } .webinar-meta { @@ -8622,7 +8933,7 @@ h1,h2,h3,h4,h5,h6 { color: #52eef5; font-size: 1.3rem; margin-bottom: 0.8rem; - font-weight: 600; + } .webinar-takeaways ul { @@ -8643,7 +8954,7 @@ h1,h2,h3,h4,h5,h6 { position: absolute; left: 0; color: var(--primary-color); - font-weight: bold; + font-size: 1.1rem; } @@ -8658,7 +8969,7 @@ h1,h2,h3,h4,h5,h6 { padding: 0.8rem 1.5rem; border-radius: 8px; text-decoration: none; - font-weight: 600; + font-size: 1rem; transition: all 0.3s ease; text-transform: uppercase; @@ -8760,7 +9071,7 @@ h1,h2,h3,h4,h5,h6 { font-size: 1.3rem; color: #52eef5; margin-bottom: 0.8rem; - font-weight: 600; + } .gn-video-info h4 i { @@ -9017,7 +9328,7 @@ h1,h2,h3,h4,h5,h6 { font-size: 1.2rem; color: var(--text-light); line-height: 1.7; - font-weight: 400; + text-align: center; margin: 0; } @@ -9070,7 +9381,7 @@ h1,h2,h3,h4,h5,h6 { font-size: 1.2rem; color: #52eef5; margin-bottom: 0.5rem; - font-weight: 600; + } .gn-feature-content p { @@ -9163,7 +9474,7 @@ h1,h2,h3,h4,h5,h6 { .gn-download-store { font-size: 1.1rem; color: #ffffff; - font-weight: 600; + line-height: 1.2; } @@ -9234,7 +9545,7 @@ h1,h2,h3,h4,h5,h6 { font-size: 1.3rem; color: #52eef5; margin-bottom: 0.8rem; - font-weight: 600; + } .gn-video-info h4 i { @@ -9364,6 +9675,140 @@ h1,h2,h3,h4,h5,h6 { text-align: center !important; } +/* ===== BUTTON CONTAINER CENTERING ===== */ +/* Center all CTA button containers */ +.cta-buttons, +.cta-buttons-section .cta-buttons, +.webinar-actions, +.hero-cta-buttons, +.program-buttons, +.section-buttons, +.training-buttons, +.course-actions, +.workflow-actions { + display: flex !important; + justify-content: center !important; + align-items: center !important; + gap: 1rem !important; + flex-wrap: wrap !important; + text-align: center !important; + margin: 0 auto !important; +} + +/* CTA buttons section specific styling */ +.cta-buttons-section { + text-align: center !important; + padding: 2rem 0 !important; +} + +.cta-buttons-section .container { + display: flex !important; + justify-content: center !important; + align-items: center !important; +} + +/* Center all button containers with inline styles - Services pages */ +div[style*="text-align: center"] { + display: flex !important; + justify-content: center !important; + align-items: center !important; + text-align: center !important; + margin: 2.5rem auto !important; +} + +/* Center explore button sections - Industry pages */ +.explore-button-section { + display: flex !important; + justify-content: center !important; + align-items: center !important; + text-align: center !important; + margin: 4rem auto !important; + padding: 1rem 0 !important; +} + +/* Center hero section buttons */ +.hero-section { + text-align: center !important; +} + +.hero-section .btn, +.hero-section .btn-primary { + display: inline-block !important; + margin: 2rem auto 0 auto !important; +} + +/* Center specialization card buttons */ +.specialization-card { + text-align: center !important; +} + +.specialization-btn { + display: inline-block !important; + margin: 1.5rem auto 0 auto !important; + text-align: center !important; +} + +/* Center discussion/project buttons in service sections */ +.discuss-project-cta { + text-align: center !important; +} + +.btn-discuss-project { + display: inline-block !important; + margin: 0 auto !important; +} + +/* Center form submit buttons */ +.contact-form-container, +.form-container { + text-align: center !important; +} + +.btn-send-message, +.btn-submit, +form button[type="submit"] { + display: block !important; + margin: 2rem auto 0 auto !important; + text-align: center !important; +} + +/* Center footer subscription buttons */ +.footer-subscribe button, +.newsletter-form { + display: inline-block !important; + margin: 0 auto !important; + text-align: center !important; +} + +/* Global button centering fallback - catch any missed buttons */ +.btn-container, +[class*="button-container"], +[class*="btn-container"], +[class*="cta-container"] { + display: flex !important; + justify-content: center !important; + align-items: center !important; + text-align: center !important; + flex-wrap: wrap !important; + gap: 1rem !important; +} + +/* Ensure any standalone buttons in sections are centered */ +section .btn:only-child, +section .btn-primary:only-child, +section .btn-secondary:only-child { + display: block !important; + margin: 2rem auto !important; + text-align: center !important; +} + +/* Ensure consistent button group spacing */ +.benefits-section .centered-btn, +.training-programs-section .centered-btn, +.workflow-section .centered-btn { + margin: 2rem auto 0 auto !important; +} + /* Ensure proper styling for the button when it has both btn-primary and centered-btn classes */ .btn-primary.centered-btn { background: linear-gradient(135deg, #6d28d9 0%, #9333ea 50%, #a855f7 100%) !important; @@ -9373,7 +9818,7 @@ h1,h2,h3,h4,h5,h6 { 0 4px 16px rgba(147, 51, 234, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; padding: 18px 36px !important; - font-weight: 500 !important; + important; letter-spacing: 1.5px !important; text-transform: uppercase !important; font-size: 1.2rem !important; @@ -9415,6 +9860,23 @@ h1,h2,h3,h4,h5,h6 { padding: 14px 28px !important; font-size: 1.1rem !important; } + + /* Mobile button container centering */ + .cta-buttons, + .webinar-actions, + .hero-cta-buttons, + div[style*="text-align: center"] { + flex-direction: column !important; + gap: 1.5rem !important; + margin: 2rem auto !important; + } + + .hero-section .btn, + .hero-section .btn-primary { + width: auto !important; + max-width: 280px !important; + margin: 1rem auto !important; + } } @media (max-width: 480px) { @@ -9427,4 +9889,455 @@ h1,h2,h3,h4,h5,h6 { font-size: 1rem !important; letter-spacing: 1px !important; } + /* Extra small screen button adjustments */ + .cta-buttons, + .webinar-actions, + .hero-cta-buttons { + gap: 1rem !important; + margin: 1.5rem auto !important; + } + + .btn-primary, + .btn { + padding: 0.8rem 1.5rem !important; + font-size: 0.95rem !important; + min-width: 200px !important; + text-align: center !important; + } + + /* Ensure buttons stack vertically on very small screens */ + .hero-cta-buttons, + .cta-buttons, + .webinar-actions { + flex-direction: column !important; + align-items: center !important; + width: 100% !important; + } + + /* Adjust button widths for better mobile UX */ + .btn-primary, + .btn-secondary, + .workflow-cta-btn, + .specialization-btn { + width: 100% !important; + max-width: 280px !important; + margin: 0.75rem auto !important; + } } + +/* ===== CUSTOM TRAINING WORKFLOW SECTION STYLES ===== */ + +.workflow-section { + padding: 4rem 0; + background: linear-gradient(135deg, rgba(15, 15, 25, 0.95) 0%, rgba(25, 25, 45, 0.9) 100%); + border-radius: 20px; + margin: 3rem 0; + position: relative; + overflow: hidden; +} + +/* Shift workflow section container slightly to the right for better centering */ +#custom-training-workflow.container { + margin-left: auto; + margin-right: calc(50% - 580px - 2rem); +} + +.workflow-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 20% 20%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%); + pointer-events: none; +} + +.workflow-intro { + text-align: center; + max-width: 900px; + margin: 0 auto 3rem auto; + position: relative; + z-index: 2; +} + +.workflow-intro p { + font-size: 1.3rem; + color: var(--text-light); + line-height: 1.7; + +} + +.workflow-benefits { + margin: 3rem 0; + position: relative; + z-index: 2; +} + +.workflow-benefits h3 { + font-size: 2.2rem; + color: #52eef5; + text-align: center; + margin-bottom: 2rem; + font-family: 'VT323', monospace; + letter-spacing: 1px; +} + +.benefits-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 1.5rem; + margin-top: 2rem; +} + +.benefit-item { + background: rgba(25, 35, 55, 0.8); + border: 1px solid rgba(var(--primary-color-rgb), 0.3); + border-radius: 12px; + padding: 1.5rem; + display: flex; + align-items: flex-start; + gap: 1rem; + transition: all 0.3s ease; + backdrop-filter: blur(10px); +} + +.benefit-item:hover { + transform: translateY(-5px); + border-color: rgba(var(--primary-color-rgb), 0.6); + box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4); +} + +.benefit-item i { + font-size: 1.8rem; + color: var(--primary-color); + margin-top: 0.2rem; + flex-shrink: 0; +} + +.benefit-item h4 { + font-size: 1.3rem; + color: #52eef5; + margin-bottom: 0.5rem; + +} + +.benefit-item p { + color: var(--text-light); + font-size: 1rem; + line-height: 1.5; + margin: 0; +} + +.workflow-process { + margin: 4rem 0; + position: relative; + z-index: 2; +} + +.workflow-process h3 { + font-size: 2.2rem; + color: #52eef5; + text-align: center; + margin-bottom: 3rem; + font-family: 'VT323', monospace; + letter-spacing: 1px; +} + +.workflow-visualization { + position: relative; + max-width: 1000px; + margin: 0 auto; +} + +.workflow-step { + display: flex; + align-items: flex-start; + gap: 2rem; + margin-bottom: 3rem; + padding: 2rem; + background: rgba(20, 30, 50, 0.7); + border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.1); + position: relative; + transition: all 0.3s ease; + backdrop-filter: blur(15px); +} + +.workflow-step:hover { + background: rgba(25, 35, 55, 0.9); + border-color: rgba(var(--primary-color-rgb), 0.4); + transform: translateX(10px); +} + +.workflow-step:last-child { + margin-bottom: 0; +} + +.workflow-step:last-child .step-connector { + display: none; +} + +.step-icon { + width: 80px; + height: 80px; + background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.3); + flex-shrink: 0; + position: relative; + overflow: hidden; +} + +.step-icon::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%); + animation: shimmer 3s ease-in-out infinite; +} + +.step-icon i { + font-size: 2rem; + color: #fff; + z-index: 2; + position: relative; +} + +.step-content { + flex: 1; +} + +.step-content h4 { + font-size: 1.6rem; + color: #52eef5; + margin-bottom: 1rem; + +} + +.step-content p { + color: var(--text-light); + font-size: 1.1rem; + line-height: 1.6; + margin-bottom: 1rem; +} + +.step-details { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.step-details span { + color: var(--text-muted); + font-size: 0.95rem; + padding-left: 1rem; + position: relative; +} + +.step-details span::before { + content: '✓'; + position: absolute; + left: 0; + color: var(--primary-color); + + font-size: 1.1rem; +} + +.step-connector { + position: absolute; + right: -1rem; + top: 50%; + transform: translateY(-50%); + width: 2rem; + height: 2px; + background: linear-gradient(90deg, var(--primary-color), transparent); + z-index: 3; +} + +.step-connector::after { + content: ''; + position: absolute; + right: -6px; + top: 50%; + transform: translateY(-50%); + width: 0; + height: 0; + border-left: 8px solid var(--primary-color); + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; +} + +.workflow-cta { + background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.15) 0%, rgba(82, 238, 245, 0.1) 100%); + border-radius: 16px; + padding: 3rem 2rem; + text-align: center; + border: 1px solid rgba(var(--primary-color-rgb), 0.3); + position: relative; + z-index: 2; + margin-top: 3rem; +} + +.cta-content h3 { + font-size: 2rem; + color: #52eef5; + margin-bottom: 1rem; + font-family: 'VT323', monospace; +} + +.cta-content p { + font-size: 1.2rem; + color: var(--text-light); + margin-bottom: 2rem; + max-width: 600px; + margin-left: auto; + margin-right: auto; +} + +.workflow-cta-btn { + background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%); + color: #fff; + padding: 0.8rem 2rem; + border-radius: 10px; + text-decoration: none; + font-size: 1.1rem; + + text-transform: uppercase; + letter-spacing: 1px; + display: inline-block; + transition: all 0.3s ease; + box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.3); + border: 2px solid rgba(255, 255, 255, 0.1); + min-width: 160px; + text-align: center; +} + +.workflow-cta-btn:hover { + transform: translateY(-3px); + box-shadow: 0 12px 30px rgba(var(--primary-color-rgb), 0.4); + background: linear-gradient(135deg, var(--primary-color-hover) 0%, var(--primary-color) 100%); + border-color: rgba(255, 255, 255, 0.2); + color: #fff; + text-decoration: none; +} + +/* Responsive Design for Workflow Section */ +@media (max-width: 768px) { + .workflow-section { + padding: 2.5rem 0; + margin: 2rem 0; + } + + .workflow-intro p { + font-size: 1.1rem; + } + + .workflow-benefits h3, + .workflow-process h3 { + font-size: 1.8rem; + } + + .benefits-list { + grid-template-columns: 1fr; + gap: 1rem; + } + + .benefit-item { + padding: 1.2rem; + flex-direction: column; + text-align: center; + gap: 0.8rem; + } + + .workflow-step { + padding: 1.5rem; + margin-bottom: 2rem; + } + + .workflow-step:hover { + transform: translateY(-5px); + } + + .step-icon { + width: 70px; + height: 70px; + align-self: center; + } + + .step-icon i { + font-size: 1.8rem; + } + + .step-content { + text-align: center; + } + + .step-content h4 { + font-size: 1.4rem; + } + + .step-details span { + font-size: 0.9rem; + } + + .workflow-cta { + padding: 2rem 1.5rem; + } + + .cta-content h3 { + font-size: 1.6rem; + } + + .cta-content p { + font-size: 1.1rem; + } .workflow-cta-btn { + padding: 0.7rem 1.5rem; + font-size: 1rem; + max-width: 260px; + width: 100%; + } +} + +@media (max-width: 480px) { + .workflow-intro { + margin-bottom: 2rem; + } + + .workflow-step { + flex-direction: column; + text-align: center; + gap: 1rem; + } .step-connector { + display: none; + } +} + +/* Additional CSS for expertise section divider */ +.exp-item h3 { + position: relative; + padding-bottom: 12px; + margin-bottom: 15px; +} + +.exp-item h3::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 2px; + background: linear-gradient(90deg, rgba(82, 238, 245, 0.2), rgba(82, 238, 245, 1), rgba(82, 238, 245, 0.2)); + border-radius: 2px; + box-shadow: 0 0 8px rgba(82, 238, 245, 0.5); +} + diff --git a/css/testimonials.css b/css/testimonials.css new file mode 100644 index 0000000..0aaff31 --- /dev/null +++ b/css/testimonials.css @@ -0,0 +1,416 @@ +/* ===== CUSTOMER TESTIMONIALS SECTION ===== */ + +.testimonials-section { + padding: 6rem 0; + background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 20, 40, 0.3)); + position: relative; + overflow: hidden; +} + +.testimonials-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 20% 20%, rgba(109, 40, 217, 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%); + pointer-events: none; +} + +.testimonials-container { + width: 100%; + margin: 0; + padding: 0; + position: relative; + z-index: 2; +} + +.testimonials-heading { + text-align: center; + margin-bottom: 4rem; + padding: 0 2rem; +} + +.testimonials-heading h2 { + font-size: 3.2rem; + color: #52eef5; + margin-bottom: 1rem; + font-family: 'VT323', monospace; + text-transform: uppercase; + letter-spacing: 2px; + position: relative; +} + +.testimonials-heading h2::after { + content: ''; + position: absolute; + bottom: -15px; + left: 50%; + transform: translateX(-50%); + width: 100px; + height: 4px; + background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); + border-radius: 2px; +} + +.testimonials-heading p { + font-size: 1.4rem; + color: rgba(255, 255, 255, 0.8); + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +/* Floating Testimonials Track */ +.testimonials-track-container { + position: relative; + width: 100%; + overflow: hidden; + height: 600px; + margin: 2rem 0; +} + +.testimonials-track { + display: flex; + width: 200%; + animation: testimonialFloat 60s linear infinite; + gap: 2rem; + position: absolute; + top: 0; + left: 0; +} + +.testimonials-track:hover { + animation-play-state: paused; +} + +@keyframes testimonialFloat { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-50%); + } +} + +/* Individual Testimonial Card */ +.testimonial-card { + flex: 0 0 380px; + background: linear-gradient(135deg, rgba(25, 35, 55, 0.95) 0%, rgba(35, 45, 65, 0.98) 100%); + border: 1px solid rgba(82, 238, 245, 0.2); + border-radius: 20px; + padding: 2.5rem; + margin: 1rem 0; + backdrop-filter: blur(15px); + box-shadow: + 0 12px 40px rgba(0, 0, 0, 0.3), + 0 0 60px rgba(82, 238, 245, 0.1); + position: relative; + overflow: hidden; + transition: all 0.4s ease; + animation: cardFloat 8s ease-in-out infinite; + animation-delay: var(--delay, 0s); +} + +.testimonial-card:nth-child(1) { --delay: 0s; } +.testimonial-card:nth-child(2) { --delay: 1.5s; } +.testimonial-card:nth-child(3) { --delay: 3s; } +.testimonial-card:nth-child(4) { --delay: 4.5s; } +.testimonial-card:nth-child(5) { --delay: 6s; } +.testimonial-card:nth-child(6) { --delay: 7.5s; } + +@keyframes cardFloat { + 0%, 100% { + transform: translateY(0px) rotateX(0deg); + } + 25% { + transform: translateY(-15px) rotateX(2deg); + } + 50% { + transform: translateY(-8px) rotateX(0deg); + } + 75% { + transform: translateY(-20px) rotateX(-2deg); + } +} + +.testimonial-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(45deg, + transparent 30%, + rgba(82, 238, 245, 0.1) 50%, + transparent 70%); + opacity: 0; + transition: opacity 0.4s ease; +} + +.testimonial-card:hover { + transform: translateY(-10px) scale(1.02); + box-shadow: + 0 20px 60px rgba(0, 0, 0, 0.4), + 0 0 80px rgba(82, 238, 245, 0.2); + border-color: rgba(82, 238, 245, 0.5); +} + +.testimonial-card:hover::before { + opacity: 1; +} + +/* Quote Icon */ +.quote-icon { + position: absolute; + top: 1.5rem; + right: 1.5rem; + font-size: 2.5rem; + color: rgba(82, 238, 245, 0.3); + z-index: 1; +} + +/* Customer Info */ +.customer-info { + display: flex; + align-items: center; + margin-bottom: 1.5rem; + position: relative; + z-index: 2; +} + +.customer-avatar { + width: 60px; + height: 60px; + border-radius: 50%; + background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%); + display: flex; + align-items: center; + justify-content: center; + color: #ffffff; + font-size: 1.5rem; + font-weight: 600; + margin-right: 1rem; + box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3); + transition: all 0.3s ease; +} + +.testimonial-card:hover .customer-avatar { + transform: scale(1.1); + box-shadow: 0 6px 24px rgba(99, 102, 241, 0.5); +} + +.customer-details h4 { + font-size: 1.3rem; + color: #52eef5; + margin: 0 0 0.3rem 0; + font-family: 'Inter', sans-serif; + font-weight: 600; +} + +.customer-designation { + font-size: 0.95rem; + color: rgba(255, 255, 255, 0.7); + margin: 0 0 0.2rem 0; + font-style: italic; +} + +.customer-company { + font-size: 0.9rem; + color: rgba(168, 85, 247, 0.8); + margin: 0; + font-weight: 500; +} + +/* Review Content */ +.review-content { + position: relative; + z-index: 2; +} + +.review-text { + font-size: 1.1rem; + color: rgba(255, 255, 255, 0.9); + line-height: 1.7; + margin-bottom: 1.5rem; + font-style: italic; + position: relative; +} + +.review-text::before { + content: '"'; + font-size: 3rem; + color: rgba(82, 238, 245, 0.3); + position: absolute; + left: -1rem; + top: -0.5rem; + font-family: Georgia, serif; +} + +.review-text::after { + content: '"'; + font-size: 3rem; + color: rgba(82, 238, 245, 0.3); + position: absolute; + right: -0.5rem; + bottom: -1.5rem; + font-family: Georgia, serif; +} + +/* Rating Stars */ +.rating { + display: flex; + align-items: center; + gap: 0.3rem; + margin-bottom: 1rem; +} + +.star { + color: #fbbf24; + font-size: 1.2rem; + transition: all 0.3s ease; +} + +.testimonial-card:hover .star { + transform: scale(1.1); + text-shadow: 0 0 8px rgba(251, 191, 36, 0.5); +} + +/* Course Badge */ +.course-badge { + display: inline-block; + background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%); + border: 1px solid rgba(99, 102, 241, 0.3); + color: #a2b0ff; + padding: 0.4rem 0.8rem; + border-radius: 20px; + font-size: 0.85rem; + font-weight: 500; + position: relative; + z-index: 2; +} + +/* Responsive Design */ +@media (max-width: 1200px) { + .testimonial-card { + flex: 0 0 350px; + } +} + +@media (max-width: 992px) { + .testimonials-track-container { + height: 500px; + } + + .testimonial-card { + flex: 0 0 320px; + padding: 2rem; + } + + .testimonials-heading h2 { + font-size: 2.8rem; + } +} + +@media (max-width: 768px) { + .testimonials-section { + padding: 4rem 0; + } + + .testimonials-track-container { + height: 450px; + } + + .testimonial-card { + flex: 0 0 280px; + padding: 1.5rem; + margin: 0.5rem 0; + } + + .testimonials-heading h2 { + font-size: 2.4rem; + } + + .testimonials-heading p { + font-size: 1.2rem; + } + + .customer-info { + flex-direction: row; + text-align: left; + } + + .customer-avatar { + width: 50px; + height: 50px; + font-size: 1.2rem; + } + + .review-text { + font-size: 1rem; + } +} + +@media (max-width: 480px) { + .testimonials-container { + padding: 0 1rem; + } + + .testimonial-card { + flex: 0 0 260px; + padding: 1.2rem; + } + + .testimonials-heading h2 { + font-size: 2rem; + } +} + +/* Additional Visual Effects */ +.testimonials-section .atmospheric-particles { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + pointer-events: none; + z-index: 1; +} + +.testimonials-section .atmospheric-particles::before, +.testimonials-section .atmospheric-particles::after { + content: ''; + position: absolute; + width: 4px; + height: 4px; + background: rgba(82, 238, 245, 0.4); + border-radius: 50%; + animation: float 6s ease-in-out infinite; +} + +.testimonials-section .atmospheric-particles::before { + top: 20%; + left: 15%; + animation-delay: 0s; +} + +.testimonials-section .atmospheric-particles::after { + top: 60%; + right: 20%; + animation-delay: 3s; +} + +@keyframes float { + 0%, 100% { + transform: translateY(0px) scale(1); + opacity: 0.4; + } + 50% { + transform: translateY(-20px) scale(1.2); + opacity: 0.8; + } +} diff --git a/css/training-courses.css b/css/training-courses.css new file mode 100644 index 0000000..44e42b8 --- /dev/null +++ b/css/training-courses.css @@ -0,0 +1,775 @@ +/* ===== ENSURE IDENTICAL SECTION WIDTHS ===== */ +/* Force both sections to have identical container dimensions with high specificity */ +section#custom-training-workflow.container.workflow-section, +section#transform-cta-section.why-choose-us-section.container.benefits-section, +section#transform-cta-section.container { + width: 98% !important; + max-width: 1600px !important; + margin: 0 auto !important; + padding: 0 2rem !important; + box-sizing: border-box !important; +} + +/* Additional override to ensure no padding conflicts */ +.why-choose-us-section.container, +.benefits-section.container { + padding: 0 2rem !important; +} + +/* ===== TRAINING COURSES AND WORKFLOW SECTION STYLES ===== */ + +/* ===== FEATURED COURSES SECTION STYLES ===== */ + +/* Training Programs Section Header */ +.training-programs-section { + padding: 4rem 0; + position: relative; +} + +.training-programs-section .section-heading { + text-align: center; + margin-bottom: 3rem; + position: relative; +} + +.training-programs-section .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%); +} + +/* Courses Grid Layout */ +.courses-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); + gap: 2.5rem; + margin-top: 2rem; +} + +/* Course Card Styling */ +.course-card { + background: linear-gradient(135deg, rgba(25, 35, 55, 0.9) 0%, rgba(35, 45, 65, 0.95) 100%); + border: 1px solid rgba(var(--primary-color-rgb), 0.3); + border-radius: 15px; + padding: 1.5rem; + transition: all 0.3s ease; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 50px rgba(var(--primary-color-rgb), 0.1); + backdrop-filter: blur(10px); + position: relative; + overflow: hidden; + display: flex; + flex-direction: column; + height: 100%; +} + +.course-card::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient(90deg, transparent, var(--primary-color), transparent); + animation: shimmer 3s ease-in-out infinite; +} + +.course-card:hover { + transform: translateY(-8px); + border-color: rgba(var(--primary-color-rgb), 0.6); + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 80px rgba(var(--primary-color-rgb), 0.2); +} + +/* Course Video Container */ +.course-video-container { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; /* 16:9 aspect ratio */ + overflow: hidden; + border-radius: 10px; + margin-bottom: 1.5rem; + background: rgba(0, 0, 0, 0.3); +} + +.course-video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; + border-radius: 10px; +} + +/* Course Thumbnail Styles - Static Display */ +.course-thumbnail { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 10px; + display: block; + position: absolute; + top: 0; + left: 0; +} + +/* Course Information */ +.course-info { + display: flex; + flex-direction: column; + flex: 1; + height: 100%; +} + +.course-info h3 { + font-size: 1.6rem; + color: #52eef5; + margin-bottom: 1rem; + font-weight: 600; +} + +.course-info p { + color: var(--text-muted); + line-height: 1.6; + margin-bottom: 1.5rem; + font-size: 1.1rem; + flex: 1; +} + +/* Course Highlights */ +.course-highlights { + display: flex; + flex-wrap: nowrap; + gap: 0.6rem; + margin-bottom: 1.5rem; + margin-top: auto; + align-items: center; + min-height: 40px; + flex-shrink: 0; + overflow-x: auto; + scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ +} + +.course-highlights::-webkit-scrollbar { + display: none; /* Chrome, Safari and Opera */ +} + +.course-highlights .highlight-item { + background: rgba(255, 255, 255, 0.1); + color: #ffffff; + padding: 6px 10px; + border-radius: 20px; + font-size: 0.85rem; + display: flex; + align-items: center; + gap: 0.3rem; + border: 1px solid rgba(255, 255, 255, 0.2); + transition: background 0.3s ease, transform 0.3s ease; + flex-shrink: 0; + white-space: nowrap; + line-height: 1.2; +} + +.course-highlights .highlight-item:hover { + background: rgba(255, 255, 255, 0.2); + transform: translateY(-2px); +} + +.course-highlights .highlight-item i { + font-size: 0.8rem; +} + +/* Course CTA Button */ +.course-card .btn-primary { + width: 100%; + padding: 0.8rem 1.5rem; + font-size: 1rem; + font-weight: 600; + border-radius: 8px; + background: linear-gradient(135deg, var(--primary-color) 0%, rgba(var(--primary-color-rgb), 0.8) 100%); + border: 2px solid var(--primary-color); + color: #ffffff; + text-decoration: none; + text-align: center; + transition: all 0.3s ease; + display: inline-block; + position: relative; + overflow: hidden; + margin-top: auto; + align-self: stretch; +} + +.course-card .btn-primary::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); + transition: left 0.5s ease; +} + +.course-card .btn-primary:hover { + transform: translateY(-2px); + box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.4); + background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.9) 0%, var(--primary-color) 100%); +} + +.course-card .btn-primary:hover::before { + left: 100%; +} + +/* Responsive Design for Courses */ +@media (max-width: 1024px) { + .courses-grid { + grid-template-columns: 1fr; + gap: 2rem; + } + + .course-card { + padding: 1.25rem; + } +} + +@media (max-width: 768px) { + .courses-grid { + gap: 1.5rem; + } + + .course-card { + padding: 1rem; + } + + .course-info h3 { + font-size: 1.4rem; + } + + .course-info p { + font-size: 1rem; + } + .course-highlights { + gap: 0.5rem; + flex-wrap: nowrap; + overflow-x: auto; + min-height: 45px; + } + + .course-highlights .highlight-item { + font-size: 0.8rem; + padding: 0.3rem 0.6rem; + white-space: nowrap; + flex-shrink: 0; + } +} + +@media (max-width: 480px) { + .course-video-container { + padding-bottom: 60%; /* Slightly taller aspect ratio for mobile */ + } + + .course-info h3 { + font-size: 1.3rem; + } + .course-highlights { + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: flex-start; + min-height: 50px; + overflow-x: auto; + gap: 0.4rem; + padding-bottom: 2px; + } + + .course-highlights .highlight-item { + align-self: center; + font-size: 0.7rem; + padding: 0.2rem 0.4rem; + white-space: nowrap; + flex-shrink: 0; + } + + .course-card .btn-primary { + padding: 0.75rem 1rem; + font-size: 0.9rem; + } + + /* Mobile play overlay adjustments */ + .play-overlay { + width: 50px; + height: 50px; + font-size: 18px; + } +} + +/* ===== END FEATURED COURSES SECTION STYLES ===== */ + +/* ===== CUSTOM TRAINING WORKFLOW SECTION STYLES ===== */ + +.workflow-section { + padding: 4rem 0; + background: linear-gradient(135deg, rgba(15, 15, 25, 0.6) 0%, rgba(25, 25, 45, 0.7) 100%); + border-radius: 20px; + margin: 3rem 0; + position: relative; + overflow: hidden; +} + +/* Widen the workflow section container for better visual impact */ +#custom-training-workflow.container { + width: 98%; + max-width: 1600px; + margin: 0 auto; + padding: 0 2rem; +} + +.workflow-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: + radial-gradient(circle at 20% 20%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%); + pointer-events: none; +} + +.workflow-intro { + text-align: center; + max-width: 900px; + margin: 0 auto 3rem auto; + position: relative; + z-index: 2; + padding: 0 1rem; +} + +.workflow-intro p { + font-size: 1.3rem; + color: var(--text-light); + line-height: 1.7; + font-weight: 400; +} + +.workflow-benefits { + margin: 3rem 0; + position: relative; + z-index: 2; +} + +.workflow-benefits h3 { + font-size: 2.2rem; + color: #52eef5; + text-align: center; + margin-bottom: 2rem; + font-family: 'VT323', monospace; + letter-spacing: 1px; +} + +.benefits-list { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 1.5rem; + margin: 2rem auto; + max-width: 1200px; + padding: 0 1rem; +} + +.benefit-item { + background: rgba(25, 35, 55, 0.5); + border: 1px solid rgba(var(--primary-color-rgb), 0.3); + border-radius: 12px; + padding: 1.5rem; + display: flex; + align-items: flex-start; + gap: 1rem; + transition: all 0.3s ease; + backdrop-filter: blur(10px); +} + +.benefit-item:hover { + transform: translateY(-5px); + border-color: rgba(var(--primary-color-rgb), 0.6); + box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4); +} + +.benefit-item i { + font-size: 1.8rem; + color: var(--primary-color); + margin-top: 0.2rem; + flex-shrink: 0; +} + +.benefit-item h4 { + font-size: 1.3rem; + color: #52eef5; + margin-bottom: 0.5rem; + font-weight: 600; +} + +.benefit-item p { + color: var(--text-light); + font-size: 1rem; + line-height: 1.5; + margin: 0; +} + +.workflow-process { + margin: 4rem 0; + position: relative; + z-index: 2; +} + +.workflow-process h3 { + font-size: 2.2rem; + color: #52eef5; + text-align: center; + margin-bottom: 3rem; + font-family: 'VT323', monospace; + letter-spacing: 1px; +} + +.workflow-visualization { + position: relative; + max-width: 1000px; + margin: 0 auto; + padding: 0 1rem; +} + +.workflow-step { + display: flex; + align-items: flex-start; + gap: 2rem; + margin-bottom: 3rem; + padding: 2rem; + background: rgba(20, 30, 50, 0.4); + border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.1); + position: relative; + transition: all 0.3s ease; + backdrop-filter: blur(15px); +} + +.workflow-step:hover { + background: rgba(25, 35, 55, 0.6); + border-color: rgba(var(--primary-color-rgb), 0.4); + transform: translateX(10px); +} + +.workflow-step:last-child { + margin-bottom: 0; +} + +.workflow-step:last-child .step-connector { + display: none; +} + +.step-icon { + width: 80px; + height: 80px; + background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover)); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.3); + flex-shrink: 0; + position: relative; + overflow: hidden; +} + +.step-icon::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%); + animation: shimmer 3s ease-in-out infinite; +} + +.step-icon i { + font-size: 2rem; + color: #fff; + z-index: 2; + position: relative; +} + +.step-content { + flex: 1; +} + +.step-content h4 { + font-size: 1.6rem; + color: #52eef5; + margin-bottom: 1rem; + font-weight: 600; +} + +.step-content p { + color: var(--text-light); + font-size: 1.1rem; + line-height: 1.6; + margin-bottom: 1rem; +} + +.step-details { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.step-details span { + color: var(--text-muted); + font-size: 0.95rem; + padding-left: 1rem; + position: relative; +} + +.step-details span::before { + content: '✓'; + position: absolute; + left: 0; + color: var(--primary-color); + font-weight: bold; + font-size: 1.1rem; +} + +.step-connector { + position: absolute; + right: -1rem; + top: 50%; + transform: translateY(-50%); + width: 2rem; + height: 2px; + background: linear-gradient(90deg, var(--primary-color), transparent); + z-index: 3; +} + +.step-connector::after { + content: ''; + position: absolute; + right: -6px; + top: 50%; + transform: translateY(-50%); + width: 0; + height: 0; + border-left: 8px solid var(--primary-color); + border-top: 4px solid transparent; + border-bottom: 4px solid transparent; +} + +.workflow-cta { + background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.15) 0%, rgba(82, 238, 245, 0.1) 100%); + border-radius: 16px; + padding: 3rem 2rem; + text-align: center; + border: 1px solid rgba(var(--primary-color-rgb), 0.3); + position: relative; + z-index: 2; + margin-top: 3rem; +} + +/* Widen the transform CTA section for better visual impact */ +#transform-cta-section.container { + width: 98%; + max-width: 1600px; + margin: 0 auto; + padding: 0 2rem; +} + +/* Enhanced workflow-cta styling for transform section */ +#transform-cta-section .workflow-cta { + background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.15) 0%, rgba(82, 238, 245, 0.1) 100%); + border-radius: 20px; + padding: 4rem 3rem; + text-align: center; + border: 1px solid rgba(var(--primary-color-rgb), 0.3); + position: relative; + z-index: 2; + margin-top: 3rem; + box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3), 0 0 60px rgba(var(--primary-color-rgb), 0.15); + backdrop-filter: blur(15px); +} + +/* Transform section CTA buttons styling */ +.transform-cta-buttons { + display: flex; + gap: 1.5rem; + justify-content: center; + align-items: center; + margin-top: 2.5rem; + flex-wrap: wrap; +} + +.transform-cta-buttons .workflow-cta-btn { + margin: 0; + min-width: 280px; + padding: 1rem 2.5rem; + font-size: 1.1rem; + border-radius: 12px; + transition: all 0.3s ease; +} + +.transform-cta-buttons .workflow-cta-btn:hover { + transform: translateY(-4px); +} + +/* Responsive Design for Workflow Section */ +@media (max-width: 1024px) { + .benefits-list { + grid-template-columns: repeat(2, 1fr); + gap: 1.3rem; + } +} + +@media (max-width: 768px) { + .workflow-section { + padding: 2.5rem 0; + margin: 2rem 0; + } #custom-training-workflow.container { + width: 92%; + max-width: 1200px; + margin: 0 auto; + } + + #transform-cta-section.container { + width: 92%; + max-width: 1200px; + margin: 0 auto; + } + + .workflow-intro p { + font-size: 1.1rem; + } + + .workflow-benefits h3, + .workflow-process h3 { + font-size: 1.8rem; + } .benefits-list { + grid-template-columns: repeat(2, 1fr); + gap: 1.2rem; + padding: 0 1rem; + max-width: 100%; + } + + .benefit-item { + margin: 0; + padding: 1.25rem; + } + + .benefit-item { + padding: 1.2rem; + flex-direction: column; + text-align: center; + gap: 0.8rem; + } + + .workflow-step { + padding: 1.5rem; + margin-bottom: 2rem; + flex-direction: column; + text-align: center; + gap: 1rem; + } + + .workflow-step:hover { + transform: translateY(-5px); + } + + .step-icon { + width: 70px; + height: 70px; + align-self: center; + } + + .step-icon i { + font-size: 1.8rem; + } + + .step-content { + text-align: center; + } + + .step-content h4 { + font-size: 1.4rem; + } + + .step-details span { + font-size: 0.9rem; + } + + .step-connector { + display: none; + } + + .workflow-cta { + padding: 2rem 1.5rem; + } + + .cta-content h3 { + font-size: 1.6rem; + } + + .cta-content p { + font-size: 1.1rem; + } + .workflow-cta-btn { + padding: 0.7rem 1.5rem; + font-size: 1rem; + max-width: 260px; + width: 100%; + } + + .transform-cta-buttons { + gap: 1rem; + margin-top: 2rem; + } + + .transform-cta-buttons .workflow-cta-btn { + min-width: 240px; + padding: 0.8rem 1.8rem; + } +} + +@media (max-width: 480px) { + .workflow-intro { + margin-bottom: 2rem; + } + + .workflow-step { + gap: 1rem; + } + + .benefits-list { + grid-template-columns: 1fr; + gap: 1rem; + } +} + +/* Shimmer animation for course cards and step icons */ +@keyframes shimmer { + 0% { + transform: translateX(-100%) scaleX(1); + } + 49.9% { + transform: translateX(0%) scaleX(1); + } + 50% { + transform: translateX(0%) scaleX(1); + } + 100% { + transform: translateX(100%) scaleX(1); + } +} + +/* ===== END CUSTOM TRAINING WORKFLOW SECTION STYLES ===== */ diff --git a/css/webinar-video.css b/css/webinar-video.css new file mode 100644 index 0000000..b14ff81 --- /dev/null +++ b/css/webinar-video.css @@ -0,0 +1,69 @@ +/* webinar-video.css - Styling for webinar video cards */ + +/* Webinar Video Grid - 2x2 layout */ +.webinar-videos-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 30px; + margin-top: 2.5rem; + padding: 0 2rem; +} + +/* Video Card Styling */ +.webinar-video-card { + background: rgba(20, 30, 50, 0.6); + border: 1px solid rgba(109, 40, 217, 0.2); + border-radius: 12px; + overflow: hidden; + transition: all 0.3s ease; + display: flex; + flex-direction: column; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); + min-height: 280px; /* Ensure consistent height for the 2x2 layout */ +} + +.webinar-video-card:hover { + transform: translateY(-8px); + box-shadow: 0 15px 30px rgba(109, 40, 217, 0.4); + border-color: rgba(109, 40, 217, 0.6); +} + +/* Video Container - Make it cover more of the card */ +.webinar-video-card .video-container { + position: relative; + width: 100%; + padding-bottom: 65%; /* Slightly larger aspect ratio for more prominence */ + height: 0; + overflow: hidden; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +.webinar-video-card .video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: none; +} + +/* Video Info Section */ +.webinar-video-card .video-info { + padding: 12px; + text-align: center; +} + +.webinar-video-card .video-info h3 { + margin: 0; + font-size: 1.8rem; + font-weight: 400; + color: #52eef5; +} + +/* Responsive Layout */ +@media (max-width: 900px) { + .webinar-videos-grid { + grid-template-columns: 1fr; + gap: 20px; + } +} diff --git a/index.html b/index.html index 7eaf06a..e0f0722 100644 --- a/index.html +++ b/index.html @@ -7,31 +7,28 @@ Gyannetra — AI Services & Solutions - - - - - + + + + + + + + + + + + + + + + + +