CSS Consolidation: Merged all inline styles and separate CSS files into single style.css
- Consolidated benefits-cards.css into main style.css - Removed all inline <style> blocks from 19 HTML files - Added CSS versioning (?v=202412291400) for better caching - Extracted navbar scroll effects, hero layout stabilization, and mobile responsive styles - Fixed benefits cards visibility and animations - Improved website performance by reducing HTTP requests - Enhanced maintainability with single CSS file architecture
This commit is contained in:
@@ -4,171 +4,10 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Corporate Trainings - Gyannetra</title>
|
<title>Corporate Trainings - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css?v=202412291400">
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-section {
|
|
||||||
padding-top: 12rem;
|
|
||||||
padding-bottom: 6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
background: rgba(25, 35, 55, 0.7);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
||||||
border-color: rgba(255, 255, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card .benefit-card-icon {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card .benefit-card-icon img {
|
|
||||||
max-height: 60px;
|
|
||||||
max-width: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card h3 {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card p {
|
|
||||||
flex-grow: 1;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
color: rgba(255, 255, 255, 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-highlights {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 10px;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-item {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 6px 12px;
|
|
||||||
border-radius: 16px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight-item i {
|
|
||||||
color: var(--primary-color);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
align-self: flex-start;
|
|
||||||
margin-top: auto;
|
|
||||||
background-color: var(--primary-color, #4d79ff);
|
|
||||||
border-color: var(--primary-color, #4d79ff);
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary:hover {
|
|
||||||
background-color: var(--primary-color-hover, #3a66e0);
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.testimonial-quote {
|
|
||||||
background: rgba(25, 35, 55, 0.3);
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 2rem;
|
|
||||||
margin: 3rem auto;
|
|
||||||
max-width: 800px;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-style: italic;
|
|
||||||
text-align: center;
|
|
||||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.testimonial-quote footer {
|
|
||||||
margin-top: 1rem;
|
|
||||||
font-weight: 600;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#request-proposal {
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -4,124 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<title>Individual Training - Gyannetra</title>
|
<title>Individual Training - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css" />
|
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
background: rgba(25, 35, 55, 0.7);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card .benefit-card-icon {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card .benefit-card-icon img {
|
|
||||||
max-height: 60px;
|
|
||||||
max-width: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card h3 {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-details {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-details p {
|
|
||||||
margin: 0.5rem 0;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-outcomes {
|
|
||||||
flex-grow: 1;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-outcomes ul {
|
|
||||||
padding-left: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.program-outcomes li {
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary {
|
|
||||||
align-self: flex-start;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="atmospheric-bg"></div>
|
<div class="atmospheric-bg"></div>
|
||||||
|
|||||||
@@ -4,109 +4,10 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Workshops - Gyannetra</title>
|
<title>Workshops - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css?v=202412291400">
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card.workshop-card {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
background: rgba(25, 35, 55, 0.7);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card.workshop-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card.workshop-card .benefit-card-icon {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card.workshop-card .benefit-card-icon img {
|
|
||||||
max-height: 60px;
|
|
||||||
max-width: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card.workshop-card p {
|
|
||||||
flex-grow: 1;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.workshop-details {
|
|
||||||
font-size: 0.85rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-center {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -1,57 +0,0 @@
|
|||||||
# Manual GitHub Upload Instructions
|
|
||||||
|
|
||||||
## Prerequisites
|
|
||||||
1. Make sure Git is installed on your computer
|
|
||||||
2. Have a GitHub account (username: shaurya05745)
|
|
||||||
3. Create a personal access token on GitHub:
|
|
||||||
- Go to https://github.com/settings/tokens
|
|
||||||
- Click "Generate new token (classic)"
|
|
||||||
- Give it a name like "Website Upload"
|
|
||||||
- Check the "repo" scope box
|
|
||||||
- Click "Generate token"
|
|
||||||
- Copy the token immediately (you won't be able to see it again)
|
|
||||||
|
|
||||||
## Option 1: Run the batch file
|
|
||||||
1. Open the file explorer and navigate to C:\Users\Lenovo\sample-website
|
|
||||||
2. Double-click on "upload-website-to-github.bat"
|
|
||||||
3. Follow the prompts in the terminal
|
|
||||||
4. When asked for your password, enter the personal access token you created
|
|
||||||
|
|
||||||
## Option 2: Manual Git commands
|
|
||||||
If the batch file doesn't work, open a new PowerShell window and run these commands:
|
|
||||||
|
|
||||||
```powershell
|
|
||||||
# Navigate to your website folder
|
|
||||||
cd C:\Users\Lenovo\sample-website
|
|
||||||
|
|
||||||
# Initialize Git if not already initialized
|
|
||||||
git init
|
|
||||||
|
|
||||||
# Add all files
|
|
||||||
git add .
|
|
||||||
|
|
||||||
# Commit the files
|
|
||||||
git commit -m "Upload entire website"
|
|
||||||
|
|
||||||
# Set the remote repository URL
|
|
||||||
git remote set-url origin https://github.com/shaurya05745/website.git
|
|
||||||
# If you get "remote origin not found" error, use this command instead:
|
|
||||||
# git remote add origin https://github.com/shaurya05745/website.git
|
|
||||||
|
|
||||||
# Push to GitHub (you'll be prompted for credentials)
|
|
||||||
git push -u origin master
|
|
||||||
# When prompted for password, use your personal access token, not your GitHub password
|
|
||||||
```
|
|
||||||
|
|
||||||
## Option 3: GitHub Desktop (Easiest)
|
|
||||||
1. Download and install GitHub Desktop from https://desktop.github.com/
|
|
||||||
2. Sign in to your GitHub account
|
|
||||||
3. Add your local repository (File > Add Local Repository...)
|
|
||||||
4. Navigate to C:\Users\Lenovo\sample-website
|
|
||||||
5. Click "Publish repository"
|
|
||||||
6. Enter "website" as the name
|
|
||||||
7. Click "Publish Repository"
|
|
||||||
|
|
||||||
## After uploading
|
|
||||||
1. Visit https://github.com/shaurya05745/website to confirm your files were uploaded
|
|
||||||
2. You can enable GitHub Pages in the repository settings to publish your website
|
|
||||||
@@ -1,262 +0,0 @@
|
|||||||
# 🍔 HAMBURGER MENU IMPLEMENTATION - COMPLETE
|
|
||||||
|
|
||||||
## Project Overview
|
|
||||||
|
|
||||||
Successfully implemented a responsive hamburger menu for mobile navigation across the entire Gyannetra website, providing an enhanced mobile user experience with modern UI interactions.
|
|
||||||
|
|
||||||
## ✅ Implementation Status: COMPLETE
|
|
||||||
|
|
||||||
### Files Updated: 19 Total
|
|
||||||
|
|
||||||
- **Main Pages**: index.html, about.html, contact.html
|
|
||||||
- **Services**: 5 pages (machine-learning, data-analysis, generative-ai, agentic-ai, automation-flows)
|
|
||||||
- **Industries**: 8 pages (finance, healthcare, manufacturing, marketing, media-entertainment, travel, retail, case-studies)
|
|
||||||
- **Education**: 3 pages (workshops, individual-trainings, corporate-trainings)
|
|
||||||
|
|
||||||
### 🎯 Core Features Implemented
|
|
||||||
|
|
||||||
#### 1. Hamburger Button HTML Structure
|
|
||||||
|
|
||||||
```html
|
|
||||||
<button class="hamburger-menu" aria-label="Toggle menu">
|
|
||||||
<span class="hamburger-line"></span>
|
|
||||||
<span class="hamburger-line"></span>
|
|
||||||
<span class="hamburger-line"></span>
|
|
||||||
</button>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### 2. Responsive CSS Styling
|
|
||||||
|
|
||||||
- **Breakpoint**: @media (max-width: 768px)
|
|
||||||
- **Mobile Menu**: Full-screen overlay with backdrop blur
|
|
||||||
- **Animation**: Hamburger lines transform to X when active
|
|
||||||
- **Touch-Friendly**: Large tap targets and proper spacing
|
|
||||||
|
|
||||||
#### 3. JavaScript Functionality
|
|
||||||
|
|
||||||
- **File**: menu-dropdown.js
|
|
||||||
- **Toggle**: Click hamburger to open/close menu
|
|
||||||
- **Auto-close**: Menu closes when navigation links are clicked
|
|
||||||
- **Dropdown Support**: Mobile-optimized dropdown menus
|
|
||||||
- **Scroll Lock**: Prevents body scrolling when menu is open
|
|
||||||
|
|
||||||
## 🎨 Design Features
|
|
||||||
|
|
||||||
### Desktop View (>768px)
|
|
||||||
|
|
||||||
- Traditional horizontal navigation bar
|
|
||||||
- Hover effects on navigation links
|
|
||||||
- Standard dropdown menus
|
|
||||||
|
|
||||||
### Mobile View (≤768px)
|
|
||||||
|
|
||||||
- Hamburger icon replaces navigation links
|
|
||||||
- Full-screen mobile menu overlay
|
|
||||||
- Animated hamburger-to-X icon transformation
|
|
||||||
- Vertical dropdown menus with touch-friendly spacing
|
|
||||||
|
|
||||||
## 🛠️ Technical Implementation
|
|
||||||
|
|
||||||
### CSS Architecture
|
|
||||||
|
|
||||||
```css
|
|
||||||
.hamburger-menu {
|
|
||||||
display: none; /* Hidden on desktop */
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
/* Hamburger styling */
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.hamburger-menu {
|
|
||||||
display: flex; /* Show on mobile */
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links {
|
|
||||||
position: fixed;
|
|
||||||
left: -100%; /* Hidden by default */
|
|
||||||
/* Full-screen overlay styling */
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-links.active {
|
|
||||||
left: 0; /* Slide in when active */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
### JavaScript Events
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// Toggle hamburger menu
|
|
||||||
hamburgerMenu.addEventListener("click", function () {
|
|
||||||
hamburgerMenu.classList.toggle("active");
|
|
||||||
navLinks.classList.toggle("active");
|
|
||||||
|
|
||||||
// Prevent body scrolling
|
|
||||||
document.body.style.overflow = navLinks.classList.contains("active")
|
|
||||||
? "hidden"
|
|
||||||
: "";
|
|
||||||
});
|
|
||||||
```
|
|
||||||
|
|
||||||
## 📱 Mobile UX Enhancements
|
|
||||||
|
|
||||||
### Visual Effects
|
|
||||||
|
|
||||||
- **Slide Animation**: Menu slides in from left with smooth 0.3s transition
|
|
||||||
- **Backdrop Blur**: Background content blurred for focus
|
|
||||||
- **Icon Animation**: Hamburger lines morph into X with CSS transforms
|
|
||||||
- **Overlay Gradient**: Beautiful gradient background with transparency
|
|
||||||
|
|
||||||
### Interaction Design
|
|
||||||
|
|
||||||
- **Touch Optimization**: 44px minimum touch targets
|
|
||||||
- **Auto-Close**: Tapping navigation links closes the menu
|
|
||||||
- **Dropdown Integration**: Mobile dropdowns expand vertically
|
|
||||||
- **Scroll Prevention**: Body scroll locked when menu is open
|
|
||||||
|
|
||||||
## 🧪 Testing & Validation
|
|
||||||
|
|
||||||
### Automated Validation
|
|
||||||
|
|
||||||
- **Script**: validate-hamburger-menu.ps1
|
|
||||||
- **Coverage**: 19/19 files pass validation
|
|
||||||
- **Checks**: HTML structure, CSS implementation, JavaScript integration
|
|
||||||
|
|
||||||
### Manual Testing Points
|
|
||||||
|
|
||||||
1. **Responsive Breakpoint**: Verify hamburger appears at ≤768px width
|
|
||||||
2. **Animation**: Confirm smooth hamburger-to-X transformation
|
|
||||||
3. **Menu Overlay**: Test full-screen menu with backdrop blur
|
|
||||||
4. **Touch Interaction**: Verify large tap targets work on mobile
|
|
||||||
5. **Dropdown Functionality**: Test dropdown menus in mobile view
|
|
||||||
6. **Auto-Close**: Confirm menu closes when links are clicked
|
|
||||||
7. **Cross-Page Consistency**: Test across all 19 pages
|
|
||||||
|
|
||||||
### Browser Compatibility
|
|
||||||
|
|
||||||
- ✅ Modern browsers (Chrome, Firefox, Safari, Edge)
|
|
||||||
- ✅ Mobile browsers (iOS Safari, Chrome Mobile)
|
|
||||||
- ✅ CSS3 and ES6+ features utilized
|
|
||||||
|
|
||||||
## 🚀 Performance Impact
|
|
||||||
|
|
||||||
### Minimal Overhead
|
|
||||||
|
|
||||||
- **CSS**: ~50 lines of additional mobile styles
|
|
||||||
- **JavaScript**: ~50 lines of event handling code
|
|
||||||
- **HTML**: 4 additional elements per page (button + 3 spans)
|
|
||||||
|
|
||||||
### Optimization Features
|
|
||||||
|
|
||||||
- **CSS Transitions**: Hardware-accelerated animations
|
|
||||||
- **Event Delegation**: Efficient click handling
|
|
||||||
- **Conditional Loading**: Mobile styles only apply below 768px
|
|
||||||
|
|
||||||
## 📊 Accessibility Features
|
|
||||||
|
|
||||||
### ARIA Support
|
|
||||||
|
|
||||||
- `aria-label="Toggle menu"` on hamburger button
|
|
||||||
- Semantic HTML structure maintained
|
|
||||||
- Keyboard navigation preserved
|
|
||||||
|
|
||||||
### Screen Reader Friendly
|
|
||||||
|
|
||||||
- Descriptive button labels
|
|
||||||
- Proper heading hierarchy maintained
|
|
||||||
- Focus management for menu interactions
|
|
||||||
|
|
||||||
## 🎯 Key Benefits Delivered
|
|
||||||
|
|
||||||
### User Experience
|
|
||||||
|
|
||||||
- **Mobile-First**: Modern responsive navigation pattern
|
|
||||||
- **Touch-Friendly**: Optimized for finger navigation
|
|
||||||
- **Fast Access**: Single-tap menu access on mobile
|
|
||||||
- **Consistent**: Uniform experience across all pages
|
|
||||||
|
|
||||||
### Technical Benefits
|
|
||||||
|
|
||||||
- **Maintainable**: Clean separation of HTML, CSS, and JavaScript
|
|
||||||
- **Scalable**: Easy to add new navigation items
|
|
||||||
- **Performance**: Lightweight implementation
|
|
||||||
- **Standards**: Follows modern web development best practices
|
|
||||||
|
|
||||||
## 📝 Implementation Timeline
|
|
||||||
|
|
||||||
1. **HTML Structure**: Added hamburger button to all 19 pages
|
|
||||||
2. **CSS Styling**: Implemented responsive mobile menu styles
|
|
||||||
3. **JavaScript**: Developed menu toggle and dropdown functionality
|
|
||||||
4. **PowerShell Automation**: Created script to update multiple files
|
|
||||||
5. **Manual Fixes**: Updated 3 service pages with missing elements
|
|
||||||
6. **Testing**: Comprehensive validation across all pages
|
|
||||||
7. **Documentation**: Created test page and validation scripts
|
|
||||||
|
|
||||||
## 🔧 Files Created/Modified
|
|
||||||
|
|
||||||
### New Files
|
|
||||||
|
|
||||||
- `hamburger-test.html` - Comprehensive test page
|
|
||||||
- `validate-hamburger-menu.ps1` - Validation script
|
|
||||||
- `add-hamburger-menu.ps1` - Initial automation script
|
|
||||||
|
|
||||||
### Modified Files
|
|
||||||
|
|
||||||
- `css/style.css` - Added mobile responsive styles
|
|
||||||
- `js/menu-dropdown.js` - Enhanced with hamburger functionality
|
|
||||||
- All 19 HTML pages - Added hamburger button structure
|
|
||||||
|
|
||||||
## 🎉 Project Completion Status
|
|
||||||
|
|
||||||
### ✅ All Requirements Met
|
|
||||||
|
|
||||||
- [x] Hamburger menu appears on mobile devices (≤768px)
|
|
||||||
- [x] Navigation links hidden behind hamburger icon
|
|
||||||
- [x] Smooth animations and transitions
|
|
||||||
- [x] Touch-friendly mobile interface
|
|
||||||
- [x] Full-screen overlay menu
|
|
||||||
- [x] Dropdown menu integration
|
|
||||||
- [x] Auto-close functionality
|
|
||||||
- [x] Cross-page consistency
|
|
||||||
- [x] Accessibility compliance
|
|
||||||
- [x] Performance optimization
|
|
||||||
|
|
||||||
### 🎯 Success Metrics
|
|
||||||
|
|
||||||
- **Coverage**: 100% of pages updated (19/19)
|
|
||||||
- **Validation**: 100% pass rate on automated checks
|
|
||||||
- **Responsiveness**: Works perfectly at mobile breakpoint
|
|
||||||
- **Functionality**: All features working as designed
|
|
||||||
- **UX**: Smooth, modern mobile navigation experience
|
|
||||||
|
|
||||||
## 🚀 Optional Future Enhancements
|
|
||||||
|
|
||||||
### Potential Improvements
|
|
||||||
|
|
||||||
1. **Swipe Gestures**: Add touch swipe to close menu
|
|
||||||
2. **Keyboard Navigation**: Enhanced keyboard accessibility
|
|
||||||
3. **Animation Variants**: Different hamburger animation styles
|
|
||||||
4. **Close Button**: Optional dedicated close button in menu
|
|
||||||
5. **Menu Themes**: Different color schemes for mobile menu
|
|
||||||
6. **Micro-Interactions**: Additional hover/tap feedback
|
|
||||||
|
|
||||||
### Advanced Features
|
|
||||||
|
|
||||||
1. **Progressive Web App**: Service worker integration
|
|
||||||
2. **Voice Navigation**: Voice command support
|
|
||||||
3. **Gesture Controls**: Advanced touch gestures
|
|
||||||
4. **Analytics**: Track mobile menu usage
|
|
||||||
5. **A/B Testing**: Test different menu layouts
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 🎊 IMPLEMENTATION COMPLETE!
|
|
||||||
|
|
||||||
The hamburger menu has been successfully implemented across the entire Gyannetra website, providing a modern, responsive, and user-friendly mobile navigation experience. All 19 pages now feature a consistent, touch-optimized navigation system that enhances the mobile user experience while maintaining full functionality across all device sizes.
|
|
||||||
|
|
||||||
**Test the implementation**: http://localhost:8080/hamburger-test.html
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
_Hamburger Menu Implementation - Completed May 27, 2025_
|
|
||||||
@@ -4,249 +4,9 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Case Studies - Gyannetra</title>
|
<title>Case Studies - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css?v=202412291400">
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Case Studies Card Styles */
|
|
||||||
|
|
||||||
.articles-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 25px;
|
|
||||||
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(147, 51, 234, 0.3);
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(147, 51, 234, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 180px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.case-studies-hero h1,
|
|
||||||
.case-studies-filters h2 {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.case-studies-grid-section {
|
|
||||||
padding: 40px 0 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Enhanced filter styles */
|
|
||||||
.filter-controls {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
background-color: rgba(25, 35, 55, 0.5);
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(147, 51, 234, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-filter button,
|
|
||||||
.search-filter input {
|
|
||||||
background: rgba(255, 255, 255, 0.1);
|
|
||||||
border: 1px solid var(--primary-color);
|
|
||||||
padding: 10px 15px;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: var(--text-light);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dropdown-filter button:hover,
|
|
||||||
.search-filter input:focus {
|
|
||||||
background: rgba(255, 255, 255, 0.15);
|
|
||||||
border-color: var(--primary-color-hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-filter input {
|
|
||||||
width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-filter i {
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-right: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Added Footer CSS */
|
|
||||||
.site-footer {
|
|
||||||
background-color: #0f172a;
|
|
||||||
color: var(--text-muted);
|
|
||||||
padding: 50px 0;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
.footer-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 30px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
.footer-col {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 220px;
|
|
||||||
}
|
|
||||||
.footer-col-logo .logo {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.footer-col h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.footer-col ul li a:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
.footer-col p {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
line-height: 1.7;
|
|
||||||
}
|
|
||||||
.footer-col .social-links a {
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-right: 15px;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
.footer-col .social-links a:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
.footer-bottom {
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
.footer-col p a {
|
|
||||||
color: var(--text-muted);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.footer-col p a:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
/* End of Added Footer CSS */
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body class="theme-media">
|
<body class="theme-media">
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -4,277 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<title>AI in Finance - Gyannetra</title>
|
<title>AI in Finance - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css" />
|
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
} /* Finance Page Specific Styles - Using standardized theme class */.finance-page-container .hero-section.finance-hero {
|
|
||||||
text-align: center;
|
|
||||||
padding: 80px 20px 60px; /* Adjusted padding */
|
|
||||||
background: url('../assets/finance_hero_bg.jpg') no-repeat center center;
|
|
||||||
background-size: cover;
|
|
||||||
}.finance-page-container .hero-section.finance-hero h1 {
|
|
||||||
font-size: 3.2rem; /* Slightly adjusted */
|
|
||||||
margin-bottom: 15px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
|
||||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.finance-page-container .hero-section.finance-hero .subtitle {
|
|
||||||
font-size: 1.4rem; /* Slightly adjusted */
|
|
||||||
margin-bottom: 25px;
|
|
||||||
color: var(--text-light);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.finance-page-container .hero-section.finance-hero p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
max-width: 750px;
|
|
||||||
margin: 0 auto 30px auto;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-solutions-finance, .benefits-ai-finance,
|
|
||||||
.blogs-case-studies-finance {
|
|
||||||
padding: 60px 20px;
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
||||||
}
|
|
||||||
.ai-solutions-finance:last-child,
|
|
||||||
.benefits-ai-finance:last-child,
|
|
||||||
.blogs-case-studies-finance:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
} /* Using standard benefits-cards-grid for consistent card sizing */
|
|
||||||
/* Minor adjustments to ensure consistent appearance */
|
|
||||||
.benefits-ai-finance .benefits-cards-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr); /* Force 4 columns */
|
|
||||||
gap: 25px;
|
|
||||||
margin: 3rem auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-ai-finance .benefit-card {
|
|
||||||
height: 100%;
|
|
||||||
min-height: 240px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-ai-finance .benefit-card-icon {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-ai-finance .benefit-card p {
|
|
||||||
flex-grow: 1;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive adjustment for smaller screens */
|
|
||||||
@media (max-width: 992px) {
|
|
||||||
.benefits-ai-finance .benefits-cards-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 576px) {
|
|
||||||
.benefits-ai-finance .benefits-cards-grid {
|
|
||||||
grid-template-columns: 1fr; /* 1 column on smallest screens */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-solutions-finance h2,
|
|
||||||
.benefits-ai-finance h2,
|
|
||||||
.blogs-case-studies-finance h2 {
|
|
||||||
font-size: 2.2rem; /* Slightly adjusted */
|
|
||||||
margin-bottom: 45px;
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solutions-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* Responsive columns */
|
|
||||||
gap: 35px;
|
|
||||||
justify-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
border: 1px solid rgba(var(--primary-color-glow), 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-icon {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
/* SVG icons will inherit stroke from their own style, or you can set fill here if needed */
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 5px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-list {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around; /* Better spacing for two columns */
|
|
||||||
gap: 20px; /* Gap between the two ul lists */
|
|
||||||
flex-wrap: wrap;
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-list ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
flex-basis: calc(50% - 20px); /* Aim for two columns */
|
|
||||||
min-width: 300px; /* Ensure readability on smaller screens before wrapping */
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-list li {
|
|
||||||
font-size: 1.15rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 18px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(var(--primary-color-glow), 0.1);
|
|
||||||
padding: 12px 18px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 4px solid var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-list li i.fa-check-circle {
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-right: 12px;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.articles-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 25px;
|
|
||||||
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-glow),0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 220px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
flex-grow: 1; /* Allows p to take available space */
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-more-link {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
align-self: flex-start; /* Align button to the start of the flex item */
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body class="theme-finance">
|
<body class="theme-finance">
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -4,199 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<title>Healthcare - Gyannetra</title>
|
<title>Healthcare - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css" />
|
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Healthcare Card Structure Styles */
|
|
||||||
|
|
||||||
.solutions-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
|
||||||
gap: 35px;
|
|
||||||
justify-items: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
border: 1px solid rgba(0, 198, 255, 0.3);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item img {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.articles-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 25px;
|
|
||||||
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(0, 198, 255, 0.3);
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(0, 198, 255, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 180px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
} .section-heading {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
margin-bottom: 45px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.industry-benefits ul {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 20px;
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.industry-benefits li {
|
|
||||||
font-size: 1.15rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(0, 198, 255, 0.1);
|
|
||||||
padding: 12px 18px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 4px solid var(--primary-color);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body class="theme-healthcare">
|
<body class="theme-healthcare">
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -4,233 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<title>AI in Manufacturing - Gyannetra</title>
|
<title>AI in Manufacturing - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css" />
|
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Manufacturing Page Specific Styles */ /* Hero section */
|
|
||||||
.manufacturing-hero {
|
|
||||||
text-align: center;
|
|
||||||
padding: 80px 20px 60px;
|
|
||||||
background: url('../assets/manufacturing_hero_bg.jpg') no-repeat center center;
|
|
||||||
background-size: cover;
|
|
||||||
}.manufacturing-hero h1 {
|
|
||||||
font-size: 3.2rem;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
|
||||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.manufacturing-hero p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
max-width: 750px;
|
|
||||||
margin: 0 auto 30px auto;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Solutions grid */
|
|
||||||
.solutions-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
|
||||||
gap: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
border: 1px solid rgba(var(--primary-color-glow),0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item img {
|
|
||||||
height: 70px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Benefits section */
|
|
||||||
.benefits-section {
|
|
||||||
padding: 4rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-list {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
gap: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-section ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
flex-basis: calc(50% - 20px);
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-section li {
|
|
||||||
font-size: 1.15rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 18px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(var(--primary-color-glow), 0.1);
|
|
||||||
padding: 12px 18px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 4px solid var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-section li i {
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-right: 12px;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Articles/case studies section */
|
|
||||||
.articles-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 25px;
|
|
||||||
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-glow),0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 220px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-more-link {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-heading {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 2.3rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body class="theme-manufacturing">
|
<body class="theme-manufacturing">
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -4,254 +4,10 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Marketing - Gyannetra</title>
|
<title>Marketing - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css">
|
<link rel="stylesheet" href="../css/style.css?v=202412291400">
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Marketing Card Structure Styles */
|
|
||||||
|
|
||||||
/* Marketing hero section styling */
|
|
||||||
.marketing-hero {
|
|
||||||
padding-top: 7rem;
|
|
||||||
padding-bottom: 4rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.marketing-hero .container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.marketing-hero-content {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 300px;
|
|
||||||
padding-right: 2rem;
|
|
||||||
}
|
|
||||||
.marketing-hero-content h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
|
||||||
}
|
|
||||||
.marketing-hero-content p {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.marketing-hero-image {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 300px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.marketing-hero-image img {
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solutions-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
|
||||||
gap: 35px;
|
|
||||||
justify-items: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
} .solution-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-icon {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.articles-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
} .article-card {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 25px;
|
|
||||||
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), 0.3);
|
|
||||||
height: 100%;
|
|
||||||
} .article-card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 180px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
} .features-section h2,
|
|
||||||
.advantage-section h2,
|
|
||||||
.blogs-section h2 {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
margin-bottom: 45px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advantage-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 20px;
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
} .advantage-list li {
|
|
||||||
font-size: 1.15rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(var(--primary-color-rgb), 0.1);
|
|
||||||
padding: 12px 18px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 4px solid var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.explore-button {
|
|
||||||
display: inline-block;
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
color: white;
|
|
||||||
padding: 12px 24px;
|
|
||||||
border-radius: 30px;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: bold;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.explore-button:hover {
|
|
||||||
background-color: var(--primary-color-hover);
|
|
||||||
transform: translateY(-3px);
|
|
||||||
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body class="theme-marketing">
|
<body class="theme-marketing">
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -3,188 +3,10 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>AI in Media & Entertainment - Gyannetra</title> <link rel="stylesheet" href="../css/style.css">
|
<title>AI in Media & Entertainment - Gyannetra</title> <link rel="stylesheet" href="../css/style.css?v=202412291400">
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css">
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> <style>
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
/* Media & Entertainment Page Specific Styles */ /* Hero section */ .media-hero {
|
|
||||||
text-align: center;
|
|
||||||
padding: 80px 20px 60px;
|
|
||||||
background: url('../assets/media_hero_bg.jpg') no-repeat center center;
|
|
||||||
background-size: cover;
|
|
||||||
}.media-hero h1 {
|
|
||||||
font-size: 3.2rem;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
|
||||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-hero .subtitle {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
color: var(--text-light);
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-hero p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
max-width: 750px;
|
|
||||||
margin: 0 auto 30px auto;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Solutions grid */
|
|
||||||
.solutions-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
|
||||||
gap: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
border: 1px solid rgba(var(--primary-color-glow),0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item img, .solution-item svg {
|
|
||||||
height: 70px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Benefits section */
|
|
||||||
.benefits-list-container {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
gap: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-list {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
flex-basis: calc(50% - 20px);
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-list li {
|
|
||||||
font-size: 1.15rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 18px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(var(--primary-color-glow), 0.1);
|
|
||||||
padding: 12px 18px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 4px solid var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-list li:before {
|
|
||||||
content: "\f00c";
|
|
||||||
font-family: "Font Awesome 5 Free";
|
|
||||||
font-weight: 900;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-right: 12px;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Articles/case studies section */
|
|
||||||
.articles-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 25px;
|
|
||||||
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-glow),0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 220px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-more-link {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-heading {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 2.3rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body class="theme-media">
|
<body class="theme-media">
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -4,326 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<title>AI in Retail - Gyannetra</title>
|
<title>AI in Retail - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css" />
|
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Retail Page Specific Styles */ /* Hero section */ .retail-hero {
|
|
||||||
text-align: center;
|
|
||||||
padding: 80px 20px 60px;
|
|
||||||
background: url('../assets/retail_hero_bg.jpg') no-repeat center center;
|
|
||||||
background-size: cover;
|
|
||||||
}.retail-hero h1 {
|
|
||||||
font-size: 3.2rem;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
|
||||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.retail-hero p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
max-width: 750px;
|
|
||||||
margin: 0 auto 30px auto;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Solutions grid */
|
|
||||||
.solutions-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
|
||||||
gap: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
border: 1px solid rgba(var(--primary-color-glow),0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item img {
|
|
||||||
height: 70px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Gyannetra advantage section */
|
|
||||||
.advantage-columns {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
gap: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advantage-list {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
flex-basis: calc(50% - 20px);
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.advantage-list li {
|
|
||||||
font-size: 1.15rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 18px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(var(--primary-color-glow), 0.1);
|
|
||||||
padding: 12px 18px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 4px solid var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.advantage-list li:before {
|
|
||||||
content: "\f00c";
|
|
||||||
font-family: "Font Awesome 5 Free";
|
|
||||||
font-weight: 900;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-right: 12px;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Articles/case studies section */
|
|
||||||
.articles-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 25px;
|
|
||||||
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-glow),0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 220px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-more-link {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-heading {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 2.3rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-padding {
|
|
||||||
padding: 4rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer styles */
|
|
||||||
.site-footer {
|
|
||||||
background-color: #111;
|
|
||||||
color: #bbb;
|
|
||||||
padding: 40px 0;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-col {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-col h3 {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-col a {
|
|
||||||
color: #bbb;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-col a:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-col-logo {
|
|
||||||
max-width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links {
|
|
||||||
display: flex;
|
|
||||||
gap: 15px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links a {
|
|
||||||
color: #bbb;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.social-links a:hover {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-bottom {
|
|
||||||
border-top: 1px solid #222;
|
|
||||||
padding-top: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newsletter-form {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newsletter-form input {
|
|
||||||
flex: 1;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #333;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: #222;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newsletter-form button {
|
|
||||||
padding: 10px 15px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.newsletter-form button:hover {
|
|
||||||
background-color: var(--primary-color-hover);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body class="theme-retail">
|
<body class="theme-retail">
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -4,239 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<title>AI in Travel - Gyannetra</title>
|
<title>AI in Travel - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css" />
|
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Travel Page Specific Styles */ /* Hero section */ .travel-hero {
|
|
||||||
text-align: center;
|
|
||||||
padding: 80px 20px 60px;
|
|
||||||
background: url('../assets/travel_hero_bg.jpg') no-repeat center center;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.travel-hero h1 {
|
|
||||||
font-size: 3.2rem;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
|
||||||
text-shadow: 0 2px 10px rgba(0,0,0,0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.travel-hero p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
max-width: 750px;
|
|
||||||
margin: 0 auto 30px auto;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Solutions grid */
|
|
||||||
.solutions-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
|
||||||
gap: 35px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
border: 1px solid rgba(var(--primary-color-glow),0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item img {
|
|
||||||
height: 70px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Advantage section */
|
|
||||||
#gyannetra-advantage ul {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 20px;
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 2rem auto;
|
|
||||||
max-width: 900px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gyannetra-advantage li {
|
|
||||||
font-size: 1.15rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 18px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: rgba(var(--primary-color-glow), 0.1);
|
|
||||||
padding: 12px 18px;
|
|
||||||
border-radius: 8px;
|
|
||||||
border-left: 4px solid var(--primary-color);
|
|
||||||
flex-basis: calc(33% - 20px);
|
|
||||||
min-width: 280px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#gyannetra-advantage li:before {
|
|
||||||
content: "\f00c";
|
|
||||||
font-family: "Font Awesome 5 Free";
|
|
||||||
font-weight: 900;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-right: 12px;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Articles/case studies section */
|
|
||||||
.articles-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 25px;
|
|
||||||
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-glow),0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-glow), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 220px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card .date {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-more-link {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
transition: 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-heading {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 2.3rem;
|
|
||||||
margin-bottom: 3rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
|
||||||
margin: 4rem 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body class="theme-travel">
|
<body class="theme-travel">
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -4,333 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<title>Agentic AI - Gyannetra</title>
|
<title>Agentic AI - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css" />
|
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Agentic AI Page Specific Styles */
|
|
||||||
|
|
||||||
/* Footer Styles to match automation-flows.html */
|
|
||||||
.site-footer {
|
|
||||||
background-color: #0f172a;
|
|
||||||
color: var(--text-muted);
|
|
||||||
padding: 50px 0;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
.footer-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 30px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
.footer-col {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 220px;
|
|
||||||
}
|
|
||||||
.footer-col-logo .logo {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.footer-col h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.footer-col ul li a:hover { color: var(--primary-color); }
|
|
||||||
.footer-col p { margin-bottom: 10px; line-height: 1.7; }
|
|
||||||
.footer-col .social-links a {
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-right: 15px;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
.footer-col .social-links a:hover { color: var(--primary-color); }
|
|
||||||
.footer-bottom {
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
.footer-col p a {
|
|
||||||
color: var(--text-muted);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.footer-col p a:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
/* End of Footer Styles */
|
|
||||||
|
|
||||||
.hero-section { /* Standardized from .agentic-ai-header */
|
|
||||||
text-align: center;
|
|
||||||
padding: 80px 20px 60px;
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
} .hero-section h1 { /* Standardized */
|
|
||||||
font-size: 3.2rem;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-section p { /* Standardized */
|
|
||||||
font-size: 1.1rem;
|
|
||||||
max-width: 750px;
|
|
||||||
margin: 0 auto 30px auto;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solutions-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
|
||||||
gap: 35px;
|
|
||||||
justify-items: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px; background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-icon {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.articles-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 25px;
|
|
||||||
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), 0.3);
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.article-card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 180px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
} .overview-section h2, /* Standardized */
|
|
||||||
.key-offerings-section h2, /* Standardized */
|
|
||||||
.benefits-section h2, /* Standardized */
|
|
||||||
.blogs-case-studies-section h2, /* Standardized */
|
|
||||||
.related-content-section h2 { /* Standardized */
|
|
||||||
font-size: 2.2rem;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.key-offerings-section h2 {
|
|
||||||
margin-bottom: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-section ul { /* Standardized */
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
margin-top: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-section li { /* Standardized */
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blogs-case-studies-section h2 {
|
|
||||||
margin-bottom: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
margin-top: 30px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-item {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 10px; border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-item h3 {
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-more {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.read-more:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-padding {
|
|
||||||
padding-top: 60px;
|
|
||||||
padding-bottom: 60px;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
width: 90%;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
} .site-header .navbar.container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1400px;
|
|
||||||
padding: 0.5rem 2.0rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -4,342 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<title>Automation Flows - Gyannetra</title>
|
<title>Automation Flows - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css" />
|
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Automation Flows Page Specific Styles */
|
|
||||||
|
|
||||||
.hero-section {
|
|
||||||
text-align: center;
|
|
||||||
padding: 80px 20px 60px;
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
} .hero-section h1 {
|
|
||||||
font-size: 3.2rem;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-section p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
max-width: 750px;
|
|
||||||
margin: 0 auto 30px auto;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solutions-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
|
||||||
gap: 35px;
|
|
||||||
justify-items: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px; background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-icon {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.articles-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 25px;
|
|
||||||
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), 0.3);
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.article-card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 180px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
} .overview-section h2,
|
|
||||||
.key-offerings-section h2,
|
|
||||||
.benefits-section h2,
|
|
||||||
.blogs-case-studies-section h2,
|
|
||||||
.related-content-section h2 {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.key-offerings-section h2 {
|
|
||||||
margin-bottom: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-section ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
margin-top: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-section li {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blogs-case-studies-section h2 {
|
|
||||||
margin-bottom: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
margin-top: 30px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-item { background-color: var(--card-bg);
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-item h3 {
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-more {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.read-more:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-padding {
|
|
||||||
padding-top: 60px;
|
|
||||||
padding-bottom: 60px;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
width: 90%;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
} .site-header .navbar.container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1400px;
|
|
||||||
padding: 0.5rem 2.0rem;
|
|
||||||
}
|
|
||||||
.site-footer {
|
|
||||||
background-color: #0f172a;
|
|
||||||
color: var(--text-muted);
|
|
||||||
padding: 50px 0;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
.footer-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 30px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
.footer-col {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 220px;
|
|
||||||
}
|
|
||||||
.footer-col-logo .logo {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.footer-col h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.footer-col ul li a:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
.footer-col p {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
line-height: 1.7;
|
|
||||||
}
|
|
||||||
.footer-col .social-links a {
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-right: 15px;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
.footer-col .social-links a:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
.footer-bottom {
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
.footer-col p a {
|
|
||||||
color: var(--text-muted);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.footer-col p a:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -4,340 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<title>Data Analysis - Gyannetra</title>
|
<title>Data Analysis - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css" />
|
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Data Analysis Page Specific Styles */
|
|
||||||
body {
|
|
||||||
/* Using standardized colors from main CSS */
|
|
||||||
--card-bg: rgba(25, 35, 55, 0.7);
|
|
||||||
--text-light: #e0e0e0;
|
|
||||||
--text-muted: #b0b0b0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-section {
|
|
||||||
text-align: center;
|
|
||||||
padding: 80px 20px 60px;
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative; /* Ensure hero content is above atmospheric bg */
|
|
||||||
z-index: 2; /* Ensure hero content is above atmospheric bg */
|
|
||||||
} .hero-section h1 {
|
|
||||||
font-size: 3.2rem;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-section p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
max-width: 750px;
|
|
||||||
margin: 0 auto 30px auto;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solutions-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
|
||||||
gap: 35px;
|
|
||||||
justify-items: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: var(--card-bg); border-radius: 12px;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
|
||||||
} .solution-icon {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
object-fit: contain;
|
|
||||||
display: block;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make SVG images white for better visibility */
|
|
||||||
.solution-item img[src$=".svg"] {
|
|
||||||
filter: brightness(0) invert(1);
|
|
||||||
padding: 8px; /* Add some padding for better visibility */
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.articles-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 25px;
|
|
||||||
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), 0.3);
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.article-card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 180px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overview-section h2,
|
|
||||||
.key-offerings-section h2,
|
|
||||||
.benefits-section h2,
|
|
||||||
.blogs-case-studies-section h2, .related-content-section h2 {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.key-offerings-section h2 {
|
|
||||||
margin-bottom: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-section ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
margin-top: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-section li {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blogs-case-studies-section h2 {
|
|
||||||
margin-bottom: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
margin-top: 30px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-item { background-color: var(--card-bg);
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-item h3 {
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
.read-more {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-image {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
/* Removed conflicting section styling that was here:
|
|
||||||
section:not(.hero-section) {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
/* Footer Styles to match automation-flows.html */
|
|
||||||
.site-footer {
|
|
||||||
background-color: #0f172a;
|
|
||||||
color: var(--text-muted);
|
|
||||||
padding: 50px 0;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
.footer-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 30px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
.footer-col {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 220px;
|
|
||||||
}
|
|
||||||
.footer-col-logo .logo {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.footer-col h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.footer-col ul li a:hover { color: var(--primary-color); }
|
|
||||||
.footer-col p { margin-bottom: 10px; line-height: 1.7; }
|
|
||||||
.footer-col .social-links a {
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-right: 15px;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
.footer-col .social-links a:hover { color: var(--primary-color); }
|
|
||||||
.footer-bottom {
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
.footer-col p a {
|
|
||||||
color: var(--text-muted);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.footer-col p a:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
/* End of Footer Styles */
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -4,339 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<title>Generative AI - Gyannetra</title>
|
<title>Generative AI - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css" />
|
<link rel="stylesheet" href="../css/style.css?v=202412291400" />
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
/* Card Structure Styles */
|
|
||||||
body {
|
|
||||||
/* Using standardized colors from main CSS */
|
|
||||||
--card-bg: rgba(25, 35, 55, 0.7);
|
|
||||||
--text-light: #e0e0e0;
|
|
||||||
--text-muted: #b0b0b0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Footer Styles to match automation-flows.html */
|
|
||||||
.site-footer {
|
|
||||||
background-color: #0f172a;
|
|
||||||
color: var(--text-muted);
|
|
||||||
padding: 50px 0;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
.footer-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 30px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
.footer-col {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 220px;
|
|
||||||
}
|
|
||||||
.footer-col-logo .logo {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.footer-col h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.footer-col ul li a:hover { color: var(--primary-color); } /* Uses page-specific --primary-color */
|
|
||||||
.footer-col p { margin-bottom: 10px; line-height: 1.7; }
|
|
||||||
.footer-col .social-links a {
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-right: 15px;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
.footer-col .social-links a:hover { color: var(--primary-color); } /* Uses page-specific --primary-color */
|
|
||||||
.footer-bottom {
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
.footer-col p a {
|
|
||||||
color: var(--text-muted);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.footer-col p a:hover {
|
|
||||||
color: var(--primary-color); /* Uses page-specific --primary-color */
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
/* End of Footer Styles */
|
|
||||||
|
|
||||||
.hero-section {
|
|
||||||
text-align: center;
|
|
||||||
padding: 80px 20px 60px;
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative; /* Ensure hero content is above atmospheric bg */
|
|
||||||
z-index: 2; /* Ensure hero content is above atmospheric bg */
|
|
||||||
} .hero-section h1 {
|
|
||||||
font-size: 3.2rem;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-section p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
max-width: 750px;
|
|
||||||
margin: 0 auto 30px auto;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solutions-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
|
|
||||||
gap: 35px;
|
|
||||||
justify-items: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-icon {
|
|
||||||
width: 70px;
|
|
||||||
height: 70px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blogs-case-studies-section {
|
|
||||||
/* padding: 60px 20px; */ /* Padding now handled by .section-padding class */
|
|
||||||
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.articles-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 25px;
|
|
||||||
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), 0.3);
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.article-card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 180px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
/* Removed conflicting generic section styling that was here:
|
|
||||||
section {
|
|
||||||
margin: 4rem 0;
|
|
||||||
padding: 1rem 0;
|
|
||||||
}
|
|
||||||
*/ .overview-section h2,
|
|
||||||
.key-offerings-section h2,
|
|
||||||
.benefits-section h2,
|
|
||||||
.blogs-case-studies-section h2,
|
|
||||||
.related-content-section h2 {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.key-offerings-section h2 {
|
|
||||||
margin-bottom: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-section ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
margin-top: 20px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-section li {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blogs-case-studies-section h2 { /* This refers to the h2 within the section */
|
|
||||||
margin-bottom: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
margin-top: 30px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-item {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
padding: 20px; border-radius: 10px;
|
|
||||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-item h3 {
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
.related-content-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-image {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
object-fit: contain;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-more {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -4,381 +4,9 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<title>Machine Learning - Gyannetra</title>
|
<title>Machine Learning - Gyannetra</title>
|
||||||
<link rel="stylesheet" href="../css/style.css" />
|
<link rel="stylesheet" href="../css/style.css?v=202412291401" />
|
||||||
<link rel="stylesheet" href="../css/benefits-cards.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* General styles */
|
|
||||||
body {
|
|
||||||
/* Using standardized colors from main CSS */
|
|
||||||
--card-bg: rgba(25, 35, 55, 0.7); /* Darker card background for contrast */
|
|
||||||
--text-light: #e0e0e0;
|
|
||||||
--text-muted: #b0b0b0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-section {
|
|
||||||
text-align: center;
|
|
||||||
padding: 80px 20px 60px;
|
|
||||||
max-width: 900px;
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative; /* Ensure hero content is above atmospheric bg */
|
|
||||||
z-index: 2; /* Ensure hero content is above atmospheric bg */
|
|
||||||
} .hero-section h1 {
|
|
||||||
font-size: 3.2rem;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
/* Inherit the beautiful gradient and glow from main h1 styling */
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-section p {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
max-width: 750px;
|
|
||||||
margin: 0 auto 30px auto;
|
|
||||||
line-height: 1.7;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solutions-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* Adjusted minmax for potentially smaller cards */
|
|
||||||
gap: 35px;
|
|
||||||
justify-items: center;
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
|
||||||
width: 100%;
|
|
||||||
height: 100%; /* Ensure items in a row have same height */
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-icon {
|
|
||||||
width: 70px; /* Standardized icon size */
|
|
||||||
height: 70px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item h3 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.solution-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.articles-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 25px;
|
|
||||||
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), 0.3);
|
|
||||||
height: 100%;/* Ensure cards in a row have same height */
|
|
||||||
}
|
|
||||||
.article-card:hover {
|
|
||||||
transform: translateY(-8px);
|
|
||||||
box-shadow: 0 12px 25px rgba(var(--primary-color-rgb), 0.4);
|
|
||||||
}
|
|
||||||
.article-card img {
|
|
||||||
width: 100%;
|
|
||||||
height: 180px;
|
|
||||||
object-fit: cover;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
} /* Enhanced styling for SVG images in article cards */
|
|
||||||
.article-card img[src$=".svg"] {
|
|
||||||
object-fit: contain;
|
|
||||||
padding: 30px;
|
|
||||||
filter: brightness(0) invert(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card h3 {
|
|
||||||
font-size: 1.4rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.article-card p {
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
flex-grow: 1; /* Allows paragraph to take available space */
|
|
||||||
}
|
|
||||||
|
|
||||||
.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; /* Aligns button to the bottom left */
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overview-section h2,
|
|
||||||
.key-offerings-section h2,
|
|
||||||
.benefits-section h2,
|
|
||||||
.blogs-case-studies-section h2, .related-content-section h2 {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
margin-bottom: 30px; /* Standardized margin */
|
|
||||||
/* Inherit the beautiful gradient and glow from main h2 styling */
|
|
||||||
text-align: center;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.key-offerings-section h2 {
|
|
||||||
margin-bottom: 45px; /* Specific for this section if needed */
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-section ul {
|
|
||||||
list-style-type: none; /* Consider using icons or custom bullets */
|
|
||||||
padding: 0;
|
|
||||||
margin-top: 20px;
|
|
||||||
text-align: center; /* Or left-align if preferred */
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefits-section li {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 1.1rem;
|
|
||||||
color: var(--text-light);
|
|
||||||
/* Consider adding padding if using background or borders */
|
|
||||||
}
|
|
||||||
|
|
||||||
.blogs-case-studies-section h2 {
|
|
||||||
margin-bottom: 45px; /* Specific for this section */
|
|
||||||
}
|
|
||||||
.related-content-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
||||||
gap: 30px;
|
|
||||||
margin-top: 30px;
|
|
||||||
margin-bottom: 40px; /* Space before final CTA */
|
|
||||||
justify-items: center; /* Center align items when there's only one */
|
|
||||||
} .related-content-item {
|
|
||||||
background-color: var(--card-bg);
|
|
||||||
padding: 20px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid rgba(var(--primary-color-rgb), 0.3);
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
max-width: 400px; /* Limit width when centered */
|
|
||||||
text-align: center; /* Center align content within the item */
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-item:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.3);
|
|
||||||
} .related-content-image {
|
|
||||||
width: 75px;
|
|
||||||
height: 75px;
|
|
||||||
object-fit: contain;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Make SVG images in related content white */
|
|
||||||
.related-content-item img[src$=".svg"] {
|
|
||||||
filter: brightness(0) invert(1);
|
|
||||||
padding: 10px; /* Add some padding for better visibility */
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-item h3 {
|
|
||||||
color: var(--primary-color);
|
|
||||||
margin-bottom: 10px;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.related-content-item p {
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-more { /* General read-more link style if needed */
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.read-more:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure section padding is applied */
|
|
||||||
.section-padding {
|
|
||||||
padding-top: 60px;
|
|
||||||
padding-bottom: 60px;
|
|
||||||
}
|
|
||||||
/* General container for consistent width */
|
|
||||||
.container {
|
|
||||||
width: 90%;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
/* Adjustments for navbar within header */
|
|
||||||
.site-header .navbar.container {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1400px;
|
|
||||||
padding: 0.5rem 2.0rem;
|
|
||||||
}
|
|
||||||
/* Footer specific styling */
|
|
||||||
.site-footer {
|
|
||||||
background-color: #0f172a; /* Dark background for footer */
|
|
||||||
color: var(--text-muted);
|
|
||||||
padding: 50px 0;
|
|
||||||
font-size: 0.95rem;
|
|
||||||
}
|
|
||||||
.footer-content {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 30px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
.footer-col {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 220px; /* Minimum width for columns */
|
|
||||||
}
|
|
||||||
.footer-col-logo .logo {
|
|
||||||
font-size: 1.8rem;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
.footer-col h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
.footer-col ul li a:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
.footer-col p {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
line-height: 1.7;
|
|
||||||
}
|
|
||||||
.footer-col .social-links a {
|
|
||||||
color: var(--text-muted);
|
|
||||||
margin-right: 15px;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
transition: color 0.3s ease;
|
|
||||||
}
|
|
||||||
.footer-col .social-links a:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
.footer-bottom {
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 20px;
|
|
||||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
.footer-col p a { /* Ensure links in paragraphs are styled */
|
|
||||||
color: var(--text-muted);
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
.footer-col p a:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -1,99 +0,0 @@
|
|||||||
function Push-To-GitHub {
|
|
||||||
param (
|
|
||||||
[Parameter(Mandatory=$true)]
|
|
||||||
[string]$GitHubRepo,
|
|
||||||
|
|
||||||
[Parameter(Mandatory=$true)]
|
|
||||||
[string]$Username,
|
|
||||||
|
|
||||||
[Parameter(Mandatory=$false)]
|
|
||||||
[string]$Token
|
|
||||||
)
|
|
||||||
|
|
||||||
# Check if Git is installed
|
|
||||||
try {
|
|
||||||
$gitVersion = git --version
|
|
||||||
Write-Host "Git is available: $gitVersion" -ForegroundColor Green
|
|
||||||
}
|
|
||||||
catch {
|
|
||||||
Write-Host "Git is not installed or not in PATH. Please install Git first." -ForegroundColor Red
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
# Check if repository exists
|
|
||||||
if (-not (Test-Path -Path ".git")) {
|
|
||||||
Write-Host "Initializing git repository..." -ForegroundColor Yellow
|
|
||||||
git init
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
Write-Host "Git repository already initialized." -ForegroundColor Green
|
|
||||||
}
|
|
||||||
|
|
||||||
# Configure remote
|
|
||||||
$remoteUrl = "https://$Username@github.com/$GitHubRepo"
|
|
||||||
if ($Token) {
|
|
||||||
$remoteUrl = "https://$Username:$Token@github.com/$GitHubRepo"
|
|
||||||
}
|
|
||||||
|
|
||||||
# Check if origin exists
|
|
||||||
$remotes = git remote
|
|
||||||
if ($remotes -contains "origin") {
|
|
||||||
Write-Host "Updating remote URL..." -ForegroundColor Yellow
|
|
||||||
git remote set-url origin $remoteUrl
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
Write-Host "Adding remote..." -ForegroundColor Yellow
|
|
||||||
git remote add origin $remoteUrl
|
|
||||||
}
|
|
||||||
|
|
||||||
# Add all files
|
|
||||||
Write-Host "Adding all files..." -ForegroundColor Yellow
|
|
||||||
git add .
|
|
||||||
|
|
||||||
# Commit changes
|
|
||||||
Write-Host "Committing changes..." -ForegroundColor Yellow
|
|
||||||
git commit -m "Upload entire website"
|
|
||||||
|
|
||||||
# Get current branch name
|
|
||||||
$branch = git rev-parse --abbrev-ref HEAD
|
|
||||||
Write-Host "Current branch: $branch" -ForegroundColor Green
|
|
||||||
|
|
||||||
# Push to GitHub
|
|
||||||
try {
|
|
||||||
Write-Host "Pushing to GitHub... This might take a while depending on your file size and internet connection." -ForegroundColor Yellow
|
|
||||||
if ($Token) {
|
|
||||||
git push -u origin $branch
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
# Push and capture output to avoid showing credentials in the terminal
|
|
||||||
$output = git push -u origin $branch 2>&1
|
|
||||||
if ($LASTEXITCODE -ne 0) {
|
|
||||||
Write-Host "Push failed. You might need to provide a token." -ForegroundColor Red
|
|
||||||
Write-Host "Visit https://github.com/settings/tokens to create a token with 'repo' scope."
|
|
||||||
$Token = Read-Host "Enter your GitHub Personal Access Token" -AsSecureString
|
|
||||||
$BSTR = [System.Runtime.InteropServices.Marshal]::SecureStringToBSTR($Token)
|
|
||||||
$plainToken = [System.Runtime.InteropServices.Marshal]::PtrToStringAuto($BSTR)
|
|
||||||
|
|
||||||
$tokenUrl = "https://$Username:$plainToken@github.com/$GitHubRepo"
|
|
||||||
git remote set-url origin $tokenUrl
|
|
||||||
git push -u origin $branch
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ($LASTEXITCODE -eq 0) {
|
|
||||||
Write-Host "Successfully pushed to GitHub!" -ForegroundColor Green
|
|
||||||
Write-Host "Visit https://github.com/$GitHubRepo to see your repository."
|
|
||||||
}
|
|
||||||
}
|
|
||||||
catch {
|
|
||||||
Write-Host "Error pushing to GitHub: $_" -ForegroundColor Red
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
# Run the function
|
|
||||||
Write-Host "GitHub Website Uploader" -ForegroundColor Cyan
|
|
||||||
Write-Host "======================" -ForegroundColor Cyan
|
|
||||||
$repo = Read-Host "GitHub Repository (e.g., shaurya05745/website)"
|
|
||||||
$username = Read-Host "GitHub Username"
|
|
||||||
|
|
||||||
Push-To-GitHub -GitHubRepo $repo -Username $username
|
|
||||||
53
about.html
53
about.html
@@ -3,60 +3,9 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<title>About Us - Gyannetra</title>
|
<title>About Us - Gyannetra</title> <link rel="stylesheet" href="css/style.css?v=202412291400" />
|
||||||
<link rel="stylesheet" href="css/style.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="atmospheric-bg">
|
<div class="atmospheric-bg">
|
||||||
|
|||||||
@@ -3,13 +3,10 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||||||
<title>Contact Us - Gyannetra</title>
|
<title>Contact Us - Gyannetra</title> <link rel="stylesheet" href="css/style.css?v=202412291400" />
|
||||||
<link rel="stylesheet" href="css/style.css" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.site-header {
|
.site-header {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|||||||
@@ -1,106 +0,0 @@
|
|||||||
/* Benefits Cards Styling */
|
|
||||||
.benefits-cards-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
||||||
gap: 25px;
|
|
||||||
margin: 3rem auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card {
|
|
||||||
background: rgba(30, 40, 60, 0.7);
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 25px;
|
|
||||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card:hover {
|
|
||||||
transform: translateY(-5px);
|
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 4px;
|
|
||||||
height: 100%;
|
|
||||||
background: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 4px;
|
|
||||||
background: linear-gradient(90deg, transparent, var(--primary-color));
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
color: #ffffff;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card p {
|
|
||||||
color: var(--text-light);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
line-height: 1.6;
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card-icon {
|
|
||||||
margin-bottom: 20px;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background: rgba(var(--primary-color-rgb), 0.15);
|
|
||||||
border-radius: 50%;
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card-icon i {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
color: var(--primary-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive adjustments */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.benefits-cards-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Animation for cards */
|
|
||||||
.benefit-card {
|
|
||||||
animation: fadeIn 0.6s ease-out forwards;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.benefit-card:nth-child(1) { animation-delay: 0.1s; }
|
|
||||||
.benefit-card:nth-child(2) { animation-delay: 0.2s; }
|
|
||||||
.benefit-card:nth-child(3) { animation-delay: 0.3s; }
|
|
||||||
.benefit-card:nth-child(4) { animation-delay: 0.4s; }
|
|
||||||
.benefit-card:nth-child(5) { animation-delay: 0.5s; }
|
|
||||||
.benefit-card:nth-child(6) { animation-delay: 0.6s; }
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from {
|
|
||||||
opacity: 0;
|
|
||||||
transform: translateY(20px);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
opacity: 1;
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
227
css/style.css
227
css/style.css
@@ -3084,4 +3084,231 @@ h6 {
|
|||||||
min-height: 35px;
|
min-height: 35px;
|
||||||
font-size: 1.1rem;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 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 */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
body {
|
||||||
|
padding-top: 70px; /* Reduced for mobile */
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero {
|
||||||
|
min-height: calc(100vh - 70px);
|
||||||
|
height: calc(100vh - 70px);
|
||||||
|
padding-top: 1rem; /* Add some top padding for mobile */
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-container {
|
||||||
|
padding-top: 2rem; /* Ensure content doesn't touch navbar */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@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 */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Benefits Cards Styling - Consolidated from benefits-cards.css */
|
||||||
|
.benefits-cards-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||||
|
gap: 25px;
|
||||||
|
margin: 3rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-card {
|
||||||
|
background: rgba(30, 40, 60, 0.7);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 25px;
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
opacity: 1; /* Changed from 0 to 1 to ensure visibility */
|
||||||
|
animation: fadeIn 0.6s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 4px;
|
||||||
|
height: 100%;
|
||||||
|
background: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-card::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 4px;
|
||||||
|
background: linear-gradient(90deg, transparent, var(--primary-color));
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-card h3 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: #ffffff;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-card p {
|
||||||
|
color: var(--text-light);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-card-icon {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(var(--primary-color-rgb), 0.15);
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.benefit-card-icon i {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--primary-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Animation delays for benefit cards */
|
||||||
|
.benefit-card:nth-child(1) { animation-delay: 0.1s; }
|
||||||
|
.benefit-card:nth-child(2) { animation-delay: 0.2s; }
|
||||||
|
.benefit-card:nth-child(3) { animation-delay: 0.3s; }
|
||||||
|
.benefit-card:nth-child(4) { animation-delay: 0.4s; }
|
||||||
|
.benefit-card:nth-child(5) { animation-delay: 0.5s; }
|
||||||
|
.benefit-card:nth-child(6) { animation-delay: 0.6s; }
|
||||||
|
|
||||||
|
/* Responsive adjustments for benefit cards */
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.benefits-cards-grid {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Keyframes for fadeIn animation */
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from {
|
||||||
|
opacity: 0.3;
|
||||||
|
transform: translateY(20px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
3087
css/style.css.backup
Normal file
3087
css/style.css.backup
Normal file
File diff suppressed because it is too large
Load Diff
28875
css/style.css.bak
28875
css/style.css.bak
File diff suppressed because it is too large
Load Diff
@@ -1,35 +0,0 @@
|
|||||||
# GitHub Upload Instructions
|
|
||||||
|
|
||||||
To upload your website to GitHub:
|
|
||||||
|
|
||||||
## Option 1: Using GitHub Desktop (Easiest)
|
|
||||||
1. Download and install GitHub Desktop from https://desktop.github.com/
|
|
||||||
2. Sign in to your GitHub account
|
|
||||||
3. Add your local repository (File > Add Local Repository...)
|
|
||||||
4. Navigate to C:\Users\Lenovo\sample-website
|
|
||||||
5. Publish the repository to GitHub
|
|
||||||
6. Select your account and the repository name "website"
|
|
||||||
7. Click "Publish Repository"
|
|
||||||
|
|
||||||
## Option 2: Using Git with Personal Access Token
|
|
||||||
1. Go to GitHub: https://github.com/settings/tokens
|
|
||||||
2. Generate a new personal access token with 'repo' scope
|
|
||||||
3. Copy the token
|
|
||||||
4. Open a new PowerShell window and run:
|
|
||||||
|
|
||||||
```
|
|
||||||
cd C:\Users\Lenovo\sample-website
|
|
||||||
git remote set-url origin https://shaurya05745:YOUR_TOKEN@github.com/shaurya05745/website.git
|
|
||||||
git push -u origin master
|
|
||||||
```
|
|
||||||
(Replace YOUR_TOKEN with the token you copied)
|
|
||||||
|
|
||||||
## Option 3: Visual Studio Code
|
|
||||||
1. Open VS Code
|
|
||||||
2. Install the GitHub Pull Requests and Issues extension
|
|
||||||
3. Open your project folder
|
|
||||||
4. Go to Source Control tab
|
|
||||||
5. Sign in to GitHub
|
|
||||||
6. Publish the repository
|
|
||||||
|
|
||||||
Choose the method that works best for you!
|
|
||||||
120
index.html
120
index.html
@@ -6,127 +6,9 @@
|
|||||||
<meta http-equiv="Pragma" content="no-cache" />
|
<meta http-equiv="Pragma" content="no-cache" />
|
||||||
<meta http-equiv="Expires" content="0" />
|
<meta http-equiv="Expires" content="0" />
|
||||||
<title>Gyannetra — AI Services & Solutions</title>
|
<title>Gyannetra — AI Services & Solutions</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css?v=202412291400" />
|
||||||
<link rel="stylesheet" href="css/style.css?v=202412191300" />
|
|
||||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
<!-- Navbar scroll effect styles -->
|
|
||||||
<style>
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
} /* Ensure body has top padding to account for fixed navbar */
|
|
||||||
body {
|
|
||||||
padding-top: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Mobile adjustments for navbar spacing */
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
body {
|
|
||||||
padding-top: 70px; /* Reduced for mobile */
|
|
||||||
}
|
|
||||||
|
|
||||||
#hero {
|
|
||||||
min-height: calc(100vh - 70px);
|
|
||||||
height: calc(100vh - 70px);
|
|
||||||
padding-top: 1rem; /* Add some top padding for mobile */
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-container {
|
|
||||||
padding-top: 2rem; /* Ensure content doesn't touch navbar */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@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 */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 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;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<!-- Hero section layout stabilization script -->
|
<!-- Hero section layout stabilization script -->
|
||||||
<script>
|
<script>
|
||||||
// Immediate layout stabilization
|
// Immediate layout stabilization
|
||||||
|
|||||||
@@ -1,18 +0,0 @@
|
|||||||
@echo off
|
|
||||||
echo Pushing code to GitHub...
|
|
||||||
|
|
||||||
git add .
|
|
||||||
git commit -m "Full website upload"
|
|
||||||
git push -u origin master
|
|
||||||
|
|
||||||
if %errorlevel% neq 0 (
|
|
||||||
echo Failed to push to GitHub. You may need to enter credentials.
|
|
||||||
echo Please go to https://github.com/settings/tokens and create a Personal Access Token.
|
|
||||||
echo For password, use the token instead of your GitHub password.
|
|
||||||
set /p token="Enter your GitHub Personal Access Token: "
|
|
||||||
git remote set-url origin https://shaurya05745:%token%@github.com/shaurya05745/website.git
|
|
||||||
git push -u origin master
|
|
||||||
)
|
|
||||||
|
|
||||||
echo Process completed.
|
|
||||||
pause
|
|
||||||
@@ -1,45 +0,0 @@
|
|||||||
@echo off
|
|
||||||
echo GitHub Website Uploader
|
|
||||||
echo =======================
|
|
||||||
|
|
||||||
REM Check if Git is available
|
|
||||||
git --version
|
|
||||||
if %errorlevel% neq 0 (
|
|
||||||
echo Git is not installed or not in PATH. Please install Git first.
|
|
||||||
pause
|
|
||||||
exit /b
|
|
||||||
)
|
|
||||||
|
|
||||||
REM Set GitHub details
|
|
||||||
set GITHUB_REPO=shaurya05745/website
|
|
||||||
|
|
||||||
REM Make sure Git is initialized
|
|
||||||
if not exist .git (
|
|
||||||
echo Initializing git repository...
|
|
||||||
git init
|
|
||||||
) else (
|
|
||||||
echo Git repository already initialized.
|
|
||||||
)
|
|
||||||
|
|
||||||
REM Add all files
|
|
||||||
echo Adding all files...
|
|
||||||
git add .
|
|
||||||
|
|
||||||
REM Commit changes
|
|
||||||
echo Committing changes...
|
|
||||||
git commit -m "Upload entire website"
|
|
||||||
|
|
||||||
REM Configure remote
|
|
||||||
echo Setting up remote repository URL...
|
|
||||||
git remote set-url origin https://github.com/%GITHUB_REPO%.git
|
|
||||||
if %errorlevel% neq 0 (
|
|
||||||
git remote add origin https://github.com/%GITHUB_REPO%.git
|
|
||||||
)
|
|
||||||
|
|
||||||
REM Push to GitHub
|
|
||||||
echo Pushing to GitHub... This may prompt for your GitHub credentials.
|
|
||||||
echo For password, use a Personal Access Token (not your GitHub password).
|
|
||||||
echo Visit https://github.com/settings/tokens to create a token with 'repo' scope.
|
|
||||||
git push -u origin master
|
|
||||||
|
|
||||||
pause
|
|
||||||
Reference in New Issue
Block a user