/* Button styles moved to style.css for reusability */

 /* Enhanced Hero Section */
 .hero-section {
     min-height: 80vh;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     position: relative;
     display: flex;
     align-items: center;
     overflow: hidden;
     padding: 80px 0;
     margin-top: 70px;
 }

 .hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background:
         radial-gradient(circle at 20% 50%, rgba(96, 165, 250, 0.3) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
         radial-gradient(circle at 40% 80%, rgba(59, 130, 246, 0.3) 0%, transparent 50%);
     animation: gradientShift 20s ease-in-out infinite;
 }

 @keyframes gradientShift {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.8;
     }
 }

 .hero-particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
 }

 .hero-particle {
     position: absolute;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     animation: float 6s ease-in-out infinite;
 }

 .hero-particle:nth-child(1) {
     width: 80px;
     height: 80px;
     top: 20%;
     left: 10%;
     animation-delay: 0s;
 }

 .hero-particle:nth-child(2) {
     width: 60px;
     height: 60px;
     top: 60%;
     left: 80%;
     animation-delay: 2s;
 }

 .hero-particle:nth-child(3) {
     width: 40px;
     height: 40px;
     top: 80%;
     left: 20%;
     animation-delay: 4s;
 }

 .hero-particle:nth-child(4) {
     width: 100px;
     height: 100px;
     top: 10%;
     left: 70%;
     animation-delay: 1s;
 }

 .hero-particle:nth-child(5) {
     width: 50px;
     height: 50px;
     top: 40%;
     left: 60%;
     animation-delay: 3s;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
     }

     50% {
         transform: translateY(-20px) rotate(180deg);
     }
 }

 .hero-content {
     position: relative;
     z-index: 10;
     color: white;
 }

 /* Hero title styles moved to style.css for consistency */

 .hero-title .highlight {
     color: var(--brand-coral);
 }

 .hero-subtitle {
     font-size: 1.5rem;
     font-weight: 300;
     opacity: 0.9;
     margin-bottom: 2rem;
     max-width: 600px;
 }

 .hero-stats {
     display: flex;
     gap: 2rem;
     margin-bottom: 3rem;
     flex-wrap: wrap;
 }

 .hero-stat {
     text-align: center;
 }

 .hero-stat-number {
     font-size: 2rem;
     font-weight: 700;
     display: block;
 }

 .hero-stat-label {
     font-size: 0.9rem;
     opacity: 0.8;
 }

 .hero-buttons {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
     align-items: center;
 }

