Update website with enhanced features and mobile optimization

- Enhanced individual training pages with better course layouts
- Updated testimonial sections across multiple pages
- Improved mobile responsiveness and navigation
- Added new testimonial assets and images
- Optimized CSS styling for better user experience
- Updated service and industry pages with latest content
This commit is contained in:
2025-06-06 14:08:36 +05:30
parent 885bacdf4a
commit 1c95e237b3
20 changed files with 451 additions and 328 deletions

View File

@@ -17,6 +17,7 @@
background: none;
visibility: visible !important;
opacity: 1 !important;
z-index: 1; /* Ensure hero is below navbar */
}
.hero-container {
@@ -145,6 +146,69 @@
51%, 100% { opacity: 0; }
}
/* ===== MOBILE TYPEWRITER ADJUSTMENTS ===== */
@media (max-width: 768px) {
.typewriter-container {
font-size: 2.2rem;
min-height: 2.8rem;
padding: 0.1rem 0.5rem;
line-height: 1.1;
overflow-wrap: break-word;
word-break: break-word;
}
.typewriter-text {
max-width: 100%;
text-align: center;
word-wrap: break-word;
overflow-wrap: break-word;
}
.hero-subheading {
font-size: 1.1rem;
}
.hero-supporting-text {
font-size: 1.1rem;
line-height: 1.5;
max-width: 95%;
padding: 0 0.5rem;
}
}
@media (max-width: 480px) {
.typewriter-container {
font-size: 1.8rem;
min-height: 2.2rem;
padding: 0.1rem 0.25rem;
}
.hero-subheading {
font-size: 1rem;
}
.hero-supporting-text {
font-size: 1rem;
max-width: 98%;
padding: 0 0.25rem;
}
}
@media (max-width: 360px) {
.typewriter-container {
font-size: 1.5rem;
min-height: 1.8rem;
}
.hero-subheading {
font-size: 0.9rem;
}
.hero-supporting-text {
font-size: 0.95rem;
}
}
/* ===== HERO CTA BUTTONS ===== */
.hero-cta-buttons {
display: flex;
@@ -510,19 +574,6 @@ button.animate-on-scroll.animated {
#technologies .section-heading {
margin-bottom: 20px;
position: relative;
overflow: hidden;
}
#technologies .section-heading::before {
content: "";
position: absolute;
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
bottom: -10px;
left: 0;
animation: glowLine 3s ease-in-out infinite;
}
@keyframes glowLine {
@@ -1919,7 +1970,7 @@ body.contact-page {
background:
radial-gradient(circle at 20% 20%, rgba(109, 40, 217, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(82, 238, 245, 0.1) 0%, transparent 50%);
pointer-events: none;
pointer-events: none;
}
.testimonials-container {
@@ -2002,7 +2053,7 @@ body.contact-page {
/* Individual Testimonial Card */
.testimonial-card {
flex: 0 0 600px; /* Increased width for landscape layout */
height: 350px; /* Increased height for bigger cards */
height: 420px; /* Further increased height to ensure course badges are fully visible */
background: linear-gradient(135deg, rgba(25, 35, 55, 0.95) 0%, rgba(35, 45, 65, 0.98) 100%);
border: 1px solid rgba(82, 238, 245, 0.2);
border-radius: 20px;
@@ -2202,11 +2253,12 @@ body.contact-page {
@media (max-width: 992px) {
.testimonials-track-container {
height: 400px; /* Reduced from 500px to 400px */
height: 470px; /* Increased to accommodate taller cards */
}
.testimonial-card {
flex: 0 0 320px;
height: 420px; /* Increased height for better visibility */
padding: 2rem;
}
@@ -2221,13 +2273,17 @@ body.contact-page {
}
.testimonials-track-container {
height: 350px; /* Reduced from 450px to 350px */
height: 650px; /* Increased height for complete card visibility */
}
.testimonial-card {
flex: 0 0 280px;
flex: 0 0 300px; /* Portrait width - narrower than landscape */
height: 600px; /* Increased height for full card visibility including course badges */
padding: 1.5rem;
margin: 0.5rem 0;
flex-direction: column; /* Switch to vertical layout for portrait */
text-align: center; /* Center content for portrait */
gap: 1.5rem; /* Vertical gap between sections */
}
.testimonials-heading h2 {
@@ -2239,18 +2295,30 @@ body.contact-page {
}
.customer-info {
flex-direction: row;
text-align: left;
flex-direction: column; /* Stack customer info vertically */
text-align: center;
margin-bottom: 0;
min-width: auto; /* Remove minimum width constraint */
}
.customer-avatar {
width: 50px;
height: 50px;
font-size: 1.2rem;
width: 60px;
height: 60px;
font-size: 1.4rem;
margin: 0 auto 1rem auto; /* Center the avatar */
}
.review-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.review-text {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1rem;
}
}
@@ -2260,13 +2328,57 @@ body.contact-page {
}
.testimonial-card {
flex: 0 0 260px;
flex: 0 0 280px; /* Slightly narrower for smaller screens */
height: 580px; /* Increased height for complete visibility including course badges */
padding: 1.2rem;
gap: 1.2rem; /* Slightly reduced gap */
}
.testimonials-heading h2 {
font-size: 2rem;
}
.customer-avatar {
width: 55px;
height: 55px;
font-size: 1.3rem;
}
.review-text {
font-size: 0.95rem;
line-height: 1.5;
}
}
@media (max-width: 360px) {
.testimonial-card {
flex: 0 0 260px; /* Even narrower for very small screens */
height: 560px; /* Increased height for complete card visibility including course badges */
padding: 1rem;
gap: 1rem;
}
.customer-avatar {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
.review-text {
font-size: 0.9rem;
}
.customer-details h4 {
font-size: 1.1rem;
}
.customer-designation {
font-size: 0.85rem;
}
.customer-company {
font-size: 0.8rem;
}
}
/* Additional Visual Effects */

View File

@@ -1219,12 +1219,11 @@ footer {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
position: relative;
z-index: 2;
max-width: 100%;
opacity: 0.9;
max-width: 100%; opacity: 0.9;
transition: opacity 0.3s ease;
}
/* Expertise card headings - prevent wrapping */
/* Expertise card headings - allow wrapping on mobile */
.exp-item h3 {
font-size: 1.8rem;
line-height: 1.2;
@@ -1233,15 +1232,22 @@ footer {
color: #52eef5;
font-weight: 600;
letter-spacing: 0.5px;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
text-align: center;
position: relative;
z-index: 2;
text-shadow: 0 3px 8px rgba(0, 0, 0, 0.9);
}
/* Prevent wrapping on larger screens */
@media (min-width: 769px) {
.exp-item h3 {
white-space: nowrap;
}
}
/* Responsive design for expertise cards */
@media (max-width: 1024px) {
.exp-grid {
@@ -1271,10 +1277,8 @@ footer {
font-size: 1rem;
line-height: 1.4;
}
.exp-item h3 {
.exp-item h3 {
font-size: 1.6rem;
white-space: nowrap;
}
}
@@ -1305,11 +1309,9 @@ footer {
line-height: 1.4;
margin-top: 0.5rem;
}
.exp-item h3 {
.exp-item h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
white-space: nowrap;
}
}
@@ -1341,11 +1343,9 @@ footer {
line-height: 1.5;
margin-top: 0.5rem;
}
.exp-item h3 {
.exp-item h3 {
font-size: 1.4rem;
margin-bottom: 0.8rem;
white-space: nowrap;
}
}

View File

@@ -1789,43 +1789,6 @@ section#transform-cta-section.container {
font-size: 1.1rem !important;
}
}
/* Expertise Cards Heading Styles */
.exp-item h3 {
font-size: 1.8rem;
line-height: 1.2;
margin-top: 0.5rem;
margin-bottom: 1.2rem;
color: #52eef5;
font-weight: 600;
letter-spacing: 0.5px;
white-space: nowrap;
overflow: visible;
text-overflow: clip;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.exp-item h3 {
font-size: 1.6rem;
white-space: nowrap;
}
}
@media (max-width: 768px) {
.exp-item h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
white-space: nowrap;
}
}
@media (max-width: 480px) {
.exp-item h3 {
font-size: 1.4rem;
margin-bottom: 0.8rem;
white-space: nowrap;
}
}
/* Fix for section-subheading readability in specializations section */
#specializations .section-subheading {
/* Remove any gradient or transparent text */

View File

@@ -70,11 +70,11 @@
#hero {
min-height: calc(100vh - 80px);
height: calc(100vh - 80px);
padding-top: 2rem;
padding-top: 1rem;
}
.hero-container {
padding: 3rem 5% 2rem 5%;
padding: 2rem 4% 1rem 4%;
justify-content: center;
align-items: center;
}
@@ -82,33 +82,68 @@
.hero-content {
text-align: center;
max-width: 100%;
padding: 0 1rem;
margin-top: 1rem;
padding: 0 0.5rem;
margin-top: 0.5rem;
}
.hero-content h1 {
font-size: 4.5rem;
.hero-content h1 {
font-size: 2.8rem;
font-weight: 100;
line-height: 1.2;
margin-bottom: 1.5rem;
letter-spacing: 0.5px;
line-height: 1.1;
margin-bottom: 1rem;
letter-spacing: 0.3px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.hero-content p {
font-size: 1.4rem;
line-height: 1.4;
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.9);
max-width: 90%;
margin-left: auto;
margin-right: auto;
/* Hero typewriter section mobile */
.hero-typewriter-section {
margin: 0.5rem 0 1rem 0;
width: 100%;
}
.hero-subheading {
font-size: 1.1rem;
margin-bottom: 0.4rem;
}
.typewriter-container {
font-size: 2.2rem;
min-height: 2.8rem;
line-height: 1.1;
padding: 0;
width: 100%;
overflow: hidden;
}
.typewriter-text {
display: inline-block;
word-break: break-word;
text-align: center;
max-width: 100%;
}
.hero-supporting-text {
font-size: 1.1rem;
line-height: 1.5;
margin: 1rem auto 1.5rem auto;
color: rgba(255, 255, 255, 0.9);
max-width: 95%;
padding: 0 0.5rem;
}
.hero-content .btn-primary {
padding: 1rem 2rem;
font-size: 1.2rem;
border-radius: 12px;
min-width: 200px;
padding: 0.9rem 1.5rem;
font-size: 1rem;
border-radius: 10px;
min-width: 180px;
margin: 0.3rem;
}
/* Hero CTA buttons mobile */
.hero-cta-buttons {
gap: 0.8rem;
margin-top: 1rem;
flex-direction: column;
align-items: center;
}
/* Navigation mobile styles */
@@ -342,38 +377,66 @@
/* ===== EXTRA SMALL MOBILE (480px and below) ===== */
@media (max-width: 480px) {
#hero {
height: 65vh;
min-height: 450px;
padding-top: 1.5rem;
height: auto;
min-height: calc(100vh - 80px);
padding-top: 1rem;
}
.hero-container {
padding: 2.5rem 3% 1rem 3%;
padding: 1.5rem 3% 1rem 3%;
}
.hero-content {
margin-top: 1.5rem;
margin-top: 1rem;
padding: 0 0.25rem;
}
.hero-content h1 {
font-size: 4.5rem;
.hero-content h1 {
font-size: 2.2rem;
font-weight: 100;
line-height: 1.1;
margin-bottom: 0.8rem;
text-shadow: none !important;
letter-spacing: 0.3px;
letter-spacing: 0.2px;
filter: brightness(1.08);
}
.hero-content p {
font-size: 1.3rem;
margin-bottom: 1.2rem;
line-height: 1.8;
/* Extra small mobile typewriter */
.hero-typewriter-section {
margin: 0.4rem 0 0.8rem 0;
}
.hero-subheading {
font-size: 1rem;
margin-bottom: 0.3rem;
}
.typewriter-container {
font-size: 1.8rem;
min-height: 2.2rem;
line-height: 1.0;
}
.hero-supporting-text {
font-size: 1rem;
margin: 0.8rem auto 1.2rem auto;
line-height: 1.6;
max-width: 98%;
padding: 0 0.25rem;
}
.hero-content .btn-primary {
padding: 0.8rem 1.5rem;
font-size: 1.1rem;
padding: 0.8rem 1.2rem;
font-size: 0.95rem;
min-width: 160px;
margin: 0.25rem;
}
/* Hero CTA buttons extra small */
.hero-cta-buttons {
gap: 0.6rem;
margin-top: 1rem;
}
/* Logo extra small */
.logo-img {
height: 45px;
@@ -397,6 +460,37 @@
max-width: 50px;
max-height: 50px;
}
}
/* ===== VERY SMALL MOBILE (360px and below) ===== */
@media (max-width: 360px) {
.hero-content h1 {
font-size: 1.9rem;
margin-bottom: 0.6rem;
}
.hero-subheading {
font-size: 0.9rem;
}
.typewriter-container {
font-size: 1.5rem;
min-height: 1.8rem;
}
.hero-supporting-text {
font-size: 0.95rem;
margin: 0.6rem auto 1rem auto;
}
.hero-content .btn-primary {
padding: 0.7rem 1rem;
font-size: 0.9rem;
min-width: 140px;
}
.hero-container {
padding: 1rem 2% 0.5rem 2%;
}
/* Expertise grid extra small */
.exp-grid {
@@ -404,7 +498,8 @@
padding: 0 1rem;
grid-template-columns: 1fr;
}
.exp-item {
.exp-item {
padding: 1.2rem;
max-width: 350px;
min-height: 260px;
@@ -968,7 +1063,7 @@
}
}
/* ===== SPECIALIZED CARDS ANIMATIONS ===== */
/* ===== SPECIALIZATION CARDS ANIMATIONS ===== */
.hero-content h1,
.hero-content p,
.section-heading,
@@ -1454,3 +1549,94 @@ button.animate-on-scroll.animated {
transform: scale(1.02);
box-shadow: 0 6px 16px rgba(82, 238, 245, 0.15);
}
/* Hero section mobile adjustments - Fix excessive padding */
.hero-section,
#automation-flows-hero {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
.case-studies-hero {
padding: 4rem 0 3rem 0 !important;
min-height: 50vh !important;
}
#generative-ai {
padding-top: 4.5rem !important;
padding-bottom: 3rem !important;
}
/* Hero headings mobile adjustments */
.hero-section h1,
#automation-flows-hero h1 {
font-size: 2.8rem !important;
margin-bottom: 1.5rem !important;
}
.case-studies-hero h1 {
font-size: 2.5rem !important;
letter-spacing: 2px !important;
margin-bottom: 1.5rem !important;
}
.generative-ai-header h1 {
font-size: 2.5rem !important;
margin-bottom: 1.5rem !important;
}
/* Hero text mobile adjustments */
.hero-section p,
#automation-flows-hero p,
.case-studies-hero p,
.generative-ai-header p {
font-size: 1.1rem !important;
line-height: 1.6 !important;
margin-bottom: 1.5rem !important;
}
/* Hero sections extra small mobile - Further reduce padding */
.hero-section,
#automation-flows-hero {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.case-studies-hero {
padding: 3rem 0 2rem 0 !important;
min-height: 40vh !important;
}
#generative-ai {
padding-top: 3.5rem !important;
padding-bottom: 2.5rem !important;
}
/* Hero headings extra small mobile */
.hero-section h1,
#automation-flows-hero h1 {
font-size: 2.2rem !important;
margin-bottom: 1rem !important;
}
.case-studies-hero h1 {
font-size: 2rem !important;
letter-spacing: 1px !important;
margin-bottom: 1rem !important;
}
.generative-ai-header h1 {
font-size: 2rem !important;
margin-bottom: 1rem !important;
}
/* Hero text extra small mobile */
.hero-section p,
#automation-flows-hero p,
.case-studies-hero p,
.generative-ai-header p,
.industry-hero p {
font-size: 0.95rem !important;
line-height: 1.5 !important;
margin-bottom: 1rem !important;
}