/* Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary-color: #0056b3;
--secondary-color: #00a8ff;
--accent-color: #ff6b35;
--dark-color: #1a1a2e;
--light-color: #f8f9fa;
--text-color: #333;
--text-light: #777;
}
html {
scroll-behavior: smooth;
}
body {
line-height: 1.6;
color: var(--text-color);
background-color: #fff;
overflow-x: hidden;
}
.container {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
section {
padding: 80px 0;
}
.section-title {
text-align: center;
margin-bottom: 50px;
}
.section-title h2 {
font-size: 2.5rem;
color: var(--dark-color);
margin-bottom: 15px;
position: relative;
display: inline-block;
}
.section-title h2::after {
content: '';
position: absolute;
width: 70%;
height: 4px;
background: var(--secondary-color);
bottom: -10px;
left: 15%;
border-radius: 2px;
}
.section-title p {
color: var(--text-light);
max-width: 700px;
margin: 0 auto;
font-size: 1.1rem;
}
.btn {
display: inline-block;
padding: 12px 30px;
background: var(--primary-color);
color: white;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.btn:hover {
background: var(--secondary-color);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.btn-secondary {
background: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.btn-secondary:hover {
background: var(--primary-color);
color: white;
}
/* Header & Navigation */
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0, 86, 179, 0.1);
}
.header-scrolled {
padding: 5px 0;
background-color: rgba(255, 255, 255, 0.98);
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}
/* Logo Container */
.logo-container {
display: flex;
align-items: center;
gap: 15px;
text-decoration: none;
}
/* Logo Image */
.logo-img {
width: 50px;
height: 50px;
object-fit: contain;
border-radius: 10px;
padding: 5px;
background: white;
box-shadow: 0 4px 15px rgba(0, 86, 179, 0.15);
border: 2px solid rgba(0, 168, 255, 0.2);
transition: all 0.3s ease;
}
.navbar:hover .logo-img {
transform: rotate(5deg) scale(1.05);
border-color: var(--secondary-color);
box-shadow: 0 6px 20px rgba(0, 168, 255, 0.25);
}
/* Logo Text */
.logo {
font-size: 1.8rem;
font-weight: 800;
color: var(--primary-color);
text-decoration: none;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.logo span {
color: var(--secondary-color);
position: relative;
}
.logo span::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2px;
background: var(--accent-color);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.navbar:hover .logo span::after {
transform: scaleX(1);
}
/* Navigation Links */
.nav-links {
display: flex;
list-style: none;
gap: 10px;
}
.nav-links li {
position: relative;
}
.nav-links a {
text-decoration: none;
color: var(--dark-color);
font-weight: 600;
font-size: 1rem;
padding: 10px 20px;
border-radius: 25px;
transition: all 0.3s ease;
position: relative;
display: flex;
align-items: center;
gap: 8px;
}
.nav-links a i {
font-size: 0.9rem;
opacity: 0.7;
}
/* Hover Effect */
.nav-links a:hover {
color: var(--primary-color);
background: rgba(0, 86, 179, 0.08);
transform: translateY(-2px);
}
/* Active Page Indicator */
.nav-links a.active {
color: var(--primary-color);
background: linear-gradient(135deg,
rgba(0, 86, 179, 0.1),
rgba(0, 168, 255, 0.1));
font-weight: 700;
box-shadow: 0 4px 15px rgba(0, 86, 179, 0.15);
}
.nav-links a.active::before {
content: '';
position: absolute;
bottom: -3px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 3px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 2px;
animation: activePulse 2s infinite;
}
@keyframes activePulse {
0%, 100% {
opacity: 1;
width: 20px;
}
50% {
opacity: 0.7;
width: 25px;
}
}
/* Underline Effect */
.nav-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
left: 50%;
bottom: -5px;
transform: translateX(-50%);
transition: width 0.3s ease;
border-radius: 2px;
}
.nav-links a:hover::after {
width: 60%;
}
.nav-links a.active::after {
width: 80%;
background: var(--accent-color);
height: 3px;
bottom: -6px;
}
/* Mobile Menu Button */
.mobile-menu-btn {
display: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--dark-color);
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(0, 86, 179, 0.05);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.mobile-menu-btn:hover {
background: rgba(0, 86, 179, 0.1);
transform: rotate(90deg);
}
/* Responsive Design */
@media (max-width: 992px) {
.nav-links a {
padding: 8px 15px;
font-size: 0.95rem;
}
.logo {
font-size: 1.6rem;
}
.logo-img {
width: 45px;
height: 45px;
}
}
@media (max-width: 768px) {
.navbar {
padding: 12px 0;
}
.nav-links {
position: fixed;
top: 70px;
left: 0;
width: 100%;
background: white;
flex-direction: column;
align-items: center;
padding: 20px 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
transform: translateY(-150%);
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
z-index: 999;
border-top: 1px solid rgba(0, 168, 255, 0.1);
}
.nav-links.active {
transform: translateY(0);
}
.nav-links li {
margin: 10px 0;
width: 90%;
}
.nav-links a {
padding: 15px 30px;
width: 100%;
justify-content: center;
border-radius: 15px;
font-size: 1.1rem;
}
.nav-links a.active {
background: linear-gradient(135deg,
rgba(0, 86, 179, 0.15),
rgba(0, 168, 255, 0.15));
}
.nav-links a::after {
display: none;
}
.nav-links a.active::before {
display: none;
}
.mobile-menu-btn {
display: flex;
}
.logo-img {
width: 40px;
height: 40px;
}
.logo {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
.logo {
font-size: 1.4rem;
}
.logo-img {
width: 35px;
height: 35px;
}
.nav-links a {
padding: 12px 25px;
font-size: 1rem;
}
}
/* Updated Hero Section with Animations */
.hero {
padding-top: 150px;
background: linear-gradient(135deg, rgba(0, 84, 179, 0.9) 0%, rgba(0, 168, 255, 0.85) 50%, rgba(96, 239, 255, 0.8) 100%),
url('https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');
background-size: cover;
background-position: center;
background-attachment: fixed;
color: white;
text-align: center;
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
background-size: cover;
animation: wave 20s linear infinite;
}
@keyframes wave {
0% {
background-position: 0 0;
}
100% {
background-position: 1200px 0;
}
}
.tagline-container {
display: inline-block;
margin-bottom: 25px;
position: relative;
padding: 0 20px;
}
.tagline {
font-size: 1.4rem;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
background: linear-gradient(90deg, #ffffff, #00a8ff, #ffffff);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: shine 3s linear infinite, fadeIn 1s ease-out;
position: relative;
z-index: 2;
}
@keyframes shine {
0% {
background-position: 200% center;
}
100% {
background-position: -200% center;
}
}
.pulse-animation {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 60px;
border-radius: 30px;
background: rgba(0, 168, 255, 0.3);
z-index: 1;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.7;
}
70% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 0.3;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.7;
}
}
/* Fade In Up Animation */
.fade-in-up {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 1s ease forwards;
}
.fade-in-up.delay-1 {
animation-delay: 0.5s;
}
.fade-in-up.delay-2 {
animation-delay: 1s;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Button Animations */
.pulse-hover {
position: relative;
overflow: hidden;
}
.pulse-hover::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.pulse-hover:hover::before {
width: 300px;
height: 300px;
}
.slide-in-right {
animation: slideInRight 0.8s ease 1.2s forwards;
opacity: 0;
transform: translateX(-30px);
}
@keyframes slideInRight {
to {
opacity: 1;
transform: translateX(0);
}
}
/* Floating Tech Icons */
.floating-tech {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.icon-1 {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.icon-2 {
top: 15%;
right: 15%;
animation-delay: 1s;
}
.icon-3 {
bottom: 30%;
left: 15%;
animation-delay: 2s;
font-size: 1.8rem;
}
.icon-4 {
bottom: 25%;
right: 10%;
animation-delay: 3s;
}
.icon-5 {
top: 40%;
left: 50%;
animation-delay: 4s;
font-size: 2rem;
}
@keyframes float {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(10deg);
}
}
/* Scroll Indicator */
.scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
text-align: center;
animation: fadeIn 2s ease 2s forwards;
opacity: 0;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
.scroll-indicator span {
display: block;
font-size: 0.9rem;
margin-bottom: 10px;
letter-spacing: 2px;
opacity: 0.8;
}
.mouse {
width: 30px;
height: 50px;
border: 2px solid rgba(255, 255, 255, 0.7);
border-radius: 20px;
margin: 0 auto;
position: relative;
}
.wheel {
width: 4px;
height: 10px;
background: white;
border-radius: 2px;
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
animation: scroll 2s infinite;
}
@keyframes scroll {
0% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
100% {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
}
.hero-content h1 {
font-size: 3.5rem;
margin-bottom: 20px;
line-height: 1.2;
}
.hero-content p {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto 30px;
opacity: 0.9;
}
.hero-btns {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 30px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.tagline {
font-size: 1rem;
letter-spacing: 2px;
}
.tech-icon {
display: none;
}
.floating-tech .icon-1,
.floating-tech .icon-5 {
display: block;
font-size: 1.2rem;
}
}
@media (max-width: 992px) {
.hero-content h1 {
font-size: 2.8rem;
}
.section-title h2 {
font-size: 2.2rem;
}
}
@media (max-width: 576px) {
.hero-content h1 {
font-size: 1.8rem;
}
}
/* Floating Scroll to Top Button */
.scroll-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--primary-color);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 999;
box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3);
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
}
.scroll-to-top.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-to-top:hover {
background: var(--secondary-color);
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 168, 255, 0.4);
}
.scroll-to-top i {
font-size: 1.5rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-5px);
}
60% {
transform: translateY(-3px);
}
}
/* Pulse animation for attention */
@keyframes pulse-attention {
0% {
box-shadow: 0 0 0 0 rgba(0, 86, 179, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(0, 86, 179, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(0, 86, 179, 0);
}
}
.scroll-to-top.pulse {
animation: pulse-attention 1.5s infinite;
}
/* Ensure consistent container padding */
.container {
width: 90%;
max-width: 1400px;
/* Increased max-width */
margin: 0 auto;
padding: 0 20px;
/* Consistent side padding */
}
/* Ensure all sections have consistent spacing */
section {
padding: 100px 0;
/* Consistent vertical padding */
}
@media (max-width: 768px) {
.container {
width: 95%;
padding: 0 15px;
}
section {
padding: 80px 0;
}
}
/* ============================================
SERVICES SECTION - REWRITTEN PROPERLY
============================================ */
/* 1. Services Section Container */
.services {
background-color: var(--light-color);
position: relative;
overflow: visible;
padding: 100px 0;
}
.services::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color), var(--accent-color));
z-index: 1;
}
/* 2. Services Grid Layout */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin: 0 auto;
max-width: 1400px;
}
/* 3. Service Card Container - Step 1: Base Container */
.service-card {
height: 400px;
perspective: 1000px;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 86, 179, 0.15);
}
/* 4. Flip Card Inner Container - Step 2: 3D Container */
.service-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-style: preserve-3d;
border-radius: 20px;
}
.service-card:hover .service-card-inner {
transform: rotateY(180deg);
}
/* 5. Front and Back Faces - Step 3: Card Sides */
.service-card-front,
.service-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 20px;
display: flex;
flex-direction: column;
padding: 40px 35px;
box-sizing: border-box;
}
/* 6. Front Card Styling - Step 4: Front Design */
.service-card-front {
background: white;
color: var(--dark-color);
border: 1px solid rgba(0, 0, 0, 0.05);
justify-content: space-between;
}
/* 7. Service Icon - Step 5: Icon Styling */
.service-icon {
font-size: 3.5rem;
margin: 0 0 25px 0;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
/* 8. Service Title - Step 6: Title Styling */
.service-card-front h3 {
font-size: 1.7rem;
margin: 0 0 20px 0;
color: var(--dark-color);
font-weight: 700;
line-height: 1.3;
padding: 0 10px;
}
/* 9. Service Description - Step 7: Description */
.service-card-front p {
color: var(--text-light);
margin: 0 0 25px 0;
line-height: 1.6;
font-size: 1.05rem;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
}
/* 10. Hover Indicator - Step 8: Interactive Element */
.hover-indicator {
text-align: center;
color: var(--primary-color);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 1px;
padding: 12px 15px;
background: rgba(0, 86, 179, 0.05);
border-radius: 10px;
margin-top: 10px;
transition: all 0.3s ease;
}
.hover-indicator i {
display: block;
margin-top: 8px;
font-size: 1.2rem;
animation: bounce 2s infinite;
}
.service-card:hover .hover-indicator {
opacity: 0;
visibility: hidden;
}
/* 11. Back Card Styling - Step 9: Back Design */
.service-card-back {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
transform: rotateY(180deg);
justify-content: space-between;
overflow: hidden;
position: relative;
}
.service-card-back::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
z-index: 1;
}
/* 12. Back Card Header - Step 10: Back Title */
.service-card-back h4 {
font-size: 1.6rem;
margin: 0 0 25px 0;
position: relative;
z-index: 2;
font-weight: 700;
text-align: center;
line-height: 1.3;
color: white;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
padding: 0 10px 15px 10px;
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
/* 13. Service Details List - Step 11: Features List */
.service-details {
list-style: none;
padding: 0;
margin: 0 0 25px 0;
position: relative;
z-index: 2;
text-align: left;
flex-grow: 1;
overflow-y: auto;
max-height: 180px;
}
.service-details li {
padding: 12px 0;
font-size: 0.95rem;
position: relative;
padding-left: 28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
line-height: 1.4;
}
.service-details li:last-child {
border-bottom: none;
}
.service-details li::before {
content: '✓';
position: absolute;
left: 0;
color: #4cd964;
font-weight: bold;
font-size: 1.1rem;
top: 12px;
}
/* Scrollbar styling for service details */
.service-details::-webkit-scrollbar {
width: 4px;
}
.service-details::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 2px;
}
.service-details::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 2px;
}
/* 14. Service Stats - Step 12: Statistics */
.service-stats {
display: flex;
justify-content: space-around;
position: relative;
z-index: 2;
padding: 20px 0 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.2);
margin-top: auto;
}
.stat {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 15px;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
min-width: 90px;
}
.stat .number {
font-size: 1.7rem;
font-weight: 700;
margin-bottom: 5px;
background: linear-gradient(90deg, #ffffff, #a5e1ff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat .label {
font-size: 0.85rem;
opacity: 0.9;
text-align: center;
line-height: 1.2;
}
/* 15. Individual Service Colors - Step 13: Color Variations */
.service-card:nth-child(1) .service-card-back {
background: linear-gradient(135deg, #2c3e50, #3498db);
}
.service-card:nth-child(2) .service-card-back {
background: linear-gradient(135deg, #16a085, #2ecc71);
}
.service-card:nth-child(3) .service-card-back {
background: linear-gradient(135deg, #8e44ad, #9b59b6);
}
.service-card:nth-child(4) .service-card-back {
background: linear-gradient(135deg, #2980b9, #3498db);
}
.service-card:nth-child(5) .service-card-back {
background: linear-gradient(135deg, #d35400, #e67e22);
}
.service-card:nth-child(6) .service-card-back {
background: linear-gradient(135deg, #c0392b, #e74c3c);
}
.service-card:nth-child(7) .service-card-back {
background: linear-gradient(135deg, #27ae60, #2ecc71);
}
/* 16. Responsive Design - Step 14: Mobile Adaptation */
@media (max-width: 1200px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
gap: 35px;
padding: 0 20px;
}
.service-card {
height: 380px;
}
}
@media (max-width: 768px) {
.services {
padding: 80px 0;
}
.services-grid {
grid-template-columns: 1fr;
max-width: 500px;
gap: 30px;
padding: 0 15px;
}
.service-card {
height: 370px;
}
.service-card-front,
.service-card-back {
padding: 35px 25px;
}
.service-icon {
font-size: 3rem;
margin-bottom: 20px;
height: 70px;
}
.service-card-front h3 {
font-size: 1.5rem;
margin-bottom: 15px;
}
.service-card-front p {
font-size: 1rem;
margin-bottom: 20px;
}
.service-card-back h4 {
font-size: 1.4rem;
margin-bottom: 20px;
padding-bottom: 12px;
}
.service-details {
margin-bottom: 20px;
max-height: 160px;
}
.service-details li {
padding: 10px 0;
font-size: 0.9rem;
}
.hover-indicator {
padding: 10px 12px;
font-size: 0.85rem;
}
.stat .number {
font-size: 1.5rem;
}
}
@media (max-width: 480px) {
.services-grid {
padding: 0 10px;
}
.service-card {
height: 360px;
}
.service-card-front,
.service-card-back {
padding: 30px 20px;
}
.service-card-back h4 {
font-size: 1.3rem;
}
.service-details li {
font-size: 0.85rem;
padding-left: 25px;
}
.stat {
padding: 10px 12px;
min-width: 80px;
}
.stat .number {
font-size: 1.4rem;
}
.stat .label {
font-size: 0.8rem;
}
}
/* 17. Mobile Flip Support - Step 15: Touch Interaction */
@media (max-width: 768px) {
.service-card.flipped .service-card-inner {
transform: rotateY(180deg);
}
.service-card .hover-indicator {
opacity: 1;
visibility: visible;
}
.service-card.flipped .hover-indicator {
opacity: 0;
visibility: hidden;
}
}
/* 18. Accessibility - Step 16: Focus States */
.service-card:focus-within {
outline: 3px solid var(--primary-color);
outline-offset: 5px;
border-radius: 20px;
}
/* 19. Animation for Card Appearance - Step 17: Entrance Animation */
@keyframes serviceCardAppear {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.service-card {
animation: serviceCardAppear 0.6s ease forwards;
opacity: 0;
}
/* Staggered animation delays */
.service-card:nth-child(1) {
animation-delay: 0.1s;
}
.service-card:nth-child(2) {
animation-delay: 0.2s;
}
.service-card:nth-child(3) {
animation-delay: 0.3s;
}
.service-card:nth-child(4) {
animation-delay: 0.4s;
}
.service-card:nth-child(5) {
animation-delay: 0.5s;
}
.service-card:nth-child(6) {
animation-delay: 0.6s;
}
.service-card:nth-child(7) {
animation-delay: 0.7s;
}
/* 20. Smooth Scrolling Container - Step 18: Performance */
.service-details {
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* ============================================
LATEST TECHNOLOGIES SECTION - ENHANCED UI
============================================ */
/* 1. Section Container */
.technologies {
background: linear-gradient(135deg,
rgba(248, 249, 250, 0.95) 0%,
rgba(233, 236, 239, 0.9) 100%),
url('data:image/svg+xml,');
background-size: 50px 50px;
position: relative;
padding: 120px 0;
overflow: hidden;
}
.technologies::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg,
var(--primary-color) 0%,
var(--secondary-color) 50%,
var(--accent-color) 100%);
z-index: 1;
}
.technologies::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 80vw;
height: 80vw;
background: radial-gradient(circle,
rgba(0, 168, 255, 0.05) 0%,
transparent 70%);
transform: translate(-50%, -50%);
z-index: 0;
}
/* 2. Section Title Enhancement */
.technologies .section-title h2 {
background: linear-gradient(90deg,
var(--primary-color),
var(--secondary-color),
var(--accent-color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2.8rem;
margin-bottom: 20px;
}
.technologies .section-title p {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto;
color: var(--text-color);
opacity: 0.9;
}
/* 3. Tech Grid Layout */
.tech-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 35px;
margin-bottom: 80px;
position: relative;
z-index: 2;
}
/* 4. Tech Card - Enhanced Design */
.tech-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 40px 35px;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.tech-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
var(--primary-color),
var(--secondary-color));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease;
}
.tech-card:hover::before {
transform: scaleX(1);
}
.tech-card:hover {
transform: translateY(-15px) scale(1.02);
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.8);
}
/* 5. Tech Card Hover Glow Effect */
.tech-card::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(45deg,
transparent 0%,
rgba(0, 168, 255, 0.1) 50%,
transparent 100%);
border-radius: 22px;
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.tech-card:hover::after {
opacity: 1;
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
from {
background: linear-gradient(45deg,
transparent 0%,
rgba(0, 168, 255, 0.1) 50%,
transparent 100%);
}
to {
background: linear-gradient(45deg,
transparent 0%,
rgba(0, 168, 255, 0.2) 50%,
transparent 100%);
}
}
/* 6. Tech Header with Icon */
.tech-header {
display: flex;
align-items: center;
margin-bottom: 25px;
position: relative;
}
.tech-icon {
width: 70px;
height: 70px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
font-size: 2rem;
color: white;
position: relative;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.tech-icon::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
opacity: 0.9;
}
.tech-icon::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(to bottom right,
rgba(255, 255, 255, 0.3) 0%,
rgba(255, 255, 255, 0) 80%);
transform: rotate(30deg);
}
.tech-icon i {
position: relative;
z-index: 1;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}
.tech-card h3 {
font-size: 1.6rem;
color: var(--dark-color);
margin: 0;
font-weight: 700;
line-height: 1.3;
flex: 1;
}
/* 7. Tech Description */
.tech-description {
color: var(--text-light);
margin-bottom: 30px;
line-height: 1.7;
font-size: 1.05rem;
position: relative;
padding-left: 20px;
border-left: 3px solid rgba(0, 168, 255, 0.3);
}
/* 8. Tech Tags - Enhanced */
.tech-tags {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 25px;
}
.tech-tag {
background: linear-gradient(135deg,
rgba(0, 86, 179, 0.1),
rgba(0, 168, 255, 0.1));
color: var(--primary-color);
padding: 10px 20px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(0, 168, 255, 0.2);
}
.tech-tag::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
var(--primary-color),
var(--secondary-color));
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.tech-tag:hover {
color: white;
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 168, 255, 0.3);
}
.tech-tag:hover::before {
opacity: 1;
}
.tech-tag:hover::after {
content: '→';
margin-left: 8px;
font-weight: bold;
}
/* 9. Technology Specific Colors */
.tech-card[data-tech="ai"] .tech-icon {
background: linear-gradient(135deg, #FF6B6B, #EE5A24);
}
.tech-card[data-tech="vision"] .tech-icon {
background: linear-gradient(135deg, #A29BFE, #6C5CE7);
}
.tech-card[data-tech="blockchain"] .tech-icon {
background: linear-gradient(135deg, #00B894, #00A085);
}
.tech-card[data-tech="iot"] .tech-icon {
background: linear-gradient(135deg, #FDCB6E, #E17055);
}
.tech-card[data-tech="quantum"] .tech-icon {
background: linear-gradient(135deg, #74B9FF, #0984E3);
}
.tech-card[data-tech="cloud"] .tech-icon {
background: linear-gradient(135deg, #55EFC4, #00B894);
}
.tech-card[data-tech="analytics"] .tech-icon {
background: linear-gradient(135deg, #FD79A8, #E84393);
}
.tech-card[data-tech="mobile"] .tech-icon {
background: linear-gradient(135deg, #FFEAA7, #FDCB6E);
}
/* 10. Tech Highlights Section */
.tech-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
margin-top: 80px;
position: relative;
z-index: 2;
}
.highlight-card {
background: white;
border-radius: 20px;
padding: 45px 35px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(0, 168, 255, 0.1);
}
.highlight-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg,
var(--primary-color),
var(--secondary-color));
opacity: 0;
transition: opacity 0.3s ease;
}
.highlight-card:hover::before {
opacity: 1;
}
.highlight-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 168, 255, 0.15);
}
.highlight-card i {
font-size: 3.5rem;
margin-bottom: 25px;
background: linear-gradient(135deg,
var(--primary-color),
var(--secondary-color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
display: inline-block;
transition: transform 0.3s ease;
}
.highlight-card:hover i {
transform: scale(1.2) rotate(10deg);
}
.highlight-card h4 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--dark-color);
font-weight: 700;
}
.highlight-card p {
color: var(--text-light);
font-size: 1.05rem;
line-height: 1.6;
margin: 0;
}
/* 11. Floating Tech Particles Background */
.tech-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
overflow: hidden;
}
.particle {
position: absolute;
width: 3px;
height: 3px;
background: var(--primary-color);
border-radius: 50%;
opacity: 0.1;
animation: float 20s linear infinite;
}
@keyframes float {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 0.2;
}
90% {
opacity: 0.2;
}
100% {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}
/* 12. Responsive Design */
@media (max-width: 1200px) {
.tech-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
padding: 0 20px;
}
.tech-highlights {
grid-template-columns: repeat(3, 1fr);
gap: 30px;
padding: 0 20px;
}
}
@media (max-width: 992px) {
.technologies {
padding: 100px 0;
}
.technologies .section-title h2 {
font-size: 2.4rem;
}
}
@media (max-width: 768px) {
.tech-grid {
grid-template-columns: 1fr;
max-width: 500px;
margin: 0 auto 60px auto;
padding: 0 15px;
}
.tech-card {
padding: 35px 30px;
}
.tech-highlights {
grid-template-columns: 1fr;
max-width: 500px;
margin: 60px auto 0 auto;
padding: 0 15px;
gap: 30px;
}
.tech-header {
flex-direction: column;
text-align: center;
}
.tech-icon {
margin-right: 0;
margin-bottom: 20px;
width: 60px;
height: 60px;
font-size: 1.8rem;
}
.tech-description {
padding-left: 15px;
font-size: 1rem;
}
.tech-tag {
padding: 8px 16px;
font-size: 0.85rem;
}
.highlight-card {
padding: 35px 25px;
}
}
@media (max-width: 480px) {
.technologies {
padding: 80px 0;
}
.technologies .section-title h2 {
font-size: 2rem;
}
.technologies .section-title p {
font-size: 1.1rem;
}
.tech-card {
padding: 30px 25px;
}
.tech-card h3 {
font-size: 1.4rem;
}
.tech-tags {
gap: 10px;
}
.tech-tag {
padding: 7px 14px;
font-size: 0.8rem;
}
}
/* ============================================
CAREERS SECTION - MODERN DESIGN
============================================ */
/* 1. Section Container */
.careers {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
padding: 120px 0;
overflow: hidden;
}
.careers::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg,
var(--primary-color),
var(--secondary-color));
z-index: 1;
}
.career-tagline {
font-size: 1.3rem;
color: var(--text-color);
font-weight: 500;
margin-top: 15px;
}
/* 2. Career Benefits Banner */
.career-benefits {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin: 60px auto 80px;
max-width: 1200px;
padding: 0 20px;
}
.benefit-item {
text-align: center;
padding: 30px 25px;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid rgba(0, 168, 255, 0.1);
}
.benefit-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 168, 255, 0.15);
border-color: var(--secondary-color);
}
.benefit-item i {
font-size: 2.5rem;
margin-bottom: 20px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.benefit-item h4 {
font-size: 1.2rem;
margin-bottom: 10px;
color: var(--dark-color);
}
.benefit-item p {
color: var(--text-light);
font-size: 0.95rem;
margin: 0;
}
/* 3. Job Filters */
.job-filters {
display: flex;
flex-wrap: wrap;
gap: 15px;
justify-content: center;
margin-bottom: 50px;
padding: 0 20px;
}
.filter-btn {
padding: 12px 25px;
background: white;
border: 2px solid rgba(0, 86, 179, 0.2);
border-radius: 30px;
color: var(--primary-color);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.filter-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.filter-btn:hover {
border-color: var(--primary-color);
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 86, 179, 0.1);
}
.filter-btn.active {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border-color: transparent;
box-shadow: 0 10px 20px rgba(0, 86, 179, 0.2);
}
.filter-btn.active:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(0, 86, 179, 0.3);
}
/* 4. Jobs Grid */
.jobs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 35px;
padding: 0 20px;
max-width: 1400px;
margin: 0 auto;
}
/* 5. Job Card */
.job-card {
background: white;
border-radius: 20px;
padding: 35px 30px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
border: 1px solid rgba(0, 168, 255, 0.1);
display: flex;
flex-direction: column;
height: 100%;
}
.job-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0, 168, 255, 0.15);
border-color: var(--secondary-color);
}
.job-badge {
position: absolute;
top: 20px;
right: 20px;
background: linear-gradient(135deg, #ff6b6b, #ee5a24);
color: white;
padding: 6px 15px;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
}
/* 6. Job Header */
.job-header {
display: flex;
align-items: flex-start;
margin-bottom: 25px;
}
.job-icon {
width: 60px;
height: 60px;
border-radius: 15px;
background: linear-gradient(135deg, rgba(0, 86, 179, 0.1), rgba(0, 168, 255, 0.1));
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
flex-shrink: 0;
color: var(--primary-color);
font-size: 1.8rem;
}
.job-title-info {
flex: 1;
}
.job-card h3 {
font-size: 1.5rem;
margin: 0 0 12px 0;
color: var(--dark-color);
font-weight: 700;
}
.job-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.job-tag {
padding: 6px 15px;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
}
.job-tag.remote {
background: rgba(46, 204, 113, 0.1);
color: #27ae60;
}
.job-tag.full-time {
background: rgba(52, 152, 219, 0.1);
color: #2980b9;
}
/* 7. Job Description */
.job-description {
color: var(--text-light);
line-height: 1.7;
margin-bottom: 25px;
font-size: 1.05rem;
flex-grow: 1;
}
/* 8. Job Skills */
.job-skills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 25px;
}
.skill-tag {
padding: 8px 18px;
background: rgba(0, 86, 179, 0.08);
color: var(--primary-color);
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
}
.skill-tag:hover {
background: var(--primary-color);
color: white;
transform: translateY(-2px);
}
/* 9. Job Footer */
.job-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
padding-top: 20px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.job-meta {
display: flex;
flex-direction: column;
gap: 8px;
font-size: 0.9rem;
color: var(--text-light);
}
.job-meta span {
display: flex;
align-items: center;
gap: 8px;
}
.job-meta i {
color: var(--primary-color);
font-size: 0.9rem;
}
/* 10. Apply Button */
.apply-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 25px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border: none;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.apply-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.apply-btn:hover {
transform: translateX(5px);
box-shadow: 0 10px 25px rgba(0, 168, 255, 0.4);
}
.apply-btn:hover::before {
left: 100%;
}
.apply-btn i {
transition: transform 0.3s ease;
}
.apply-btn:hover i {
transform: translateX(5px);
}
/* 11. More Opportunities Card */
.more-opportunities {
text-align: center;
background: linear-gradient(135deg, var(--dark-color), #2c3e50);
color: white;
border: none;
}
.more-opportunities .job-icon {
background: rgba(255, 255, 255, 0.2);
color: white;
margin: 0 auto 25px;
}
.more-opportunities h3 {
color: white;
margin-bottom: 15px;
}
.more-opportunities p {
color: rgba(255, 255, 255, 0.8);
margin-bottom: 25px;
}
.more-opportunities .skill-tag {
background: rgba(255, 255, 255, 0.15);
color: white;
}
.more-opportunities .btn-secondary {
background: transparent;
border: 2px solid white;
color: white;
margin-top: 15px;
}
.more-opportunities .btn-secondary:hover {
background: white;
color: var(--dark-color);
}
/* 12. Application Modal */
.application-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 10000;
align-items: center;
justify-content: center;
padding: 20px;
}
.modal-content {
background: white;
border-radius: 20px;
padding: 40px;
max-width: 500px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
animation: modalSlideIn 0.3s ease;
}
@keyframes modalSlideIn {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid rgba(0, 168, 255, 0.2);
}
.modal-header h3 {
font-size: 1.5rem;
color: var(--dark-color);
margin: 0;
}
.modal-close {
background: none;
border: none;
font-size: 2rem;
color: var(--text-light);
cursor: pointer;
line-height: 1;
transition: color 0.3s ease;
}
.modal-close:hover {
color: var(--primary-color);
}
.form-group {
margin-bottom: 25px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: var(--dark-color);
font-weight: 600;
font-size: 0.95rem;
}
.form-group input,
.form-group textarea {
width: 100%;
padding: 15px;
border: 2px solid rgba(0, 0, 0, 0.1);
border-radius: 10px;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.1);
}
.submit-btn {
width: 100%;
padding: 16px;
font-size: 1.1rem;
margin-top: 20px;
}
/* 13. Responsive Design */
@media (max-width: 1200px) {
.jobs-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.careers {
padding: 80px 0;
}
.career-benefits {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 40px auto 60px;
padding: 0 15px;
}
.benefit-item {
padding: 25px 20px;
}
.job-filters {
gap: 10px;
margin-bottom: 40px;
padding: 0 15px;
}
.filter-btn {
padding: 10px 20px;
font-size: 0.9rem;
}
.jobs-grid {
grid-template-columns: 1fr;
max-width: 500px;
gap: 25px;
padding: 0 15px;
}
.job-card {
padding: 30px 25px;
}
.job-footer {
flex-direction: column;
gap: 20px;
align-items: stretch;
}
.apply-btn {
justify-content: center;
}
.modal-content {
padding: 30px 25px;
}
}
@media (max-width: 480px) {
.career-benefits {
grid-template-columns: 1fr;
}
.job-filters {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 10px;
-webkit-overflow-scrolling: touch;
}
.filter-btn {
flex-shrink: 0;
}
.job-header {
flex-direction: column;
text-align: center;
gap: 20px;
}
.job-icon {
margin: 0 auto;
}
.job-tags {
justify-content: center;
}
.job-skills {
justify-content: center;
}
}
/* ============================================
TECHNOLOGIES WE WORK WITH - MODERN SECTION
============================================ */
/* 1. Section Container */
.tech-stack {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
position: relative;
padding: 120px 0;
overflow: hidden;
}
.tech-stack::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg,
var(--primary-color),
var(--secondary-color),
var(--accent-color));
z-index: 1;
}
.tech-stack::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 80vw;
height: 80vw;
background: radial-gradient(circle,
rgba(0, 168, 255, 0.05) 0%,
transparent 70%);
transform: translate(-50%, -50%);
z-index: 0;
}
/* 2. Section Title */
.tech-stack .section-title h2 {
background: linear-gradient(90deg,
var(--primary-color),
var(--secondary-color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 2.8rem;
margin-bottom: 20px;
}
.tech-stack .section-title p {
font-size: 1.2rem;
max-width: 800px;
margin: 0 auto;
color: var(--text-color);
opacity: 0.9;
}
/* 3. Tech Cloud Container */
.tech-cloud-container {
position: relative;
margin: 60px auto;
max-width: 1400px;
}
.tech-cloud {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
position: relative;
z-index: 2;
}
/* 4. Tech Category */
.tech-category {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 35px 30px;
box-shadow:
0 15px 35px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
border: 1px solid rgba(0, 168, 255, 0.15);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.tech-category:hover {
transform: translateY(-10px);
box-shadow:
0 25px 50px rgba(0, 168, 255, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.8);
border-color: var(--secondary-color);
}
.category-title {
font-size: 1.4rem;
color: var(--dark-color);
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 2px solid rgba(0, 168, 255, 0.2);
position: relative;
}
.category-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
}
/* 5. Tech Items Grid */
.tech-items {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 25px;
}
/* 6. Tech Item */
.tech-item {
text-align: center;
padding: 25px 20px;
background: white;
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.tech-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(0, 86, 179, 0.05),
rgba(0, 168, 255, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
}
.tech-item:hover::before {
opacity: 1;
}
.tech-item:hover {
transform: translateY(-8px) scale(1.05);
box-shadow: 0 20px 40px rgba(0, 168, 255, 0.2);
border-color: var(--secondary-color);
}
/* 7. Tech Icon */
.tech-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
background: linear-gradient(135deg,
rgba(0, 86, 179, 0.1),
rgba(0, 168, 255, 0.1));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
color: var(--primary-color);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.tech-item:hover .tech-icon {
transform: scale(1.1) rotate(5deg);
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
}
.tech-icon i {
position: relative;
z-index: 1;
}
/* 8. Tech Name */
.tech-name {
display: block;
font-size: 1.1rem;
font-weight: 600;
color: var(--dark-color);
margin-top: 15px;
transition: color 0.3s ease;
}
.tech-item:hover .tech-name {
color: var(--primary-color);
}
/* 9. Tech Details (Hidden by default) */
.tech-details {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
padding: 25px;
border-radius: 15px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.4s ease;
z-index: 100;
pointer-events: none;
}
.tech-item.active .tech-details {
opacity: 1;
visibility: visible;
transform: translateY(15px);
pointer-events: auto;
}
.tech-details p {
color: var(--text-light);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 20px;
}
.tech-stats {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px;
background: rgba(0, 168, 255, 0.1);
border-radius: 10px;
}
.tech-stats .stat {
font-size: 1.8rem;
font-weight: 700;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.tech-stats .stat-label {
font-size: 0.9rem;
color: var(--text-light);
font-weight: 500;
}
/* 10. Technology Stats Overview */
.tech-stats-overview {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin: 80px auto 60px;
max-width: 1200px;
}
.stat-card {
background: white;
border-radius: 20px;
padding: 35px 30px;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid rgba(0, 168, 255, 0.1);
}
.stat-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 168, 255, 0.15);
border-color: var(--secondary-color);
}
.stat-icon {
width: 70px;
height: 70px;
margin: 0 auto 20px;
background: linear-gradient(135deg,
rgba(0, 86, 179, 0.1),
rgba(0, 168, 255, 0.1));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--primary-color);
}
.stat-card h3 {
font-size: 2.5rem;
margin: 0 0 10px 0;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.stat-card p {
color: var(--text-light);
font-size: 1.05rem;
margin: 0;
}
/* 11. CTA Section */
.tech-cta {
text-align: center;
padding: 50px;
background: linear-gradient(135deg, var(--dark-color), #2c3e50);
border-radius: 30px;
position: relative;
overflow: hidden;
margin-top: 60px;
}
.tech-cta::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle,
rgba(255, 255, 255, 0.1) 1px,
transparent 1px);
background-size: 30px 30px;
animation: movePattern 20s linear infinite;
opacity: 0.3;
}
.tech-cta p {
font-size: 1.4rem;
color: white;
margin-bottom: 30px;
position: relative;
z-index: 2;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.tech-cta .btn {
padding: 18px 45px;
font-size: 1.1rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border: none;
color: white;
display: inline-flex;
align-items: center;
gap: 15px;
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.tech-cta .btn:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 168, 255, 0.4);
}
.tech-cta .btn i {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.tech-cta .btn:hover i {
transform: rotate(15deg);
}
@keyframes movePattern {
0% { transform: translate(0, 0) rotate(0deg); }
100% { transform: translate(-30px, -30px) rotate(360deg); }
}
/* 12. Technology Specific Colors */
.tech-item[data-tech="python"] .tech-icon {
color: #3776AB;
}
.tech-item[data-tech="python"]:hover .tech-icon {
background: linear-gradient(135deg, #3776AB, #FFD43B);
}
.tech-item[data-tech="java"] .tech-icon {
color: #007396;
}
.tech-item[data-tech="java"]:hover .tech-icon {
background: linear-gradient(135deg, #007396, #ED8B00);
}
.tech-item[data-tech="javascript"] .tech-icon {
color: #F7DF1E;
}
.tech-item[data-tech="javascript"]:hover .tech-icon {
background: linear-gradient(135deg, #F7DF1E, #000000);
}
.tech-item[data-tech="react"] .tech-icon {
color: #61DAFB;
}
.tech-item[data-tech="react"]:hover .tech-icon {
background: linear-gradient(135deg, #61DAFB, #282C34);
}
.tech-item[data-tech="nodejs"] .tech-icon {
color: #339933;
}
.tech-item[data-tech="nodejs"]:hover .tech-icon {
background: linear-gradient(135deg, #339933, #333333);
}
.tech-item[data-tech="mysql"] .tech-icon {
color: #4479A1;
}
.tech-item[data-tech="mysql"]:hover .tech-icon {
background: linear-gradient(135deg, #4479A1, #F29111);
}
.tech-item[data-tech="aws"] .tech-icon {
color: #FF9900;
}
.tech-item[data-tech="aws"]:hover .tech-icon {
background: linear-gradient(135deg, #FF9900, #232F3E);
}
.tech-item[data-tech="docker"] .tech-icon {
color: #2496ED;
}
.tech-item[data-tech="docker"]:hover .tech-icon {
background: linear-gradient(135deg, #2496ED, #FFFFFF);
}
.tech-item[data-tech="ai-ml"] .tech-icon {
color: #FF6B6B;
}
.tech-item[data-tech="ai-ml"]:hover .tech-icon {
background: linear-gradient(135deg, #FF6B6B, #4ECDC4);
}
.tech-item[data-tech="salesforce"] .tech-icon {
color: #00A1E0;
}
.tech-item[data-tech="salesforce"]:hover .tech-icon {
background: linear-gradient(135deg, #00A1E0, #FFFFFF);
}
.tech-item[data-tech="sap"] .tech-icon {
color: #008FD3;
}
.tech-item[data-tech="sap"]:hover .tech-icon {
background: linear-gradient(135deg, #008FD3, #999999);
}
.tech-item[data-tech="testing"] .tech-icon {
color: #27AE60;
}
.tech-item[data-tech="testing"]:hover .tech-icon {
background: linear-gradient(135deg, #27AE60, #2ECC71);
}
/* 13. Responsive Design */
@media (max-width: 1200px) {
.tech-cloud {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
padding: 0 20px;
}
.tech-stats-overview {
grid-template-columns: repeat(2, 1fr);
padding: 0 20px;
}
}
@media (max-width: 768px) {
.tech-stack {
padding: 80px 0;
}
.tech-cloud {
grid-template-columns: 1fr;
max-width: 500px;
margin: 0 auto;
gap: 25px;
padding: 0 15px;
}
.tech-category {
padding: 30px 25px;
}
.tech-items {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.tech-item {
padding: 20px 15px;
}
.tech-icon {
width: 60px;
height: 60px;
font-size: 1.8rem;
margin-bottom: 15px;
}
.tech-name {
font-size: 1rem;
}
.tech-stats-overview {
grid-template-columns: 1fr;
max-width: 500px;
gap: 20px;
margin: 60px auto 40px;
padding: 0 15px;
}
.stat-card {
padding: 30px 25px;
}
.stat-icon {
width: 60px;
height: 60px;
font-size: 1.8rem;
}
.stat-card h3 {
font-size: 2rem;
}
.tech-cta {
padding: 40px 25px;
margin-top: 40px;
}
.tech-cta p {
font-size: 1.2rem;
}
}
@media (max-width: 480px) {
.tech-items {
grid-template-columns: 1fr;
}
.tech-item {
max-width: 200px;
margin: 0 auto;
}
.tech-cta .btn {
padding: 15px 30px;
font-size: 1rem;
}
}
/* ============================================
ABOUT US SECTION - VELMINDS TECHNOLOGIES
============================================ */
/* 1. Section Container */
.about {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
position: relative;
padding: 120px 0;
overflow: hidden;
}
.about::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 6px;
background: linear-gradient(90deg,
var(--primary-color),
var(--secondary-color));
z-index: 1;
}
.about-tagline {
font-size: 1.3rem;
color: var(--text-color);
font-weight: 500;
margin-top: 15px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* 2. Company Intro */
.company-intro {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
margin: 60px 0 80px;
}
.intro-content h3 {
font-size: 2.2rem;
color: var(--dark-color);
margin-bottom: 25px;
line-height: 1.3;
background: linear-gradient(90deg,
var(--primary-color),
var(--secondary-color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.intro-description {
font-size: 1.15rem;
line-height: 1.7;
color: var(--text-color);
margin-bottom: 40px;
padding-right: 30px;
}
/* 3. Differentiators */
.differentiators {
display: grid;
gap: 25px;
margin-top: 40px;
}
.differentiator {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 25px;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid rgba(0, 168, 255, 0.1);
}
.differentiator:hover {
transform: translateX(10px);
box-shadow: 0 20px 40px rgba(0, 168, 255, 0.15);
border-color: var(--secondary-color);
}
.diff-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg,
rgba(0, 86, 179, 0.1),
rgba(0, 168, 255, 0.1));
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
color: var(--primary-color);
flex-shrink: 0;
transition: all 0.3s ease;
}
.differentiator:hover .diff-icon {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
transform: scale(1.1);
}
.diff-content h4 {
font-size: 1.3rem;
color: var(--dark-color);
margin-bottom: 10px;
font-weight: 600;
}
.diff-content p {
color: var(--text-light);
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
/* 4. Intro Image */
.intro-image {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}
.about-img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
}
.intro-image:hover .about-img {
transform: scale(1.05);
}
.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
padding: 40px 30px;
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.image-overlay:hover {
background: linear-gradient(transparent, rgba(0, 86, 179, 0.8));
}
.overlay-content {
display: flex;
align-items: center;
gap: 15px;
font-size: 1.2rem;
font-weight: 600;
cursor: pointer;
}
.overlay-content i {
font-size: 2.5rem;
color: var(--secondary-color);
transition: transform 0.3s ease;
}
.overlay-content:hover i {
transform: scale(1.2);
}
/* 5. Vision & Mission */
.vision-mission {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin: 80px 0;
}
.vision-card,
.mission-card {
background: white;
border-radius: 20px;
padding: 45px 40px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
border: 1px solid rgba(0, 168, 255, 0.1);
transition: all 0.4s ease;
}
.vision-card::before,
.mission-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
opacity: 0;
transition: opacity 0.3s ease;
}
.vision-card:hover,
.mission-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 168, 255, 0.15);
}
.vision-card:hover::before,
.mission-card:hover::before {
opacity: 1;
}
.vision-card {
background: linear-gradient(135deg, rgba(0, 86, 179, 0.03), rgba(0, 168, 255, 0.03));
}
.mission-card {
background: linear-gradient(135deg, rgba(255, 107, 53, 0.03), rgba(255, 159, 28, 0.03));
}
.vm-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg,
rgba(0, 86, 179, 0.1),
rgba(0, 168, 255, 0.1));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--primary-color);
margin-bottom: 30px;
}
.mission-card .vm-icon {
background: linear-gradient(135deg,
rgba(255, 107, 53, 0.1),
rgba(255, 159, 28, 0.1));
color: var(--accent-color);
}
.vision-card h3,
.mission-card h3 {
font-size: 1.8rem;
color: var(--dark-color);
margin-bottom: 20px;
font-weight: 700;
}
.vision-card p,
.mission-card p {
font-size: 1.1rem;
line-height: 1.7;
color: var(--text-color);
margin-bottom: 30px;
}
.vm-highlights {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.vm-highlight {
padding: 10px 20px;
background: rgba(0, 168, 255, 0.1);
color: var(--primary-color);
border-radius: 25px;
font-size: 0.95rem;
font-weight: 600;
}
.mission-card .vm-highlight {
background: rgba(255, 107, 53, 0.1);
color: var(--accent-color);
}
/* 6. Company Stats */
.company-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin: 80px 0;
position: relative;
}
.stat-item {
background: white;
border-radius: 20px;
padding: 40px 35px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
text-align: center;
position: relative;
overflow: hidden;
border: 1px solid rgba(0, 168, 255, 0.1);
transition: all 0.3s ease;
}
.stat-item:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 168, 255, 0.15);
border-color: var(--secondary-color);
}
.stat-circle {
width: 120px;
height: 120px;
margin: 0 auto 25px;
background: linear-gradient(135deg,
rgba(0, 86, 179, 0.1),
rgba(0, 168, 255, 0.1));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: all 0.3s ease;
}
.stat-item:hover .stat-circle {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
transform: scale(1.1);
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.3s ease;
}
.stat-item:hover .stat-number {
color: white;
-webkit-text-fill-color: white;
}
.stat-content h4 {
font-size: 1.4rem;
color: var(--dark-color);
margin-bottom: 10px;
font-weight: 600;
}
.stat-content p {
color: var(--text-light);
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
.stat-progress {
margin-top: 25px;
height: 6px;
background: rgba(0, 0, 0, 0.1);
border-radius: 3px;
overflow: hidden;
position: relative;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
width: 0;
border-radius: 3px;
transition: width 1.5s ease-in-out;
}
/* 7. Company Values */
.company-values {
margin: 80px 0 60px;
text-align: center;
}
.company-values h3 {
font-size: 2.2rem;
color: var(--dark-color);
margin-bottom: 60px;
position: relative;
display: inline-block;
}
.company-values h3::after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 2px;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
.value-card {
background: white;
border-radius: 20px;
padding: 45px 35px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
border: 1px solid rgba(0, 168, 255, 0.1);
position: relative;
overflow: hidden;
}
.value-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(0, 86, 179, 0.05),
rgba(0, 168, 255, 0.05));
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.value-card:hover::before {
opacity: 1;
}
.value-card:hover {
transform: translateY(-15px);
box-shadow: 0 25px 50px rgba(0, 168, 255, 0.15);
border-color: var(--secondary-color);
}
.value-icon {
width: 80px;
height: 80px;
margin: 0 auto 25px;
background: linear-gradient(135deg,
rgba(0, 86, 179, 0.1),
rgba(0, 168, 255, 0.1));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
color: var(--primary-color);
transition: all 0.3s ease;
}
.value-card:hover .value-icon {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
transform: rotate(10deg) scale(1.1);
}
.value-card h4 {
font-size: 1.4rem;
color: var(--dark-color);
margin-bottom: 15px;
font-weight: 600;
}
.value-card p {
color: var(--text-light);
font-size: 1.05rem;
line-height: 1.6;
margin: 0;
}
/* 8. CTA Section */
.about-cta {
background: linear-gradient(135deg, var(--dark-color), #2c3e50);
border-radius: 30px;
padding: 60px 50px;
text-align: center;
position: relative;
overflow: hidden;
margin-top: 80px;
}
.about-cta::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle,
rgba(255, 255, 255, 0.1) 1px,
transparent 1px);
background-size: 40px 40px;
animation: movePattern 30s linear infinite;
opacity: 0.2;
}
.cta-content {
position: relative;
z-index: 2;
margin-bottom: 40px;
}
.cta-content h3 {
font-size: 2.2rem;
color: white;
margin-bottom: 20px;
font-weight: 700;
}
.cta-content p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.9);
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.cta-buttons {
display: flex;
gap: 25px;
justify-content: center;
position: relative;
z-index: 2;
flex-wrap: wrap;
}
.about-cta .btn {
padding: 18px 40px;
font-size: 1.1rem;
display: inline-flex;
align-items: center;
gap: 15px;
border-radius: 30px;
font-weight: 600;
transition: all 0.3s ease;
}
.about-cta .btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
border: none;
}
.about-cta .btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.about-cta .btn-primary:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 168, 255, 0.4);
}
.about-cta .btn-secondary:hover {
background: white;
color: var(--dark-color);
transform: translateY(-5px);
}
.about-cta .btn i {
font-size: 1.2rem;
}
/* 9. Responsive Design */
@media (max-width: 1200px) {
.company-intro {
gap: 40px;
}
.vision-mission {
gap: 30px;
}
.company-stats {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 992px) {
.company-intro {
grid-template-columns: 1fr;
gap: 50px;
}
.intro-description {
padding-right: 0;
}
.vision-mission {
grid-template-columns: 1fr;
gap: 40px;
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
.cta-content h3 {
font-size: 1.8rem;
}
}
@media (max-width: 768px) {
.about {
padding: 80px 0;
}
.intro-content h3 {
font-size: 1.8rem;
}
.intro-description {
font-size: 1.05rem;
}
.differentiator {
padding: 20px;
}
.vision-card,
.mission-card {
padding: 35px 30px;
}
.vision-card h3,
.mission-card h3 {
font-size: 1.5rem;
}
.company-stats {
grid-template-columns: 1fr;
max-width: 500px;
margin: 60px auto;
}
.values-grid {
grid-template-columns: 1fr;
max-width: 500px;
margin: 0 auto;
gap: 30px;
}
.value-card {
padding: 35px 30px;
}
.about-cta {
padding: 50px 30px;
margin-top: 60px;
}
.cta-content h3 {
font-size: 1.6rem;
}
.cta-content p {
font-size: 1.1rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
gap: 20px;
}
.about-cta .btn {
width: 100%;
max-width: 300px;
justify-content: center;
}
}
@media (max-width: 480px) {
.differentiator {
flex-direction: column;
text-align: center;
gap: 15px;
}
.diff-icon {
margin: 0 auto;
}
.stat-item {
padding: 30px 25px;
}
.stat-circle {
width: 100px;
height: 100px;
}
.stat-number {
font-size: 2rem;
}
.about-cta {
padding: 40px 25px;
}
}
/* ============================================
CONTACT SECTION - SIMPLIFIED (NO FORM)
============================================ */
/* 1. Section Container */
.contact {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
position: relative;
padding: 100px 0;
}
.contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
z-index: 1;
}
/* 2. Contact Content */
.contact-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 3. Contact Details Layout */
.contact-details-only {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin: 60px 0;
}
/* 4. Contact Detail Card */
.contact-detail-card {
background: white;
border-radius: 20px;
padding: 40px 35px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 1px solid rgba(0, 168, 255, 0.1);
position: relative;
overflow: hidden;
}
.contact-detail-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px rgba(0, 168, 255, 0.15);
border-color: var(--secondary-color);
}
.contact-detail-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
opacity: 0;
transition: opacity 0.3s ease;
}
.contact-detail-card:hover::before {
opacity: 1;
}
/* 5. Detail Icon */
.detail-icon {
width: 70px;
height: 70px;
margin-bottom: 25px;
background: linear-gradient(135deg,
rgba(0, 86, 179, 0.1),
rgba(0, 168, 255, 0.1));
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: var(--primary-color);
transition: all 0.3s ease;
}
.contact-detail-card:hover .detail-icon {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
transform: scale(1.1);
}
/* 6. Detail Content */
.detail-content h3 {
font-size: 1.5rem;
color: var(--dark-color);
margin-bottom: 20px;
font-weight: 700;
}
.detail-content p {
color: var(--text-color);
line-height: 1.7;
margin-bottom: 25px;
font-size: 1.05rem;
}
/* 7. Phone List */
.phone-list {
margin-bottom: 25px;
}
.phone-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
padding: 12px 15px;
background: rgba(0, 168, 255, 0.05);
border-radius: 12px;
}
.phone-item i {
color: var(--primary-color);
font-size: 1.1rem;
width: 24px;
}
.phone-label {
color: var(--text-light);
font-weight: 500;
min-width: 70px;
}
.phone-number {
color: var(--dark-color);
font-weight: 600;
text-decoration: none;
transition: color 0.3s ease;
}
.phone-number:hover {
color: var(--primary-color);
}
/* 8. Email List */
.email-list {
margin-bottom: 25px;
}
.email-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
padding: 12px 15px;
background: rgba(255, 255, 255, 0.5);
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.email-item i {
color: var(--primary-color);
font-size: 1.1rem;
width: 24px;
}
.email-address {
color: var(--dark-color);
font-weight: 600;
text-decoration: none;
transition: color 0.3s ease;
}
.email-address:hover {
color: var(--primary-color);
}
/* 9. Timing and Response */
.timing, .response-time {
display: flex;
align-items: center;
gap: 10px;
color: var(--text-light);
font-size: 0.95rem;
margin-bottom: 25px;
padding: 12px 15px;
background: rgba(0, 168, 255, 0.05);
border-radius: 12px;
}
.timing i, .response-time i {
color: var(--primary-color);
}
/* 10. Action Buttons */
.detail-action {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
text-decoration: none;
border-radius: 30px;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.detail-action:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px rgba(0, 168, 255, 0.3);
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
}
/* 11. Social Contact */
.social-contact {
text-align: center;
margin-top: 80px;
padding: 50px;
background: white;
border-radius: 25px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.social-contact h3 {
font-size: 1.8rem;
color: var(--dark-color);
margin-bottom: 30px;
font-weight: 700;
}
.social-icons {
display: flex;
justify-content: center;
gap: 25px;
flex-wrap: wrap;
margin-bottom: 25px;
}
.social-icon {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 25px 30px;
border-radius: 18px;
text-decoration: none;
color: white;
font-weight: 600;
transition: all 0.3s ease;
min-width: 120px;
}
.social-icon i {
font-size: 2rem;
margin-bottom: 10px;
}
.social-icon span {
font-size: 0.95rem;
}
.social-icon:hover {
transform: translateY(-10px) scale(1.05);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
/* Social Platform Colors */
.social-icon:nth-child(1) { background: linear-gradient(135deg, #0077B5, #00A0DC); } /* LinkedIn */
.social-icon:nth-child(2) { background: linear-gradient(135deg, #1DA1F2, #1A91DA); } /* Twitter */
.social-icon:nth-child(3) { background: linear-gradient(135deg, #3B5998, #4267B2); } /* Facebook */
.social-icon:nth-child(4) { background: linear-gradient(135deg, #E4405F, #FD1D1D); } /* Instagram */
.social-note {
color: var(--text-light);
font-size: 1.05rem;
margin-top: 25px;
font-style: italic;
}
/* 12. Responsive Design */
@media (max-width: 1200px) {
.contact-details-only {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
}
@media (max-width: 768px) {
.contact {
padding: 80px 0;
}
.contact-details-only {
grid-template-columns: 1fr;
max-width: 500px;
margin: 40px auto;
gap: 30px;
}
.contact-detail-card {
padding: 35px 30px;
}
.detail-icon {
width: 60px;
height: 60px;
font-size: 1.8rem;
margin-bottom: 20px;
}
.detail-content h3 {
font-size: 1.4rem;
}
.social-contact {
padding: 40px 30px;
margin-top: 60px;
}
.social-icons {
gap: 15px;
}
.social-icon {
padding: 20px 25px;
min-width: 100px;
}
}
@media (max-width: 480px) {
.contact-detail-card {
padding: 30px 25px;
}
.detail-action {
padding: 12px 24px;
font-size: 0.95rem;
}
.social-icons {
flex-direction: column;
align-items: center;
}
.social-icon {
width: 100%;
max-width: 200px;
flex-direction: row;
justify-content: flex-start;
padding: 20px 25px;
}
}
/* Footer */
footer {
background-color: var(--dark-color);
color: white;
padding: 70px 0 20px;
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
margin-bottom: 40px;
}
.footer-col h3 {
font-size: 1.3rem;
margin-bottom: 25px;
position: relative;
}
.footer-col h3::after {
content: '';
position: absolute;
width: 50px;
height: 3px;
background: var(--secondary-color);
bottom: -10px;
left: 0;
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin-bottom: 15px;
}
.footer-col ul li a {
color: #bbb;
text-decoration: none;
transition: color 0.3s;
}
.footer-col ul li a:hover {
color: var(--secondary-color);
}
.copyright {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #bbb;
font-size: 0.9rem;
}