/* Secondary button styles moved to style.css */

 .hero-visual {
     position: relative;
 }

 .hero-device {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 8px;
     padding: 2rem;
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     box-shadow: var(--box-shadow-lg);
 }

 .code-preview {
     background: #1e1e1e;
     border-radius: 8px;
     padding: 0;
     font-family: 'Consolas', 'Monaco', 'SF Mono', 'Cascadia Code', monospace;
     font-size: 14px;
     position: relative;
     overflow: hidden;
     border: 1px solid #333;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
 }

 .code-header {
     background: #2d2d30;
     padding: 10px 16px;
     border-bottom: 1px solid #333;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .code-dots {
     display: flex;
     gap: 6px;
 }

 .code-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
 }

 .code-dot.red {
     background: #ff5f57;
 }

 .code-dot.yellow {
     background: #ffbd2e;
 }

 .code-dot.green {
     background: #28ca42;
 }

 .code-filename {
     color: #cccccc;
     font-size: 13px;
     margin-left: auto;
 }

 .code-content {
     padding: 16px;
     min-height: 200px;
 }

 .code-line {
     margin-bottom: 4px;
     height: 20px;
     display: flex;
     align-items: center;
     position: relative;
 }

 .line-number {
     color: #858585;
     width: 30px;
     font-size: 12px;
     text-align: right;
     margin-right: 16px;
     user-select: none;
 }

 .line-content {
     flex: 1;
     color: #d4d4d4;
 }

 /* VS Code Syntax Highlighting Colors */
 .keyword {
     color: #569cd6;
 }

 /* const, await, return */
 .string {
     color: #ce9178;
 }

 /* strings */
 .comment {
     color: #6a9955;
 }

 /* comments */
 .function {
     color: #dcdcaa;
 }

 /* function names */
 .property {
     color: #9cdcfe;
 }

 /* object properties */
 .operator {
     color: #d4d4d4;
 }

 /* = : ; */
 .bracket {
     color: #ffd700;
 }

 /* { } [ ] */
 .variable {
     color: #4fc1ff;
 }

 /* variables */
 .number {
     color: #b5cea8;
 }

 /* numbers */

 .cursor {
     display: inline-block;
     width: 2px;
     height: 18px;
     background-color: #ffffff;
     animation: blink 1s infinite;
     margin-left: 1px;
 }

 @keyframes blink {

     0%,
     50% {
         opacity: 1;
     }

     51%,
     100% {
         opacity: 0;
     }
 }

 .typing-line {
     overflow: hidden;
     white-space: nowrap;
 }

 /* How We Work Section */
 .how-we-work-section {
     background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
     padding: 120px 0;
     position: relative;
     overflow: hidden;
 }

 .how-we-work-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="workGrid" width="50" height="50" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(37,99,235,0.05)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23workGrid)"/></svg>');
 }

 .process-container {
     position: relative;
     z-index: 2;
     max-width: 1200px;
     margin: 0 auto;
 }

 .process-timeline {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     position: relative;
     flex-wrap: wrap;
     gap: 2rem;
 }


 .process-step {
     flex: 1;
     min-width: 200px;
     max-width: 220px;
     text-align: center;
     position: relative;
     z-index: 2;
 }

 .step-icon-wrapper {
     position: relative;
     margin: 0 auto 2rem;
     width: 120px;
     height: 120px;
 }

 .step-icon {
     width: 100px;
     height: 100px;
     background: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
     border: 4px solid rgba(37, 99, 235, 0.1);
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     position: relative;
     overflow: hidden;
 }

 .step-icon::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(59, 130, 246, 0.1));
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .process-step:hover .step-icon::before {
     opacity: 1;
 }

 .process-step:hover .step-icon {
     transform: translateY(-8px) scale(1.05);
     box-shadow: 0 20px 40px rgba(37, 99, 235, 0.25);
     border-color: var(--primary-blue);
 }

 .step-icon i {
     font-size: 2.5rem;
     color: var(--primary-blue);
     transition: all 0.3s ease;
 }

 .process-step:hover .step-icon i {
     transform: scale(1.1);
     color: var(--secondary-blue);
 }

 /* Sequential Highlighting Animation */
 .process-step:nth-child(1) .step-icon {
     animation: highlightStep 15s ease-in-out infinite;
     animation-delay: 0s;
 }

 .process-step:nth-child(2) .step-icon {
     animation: highlightStep 15s ease-in-out infinite;
     animation-delay: 3s;
 }

 .process-step:nth-child(3) .step-icon {
     animation: highlightStep 15s ease-in-out infinite;
     animation-delay: 6s;
 }

 .process-step:nth-child(4) .step-icon {
     animation: highlightStep 15s ease-in-out infinite;
     animation-delay: 9s;
 }

 .process-step:nth-child(5) .step-icon {
     animation: highlightStep 15s ease-in-out infinite;
     animation-delay: 12s;
 }

 @keyframes highlightStep {

     0%,
     80%,
     100% {
         border-color: rgba(37, 99, 235, 0.1);
         box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
     }

     5%,
     25% {
         border-color: var(--primary-blue);
         box-shadow: 0 15px 40px rgba(37, 99, 235, 0.4);
         transform: scale(1.1);
     }
 }

 .step-title {
     font-family: var(--font-display);
     font-size: 1.4rem;
     font-weight: 600;
     color: var(--neutral-800);
     margin-bottom: 1rem;
     line-height: 1.3;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.75rem;
 }

 .step-number {
     background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
     color: white;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.9rem;
     font-weight: 700;
     flex-shrink: 0;
 }

 .step-description {
     color: var(--neutral-600);
     line-height: 1.6;
     font-size: 0.95rem;
 }


 /* Responsive Design */
 @media (max-width: 992px) {
     .process-timeline {
         flex-direction: column;
         align-items: center;
         gap: 3rem;
     }

     .process-timeline::before,
     .process-timeline::after {
         display: none;
     }

     .process-step {
         max-width: 300px;
     }
 }

 @media (max-width: 768px) {
     .how-we-work-section {
         padding: 80px 0;
     }

     .step-icon-wrapper {
         width: 100px;
         height: 100px;
     }

     .step-icon {
         width: 80px;
         height: 80px;
     }

     .step-icon i {
         font-size: 2rem;
     }

     .step-number {
         width: 35px;
         height: 35px;
         font-size: 1rem;
     }
 }

 /* Skills - Our Areas of Expertise Section */
 .skills-section {
     background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
     padding: 100px 0;
     position: relative;
     overflow: hidden;
 }

 .skills-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="skillsGrid" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23skillsGrid)"/></svg>');
     opacity: 0.3;
 }

 .skills-content {
     position: relative;
     z-index: 2;
 }

 .skills-title {
     text-align: center;
     margin-bottom: 60px;
 }

 .skills-title .section-label {
     color: var(--brand-coral);
     font-size: 1rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 16px;
     display: block;
 }

 .skills-title h2 {
     color: white;
     font-family: var(--font-display);
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 16px;
 }

 .skills-title p {
     color: rgba(255, 255, 255, 0.7);
     font-size: 1.1rem;
     max-width: 600px;
     margin: 0 auto;
 }

 .skills-carousel-container {
     position: relative;
     overflow-x: auto;
     overflow-y: hidden;
     margin: 0 -20px;
     padding: 30px 20px;
     cursor: grab;
     scrollbar-width: none;
 }

 .skills-carousel-container::-webkit-scrollbar {
     display: none;
 }

 .skills-carousel-container:active {
     cursor: grabbing;
 }

 .skills-carousel {
     display: flex;
     animation: slideSkills 60s linear infinite;
     gap: 40px;
     width: fit-content;
     will-change: transform;
 }

 .skills-carousel:hover {
     animation-play-state: paused;
 }

 @keyframes slideSkills {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 .skill-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     min-width: 140px;
     padding: 30px 20px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     position: relative;
     overflow: hidden;
 }

 .skill-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.1), transparent);
     transition: left 0.6s ease;
 }

 .skill-item:hover::before {
     left: 100%;
 }

 .skill-item:hover {
     transform: translateY(-8px) scale(1.05);
     background: rgba(255, 255, 255, 0.1);
     border-color: var(--brand-green);
     box-shadow: var(--shadow-green);
 }

 .skill-logo {
     width: 60px;
     height: 60px;
     margin-bottom: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
     background: rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
 }

 .skill-item:hover .skill-logo {
     transform: scale(1.1);
     background: rgba(96, 165, 250, 0.2);
 }

 .skill-logo img {
     width: 40px;
     height: 40px;
     object-fit: contain;
     filter: brightness(0) invert(1);
     transition: filter 0.3s ease;
 }

 .skill-item:hover .skill-logo img {
     filter: brightness(0) invert(1) sepia(1) hue-rotate(200deg) saturate(2);
 }

 .skill-name {
     color: white;
     font-size: 1rem;
     font-weight: 600;
     text-align: center;
     line-height: 1.3;
 }

 /* Duplicate items for seamless loop */
 .skills-carousel-clone {
     display: flex;
     gap: 40px;
     margin-left: 40px;
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .skills-section {
         padding: 80px 0;
     }

     .skills-title h2 {
         font-size: 2rem;
     }

     .skill-item {
         min-width: 120px;
         padding: 25px 15px;
     }

     .skills-carousel {
         gap: 30px;
     }

     .skills-carousel-clone {
         gap: 30px;
         margin-left: 30px;
     }
 }

 .trust-logo {
     height: 40px;
     width: auto;
     transition: var(--transition);
 }

 /* Enhanced Services Section */
 .services-section {
     padding: var(--section-padding) 0;
     background: var(--neutral-50);
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 2rem;
     margin-top: 3rem;
 }

 /* Service card styles moved to style.css for reusability */

 /* Enhanced Statistics Section - moved to style.css for reusability */

 /* Enhanced Portfolio Preview Section */
 .portfolio-preview {
     padding: var(--section-padding) 0;
     background: white;
 }

 .portfolio-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(350px, 350px));
     gap: 2.5rem;
     margin-top: 3rem;
     justify-content: center;
 }

 .portfolio-card {
     position: relative;
     border-radius: 0;
     overflow: hidden;
     cursor: pointer;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     height: 320px;
     background: var(--neutral-900);
 }

 .portfolio-card:hover {
     transform: translateY(-12px);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
 }

 .portfolio-image {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     background: var(--neutral-900);
 }

 .portfolio-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     filter: brightness(0.9) contrast(1.1);
 }

 .portfolio-card:hover .portfolio-image img {
     transform: scale(1.08);
     filter: brightness(0.6) contrast(1.1) saturate(1.1);
 }

 .portfolio-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(to top,
             rgba(0, 0, 0, 0.95) 0%,
             rgba(0, 0, 0, 0.7) 40%,
             rgba(0, 0, 0, 0.3) 70%,
             transparent 100%);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 0;
     color: white;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     opacity: 0;
 }

 .portfolio-card:hover .portfolio-overlay {
     opacity: 1;
 }

 .portfolio-content {
     padding: 2rem;
     transform: translateY(30px);
     opacity: 0;
     transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     transition-delay: 0.15s;
     background: linear-gradient(to top,
             rgba(0, 0, 0, 0.9) 0%,
             rgba(0, 0, 0, 0.6) 60%,
             transparent 100%);
     backdrop-filter: blur(2px);
 }

 .portfolio-card:hover .portfolio-content {
     transform: translateY(0);
     opacity: 1;
 }

 .portfolio-category {
     font-size: 0.8rem;
     font-weight: 600;
     color: var(--accent-blue);
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 0.5rem;
     opacity: 0;
     transform: translateY(10px);
     transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     transition-delay: 0.2s;
 }

 .portfolio-card:hover .portfolio-category {
     opacity: 1;
     transform: translateY(0);
 }

 .portfolio-title {
     font-family: var(--font-display);
     font-size: 1.5rem;
     font-weight: 700;
     color: white;
     margin-bottom: 0.75rem;
     line-height: 1.3;
     opacity: 0;
     transform: translateY(15px);
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     transition-delay: 0.15s;
 }

 .portfolio-card:hover .portfolio-title {
     opacity: 1;
     transform: translateY(0);
 }

 .portfolio-description {
     color: rgba(255, 255, 255, 0.85);
     font-size: 0.9rem;
     line-height: 1.5;
     margin-bottom: 0;
     opacity: 0;
     transform: translateY(20px);
     transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     transition-delay: 0.1s;
 }

 .portfolio-card:hover .portfolio-description {
     opacity: 1;
     transform: translateY(0);
 }


 /* Top corner badge */
 .portfolio-badge {
     position: absolute;
     top: 1rem;
     right: 1rem;
     background: var(--primary-blue);
     color: white;
     padding: 0.25rem 0.75rem;
     border-radius: 20px;
     font-size: 0.75rem;
     font-weight: 600;
     opacity: 0;
     transform: translateY(-10px);
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     transition-delay: 0.3s;
     z-index: 10;
 }

 .portfolio-card:hover .portfolio-badge {
     opacity: 1;
     transform: translateY(0);
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .portfolio-grid {
         grid-template-columns: repeat(auto-fill, minmax(280px, 280px));
         gap: 1.5rem;
         justify-content: center;
     }

     .portfolio-card {
         height: 250px;
     }

     .portfolio-overlay {
         padding: 1.5rem;
     }

     .portfolio-title {
         font-size: 1.3rem;
     }

     .portfolio-description {
         font-size: 0.9rem;
     }
 }

 @media (max-width: 576px) {
     .portfolio-grid {
         grid-template-columns: 1fr;
     }

     .portfolio-card {
         height: 220px;
     }

     .portfolio-overlay {
         padding: 1.25rem;
     }

     .portfolio-title {
         font-size: 1.2rem;
     }

     .portfolio-actions {
         flex-direction: column;
         gap: 0.5rem;
     }
 }

 /* Enhanced Testimonials Carousel */
 .testimonials-section {
     padding: var(--section-padding) 0;
     background: linear-gradient(135deg, var(--neutral-50) 0%, #ffffff 100%);
     position: relative;
     overflow: hidden;
 }

 .testimonials-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="testimonial-grid" width="60" height="60" patternUnits="userSpaceOnUse"><path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(37,99,235,0.03)" stroke-width="1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23testimonial-grid)"/></svg>');
     opacity: 0.5;
 }

 .testimonials-carousel-container {
     position: relative;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
     z-index: 2;
 }

 .testimonials-carousel {
     position: relative;
     overflow: hidden;
     border-radius: var(--border-radius-lg);
 }

 .testimonials-track {
     display: flex;
     transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     will-change: transform;
 }

 .testimonial-slide {
     min-width: 100%;
     padding: 2rem 1.5rem;
     text-align: center;
 }

 .testimonial-main-card {
     background: white;
     border-radius: var(--border-radius-lg);
     padding: 2.5rem 2rem;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02);
     position: relative;
     max-width: 650px;
     margin: 0 auto;
     border: 1px solid rgba(37, 99, 235, 0.08);
 }

 .testimonial-main-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     width: 50px;
     height: 3px;
     background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
     border-radius: 0 0 3px 3px;
     transform: translateX(-50%);
 }

 .quote-icon {
     width: 50px;
     height: 50px;
     background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
     color: white;
     font-size: 1.4rem;
     box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3);
 }

 .testimonial-quote-main {
     font-size: 1.2rem;
     line-height: 1.6;
     color: var(--neutral-700);
     font-weight: 400;
     margin-bottom: 2rem;
     font-style: italic;
     position: relative;
     max-width: 550px;
     margin-left: auto;
     margin-right: auto;
 }

 .testimonial-author-main {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 1.25rem;
     flex-wrap: wrap;
 }

 .testimonial-avatar-main {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     overflow: hidden;
     position: relative;
     box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3);
     border: 3px solid rgba(37, 99, 235, 0.1);
 }

 .testimonial-avatar-main img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     transition: var(--transition);
 }

 .testimonial-avatar-main::after {
     content: '';
     position: absolute;
     top: -3px;
     left: -3px;
     right: -3px;
     bottom: -3px;
     border: 2px solid var(--border-hover);
     border-radius: 50%;
     animation: pulse 2s infinite;
 }

 /* Fallback for initials if no image */
 .testimonial-avatar-main .avatar-initials {
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-size: 1.2rem;
     font-weight: 600;
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
         opacity: 1;
     }

     100% {
         transform: scale(1.1);
         opacity: 0;
     }
 }

 .testimonial-info-main {
     text-align: center;
 }

 .testimonial-info-main h4 {
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--neutral-800);
     margin-bottom: 0.25rem;
     font-family: var(--font-display);
 }

 .testimonial-info-main p {
     color: var(--neutral-600);
     font-size: 0.9rem;
     font-weight: 500;
     margin: 0;
 }

 .testimonial-role {
     color: var(--primary-blue);
     font-size: 0.8rem;
     font-weight: 600;
     margin-top: 0.25rem;
 }

 .testimonial-rating {
     display: flex;
     justify-content: center;
     gap: 0.25rem;
     margin-top: 1rem;
 }

 .star {
     color: var(--brand-coral);
     font-size: 1.2rem;
 }

 /* Carousel Controls */
 .carousel-controls {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 2rem;
     margin-top: 3rem;
 }

 .carousel-nav {
     display: flex;
     gap: 0.75rem;
     align-items: center;
 }

 .carousel-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: var(--neutral-300);
     cursor: pointer;
     transition: var(--transition);
     border: none;
     padding: 0;
 }

 .carousel-dot.active {
     background: var(--primary-blue);
     transform: scale(1.2);
     box-shadow: 0 0 0 3px var(--border-hover);
 }

 .carousel-dot:hover {
     background: var(--secondary-blue);
     transform: scale(1.1);
 }

 .carousel-arrow {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     background: white;
     border: 2px solid var(--neutral-200);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: var(--transition);
     color: var(--neutral-600);
     font-size: 1.2rem;
     box-shadow: var(--box-shadow);
 }

 .carousel-arrow:hover {
     background: var(--primary-blue);
     color: white;
     border-color: var(--primary-blue);
     transform: translateY(-2px);
     box-shadow: var(--box-shadow-lg);
 }

 .carousel-arrow:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }

 .carousel-arrow:disabled:hover {
     background: white;
     color: var(--neutral-600);
     border-color: var(--neutral-200);
     transform: none;
 }

 /* Auto-play indicator */
 .auto-play-indicator {
     position: absolute;
     bottom: -40px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 0.85rem;
     color: var(--neutral-500);
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .play-pause-btn {
     background: none;
     border: none;
     color: var(--primary-blue);
     cursor: pointer;
     font-size: 0.9rem;
     padding: 4px 8px;
     border-radius: 4px;
     transition: var(--transition);
 }

 .play-pause-btn:hover {
     background: var(--neutral-100);
 }

 /* Additional testimonial cards in background */
 .testimonial-bg-cards {
     position: absolute;
     top: 50%;
     left: 0;
     right: 0;
     transform: translateY(-50%);
     pointer-events: none;
     z-index: 1;
 }

 .testimonial-bg-card {
     position: absolute;
     background: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(10px);
     border-radius: var(--border-radius);
     padding: 1.5rem;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
     width: 280px;
     opacity: 0.6;
     border: 1px solid rgba(255, 255, 255, 0.8);
 }

 .testimonial-bg-card.left {
     left: -140px;
     transform: rotate(-5deg);
 }

 .testimonial-bg-card.right {
     right: -140px;
     transform: rotate(5deg);
 }

 .testimonial-bg-card p {
     font-size: 0.9rem;
     color: var(--neutral-600);
     margin-bottom: 1rem;
     line-height: 1.5;
 }

 .testimonial-bg-author {
     display: flex;
     align-items: center;
     gap: 0.75rem;
 }

 .testimonial-bg-avatar {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: var(--neutral-300);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.8rem;
     font-weight: 600;
     color: white;
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .testimonial-main-card {
         padding: 2rem 1.25rem;
         margin: 0 1rem;
         max-width: 500px;
     }

     .testimonial-quote-main {
         font-size: 1.1rem;
         margin-bottom: 1.5rem;
     }

     .testimonial-author-main {
         flex-direction: column;
         gap: 0.75rem;
     }

     .carousel-controls {
         gap: 1rem;
         margin-top: 2rem;
     }

     .testimonial-bg-card {
         display: none;
     }

     .quote-icon {
         width: 45px;
         height: 45px;
         font-size: 1.2rem;
         margin-bottom: 1.25rem;
     }

     .testimonial-avatar-main {
         width: 55px;
         height: 55px;
     }
 }

 @media (max-width: 576px) {
     .testimonial-main-card {
         padding: 1.75rem 1rem;
         max-width: 400px;
     }

     .testimonial-quote-main {
         font-size: 1rem;
         line-height: 1.5;
         margin-bottom: 1.25rem;
     }

     .carousel-arrow {
         width: 40px;
         height: 40px;
         font-size: 1rem;
     }

     .quote-icon {
         width: 40px;
         height: 40px;
         font-size: 1.1rem;
         margin-bottom: 1rem;
     }

     .testimonial-avatar-main {
         width: 50px;
         height: 50px;
     }

     .testimonial-info-main h4 {
         font-size: 1rem;
     }

     .testimonial-info-main p {
         font-size: 0.85rem;
     }

     .testimonial-role {
         font-size: 0.75rem;
     }
 }

 /* Enhanced CTA Section */
 .cta-section {
     padding: var(--section-padding) 0;
     background: linear-gradient(135deg, var(--primary-blue) 0%, var(--secondary-blue) 100%);
     color: white;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .cta-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="dots" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23dots)"/></svg>');
 }

 .cta-content {
     position: relative;
     z-index: 2;
 }

 .cta-title {
     font-family: var(--font-display);
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 700;
     margin-bottom: 1rem;
 }

 .cta-description {
     font-size: 1.25rem;
     opacity: 0.9;
     margin-bottom: 2rem;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 .cta-buttons {
     display: flex;
     gap: 1rem;
     justify-content: center;
     flex-wrap: wrap;
 }

 /* White button styles moved to style.css */

 /* Training Courses Section */
 .training-section {
     background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #e2e8f0 100%);
     padding: 120px 0;
     position: relative;
     overflow: hidden;
 }

 .training-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="trainingGrid" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1.5" fill="rgba(37,99,235,0.08)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23trainingGrid)"/></svg>');
 }

 .training-container {
     position: relative;
     z-index: 2;
 }

 .courses-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(350px, 350px));
     gap: 30px;
     margin-top: 60px;
     justify-content: center;
 }

 .course-card {
     background: white;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     border: 1px solid rgba(226, 232, 240, 0.8);
     position: relative;
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 .course-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 25px 50px rgba(37, 99, 235, 0.15);
     border-color: var(--primary-blue);
 }

 .course-image {
     position: relative;
     height: 220px;
     overflow: hidden;
     background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
 }

 .course-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: all 0.4s ease;
 }

 .course-card:hover .course-image img {
     transform: scale(1.05);
 }

 .course-image i {
     font-size: 4rem;
     opacity: 0.9;
     transition: all 0.4s ease;
 }

 .course-card:hover .course-image i {
     transform: scale(1.1);
     opacity: 1;
 }

 .course-badge {
     position: absolute;
     top: 15px;
     right: 15px;
     background: rgba(255, 255, 255, 0.95);
     color: var(--primary-blue);
     padding: 6px 12px;
     border-radius: 20px;
     font-size: 0.8rem;
     font-weight: 600;
     backdrop-filter: blur(10px);
 }

 .course-content {
     padding: 30px;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 }

 .course-title {
     font-family: var(--font-display);
     font-size: 1.4rem;
     font-weight: 700;
     color: var(--neutral-800);
     margin-bottom: 12px;
     line-height: 1.3;
 }

 .course-description {
     color: var(--neutral-600);
     line-height: 1.7;
     margin-bottom: 20px;
     flex-grow: 1;
 }

 .course-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 20px;
     padding-top: 20px;
     border-top: 1px solid var(--neutral-200);
 }

 .course-duration {
     display: flex;
     align-items: center;
     color: var(--primary-blue);
     font-weight: 600;
 }

 .course-duration i {
     margin-right: 8px;
     font-size: 0.9rem;
 }

 .course-level {
     background: var(--light-blue);
     color: var(--primary-blue);
     padding: 4px 12px;
     border-radius: 15px;
     font-size: 0.85rem;
     font-weight: 500;
 }

 .course-features {
     list-style: none;
     padding: 0;
     margin: 0 0 20px 0;
 }

 .course-features li {
     display: flex;
     align-items: center;
     margin-bottom: 8px;
     color: var(--neutral-600);
     font-size: 0.9rem;
 }

 .course-features i {
     color: var(--primary-blue);
     margin-right: 10px;
     font-size: 0.8rem;
 }

 .course-cta {
     background: var(--primary-blue);
     color: white;
     padding: 12px 24px;
     border: none;
     border-radius: 12px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     text-decoration: none;
     display: inline-block;
     text-align: center;
 }

 .course-cta:hover {
     background: white !important;
     transform: translateY(-2px);
     color: var(--primary-blue) !important;
     text-decoration: none !important;
     box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
     border: 2px solid var(--primary-blue);
 }

 .view-more-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: transparent;
     color: var(--primary-blue);
     border: 2px solid var(--primary-blue);
     padding: 14px 28px;
     border-radius: 50px;
     font-weight: 600;
     font-size: 1rem;
     text-decoration: none;
     transition: all 0.3s ease;
     min-width: 180px;
 }

 .view-more-btn:hover {
     background: var(--primary-blue) !important;
     color: white !important;
     text-decoration: none !important;
     transform: translateY(-3px);
     box-shadow: 0 12px 35px rgba(37, 99, 235, 0.4);
     border-color: var(--primary-blue);
 }

 .view-more-btn:hover i {
     color: white !important;
 }

 /* Responsive Design for Training */
 @media (max-width: 768px) {
     .training-section {
         padding: 80px 0;
     }

     .courses-grid {
         grid-template-columns: 1fr;
         gap: 25px;
         margin-top: 40px;
     }

     .course-content {
         padding: 25px;
     }

     .course-image {
         height: 180px;
     }

     .course-image i {
         font-size: 3rem;
     }
 }

 /* Blog Section */
 .blog-section {
     background: var(--neutral-50);
     padding: 120px 0;
     position: relative;
 }

 .blog-container {
     position: relative;
     z-index: 2;
 }

 .blog-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(350px, 350px));
     gap: 30px;
     margin-top: 60px;
     justify-content: center;
 }

 .blog-card {
     background: white;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
     border: 1px solid rgba(226, 232, 240, 0.8);
     position: relative;
     height: 100%;
     display: flex;
     flex-direction: column;
 }

 .blog-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 40px rgba(37, 99, 235, 0.12);
     border-color: rgba(37, 99, 235, 0.2);
 }

 .blog-image {
     position: relative;
     height: 220px;
     overflow: hidden;
     background: var(--neutral-200);
 }

 .blog-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
 }

 .blog-card:hover .blog-image img {
     transform: scale(1.05);
 }

 .blog-category {
     position: absolute;
     top: 15px;
     left: 15px;
     background: var(--primary-blue);
     color: white;
     padding: 6px 14px;
     border-radius: 20px;
     font-size: 0.8rem;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .blog-content {
     padding: 30px;
     flex-grow: 1;
     display: flex;
     flex-direction: column;
 }

 .blog-title {
     font-family: var(--font-display);
     font-size: 1.3rem;
     font-weight: 700;
     color: var(--neutral-800);
     margin-bottom: 12px;
     line-height: 1.4;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .blog-title:hover {
     color: var(--primary-blue);
 }

 .blog-excerpt {
     color: var(--neutral-600);
     line-height: 1.6;
     margin-bottom: 20px;
     flex-grow: 1;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .blog-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 20px;
     border-top: 1px solid var(--neutral-200);
     margin-top: auto;
 }

 .blog-author {
     display: flex;
     align-items: center;
     color: var(--neutral-600);
     font-size: 0.9rem;
 }

 .blog-author i {
     margin-right: 8px;
     color: var(--primary-blue);
 }

 .blog-read-time {
     display: flex;
     align-items: center;
     color: var(--neutral-500);
     font-size: 0.85rem;
 }

 .blog-read-time i {
     margin-right: 6px;
     color: var(--primary-blue);
 }

 .read-more-blog-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: transparent;
     color: var(--primary-blue);
     border: 2px solid var(--primary-blue);
     padding: 14px 28px;
     border-radius: 50px;
     font-weight: 600;
     font-size: 1rem;
     text-decoration: none;
     transition: all 0.3s ease;
     min-width: 160px;
 }

 .read-more-blog-btn:hover {
     background: var(--primary-blue) !important;
     color: white !important;
     text-decoration: none !important;
     transform: translateY(-3px);
     box-shadow: 0 12px 35px rgba(37, 99, 235, 0.4);
     border-color: var(--primary-blue);
 }

 .read-more-blog-btn:hover i {
     color: white !important;
 }

 /* Blog responsive design */
 @media (max-width: 768px) {
     .blog-section {
         padding: 80px 0;
     }

     .blog-grid {
         grid-template-columns: 1fr;
         gap: 25px;
         margin-top: 40px;
     }

     .blog-content {
         padding: 25px;
     }

     .blog-image {
         height: 200px;
     }

     .blog-meta {
         flex-direction: column;
         align-items: flex-start;
         gap: 10px;
     }
 }

 /* Modern Footer */
 /* Footer styles moved to website/footer.css */

 /* Responsive Design */
 @media (max-width: 768px) {
     :root {
         --section-padding: var(--section-padding-mobile);
     }

     .section-title h2 {
         font-size: 2rem;
     }

     .hero-stats {
         justify-content: center;
     }

     .hero-buttons {
         justify-content: center;
     }

     .services-grid {
         grid-template-columns: 1fr;
     }

     .stats-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 1.5rem;
     }

     .testimonials-grid {
         grid-template-columns: 1fr;
     }

 }

 @media (max-width: 768px) {
     .hero-section {
         min-height: 75vh;
         padding: 50px 0;
         margin-top: 60px;
     }
 }

 @media (max-width: 576px) {
     .hero-section {
         min-height: 70vh;
         padding: 40px 0;
         margin-top: 55px;
     }

     .stats-grid {
         grid-template-columns: 1fr;
     }

     .hero-stat {
         margin-bottom: 1rem;
     }
 }